10 year anniversary

app/[locale]/10years/_components/AdoptionSwiper.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { Image } from "@/components/Image"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import {
+  Swiper,
+  SwiperContainer,
+  SwiperNavigation,
+  SwiperSlide,
+} from "@/components/ui/swiper"
+
+import { cn } from "@/lib/utils/cn"
+
+import { adoptionCards, adoptionStyles } from "./data"
+
+const AdoptionSwiper = () => {
+  return (
+    <div className="flex flex-1 flex-col gap-6 md:hidden">
+      <SwiperContainer className="mx-auto w-full max-w-[550px]">
+        <Swiper>
+          {adoptionCards.map((card, index) => (
+            <SwiperSlide key={card.title}>
+              <div
+                className={cn("h-full rounded-2xl p-8", adoptionStyles[index])}
+              >
+                <Image
+                  src={card.image}
+                  alt={card.title}
+                  className="mx-auto mb-4 h-36 object-contain"
+                />
+                <h3 className="mb-4 text-2xl font-bold">{card.title}</h3>
+                {card.description}
+                <ButtonLink href={card.href} hideArrow variant="outline">
+                  {card.linkText}
+                </ButtonLink>
+              </div>
+            </SwiperSlide>
+          ))}
+          <SwiperNavigation />
+        </Swiper>
+      </SwiperContainer>
+    </div>
+  )
+}
+
+export default AdoptionSwiper

app/[locale]/10years/_components/CountDown.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { cn } from "@/lib/utils/cn"
+
+interface CountDownProps {
+  className?: string
+}
+
+const CountDown = ({ className }: CountDownProps) => {
+  const [timeLeft, setTimeLeft] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  })
+  const [isExpired, setIsExpired] = useState(false)
+
+  useEffect(() => {
+    const targetDate = new Date("2025-07-30T15:44:00Z")
+
+    const calculateTimeLeft = () => {
+      const now = new Date()
+      const difference = targetDate.getTime() - now.getTime()
+
+      if (difference > 0) {
+        setIsExpired(false)
+        setTimeLeft({
+          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+          minutes: Math.floor((difference / 1000 / 60) % 60),
+          seconds: Math.floor((difference / 1000) % 60),
+        })
+      } else {
+        setIsExpired(true)
+      }
+    }
+
+    calculateTimeLeft()
+
+    // Update every second
+    const timer = setInterval(calculateTimeLeft, 1000)
+
+    return () => clearInterval(timer)
+  }, [])
+
+  if (isExpired) {
+    return (
+      <div className="text-center text-2xl font-bold">
+        Ethereum is 10 years old! 🚀
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center gap-10">
+      <div
+        className={cn(
+          "flex h-20 w-20 flex-col items-center justify-center rounded-2xl border text-center [box-shadow:-2.372px_2.372px_14.234px_1.186px_rgba(52,43,64,0.02),-18.979px_18.979px_14.234px_-3.559px_rgba(52,43,64,0.02),-37.958px_37.958px_28.469px_-7.117px_rgba(52,43,64,0.02),-47.448px_47.448px_47.448px_-14.234px_rgba(88,55,131,0.04)] dark:bg-[#171717]",
+          className
+        )}
+      >
+        <div className="font-mono text-4xl font-bold text-accent-a">
+          {timeLeft.days}
+        </div>
+        <div className="font-mono text-xs text-accent-a">days</div>
+      </div>
+      <div
+        className={cn(
+          "flex h-20 w-20 flex-col items-center justify-center rounded-2xl border text-center [box-shadow:-2.372px_2.372px_14.234px_1.186px_rgba(52,43,64,0.02),-18.979px_18.979px_14.234px_-3.559px_rgba(52,43,64,0.02),-37.958px_37.958px_28.469px_-7.117px_rgba(52,43,64,0.02),-47.448px_47.448px_47.448px_-14.234px_rgba(88,55,131,0.04)] dark:bg-[#171717]",
+          className
+        )}
+      >
+        <div className="font-mono text-4xl font-bold text-accent-a">
+          {timeLeft.hours}
+        </div>
+        <div className="font-mono text-xs text-accent-a">hours</div>
+      </div>
+      <div
+        className={cn(
+          "flex h-20 w-20 flex-col items-center justify-center rounded-2xl border text-center [box-shadow:-2.372px_2.372px_14.234px_1.186px_rgba(52,43,64,0.02),-18.979px_18.979px_14.234px_-3.559px_rgba(52,43,64,0.02),-37.958px_37.958px_28.469px_-7.117px_rgba(52,43,64,0.02),-47.448px_47.448px_47.448px_-14.234px_rgba(88,55,131,0.04)] dark:bg-[#171717]",
+          className
+        )}
+      >
+        <div className="font-mono text-4xl font-bold text-accent-a">
+          {timeLeft.minutes}
+        </div>
+        <div className="font-mono text-xs text-accent-a">minutes</div>
+      </div>
+      <div
+        className={cn(
+          "hidden h-20 w-20 flex-col items-center justify-center rounded-2xl border text-center [box-shadow:-2.372px_2.372px_14.234px_1.186px_rgba(52,43,64,0.02),-18.979px_18.979px_14.234px_-3.559px_rgba(52,43,64,0.02),-37.958px_37.958px_28.469px_-7.117px_rgba(52,43,64,0.02),-47.448px_47.448px_47.448px_-14.234px_rgba(88,55,131,0.04)] lg:flex dark:bg-[#171717]",
+          className
+        )}
+      >
+        <div className="font-mono text-4xl font-bold text-accent-a">
+          {timeLeft.seconds}
+        </div>
+        <div className="font-mono text-xs text-accent-a">seconds</div>
+      </div>
+    </div>
+  )
+}
+
+export default CountDown

app/[locale]/10years/_components/InnovationSwiper.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Image } from "@/components/Image"
+import {
+  Swiper,
+  SwiperContainer,
+  SwiperNavigation,
+  SwiperSlide,
+} from "@/components/ui/swiper"
+
+import { innovationCards } from "./data"
+
+export default function InnovationSwiper() {
+  return (
+    <div className="w-[100%]">
+      <SwiperContainer className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
+        <Swiper className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
+          {innovationCards.map((card, index) => (
+            <SwiperSlide
+              key={index}
+              className="mx-auto flex w-full max-w-[550px] flex-col gap-4 rounded-lg bg-card-gradient-secondary p-4 sm:p-6 xl:max-w-[700px]"
+            >
+              <Image
+                src={card.image}
+                alt={card.title}
+                className="mx-auto my-4 h-auto max-w-full"
+              />
+              <div>
+                <h3 className="mb-4">{card.title}</h3>
+                <p className="text-body-secondary mb-4">{card.date}</p>
+              </div>
+              {card.description.map((description, index) => (
+                <p key={index} className="mb-4">
+                  {description}
+                </p>
+              ))}
+            </SwiperSlide>
+          ))}
+          <SwiperNavigation />
+        </Swiper>
+      </SwiperContainer>
+    </div>
+  )
+}