Merge version_3 into main #3
182
src/app/page.tsx
182
src/app/page.tsx
@@ -11,7 +11,7 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import { Globe2, Headphones, Zap } from "lucide-react";
|
||||
import { Globe2, Headphones, Zap, ShieldCheck, Cpu, Gauge } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -21,20 +21,20 @@ export default function LandingPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "products" },
|
||||
{ name: "Fitur", id: "features" },
|
||||
{ name: "Paket", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Kontak", id: "contact" }
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="ANS Radius"
|
||||
/>
|
||||
@@ -42,152 +42,88 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Internet Cepat Tanpa Batas"
|
||||
description="Nikmati koneksi internet fiber optic super cepat, stabil, dan unlimited untuk kebutuhan rumah maupun bisnis Anda. Gabung sekarang!"
|
||||
title="Futuristic Connectivity, Redefined."
|
||||
description="Experience hyper-speed fiber optics integrated with AI-driven network management. Welcome to the future of digital infrastructure."
|
||||
buttons={[
|
||||
{
|
||||
text: "Mulai Sekarang", href: "#pricing"},
|
||||
{ text: "Get Started", href: "#pricing" },
|
||||
{ text: "View Dashboard", href: "#products" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/network-connections_1048-7667.jpg"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glowing-fiber-optic-cables-dark-space_23-2148779312.jpg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-render-low-poly-plexus-network-communications-design_1048-13302.jpg", alt: "User 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-cyber-network-visualization-design_1048-17445.jpg", alt: "User 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/network-connections_1048-7701.jpg", alt: "User 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-techno-background-with-connecting-dots-lines_1048-5771.jpg", alt: "User 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-woman-win-prize-internet-try-dancing-chair_343059-1309.jpg", alt: "User 5"},
|
||||
]}
|
||||
avatarText="Dipercaya oleh lebih dari 5.000 pelanggan puas"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Kecepatan Tinggi", description: "Koneksi fiber optic dengan kecepatan simetris upload dan download."},
|
||||
{
|
||||
icon: Globe2,
|
||||
title: "Unlimited Quota", description: "Akses internet sepuasnya tanpa batasan kuota (FUP)."},
|
||||
{
|
||||
icon: Headphones,
|
||||
title: "Support 24/7", description: "Tim teknis kami siap membantu Anda kapanpun jika terjadi gangguan."},
|
||||
]}
|
||||
title="Kenapa Memilih Kami"
|
||||
description="Solusi internet terdepan untuk kenyamanan digital Anda."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Kualitas Terjamin"
|
||||
tag="Support"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "100%", description: "Gratis Support Langsung Teknisi"},
|
||||
{
|
||||
id: "2", value: "24/7", description: "Layanan Bantuan Pelanggan"},
|
||||
{
|
||||
id: "3", value: "Stabil", description: "Pengalaman Jaringan Internet"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Router Mikrotik", price: "High Performance", variant: "Network", imageSrc: "http://img.b2bpic.net/free-photo/various-devices-table_140725-9009.jpg"},
|
||||
{
|
||||
id: "2", name: "Fiber Optic Modem", price: "Ultra Stable", variant: "Access", imageSrc: "http://img.b2bpic.net/free-photo/station-recording-speaking-podcast_482257-7773.jpg"},
|
||||
{
|
||||
id: "3", name: "Network Switch", price: "Multi Port", variant: "Connect", imageSrc: "http://img.b2bpic.net/free-photo/lan-cable-connected-laptop_53876-22995.jpg"},
|
||||
{
|
||||
id: "4", name: "Indoor Access Point", price: "High Speed", variant: "Wireless", imageSrc: "http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-components_23-2149174328.jpg"},
|
||||
{
|
||||
id: "5", name: "Fiber Converter", price: "Long Range", variant: "Fiber", imageSrc: "http://img.b2bpic.net/free-photo/blue-optic-fiber-with-ethernet-cables_23-2148779312.jpg"},
|
||||
{
|
||||
id: "6", name: "Smart Hub", price: "Reliable", variant: "Control", imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072232.jpg"},
|
||||
{ id: "1", name: "Network Analytics", price: "Live Feed", variant: "Dashboard", imageSrc: "http://img.b2bpic.net/free-photo/data-visualization-concept-screen_23-2149174328.jpg" },
|
||||
{ id: "2", name: "Traffic Control", price: "Auto", variant: "Security", imageSrc: "http://img.b2bpic.net/free-photo/abstract-digital-grid_23-2148779312.jpg" },
|
||||
{ id: "3", name: "Bandwidth Sync", price: "Real-time", variant: "Optimization", imageSrc: "http://img.b2bpic.net/free-photo/server-room-digital-data_23-2149174328.jpg" },
|
||||
{ id: "4", name: "Security Firewall", price: "Active", variant: "Defense", imageSrc: "http://img.b2bpic.net/free-photo/security-tech-blue-glow_23-2149174328.jpg" }
|
||||
]}
|
||||
title="Perangkat Pendukung"
|
||||
description="Kami menyediakan perangkat berkualitas untuk mendukung koneksi Anda."
|
||||
title="Dashboard Preview"
|
||||
description="Monitor, secure, and optimize your network performance in real-time through our futuristic control console."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Zap, title: "Hyper-Speed", description: "Latency-free fiber optics ensuring instantaneous data transfer across all nodes." },
|
||||
{ icon: ShieldCheck, title: "Quantum Security", description: "Military-grade encryption protocols protecting your digital assets 24/7." },
|
||||
{ icon: Cpu, title: "AI Optimization", description: "Intelligent traffic routing that adapts to your usage patterns for peak efficiency." },
|
||||
{ icon: Gauge, title: "Live Monitoring", description: "Complete visibility into your network health via our advanced interface." }
|
||||
]}
|
||||
title="Ultimate Benefits"
|
||||
description="We don't just provide internet; we build a foundation for your digital future."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
animationType="slide-up"
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic", tag: "Basic", price: "Rp 100.000", period: "/bulan", description: "Ideal untuk kebutuhan rumah tangga.", button: {
|
||||
text: "Pilih Paket"},
|
||||
featuresTitle: "Fitur", features: [
|
||||
"2 Router Mikrotik", "Unlimited Speed", "Support 24/7"],
|
||||
},
|
||||
{
|
||||
id: "pro", tag: "Professional", price: "Rp 250.000", period: "/bulan", description: "Untuk produktivitas bisnis.", button: {
|
||||
text: "Pilih Paket"},
|
||||
featuresTitle: "Fitur", features: [
|
||||
"4 Router Mikrotik", "Prioritas Support", "Dedicated IP"],
|
||||
},
|
||||
{
|
||||
id: "enterprise", tag: "Enterprise", price: "Rp 500.000", period: "/bulan", description: "Solusi maksimal skala besar.", button: {
|
||||
text: "Pilih Paket"},
|
||||
featuresTitle: "Fitur", features: [
|
||||
"Full Managed Support", "Free Instalsi", "Bandwidth Dedicated"],
|
||||
},
|
||||
{ id: "starter", tag: "Starter", price: "$49", period: "/mo", description: "Essentials for home connectivity.", button: { text: "Select Plan" }, featuresTitle: "Core Features", features: ["1Gbps Fiber", "Smart Routing", "Basic Analytics"] },
|
||||
{ id: "growth", tag: "Growth", price: "$129", period: "/mo", description: "Advanced features for pro users.", button: { text: "Select Plan" }, featuresTitle: "Everything in Starter +", features: ["5Gbps Fiber", "AI Traffic Control", "Priority Support"] },
|
||||
{ id: "enterprise", tag: "Enterprise", price: "$299", period: "/mo", description: "Maximum performance for large scale.", button: { text: "Select Plan" }, featuresTitle: "Everything in Growth +", features: ["10Gbps Dedicated", "Advanced Firewall", "Custom Dashboard"] }
|
||||
]}
|
||||
title="Paket Internet"
|
||||
description="Pilih paket yang paling sesuai dengan kebutuhan anda."
|
||||
title="Enterprise Pricing"
|
||||
description="Tiered solutions tailored for your scale, security, and speed requirements."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "Apa itu ANS Radius?", content: "ANS Radius adalah layanan penyedia internet berbasis fiber optic yang fokus pada kestabilan dan kecepatan tinggi."},
|
||||
{
|
||||
id: "2", title: "Apakah ada batasan kuota?", content: "Tidak, kami menyediakan akses internet unlimited tanpa batasan FUP."},
|
||||
{
|
||||
id: "3", title: "Bagaimana cara berlangganan?", content: "Anda bisa menghubungi tim sales kami atau mendaftar melalui website."},
|
||||
{ id: "1", title: "How do I integrate the dashboard?", content: "Our dashboard is fully web-based and requires no complex installation, providing instant access upon subscription." },
|
||||
{ id: "2", title: "Is the fiber connection stable?", content: "Yes, our architecture utilizes dedicated fiber loops to ensure near 100% uptime regardless of demand." },
|
||||
{ id: "3", title: "What level of support is included?", content: "Depending on your tier, we offer 24/7 technical assistance and proactive network monitoring." }
|
||||
]}
|
||||
title="Pertanyaan yang Sering Diajukan"
|
||||
description="Informasi seputar layanan kami."
|
||||
faqsAnimation="slide-up"
|
||||
title="FAQ"
|
||||
description="Common questions answered to get you started quickly."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="Hubungi Kami"
|
||||
title="Butuh Bantuan Lebih Lanjut?"
|
||||
description="Tim kami siap melayani kebutuhan jaringan internet Anda kapanpun."
|
||||
buttons={[
|
||||
{
|
||||
text: "Hubungi Sekarang", href: "mailto:info@ansradius.id"},
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Contact"
|
||||
title="Ready for the Future?"
|
||||
description="Join the next generation of ISP technology. Get in touch with our team today."
|
||||
buttons={[{ text: "Contact Sales", href: "mailto:support@ansradius.io" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -195,13 +131,13 @@ export default function LandingPage() {
|
||||
<FooterLogoEmphasis
|
||||
logoText="ANS Radius"
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "/" }, { label: "Tentang", href: "#about" }] },
|
||||
{ items: [{ label: "Paket", href: "#pricing" }, { label: "FAQ", href: "#faq" }] },
|
||||
{ items: [{ label: "Kontak", href: "#contact" }] }
|
||||
{ items: [{ label: "Dashboard", href: "#products" }, { label: "Security", href: "#features" }] },
|
||||
{ items: [{ label: "Pricing", href: "#pricing" }, { label: "Help Center", href: "#faq" }] },
|
||||
{ items: [{ label: "Status", href: "#" }, { label: "Legal", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1c1c1c;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #1f7cff;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #010101;
|
||||
--secondary-cta-text: #000612e6;
|
||||
--accent: #a8cce8;
|
||||
--background-accent: #15479c;
|
||||
--accent: #1f7cff;
|
||||
--background-accent: #f96b2f;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user