feat: add UI components for card stack, world map and evervault card with theme support
This commit is contained in:
69
src/pages/home/HomeMap.tsx
Normal file
69
src/pages/home/HomeMap.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
import WorldMap from "@/components/ui/world-map";
|
||||
import { motion } from "motion/react";
|
||||
import { H2, P } from "@/components/Texts";
|
||||
|
||||
export function HomeMapSection() {
|
||||
return (
|
||||
<div className=" py-24 dark:bg-black bg-white w-full">
|
||||
<div className="max-w-7xl mx-auto text-center">
|
||||
<H2 className="font-medium text-xl md:text-4xl dark:text-white text-gray-800">
|
||||
Mycelium Network is{" "}
|
||||
<span className="text-black font-neuton text-bold italic">
|
||||
{"Live.".split("").map((word, idx) => (
|
||||
<motion.span
|
||||
key={idx}
|
||||
className="inline-block"
|
||||
initial={{ x: -10, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.04 }}
|
||||
>
|
||||
{word}
|
||||
</motion.span>
|
||||
))}
|
||||
</span>
|
||||
</H2>
|
||||
<P className="text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-4">
|
||||
Mycelium Network's advancement technology enables anyone to deploy
|
||||
their own Internet infrastructure, anywhere.
|
||||
</P>
|
||||
</div>
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<WorldMap
|
||||
dots={[
|
||||
{
|
||||
start: {
|
||||
lat: 64.2008,
|
||||
lng: -149.4937,
|
||||
}, // Alaska (Fairbanks)
|
||||
end: {
|
||||
lat: 34.0522,
|
||||
lng: -118.2437,
|
||||
}, // Los Angeles
|
||||
},
|
||||
{
|
||||
start: { lat: 64.2008, lng: -149.4937 }, // Alaska (Fairbanks)
|
||||
end: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
|
||||
},
|
||||
{
|
||||
start: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
|
||||
end: { lat: 38.7223, lng: -9.1393 }, // Lisbon
|
||||
},
|
||||
{
|
||||
start: { lat: 51.5074, lng: -0.1278 }, // London
|
||||
end: { lat: 28.6139, lng: 77.209 }, // New Delhi
|
||||
},
|
||||
{
|
||||
start: { lat: 28.6139, lng: 77.209 }, // New Delhi
|
||||
end: { lat: 43.1332, lng: 131.9113 }, // Vladivostok
|
||||
},
|
||||
{
|
||||
start: { lat: 28.6139, lng: 77.209 }, // New Delhi
|
||||
end: { lat: -1.2921, lng: 36.8219 }, // Nairobi
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user