Skip to content

Commit b11337f

Browse files
corwintinescorwintines
authored
Merge pull request #15499 from ethereum/10-year-anniversary
10 year anniversary
2 parents 07bb4fe + b872b94 commit b11337f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+2616
-9
lines changed

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
"use client"
2+
3+
import { Image } from "@/components/Image"
4+
import { ButtonLink } from "@/components/ui/buttons/Button"
5+
import {
6+
Swiper,
7+
SwiperContainer,
8+
SwiperNavigation,
9+
SwiperSlide,
10+
} from "@/components/ui/swiper"
11+
12+
import { cn } from "@/lib/utils/cn"
13+
14+
import { adoptionCards, adoptionStyles } from "./data"
15+
16+
const AdoptionSwiper = () => {
17+
return (
18+
<div className="flex flex-1 flex-col gap-6 md:hidden">
19+
<SwiperContainer className="mx-auto w-full max-w-[550px]">
20+
<Swiper>
21+
{adoptionCards.map((card, index) => (
22+
<SwiperSlide key={card.title}>
23+
<div
24+
className={cn("h-full rounded-2xl p-8", adoptionStyles[index])}
25+
>
26+
<Image
27+
src={card.image}
28+
alt={card.title}
29+
className="mx-auto mb-4 h-36 object-contain"
30+
/>
31+
<h3 className="mb-4 text-2xl font-bold">{card.title}</h3>
32+
{card.description}
33+
<ButtonLink href={card.href} hideArrow variant="outline">
34+
{card.linkText}
35+
</ButtonLink>
36+
</div>
37+
</SwiperSlide>
38+
))}
39+
<SwiperNavigation />
40+
</Swiper>
41+
</SwiperContainer>
42+
</div>
43+
)
44+
}
45+
46+
export default AdoptionSwiper

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
"use client"
2+
3+
import { useEffect, useState } from "react"
4+
5+
import { cn } from "@/lib/utils/cn"
6+
7+
interface CountDownProps {
8+
className?: string
9+
}
10+
11+
const CountDown = ({ className }: CountDownProps) => {
12+
const [timeLeft, setTimeLeft] = useState({
13+
days: 0,
14+
hours: 0,
15+
minutes: 0,
16+
seconds: 0,
17+
})
18+
const [isExpired, setIsExpired] = useState(false)
19+
20+
useEffect(() => {
21+
const targetDate = new Date("2025-07-30T15:44:00Z")
22+
23+
const calculateTimeLeft = () => {
24+
const now = new Date()
25+
const difference = targetDate.getTime() - now.getTime()
26+
27+
if (difference > 0) {
28+
setIsExpired(false)
29+
setTimeLeft({
30+
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
31+
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
32+
minutes: Math.floor((difference / 1000 / 60) % 60),
33+
seconds: Math.floor((difference / 1000) % 60),
34+
})
35+
} else {
36+
setIsExpired(true)
37+
}
38+
}
39+
40+
calculateTimeLeft()
41+
42+
// Update every second
43+
const timer = setInterval(calculateTimeLeft, 1000)
44+
45+
return () => clearInterval(timer)
46+
}, [])
47+
48+
if (isExpired) {
49+
return (
50+
<div className="text-center text-2xl font-bold">
51+
Ethereum is 10 years old! 🚀
52+
</div>
53+
)
54+
}
55+
56+
return (
57+
<div className="flex items-center justify-center gap-10">
58+
<div
59+
className={cn(
60+
"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]",
61+
className
62+
)}
63+
>
64+
<div className="font-mono text-4xl font-bold text-accent-a">
65+
{timeLeft.days}
66+
</div>
67+
<div className="font-mono text-xs text-accent-a">days</div>
68+
</div>
69+
<div
70+
className={cn(
71+
"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]",
72+
className
73+
)}
74+
>
75+
<div className="font-mono text-4xl font-bold text-accent-a">
76+
{timeLeft.hours}
77+
</div>
78+
<div className="font-mono text-xs text-accent-a">hours</div>
79+
</div>
80+
<div
81+
className={cn(
82+
"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]",
83+
className
84+
)}
85+
>
86+
<div className="font-mono text-4xl font-bold text-accent-a">
87+
{timeLeft.minutes}
88+
</div>
89+
<div className="font-mono text-xs text-accent-a">minutes</div>
90+
</div>
91+
<div
92+
className={cn(
93+
"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]",
94+
className
95+
)}
96+
>
97+
<div className="font-mono text-4xl font-bold text-accent-a">
98+
{timeLeft.seconds}
99+
</div>
100+
<div className="font-mono text-xs text-accent-a">seconds</div>
101+
</div>
102+
</div>
103+
)
104+
}
105+
106+
export default CountDown

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"use client"
2+
3+
import { Image } from "@/components/Image"
4+
import {
5+
Swiper,
6+
SwiperContainer,
7+
SwiperNavigation,
8+
SwiperSlide,
9+
} from "@/components/ui/swiper"
10+
11+
import { innovationCards } from "./data"
12+
13+
export default function InnovationSwiper() {
14+
return (
15+
<div className="w-[100%]">
16+
<SwiperContainer className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
17+
<Swiper className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
18+
{innovationCards.map((card, index) => (
19+
<SwiperSlide
20+
key={index}
21+
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]"
22+
>
23+
<Image
24+
src={card.image}
25+
alt={card.title}
26+
className="mx-auto my-4 h-auto max-w-full"
27+
/>
28+
<div>
29+
<h3 className="mb-4">{card.title}</h3>
30+
<p className="text-body-secondary mb-4">{card.date}</p>
31+
</div>
32+
{card.description.map((description, index) => (
33+
<p key={index} className="mb-4">
34+
{description}
35+
</p>
36+
))}
37+
</SwiperSlide>
38+
))}
39+
<SwiperNavigation />
40+
</Swiper>
41+
</SwiperContainer>
42+
</div>
43+
)
44+
}

0 commit comments

Comments
 (0)