Updated logos

src/app/layout.js

@@ -10,7 +10,10 @@ import LoadingScreen from "@/components/Loading/LoadingScreen";
 import { BannerProvider } from "@/context/BannerContext";
 import PlausibleProvider from "next-plausible";
 
-export const metadata = meta();
+export const metadata = {
+	...meta(),
+	metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || "https://celestia.org"),
+};
 
 export default function RootLayout({ children }) {
 	return (

src/components/Ecosystem/EcosytemExplorer/EcosystemExplorer.scss

@@ -1,158 +1,105 @@
 .ecosystem-explorer {
-  // Define foreground arrays of x and y positions
-  $foreground-positions-x: (
-    -300%,
-    -620%,
-    -405%,
-    -500%,
-    -200%,
-    40%,
-    -40%,
-    250%,
-    270%,
-    450%,
-    330%,
-    550%
-  );
-  $foreground-positions-y: (
-    -350%,
-    20%,
-    70%,
-    280%,
-    355%,
-    180%,
-    -40%,
-    80%,
-    300%,
-    180%,
-    -130%,
-    -100%
-  );
-  $foreground-positions-length: length($foreground-positions-x);
-
-  // Define background arrays of x and y positions
-  $background-positions-x: (
-    -450%,
-    -500%,
-    -260%,
-    -270%,
-    -180%,
-    70%,
-    150%,
-    400%,
-    580%,
-    540%
-  );
-  $background-positions-y: (
-    -100%,
-    -300%,
-    130%,
-    -220%,
-    -370%,
-    -280%,
-    -80%,
-    -480%,
-    -380%,
-    0%
-  );
-  $background-positions-length: length($background-positions-x);
-
-  .foreground-icons {
-    @for $i from 1 through $foreground-positions-length {
-      .item-#{$i} {
-        // Fetch the corresponding x and y positions
-        $x: nth($foreground-positions-x, $i);
-        $y: nth($foreground-positions-y, $i);
-
-        // Generate a random scale factor between 0.9 and 1.1
-        $scale-factor: random(3) + 8; // Generates a number between 9 and 11
-        $scale: $scale-factor / 10;
-
-        // Generate a random duration
-        $duration: random(10) + 5;
-
-        // Apply the x and y positions
-        transform: translateX($x) translateY($y) scale($scale);
-
-        .vertical-anim {
-          animation: raiseLower #{$duration}s ease-in-out infinite;
-        }
-
-        img {
-          transition: transform 0.45s ease-in-out;
-        }
-
-        &:hover {
-          img {
-            transform-origin: center center;
-            transition: transform 0.25s ease-in-out;
-            transform: scale(1.1);
-          }
-        }
-      }
-    }
-
-    @media (max-width: 768px) {
-      .item-4,
-      .item-5,
-      .item-9,
-      .item-10 {
-        display: none;
-      }
-    }
-  }
-
-  .background-icons {
-    @for $i from 1 through $background-positions-length {
-      .item-#{$i} {
-        // Fetch the corresponding x and y positions
-        $x: nth($background-positions-x, $i);
-        $y: nth($background-positions-y, $i);
-
-        // Generate a random scale factor between 0.9 and 1.1
-        $scale-factor: random(3) + 8; // Generates a number between 9 and 11
-        $scale: $scale-factor / 10;
-
-        // Generate a random duration factor between 6 and 16
-        $duration: random(15) + 5; // Generates a number between 6 and 16
-
-        // Generat a rando blur factor between 1 and 4
-        $blur-factor: random(3) + 1; // Generates a number between 1 and 4
-
-        // Apply the x and y positions
-        transform: translateX($x) translateY($y) scale($scale);
-        filter: blur(#{$blur-factor}px);
-
-        .vertical-anim {
-          animation: raiseLower #{$duration}s ease-in-out infinite;
-        }
-
-        // img {
-        //   transition: transform 0.45s ease-in-out;
-        // }
-
-        // &:hover {
-        //   img {
-        //     transform-origin: center center;
-        //     transition: transform 0.25s ease-in-out;
-        //     transform: scale(1.2);
-        //   }
-        // }
-      }
-    }
-  }
+	// Scaled back distribution by ~1/3
+	$foreground-positions-x: (-420%, -500%, 390%, 320%, -420%, 320%, -320%, 220%, -200%, 100%);
+	$foreground-positions-y: (-420%, -207%, -207%, -420%, 107%, 107%, 280%, 280%, 0%, 0%);
+	$foreground-positions-length: length($foreground-positions-x);
+
+	// Updated background positions for 6 items
+	$background-positions-x: (-300%, -150%, 150%, 300%, 0%, 0%);
+	$background-positions-y: (-100%, -200%, -200%, -100%, 200%, -33%);
+	$background-positions-length: length($background-positions-x);
+
+	.foreground-icons {
+		@for $i from 1 through $foreground-positions-length {
+			.item-#{$i} {
+				// Fetch the corresponding x and y positions
+				$x: nth($foreground-positions-x, $i);
+				$y: nth($foreground-positions-y, $i);
+
+				// Slightly larger scale since we brought them closer
+				$scale-factor: random(1) + 6; // 6-7 range
+				$scale: $scale-factor / 10;
+
+				// Generate a random duration
+				$duration: random(4) + 6; // 6-10s duration range
+
+				// Apply the x and y positions
+				transform: translateX($x) translateY($y) scale($scale);
+
+				.vertical-anim {
+					animation: raiseLower #{$duration}s ease-in-out infinite;
+				}
+
+				img {
+					transition: transform 0.45s ease-in-out;
+				}
+
+				&:hover {
+					img {
+						transform-origin: center center;
+						transition: transform 0.25s ease-in-out;
+						transform: scale(1.1);
+					}
+				}
+			}
+		}
+
+		// Updated mobile hiding for new layout
+		@media (max-width: 768px) {
+			.item-7,
+			.item-8,
+			.item-9,
+			.item-10 {
+				display: none;
+			}
+		}
+	}
+
+	.background-icons {
+		@for $i from 1 through $background-positions-length {
+			.item-#{$i} {
+				// Fetch the corresponding x and y positions
+				$x: nth($background-positions-x, $i);
+				$y: nth($background-positions-y, $i);
+
+				// Fixed smaller scale for background
+				$scale: 0.7;
+
+				// Generat a rando blur factor between 1 and 4
+				$blur-factor: 1;
+
+				// Apply the x and y positions
+				transform: translateX($x) translateY($y) scale($scale);
+				filter: blur(#{$blur-factor}px);
+
+				.vertical-anim {
+					animation: raiseLower 8s ease-in-out infinite;
+				}
+
+				// img {
+				//   transition: transform 0.45s ease-in-out;
+				// }
+
+				// &:hover {
+				//   img {
+				//     transform-origin: center center;
+				//     transition: transform 0.25s ease-in-out;
+				//     transform: scale(1.2);
+				//   }
+				// }
+			}
+		}
+	}
 }
 
 @keyframes raiseLower {
-  0% {
-    transform: translateY(-10);
-  }
-  50% {
-    transform: translateY(
-      10px
-    ); // Adjust this value to control the height of the movement
-  }
-  100% {
-    transform: translateY(-10);
-  }
+	0% {
+		transform: translateY(-4px);
+	}
+	50% {
+		transform: translateY(4px);
+	}
+	100% {
+		transform: translateY(-4px);
+	}
 }