107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
"use client";
|
||
import { useEffect, useState } from "react";
|
||
import { motion, AnimatePresence } from "motion/react";
|
||
import { H3, P } from "@/components/Texts";
|
||
|
||
|
||
const rotating = [
|
||
"Communities",
|
||
"Integrators",
|
||
"Builders",
|
||
"Enterprises",
|
||
"Institutions",
|
||
"Creators",
|
||
"Researchers",
|
||
"Individuals",
|
||
];
|
||
|
||
// ✅ Use local image files (1–8)
|
||
const gallery = [
|
||
"/images/audiences/1.jpg",
|
||
"/images/audiences/2.jpg",
|
||
"/images/audiences/3.jpg",
|
||
"/images/audiences/4.jpg",
|
||
"/images/audiences/5.jpg",
|
||
"/images/audiences/6.jpg",
|
||
"/images/audiences/7.jpg",
|
||
"/images/audiences/8.jpg",
|
||
];
|
||
|
||
export function HomeAudience() {
|
||
const [index, setIndex] = useState(0);
|
||
|
||
useEffect(() => {
|
||
const timer = setInterval(() => {
|
||
setIndex((prev) => (prev + 1) % rotating.length);
|
||
}, 3200);
|
||
return () => clearInterval(timer);
|
||
}, []);
|
||
|
||
return (
|
||
<div>
|
||
{/* ✅ Top horizontal line + container border */}
|
||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||
|
||
{/* ✅ Main content */}
|
||
<div className="mx-auto max-w-7xl bg-white border border-t-0 border-b-0 border-gray-100">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2">
|
||
|
||
{/* ✅ LEFT — Text & rotating headline */}
|
||
<div className="px-6 py-14 sm:px-10 lg:px-14 flex flex-col justify-center">
|
||
<H3 className="text-black">
|
||
Sovereign Infrastructure for{" "}
|
||
<span className="inline-block text-black font-semibold relative ml-2 h-[1.2em]">
|
||
<AnimatePresence mode="wait">
|
||
<motion.span
|
||
key={rotating[index]}
|
||
initial={{ opacity: 0, y: 8 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -8 }}
|
||
transition={{ duration: 0.35 }}
|
||
className="absolute left-0 top-0"
|
||
>
|
||
{rotating[index]}
|
||
</motion.span>
|
||
</AnimatePresence>
|
||
|
||
{/* Invisible placeholder to avoid layout jump */}
|
||
<span className="opacity-0">{rotating[index]}</span>
|
||
</span>
|
||
</H3>
|
||
|
||
<P className="text-gray-800 mt-4">
|
||
The internet wasn’t built for sovereignty. Today, data, AI models, and identity
|
||
live on centralized clouds — owned by a few. Mycelium brings infrastructure back
|
||
to people, communities, and nations: private, resilient, and cryptographically yours.
|
||
</P>
|
||
|
||
|
||
</div>
|
||
|
||
{/* ✅ RIGHT — Landscape image gallery synced with title */}
|
||
<div className="relative h-64 sm:h-96 lg:h-full w-full overflow-hidden">
|
||
<AnimatePresence mode="wait">
|
||
<motion.img
|
||
key={gallery[index]}
|
||
src={gallery[index]}
|
||
alt=""
|
||
initial={{ opacity: 0, scale: 1.02 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 1.02 }}
|
||
transition={{ duration: 0.6 }}
|
||
className="absolute inset-0 w-full h-full object-cover"
|
||
/>
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{/* ✅ Bottom border */}
|
||
<div className="w-full border-b border-gray-100" />
|
||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
|
||
</div>
|
||
);
|
||
}
|