Update src/app/page.tsx
This commit is contained in:
461
src/app/page.tsx
461
src/app/page.tsx
@@ -28,337 +28,152 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Arsip",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Data",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Kontak",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="XENO-PORTAL"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Arsip", id: "features" },
|
||||
{ name: "Data", id: "metrics" },
|
||||
{ name: "Kontak", id: "contact" }
|
||||
]}
|
||||
brandName="XENO-PORTAL"
|
||||
button={{ text: "Masuk" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="KITA TIDAK SENDIRI"
|
||||
description="Arsip rahasia menunjukkan kehadiran entitas luar angkasa yang telah mengamati peradaban kita selama berabad-abad. Kebenaran tersembunyi di balik kabut kosmik."
|
||||
tag="LEVEL 5 CLEARANCE REQUIRED"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DpfKomqzVrFMQonGjtbxuHfYug/uploaded-1778983900794-bdqrrcrd.jpg?_wi=1",
|
||||
imageAlt: "Alien Cinematic Reveal",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-green-background-from-brilliant-mosaic-pattern-generative-ai_169016-30202.jpg?_wi=1",
|
||||
imageAlt: "Alien Cinematic Reveal",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outer-space-creature-portrait-with-fantasy-features_23-2151451395.jpg",
|
||||
imageAlt: "Outer space creature portrait",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-grunge-style-alien-figure_1048-6620.jpg",
|
||||
imageAlt: "Grunge style alien figure",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648262.jpg",
|
||||
imageAlt: "Fantastic alien portrait",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Rating Intelijen: Sangat Rahasia"
|
||||
tagIcon={Lock}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="KITA TIDAK SENDIRI"
|
||||
description="Arsip rahasia menunjukkan kehadiran entitas luar angkasa yang telah mengamati peradaban kita selama berabad-abad. Kebenaran tersembunyi di balik kabut kosmik."
|
||||
tag="LEVEL 5 CLEARANCE REQUIRED"
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DpfKomqzVrFMQonGjtbxuHfYug/uploaded-1778983900794-bdqrrcrd.jpg", imageAlt: "Alien Cinematic Reveal" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-green-background-from-brilliant-mosaic-pattern-generative-ai_169016-30202.jpg", imageAlt: "Alien Cinematic Reveal" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Rating Intelijen: Sangat Rahasia"
|
||||
tagIcon={Lock}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Database Spesies",
|
||||
description: "Katalogisasi biometrik makhluk non-manusia.",
|
||||
bentoComponent: "media-stack",
|
||||
items: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-green-background-from-brilliant-mosaic-pattern-generative-ai_169016-30202.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/illustration-futuristic-computing-diagram_53876-6363.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/futuristic-hologram-infographic-element-collection_23-2148192784.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DpfKomqzVrFMQonGjtbxuHfYug/uploaded-1778983900794-bdqrrcrd.jpg?_wi=2",
|
||||
imageAlt: "alien technology database UI",
|
||||
},
|
||||
{
|
||||
title: "Pelacakan UFO",
|
||||
description: "Data real-time penampakan anomali di seluruh dunia.",
|
||||
bentoComponent: "map",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599356.jpg",
|
||||
imageAlt: "alien technology database UI",
|
||||
},
|
||||
{
|
||||
title: "Transmisi",
|
||||
description: "Dekripsi sinyal frekuensi dari galaksi jauh.",
|
||||
bentoComponent: "media-stack",
|
||||
items: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-multicolored-hued-rippled-soap-bubble-black-background_23-2148235910.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outer-space-creature-portrait-with-fantasy-features_23-2151451410.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outer-space-creature-portrait-with-fantasy-features_23-2151451398.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-warrior-woman-portrait_23-2150712480.jpg?_wi=1",
|
||||
imageAlt: "alien technology database UI",
|
||||
},
|
||||
]}
|
||||
title="ARSIP & TEKNOLOGI"
|
||||
description="Menjelajahi data terlarang tentang entitas yang tidak dikenal dan teknologi transdimensi mereka."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{
|
||||
title: "Database Spesies", description: "Katalogisasi biometrik makhluk non-manusia.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-green-background-from-brilliant-mosaic-pattern-generative-ai_169016-30202.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/illustration-futuristic-computing-diagram_53876-6363.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/futuristic-hologram-infographic-element-collection_23-2148192784.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Pelacakan UFO", description: "Data real-time penampakan anomali di seluruh dunia.", bentoComponent: "map"
|
||||
},
|
||||
{
|
||||
title: "Transmisi", description: "Dekripsi sinyal frekuensi dari galaksi jauh.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-multicolored-hued-rippled-soap-bubble-black-background_23-2148235910.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/outer-space-creature-portrait-with-fantasy-features_23-2151451410.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/outer-space-creature-portrait-with-fantasy-features_23-2151451398.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="ARSIP & TEKNOLOGI"
|
||||
description="Menjelajahi data terlarang tentang entitas yang tidak dikenal dan teknologi transdimensi mereka."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1,402",
|
||||
title: "Penampakan UFO",
|
||||
description: "Tercatat sejak 1947",
|
||||
icon: Compass,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99.8%",
|
||||
title: "Sinyal Terenkripsi",
|
||||
description: "Tingkat kerahasiaan tinggi",
|
||||
icon: Lock,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "12",
|
||||
title: "Spesies Ditemukan",
|
||||
description: "Analisis biometrik total",
|
||||
icon: Database,
|
||||
},
|
||||
]}
|
||||
title="STATISTIK ANOMALI"
|
||||
description="Data kuantitatif dari observatorium rahasia kita."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "1,402", title: "Penampakan UFO", description: "Tercatat sejak 1947", icon: Compass },
|
||||
{ id: "m2", value: "99.8%", title: "Sinyal Terenkripsi", description: "Tingkat kerahasiaan tinggi", icon: Lock },
|
||||
{ id: "m3", value: "12", title: "Spesies Ditemukan", description: "Analisis biometrik total", icon: Database }
|
||||
]}
|
||||
title="STATISTIK ANOMALI"
|
||||
description="Data kuantitatif dari observatorium rahasia kita."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "public",
|
||||
badge: "LOCKED",
|
||||
price: "Free",
|
||||
subtitle: "Akses informasi publik dasar.",
|
||||
features: [
|
||||
"Data dasar",
|
||||
"Forum diskusi",
|
||||
"Peta statis",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Masuk",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "SECRET",
|
||||
price: "IDR 99rb",
|
||||
subtitle: "Akses penuh intelijen rahasia.",
|
||||
features: [
|
||||
"Data real-time",
|
||||
"Dekripsi sinyal",
|
||||
"Arsip lengkap",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Upgrade",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="LEVEL AKSES DATA"
|
||||
description="Pilih tingkatan otoritas untuk mengakses data intelijen."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "public", badge: "LOCKED", price: "Free", subtitle: "Akses informasi publik dasar.", features: ["Data dasar", "Forum diskusi", "Peta statis"], buttons: [{ text: "Masuk" }] },
|
||||
{ id: "pro", badge: "SECRET", price: "IDR 99rb", subtitle: "Akses penuh intelijen rahasia.", features: ["Data real-time", "Dekripsi sinyal", "Arsip lengkap"], buttons: [{ text: "Upgrade" }] }
|
||||
]}
|
||||
title="LEVEL AKSES DATA"
|
||||
description="Pilih tingkatan otoritas untuk mengakses data intelijen."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Agent K",
|
||||
role: "Field Analyst",
|
||||
company: "Sektor 51",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-warrior-woman-portrait_23-2150712480.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Dr. Vance",
|
||||
role: "Exobiologist",
|
||||
company: "Lab Gamma",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bermuda-triangle-mystery-event_23-2151625870.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Agent S",
|
||||
role: "Intelligence",
|
||||
company: "Sektor 7",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-view-high-tech-earth-planet_23-2151100449.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Tech R",
|
||||
role: "Signal Engineer",
|
||||
company: "HQ",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-led-scoreboard-displays-sports-competitions_187299-47219.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Pilot M",
|
||||
role: "Air Patrol",
|
||||
company: "Unit Delta",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-adult-listening-radio-transmission_23-2151063300.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "100%",
|
||||
label: "Kepercayaan",
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
label: "Monitoring",
|
||||
},
|
||||
{
|
||||
value: "12",
|
||||
label: "Sektor",
|
||||
},
|
||||
]}
|
||||
title="LOG OPERASIONAL"
|
||||
description="Laporan dari agen lapangan yang pernah berhadapan langsung dengan anomali."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="depth-3d"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Agent K", role: "Field Analyst", company: "Sektor 51", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-warrior-woman-portrait_23-2150712480.jpg" },
|
||||
{ id: "t2", name: "Dr. Vance", role: "Exobiologist", company: "Lab Gamma", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/bermuda-triangle-mystery-event_23-2151625870.jpg" },
|
||||
{ id: "t3", name: "Agent S", role: "Intelligence", company: "Sektor 7", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/futuristic-view-high-tech-earth-planet_23-2151100449.jpg" },
|
||||
{ id: "t4", name: "Tech R", role: "Signal Engineer", company: "HQ", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/digital-led-scoreboard-displays-sports-competitions_187299-47219.jpg" },
|
||||
{ id: "t5", name: "Pilot M", role: "Air Patrol", company: "Unit Delta", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-adult-listening-radio-transmission_23-2151063300.jpg" }
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "100%", label: "Kepercayaan" },
|
||||
{ value: "24/7", label: "Monitoring" },
|
||||
{ value: "12", label: "Sektor" }
|
||||
]}
|
||||
title="LOG OPERASIONAL"
|
||||
description="Laporan dari agen lapangan yang pernah berhadapan langsung dengan anomali."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Apakah alien itu nyata?",
|
||||
content: "Dokumen ini adalah bukti kebenaran tersebut.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Bagaimana cara bergabung?",
|
||||
content: "Anda memerlukan izin akses tingkat tinggi.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Dimana portalnya?",
|
||||
content: "Lokasi portal berpindah secara acak setiap malam.",
|
||||
},
|
||||
]}
|
||||
sideTitle="PERTANYAAN UMUM"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Apakah alien itu nyata?", content: "Dokumen ini adalah bukti kebenaran tersebut." },
|
||||
{ id: "f2", title: "Bagaimana cara bergabung?", content: "Anda memerlukan izin akses tingkat tinggi." },
|
||||
{ id: "f3", title: "Dimana portalnya?", content: "Lokasi portal berpindah secara acak setiap malam." }
|
||||
]}
|
||||
sideTitle="PERTANYAAN UMUM"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="LAPORKAN ANOMALI"
|
||||
description="Jadilah bagian dari jaringan global kami dan laporkan setiap temuan tidak lazim."
|
||||
mediaAnimation="slide-up"
|
||||
tag="TICKET PENDING"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hud-user-interface-technology-spaceship-virtual-reality-game-with-infographic-chart-navigation-button_90220-1368.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="LAPORKAN ANOMALI"
|
||||
description="Jadilah bagian dari jaringan global kami dan laporkan setiap temuan tidak lazim."
|
||||
mediaAnimation="slide-up"
|
||||
tag="TICKET PENDING"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hud-user-interface-technology-spaceship-virtual-reality-game-with-infographic-chart-navigation-button_90220-1368.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="XENO-PORTAL"
|
||||
columns={[
|
||||
{
|
||||
title: "Operasi",
|
||||
items: [
|
||||
{
|
||||
label: "Arsip",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Deteksi",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Hukum",
|
||||
items: [
|
||||
{
|
||||
label: "Privasi",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Protokol",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="XENO-PORTAL"
|
||||
columns={[
|
||||
{ title: "Operasi", items: [{ label: "Arsip", href: "#" }, { label: "Deteksi", href: "#" }] },
|
||||
{ title: "Hukum", items: [{ label: "Privasi", href: "#" }, { label: "Protokol", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user