bde9f706ce
- Implemented VpnServicesService for managing VPN plans and activation fees. - Created SimCallHistoryFormatterService for formatting call history data. - Developed SimCallHistoryParserService to parse call history CSV files. - Added AnimatedContainer and AnimatedBackground components for UI animations. - Introduced BentoServiceCard, FloatingGlassCard, GlowButton, and ValuePropCard components for landing page. - Implemented useCountUp hook for animated number counting. - Added cancellation months utility functions for subscription management.
274 lines
9.9 KiB
TypeScript
274 lines
9.9 KiB
TypeScript
import {
|
|
ArrowRight,
|
|
Wifi,
|
|
Smartphone,
|
|
Lock,
|
|
BadgeCheck,
|
|
Globe,
|
|
Wrench,
|
|
Building2,
|
|
Tv,
|
|
} from "lucide-react";
|
|
import {
|
|
GlowButton,
|
|
ValuePropCard,
|
|
BentoServiceCard,
|
|
FloatingGlassCard,
|
|
AnimatedBackground,
|
|
} from "../components";
|
|
|
|
/**
|
|
* PublicLandingView - Modern SaaS Premium Landing Page
|
|
*
|
|
* Purpose: Hook visitors, build trust, guide to shop
|
|
* Features:
|
|
* - Asymmetric hero with floating glass cards
|
|
* - Glass morphism value proposition cards
|
|
* - Bento grid services section
|
|
* - Glowing CTA with depth layers
|
|
*/
|
|
export function PublicLandingView() {
|
|
return (
|
|
<div className="space-y-24 pb-12">
|
|
{/* ===== HERO SECTION ===== */}
|
|
<section className="relative min-h-[70vh] flex items-center pt-8 sm:pt-0">
|
|
<AnimatedBackground />
|
|
|
|
<div className="w-full grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
|
|
{/* Left: Content */}
|
|
<div className="space-y-8">
|
|
{/* Badge */}
|
|
<div
|
|
className="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
|
style={{ animationDelay: "0ms" }}
|
|
>
|
|
<span className="inline-flex items-center gap-2 rounded-full bg-primary/5 border border-primary/10 px-4 py-1.5 text-sm text-primary font-medium">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
|
|
</span>
|
|
Reliable Connectivity in Japan
|
|
</span>
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<div
|
|
className="space-y-4 animate-in fade-in slide-in-from-bottom-6 duration-700"
|
|
style={{ animationDelay: "100ms" }}
|
|
>
|
|
<h1 className="text-display-lg lg:text-display-xl text-foreground">
|
|
A One Stop Solution
|
|
<span className="block cp-gradient-text pb-2 mt-2">for Your IT Needs</span>
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Subtitle */}
|
|
<p
|
|
className="text-lg sm:text-xl text-muted-foreground max-w-xl leading-relaxed animate-in fade-in slide-in-from-bottom-8 duration-700"
|
|
style={{ animationDelay: "200ms" }}
|
|
>
|
|
Serving Japan's international community with reliable, English-supported
|
|
internet, mobile, and VPN solutions.
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div
|
|
className="flex flex-col sm:flex-row items-start sm:items-center gap-4 pt-2 animate-in fade-in slide-in-from-bottom-8 duration-700"
|
|
style={{ animationDelay: "300ms" }}
|
|
>
|
|
<GlowButton href="/services">
|
|
Browse Services
|
|
<ArrowRight className="h-5 w-5 ml-1" />
|
|
</GlowButton>
|
|
<GlowButton href="/contact" variant="secondary">
|
|
Contact Us
|
|
</GlowButton>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Floating Glass Cards (hidden on mobile) */}
|
|
<div className="hidden lg:block relative h-[400px]">
|
|
<FloatingGlassCard
|
|
icon={Wifi}
|
|
title="High-Speed Internet"
|
|
subtitle="Fiber & WiFi solutions"
|
|
accentColor="blue"
|
|
className="absolute top-0 right-0 cp-float animate-in fade-in slide-in-from-right-12 duration-700"
|
|
style={{ animationDelay: "500ms" }}
|
|
/>
|
|
<FloatingGlassCard
|
|
icon={Smartphone}
|
|
title="Mobile SIM"
|
|
subtitle="Voice & data plans"
|
|
accentColor="green"
|
|
className="absolute top-1/3 right-1/4 cp-float-delayed animate-in fade-in slide-in-from-right-12 duration-700"
|
|
style={{ animationDelay: "650ms" }}
|
|
/>
|
|
<FloatingGlassCard
|
|
icon={Lock}
|
|
title="VPN Security"
|
|
subtitle="Privacy protection"
|
|
accentColor="purple"
|
|
className="absolute bottom-0 right-1/6 cp-float-slow animate-in fade-in slide-in-from-right-12 duration-700"
|
|
style={{ animationDelay: "800ms" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== VALUE PROPS SECTION ===== */}
|
|
<section className="max-w-5xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<p className="text-sm font-semibold text-primary uppercase tracking-wider mb-3">
|
|
Our Concept
|
|
</p>
|
|
<h2 className="text-display-md text-foreground">Why customers choose us</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 cp-stagger-children">
|
|
<ValuePropCard
|
|
icon={BadgeCheck}
|
|
title="One Stop Solution"
|
|
description="All you need is just to contact us and we will take care of everything."
|
|
/>
|
|
<ValuePropCard
|
|
icon={Globe}
|
|
title="English Support"
|
|
description="We always assist you in English. No language barrier to worry about."
|
|
/>
|
|
<ValuePropCard
|
|
icon={Wrench}
|
|
title="Onsite Support"
|
|
description="Our tech staff can visit your residence for setup and troubleshooting."
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== SERVICES BENTO GRID ===== */}
|
|
<section className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<p className="text-sm font-semibold text-primary uppercase tracking-wider mb-3">
|
|
Our Services
|
|
</p>
|
|
<h2 className="text-display-md text-foreground">What we offer</h2>
|
|
</div>
|
|
|
|
{/* Bento Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-6 gap-4 auto-rows-[minmax(180px,auto)] cp-stagger-children">
|
|
{/* Internet - Featured (spans 3 cols, 2 rows) */}
|
|
<BentoServiceCard
|
|
href="/services/internet"
|
|
icon={Wifi}
|
|
title="Internet"
|
|
description="High-speed fiber and WiFi solutions for homes and businesses across Japan."
|
|
accentColor="blue"
|
|
size="large"
|
|
className="md:col-span-3 md:row-span-2"
|
|
/>
|
|
|
|
{/* SIM - Medium (spans 2 cols) */}
|
|
<BentoServiceCard
|
|
href="/services/sim"
|
|
icon={Smartphone}
|
|
title="SIM & eSIM"
|
|
description="Flexible voice and data plans with no contracts required."
|
|
accentColor="green"
|
|
size="medium"
|
|
className="md:col-span-2"
|
|
/>
|
|
|
|
{/* VPN - Small (spans 1 col) */}
|
|
<BentoServiceCard
|
|
href="/services/vpn"
|
|
icon={Lock}
|
|
title="VPN"
|
|
accentColor="purple"
|
|
size="small"
|
|
className="md:col-span-1"
|
|
/>
|
|
|
|
{/* Business - Small (spans 1 col) */}
|
|
<BentoServiceCard
|
|
href="/services/business"
|
|
icon={Building2}
|
|
title="Business"
|
|
accentColor="amber"
|
|
size="small"
|
|
className="md:col-span-1"
|
|
/>
|
|
|
|
{/* Onsite - Small (spans 1 col) */}
|
|
<BentoServiceCard
|
|
href="/services/onsite"
|
|
icon={Wrench}
|
|
title="Onsite"
|
|
accentColor="rose"
|
|
size="small"
|
|
className="md:col-span-1"
|
|
/>
|
|
|
|
{/* TV - Medium (spans 4 cols) */}
|
|
<BentoServiceCard
|
|
href="/services/tv"
|
|
icon={Tv}
|
|
title="TV Services"
|
|
description="International TV packages and streaming solutions for your home entertainment."
|
|
accentColor="cyan"
|
|
size="medium"
|
|
className="md:col-span-4"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== CTA SECTION ===== */}
|
|
<section className="relative py-20 -mx-[var(--cp-page-padding)] px-[var(--cp-page-padding)]">
|
|
{/* Background layers */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-primary/10 to-accent-gradient/5" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_oklch(0.55_0.18_260_/_0.15),_transparent_70%)]" />
|
|
|
|
{/* Decorative floating rings */}
|
|
<div
|
|
className="absolute top-10 left-10 w-32 h-32 rounded-full border border-primary/10 cp-float hidden sm:block"
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
className="absolute bottom-10 right-10 w-24 h-24 rounded-full border border-accent-gradient/10 cp-float-delayed hidden sm:block"
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
className="absolute top-1/2 right-1/4 w-16 h-16 rounded-full bg-primary/5 blur-xl hidden md:block"
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Content */}
|
|
<div className="relative max-w-2xl mx-auto text-center space-y-8">
|
|
<h2
|
|
className="text-display-md text-foreground animate-in fade-in slide-in-from-bottom-6 duration-600"
|
|
style={{ animationDelay: "0ms" }}
|
|
>
|
|
Ready to get connected?
|
|
</h2>
|
|
<p
|
|
className="text-lg text-muted-foreground max-w-lg mx-auto leading-relaxed animate-in fade-in slide-in-from-bottom-6 duration-600"
|
|
style={{ animationDelay: "100ms" }}
|
|
>
|
|
Contact us anytime — our bilingual team is here to help you find the right solution.
|
|
</p>
|
|
<div
|
|
className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4 animate-in fade-in slide-in-from-bottom-6 duration-600"
|
|
style={{ animationDelay: "200ms" }}
|
|
>
|
|
<GlowButton href="/contact">
|
|
Contact Us
|
|
<ArrowRight className="h-5 w-5 ml-1" />
|
|
</GlowButton>
|
|
<GlowButton href="/services" variant="secondary">
|
|
Browse Services
|
|
</GlowButton>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|