Refactor PublicShell and Landing Page Components for Improved Layout and Functionality
- Updated the PublicShell component to enhance the header layout, switching from a flexbox to a grid layout for better alignment of elements. - Corrected the branding text from "Assist Solutions" to "Assist Solution" for consistency. - Enhanced the navigation links in the PublicShell component, adding a new "Blog" link and adjusting styles for better responsiveness. - Revamped the PublicLandingLoadingView component to improve the skeleton loading states, adding new sections for solutions and trust, and enhancing the overall layout. - Overhauled the PublicLandingView component to introduce a solutions carousel, trust and support sections, and a contact section with a form, improving user engagement and accessibility. - Updated styling across components for better visual consistency and responsiveness.
This commit is contained in:
tema
parent
cc0200bd5e
commit
31ce9f858f
BIN
apps/portal/public/assets/images/Hero Image.png
Normal file
BIN
apps/portal/public/assets/images/Hero Image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 311 KiB |
BIN
apps/portal/public/assets/images/Why_us.png
Normal file
BIN
apps/portal/public/assets/images/Why_us.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
@ -0,0 +1,4 @@
|
||||
<svg width="180" height="180" viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Acronis Quick Assist">
|
||||
<rect width="180" height="180" rx="28" fill="#EEF5FF"/>
|
||||
<path d="M89.6 32 40 148h18.4l10-24.8h43.6l10 24.8H140L90.4 32h-0.8zm0.4 34.4 16.6 41.6H73.4l16.6-41.6z" fill="#1D6CD5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 322 B |
BIN
apps/portal/public/assets/images/arconis.png
Normal file
BIN
apps/portal/public/assets/images/arconis.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
4
apps/portal/public/assets/images/teamviewer-qs.svg
Normal file
4
apps/portal/public/assets/images/teamviewer-qs.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="180" height="180" viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="TeamViewer QS">
|
||||
<rect width="180" height="180" rx="28" fill="#E9F5FF"/>
|
||||
<path d="M90 34c-29.8 0-54 24.2-54 54s24.2 54 54 54 54-24.2 54-54-24.2-54-54-54zm-0.1 11.2c23.7 0 42.9 19.2 42.9 42.9S113.6 131 89.9 131 47 111.8 47 88.1 66.2 45.2 89.9 45.2zM69 86.4v3.4l14.2 8.5v-5.8h13.7v5.8L111 89.8v-3.4l-14.1-8.5v5.9H83.2v-5.9L69 86.4z" fill="#0D86D7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 468 B |
BIN
apps/portal/public/assets/images/teamviewer.png
Normal file
BIN
apps/portal/public/assets/images/teamviewer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@ -34,64 +34,71 @@ export function PublicShell({ children }: PublicShellProps) {
|
||||
<div className="fixed inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/5 via-background to-background" />
|
||||
|
||||
<header className="sticky top-0 z-40 border-b border-border/40 bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/80">
|
||||
<div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] h-16 flex items-center justify-between gap-4">
|
||||
<div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] h-16 grid grid-cols-[auto_1fr_auto] items-center gap-4">
|
||||
<Link href="/" className="inline-flex items-center gap-2.5 min-w-0 group">
|
||||
<span className="inline-flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/15">
|
||||
<Logo size={20} />
|
||||
</span>
|
||||
<span className="min-w-0 hidden sm:block">
|
||||
<span className="block text-base font-bold leading-none tracking-tight text-foreground">
|
||||
Assist Solutions
|
||||
Assist Solution
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<nav className="flex items-center gap-1 sm:gap-2">
|
||||
<nav className="flex items-center justify-center gap-1 sm:gap-3 text-sm font-semibold text-muted-foreground">
|
||||
<Link
|
||||
href="/services"
|
||||
className="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="inline-flex items-center px-3 py-2 rounded-md hover:text-foreground transition-colors"
|
||||
>
|
||||
Services
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className="hidden sm:inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="hidden sm:inline-flex items-center px-3 py-2 rounded-md hover:text-foreground transition-colors"
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="hidden sm:inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="inline-flex items-center px-3 py-2 rounded-md hover:text-foreground transition-colors"
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
<Link
|
||||
href="/blog"
|
||||
className="hidden sm:inline-flex items-center px-3 py-2 rounded-md hover:text-foreground transition-colors"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
<Link
|
||||
href="/help"
|
||||
className="hidden md:inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="hidden md:inline-flex items-center px-3 py-2 rounded-md hover:text-foreground transition-colors"
|
||||
>
|
||||
Support
|
||||
</Link>
|
||||
{isAuthenticated ? (
|
||||
<Link
|
||||
href="/account"
|
||||
className="ml-2 inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
My Account
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href="/auth/login"
|
||||
className="ml-2 inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{isAuthenticated ? (
|
||||
<Link
|
||||
href="/account"
|
||||
className="justify-self-end inline-flex items-center justify-center rounded-full bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow hover:bg-primary/90 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
My Account
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href="/auth/login"
|
||||
className="justify-self-end inline-flex items-center justify-center rounded-full bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow hover:bg-primary/90 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1">
|
||||
<div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] py-12 sm:py-16">
|
||||
<div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] pt-0 pb-12 sm:pb-16">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -2,45 +2,108 @@ import { Skeleton } from "@/components/atoms/loading-skeleton";
|
||||
|
||||
export function PublicLandingLoadingView() {
|
||||
return (
|
||||
<div className="space-y-20 pb-8 pt-8 sm:pt-16">
|
||||
<div className="space-y-0 pb-8 pt-0 sm:pt-0">
|
||||
{/* Hero Section Skeleton */}
|
||||
<section className="text-center space-y-8 max-w-4xl mx-auto px-4">
|
||||
<div className="flex flex-col items-center space-y-6">
|
||||
<Skeleton className="h-8 w-64 rounded-full" />
|
||||
<div className="space-y-3 w-full flex flex-col items-center">
|
||||
<Skeleton className="h-16 w-3/4 sm:w-1/2" />
|
||||
<Skeleton className="h-16 w-2/3 sm:w-1/3" />
|
||||
<section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#f7f7f7] py-12 sm:py-16">
|
||||
<div className="mx-auto max-w-6xl grid grid-cols-1 lg:grid-cols-[1.05fr_minmax(0,0.95fr)] items-center gap-10 lg:gap-16 px-6 sm:px-10 lg:px-14 pt-0">
|
||||
<div className="space-y-4 max-w-2xl">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-10 w-72 max-w-full rounded-md" />
|
||||
<Skeleton className="h-10 w-80 max-w-full rounded-md" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-full rounded-md" />
|
||||
<Skeleton className="h-4 w-4/5 rounded-md" />
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-3 pt-2">
|
||||
<Skeleton className="h-12 w-48 rounded-full" />
|
||||
<Skeleton className="h-12 w-48 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 w-full flex flex-col items-center">
|
||||
<Skeleton className="h-6 w-3/4 sm:w-2/3" />
|
||||
<Skeleton className="h-6 w-1/2 sm:w-1/3" />
|
||||
<div className="w-full">
|
||||
<Skeleton className="w-full aspect-[4/3] rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
|
||||
<Skeleton className="h-14 w-48 rounded-lg" />
|
||||
<Skeleton className="h-14 w-40 rounded-lg" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Concept Section Skeleton */}
|
||||
<section className="max-w-5xl mx-auto px-4">
|
||||
<div className="text-center mb-12 flex flex-col items-center space-y-3">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-10 w-64" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<div key={index} className="flex flex-col items-center text-center space-y-4">
|
||||
<Skeleton className="h-14 w-14 rounded-xl" />
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<div className="space-y-2 w-full flex flex-col items-center">
|
||||
<Skeleton className="h-4 w-64 max-w-full" />
|
||||
<Skeleton className="h-4 w-48 max-w-full" />
|
||||
{/* Solutions Carousel Skeleton */}
|
||||
<section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#8dc3fb] py-12 sm:py-14">
|
||||
<div className="mx-auto max-w-7xl px-6 sm:px-10 lg:px-14 space-y-6">
|
||||
<Skeleton className="h-10 w-40 rounded-md" />
|
||||
<div className="flex gap-6 overflow-hidden">
|
||||
{Array.from({ length: 4 }).map((_, idx) => (
|
||||
<div key={idx} className="w-[260px] flex-shrink-0">
|
||||
<Skeleton className="h-64 w-full rounded-3xl" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Trust and Excellence Skeleton */}
|
||||
<section className="max-w-6xl mx-auto px-6 sm:px-10 lg:px-14 py-14 sm:py-16">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-10 lg:gap-14 items-center">
|
||||
<Skeleton className="h-full w-full rounded-2xl min-h-[320px]" />
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-4 w-36 rounded-md" />
|
||||
<Skeleton className="h-10 w-3/4 rounded-md" />
|
||||
<Skeleton className="h-10 w-1/2 rounded-md" />
|
||||
<div className="space-y-3 pt-2">
|
||||
{Array.from({ length: 3 }).map((_, idx) => (
|
||||
<div key={idx} className="flex items-center gap-3">
|
||||
<Skeleton className="h-5 w-5 rounded-full" />
|
||||
<Skeleton className="h-5 w-40 rounded-md" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Skeleton className="h-5 w-40 rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Support Downloads Skeleton */}
|
||||
<section className="max-w-5xl mx-auto px-6 sm:px-10 lg:px-14 pb-16">
|
||||
<Skeleton className="h-10 w-40 mx-auto rounded-md mb-10" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-10">
|
||||
{Array.from({ length: 2 }).map((_, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="rounded-2xl border border-border/60 bg-white p-6 shadow-sm space-y-4"
|
||||
>
|
||||
<Skeleton className="h-5 w-32 mx-auto rounded-md" />
|
||||
<Skeleton className="h-24 w-24 mx-auto rounded-full" />
|
||||
<Skeleton className="h-9 w-32 mx-auto rounded-md" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Skeleton */}
|
||||
<section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#e8f5ff] py-14 sm:py-16">
|
||||
<div className="max-w-6xl mx-auto px-6 sm:px-10 lg:px-14 space-y-6">
|
||||
<Skeleton className="h-10 w-48 rounded-md" />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-10 lg:gap-12">
|
||||
<div className="rounded-2xl bg-white shadow-sm border border-border/60 p-6 sm:p-8 space-y-4">
|
||||
<Skeleton className="h-8 w-48 rounded-md" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Skeleton className="h-11 w-full rounded-md" />
|
||||
<Skeleton className="h-11 w-full rounded-md" />
|
||||
</div>
|
||||
<Skeleton className="h-11 w-full rounded-md" />
|
||||
<Skeleton className="h-11 w-full rounded-md" />
|
||||
<Skeleton className="h-11 w-full rounded-md" />
|
||||
<Skeleton className="h-11 w-full rounded-md" />
|
||||
<Skeleton className="h-28 w-full rounded-md" />
|
||||
<Skeleton className="h-11 w-full rounded-md" />
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-48 w-full rounded-2xl" />
|
||||
<Skeleton className="h-28 w-full rounded-2xl" />
|
||||
<Skeleton className="h-20 w-full rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,212 +1,443 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
import {
|
||||
ArrowRight,
|
||||
Wifi,
|
||||
Smartphone,
|
||||
Lock,
|
||||
BadgeCheck,
|
||||
Globe,
|
||||
Wrench,
|
||||
Building2,
|
||||
Tv,
|
||||
MapPin,
|
||||
Mail,
|
||||
MessageSquare,
|
||||
PhoneCall,
|
||||
Train,
|
||||
} from "lucide-react";
|
||||
|
||||
/**
|
||||
* PublicLandingView - Marketing-focused landing page
|
||||
*
|
||||
* Purpose: Hook visitors, build trust, guide to shop
|
||||
* Purpose: Hook visitors, build trust, guide to shop.
|
||||
* Contains:
|
||||
* - Hero with tagline
|
||||
* - Value props (One Stop Solution, English Support, Onsite Support) - ONLY here
|
||||
* - Brief service tease (links to /services)
|
||||
* - CTA to contact
|
||||
* - Solutions carousel
|
||||
* - Trust & Support sections
|
||||
*/
|
||||
export function PublicLandingView() {
|
||||
const carouselRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: "Internet Plans",
|
||||
description:
|
||||
"Utilizing NTT's optical fiber network, we deliver one of the most reliable Internet connections in Japan.",
|
||||
icon: <Wifi className="h-8 w-8 text-blue-600" />,
|
||||
href: "/services/internet",
|
||||
},
|
||||
{
|
||||
title: "Phone Plans",
|
||||
description:
|
||||
"Using NTT DOCOMO's vast mobile network, we deliver one of the most cost-friendly SIM card services in Japan.",
|
||||
icon: <Smartphone className="h-8 w-8 text-blue-600" />,
|
||||
href: "/services/sim",
|
||||
},
|
||||
{
|
||||
title: "Business Solutions",
|
||||
description:
|
||||
"Dedicated Internet Access, office network setup, data center services, and ongoing tech support.",
|
||||
icon: <Building2 className="h-8 w-8 text-blue-600" />,
|
||||
href: "/services/business",
|
||||
},
|
||||
{
|
||||
title: "VPN",
|
||||
description:
|
||||
"Choose any of our VPN server locations that connect directly from Tokyo with static routing.",
|
||||
icon: <Lock className="h-8 w-8 text-blue-600" />,
|
||||
href: "/services/vpn",
|
||||
},
|
||||
{
|
||||
title: "TV Services",
|
||||
description: "A variety of options for customers such as Satellite TV and Optical Fiber TV.",
|
||||
icon: <Tv className="h-8 w-8 text-blue-600" />,
|
||||
href: "/services/tv",
|
||||
},
|
||||
{
|
||||
title: "Onsite Support",
|
||||
description:
|
||||
"Professional technical support at your residence or office for setup, configuration, and troubleshooting.",
|
||||
icon: <Wrench className="h-8 w-8 text-blue-600" />,
|
||||
href: "/services/onsite",
|
||||
},
|
||||
];
|
||||
const extendedServices = [...services, ...services, ...services];
|
||||
|
||||
const supportDownloads = [
|
||||
{
|
||||
title: "Acronis Quick Assist",
|
||||
href: "https://www.acronis.com/en/products/cloud/quick-assist/download/",
|
||||
image: "/assets/images/arconis.png",
|
||||
},
|
||||
{
|
||||
title: "TeamViewer QS",
|
||||
href: "https://get.teamviewer.com/tokyo",
|
||||
image: "/assets/images/teamviewer.png",
|
||||
},
|
||||
];
|
||||
|
||||
const scrollServices = useCallback(
|
||||
(direction: 1 | -1) => {
|
||||
const container = carouselRef.current;
|
||||
if (!container) return;
|
||||
const card = container.querySelector<HTMLElement>("[data-service-card]");
|
||||
const gap =
|
||||
Number.parseFloat(getComputedStyle(container).columnGap || "0") ||
|
||||
Number.parseFloat(getComputedStyle(container).gap || "0") ||
|
||||
24;
|
||||
const amount = card ? card.clientWidth + gap : container.clientWidth;
|
||||
|
||||
const nearEnd = container.scrollLeft >= container.scrollWidth - container.clientWidth - 10;
|
||||
const atStart = container.scrollLeft <= 0;
|
||||
|
||||
if (direction > 0 && nearEnd) {
|
||||
container.scrollTo({ left: 0, behavior: "smooth" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (direction < 0 && atStart) {
|
||||
container.scrollTo({
|
||||
left: container.scrollWidth - container.clientWidth,
|
||||
behavior: "smooth",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
container.scrollBy({ left: direction * amount, behavior: "smooth" });
|
||||
},
|
||||
[carouselRef]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = carouselRef.current;
|
||||
if (container) {
|
||||
container.scrollLeft = container.scrollWidth / 3;
|
||||
}
|
||||
|
||||
const interval = window.setInterval(() => {
|
||||
scrollServices(1);
|
||||
}, 10000);
|
||||
return () => window.clearInterval(interval);
|
||||
}, [scrollServices]);
|
||||
|
||||
useEffect(() => {
|
||||
const container = carouselRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const handleScroll = () => {
|
||||
const segmentWidth = container.scrollWidth / 3;
|
||||
const threshold = segmentWidth * 0.05;
|
||||
|
||||
if (container.scrollLeft >= segmentWidth * 2 - threshold) {
|
||||
container.scrollLeft -= segmentWidth;
|
||||
} else if (container.scrollLeft <= threshold) {
|
||||
container.scrollLeft += segmentWidth;
|
||||
}
|
||||
};
|
||||
|
||||
container.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => container.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-20 pb-8">
|
||||
<div className="space-y-0 pb-8 pt-0">
|
||||
{/* Hero Section */}
|
||||
<section className="text-center space-y-8 pt-8 sm:pt-16 relative">
|
||||
<div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent opacity-70 blur-3xl pointer-events-none" />
|
||||
|
||||
<div className="space-y-6 max-w-4xl mx-auto px-4">
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-primary/5 border border-primary/10 px-3 py-1 text-sm text-primary font-medium mb-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<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>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
||||
</span>
|
||||
Reliable Connectivity in Japan
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-extrabold tracking-tight text-foreground animate-in fade-in slide-in-from-bottom-6 duration-700">
|
||||
A One Stop Solution
|
||||
<span className="block bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent pb-2 mt-2">
|
||||
for Your IT Needs
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed animate-in fade-in slide-in-from-bottom-8 duration-700 delay-100">
|
||||
Serving Japan's international community with reliable, English-supported internet,
|
||||
mobile, and VPN solutions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200">
|
||||
<Link
|
||||
href="/services"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg px-8 py-4 text-lg font-semibold bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/20 hover:shadow-primary/30 transition-all hover:-translate-y-0.5"
|
||||
>
|
||||
Browse Services
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg px-8 py-4 text-lg font-semibold border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-all hover:-translate-y-0.5"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CONCEPT Section - Value Propositions (ONLY on homepage) */}
|
||||
<section className="max-w-5xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-sm font-semibold text-primary uppercase tracking-wider mb-3">
|
||||
Our Concept
|
||||
</h2>
|
||||
<p className="text-3xl font-bold text-foreground tracking-tight">
|
||||
Why customers choose us
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* One Stop Solution */}
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="h-14 w-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6 text-primary">
|
||||
<BadgeCheck className="h-7 w-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-foreground mb-3">One Stop Solution</h3>
|
||||
<p className="text-muted-foreground leading-relaxed max-w-xs">
|
||||
All you need is just to contact us and we will take care of everything.
|
||||
<section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#f7f7f7] py-12 sm:py-16">
|
||||
<div className="mx-auto max-w-6xl grid grid-cols-1 lg:grid-cols-[1.05fr_minmax(0,0.95fr)] items-center gap-10 lg:gap-16 px-6 sm:px-10 lg:px-14">
|
||||
<div className="space-y-6 text-left max-w-2xl">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight text-foreground">
|
||||
<span className="block whitespace-nowrap">One Stop Solution</span>
|
||||
<span className="block text-primary mt-2 whitespace-nowrap">for Your IT Needs</span>
|
||||
</h1>
|
||||
<p className="text-base sm:text-lg text-muted-foreground leading-relaxed font-semibold">
|
||||
Serving Japan's international community with reliable, English-supported
|
||||
internet, mobile, and VPN solutions and many more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* English Support */}
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="h-14 w-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6 text-primary">
|
||||
<Globe className="h-7 w-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-foreground mb-3">English Support</h3>
|
||||
<p className="text-muted-foreground leading-relaxed max-w-xs">
|
||||
We always assist you in English. No language barrier to worry about.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Onsite Support */}
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="h-14 w-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6 text-primary">
|
||||
<Wrench className="h-7 w-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-foreground mb-3">Onsite Support</h3>
|
||||
<p className="text-muted-foreground leading-relaxed max-w-xs">
|
||||
Our tech staff can visit your residence for setup and troubleshooting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Teaser - Brief preview linking to /services */}
|
||||
<section className="max-w-5xl mx-auto px-4 text-center">
|
||||
<h2 className="text-sm font-semibold text-primary uppercase tracking-wider mb-3">
|
||||
Our Services
|
||||
</h2>
|
||||
<p className="text-3xl font-bold text-foreground tracking-tight mb-8">What we offer</p>
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
||||
<Link
|
||||
href="/services/internet"
|
||||
className="group inline-flex items-center gap-3 rounded-full border border-border bg-card px-5 py-3 hover:border-blue-500/50 hover:bg-blue-500/5 transition-all"
|
||||
>
|
||||
<Wifi className="h-5 w-5 text-blue-500" />
|
||||
<span className="font-medium text-foreground group-hover:text-blue-500 transition-colors">
|
||||
Internet
|
||||
</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/sim"
|
||||
className="group inline-flex items-center gap-3 rounded-full border border-border bg-card px-5 py-3 hover:border-green-500/50 hover:bg-green-500/5 transition-all"
|
||||
>
|
||||
<Smartphone className="h-5 w-5 text-green-500" />
|
||||
<span className="font-medium text-foreground group-hover:text-green-500 transition-colors">
|
||||
SIM & eSIM
|
||||
</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/vpn"
|
||||
className="group inline-flex items-center gap-3 rounded-full border border-border bg-card px-5 py-3 hover:border-purple-500/50 hover:bg-purple-500/5 transition-all"
|
||||
>
|
||||
<Lock className="h-5 w-5 text-purple-500" />
|
||||
<span className="font-medium text-foreground group-hover:text-purple-500 transition-colors">
|
||||
VPN
|
||||
</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/business"
|
||||
className="group inline-flex items-center gap-3 rounded-full border border-border bg-card px-5 py-3 hover:border-amber-500/50 hover:bg-amber-500/5 transition-all"
|
||||
>
|
||||
<Building2 className="h-5 w-5 text-amber-500" />
|
||||
<span className="font-medium text-foreground group-hover:text-amber-500 transition-colors">
|
||||
Business
|
||||
</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/onsite"
|
||||
className="group inline-flex items-center gap-3 rounded-full border border-border bg-card px-5 py-3 hover:border-rose-500/50 hover:bg-rose-500/5 transition-all"
|
||||
>
|
||||
<Wrench className="h-5 w-5 text-rose-500" />
|
||||
<span className="font-medium text-foreground group-hover:text-rose-500 transition-colors">
|
||||
Onsite Support
|
||||
</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/tv"
|
||||
className="group inline-flex items-center gap-3 rounded-full border border-border bg-card px-5 py-3 hover:border-cyan-500/50 hover:bg-cyan-500/5 transition-all"
|
||||
>
|
||||
<Tv className="h-5 w-5 text-cyan-500" />
|
||||
<span className="font-medium text-foreground group-hover:text-cyan-500 transition-colors">
|
||||
TV Services
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
<Link
|
||||
href="/services"
|
||||
className="inline-flex items-center gap-2 text-primary font-semibold hover:text-primary/80 transition-colors"
|
||||
>
|
||||
Browse all services
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="max-w-3xl mx-auto text-center px-4">
|
||||
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary/5 via-primary/10 to-blue-600/5 border border-primary/20 p-8 sm:p-12">
|
||||
<div className="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 w-64 h-64 bg-primary/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-0 translate-y-1/4 -translate-x-1/4 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="relative">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-4">
|
||||
Ready to get connected?
|
||||
</h2>
|
||||
<p className="text-muted-foreground max-w-lg mx-auto mb-8 leading-relaxed">
|
||||
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">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg px-8 py-3 text-base font-semibold bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/20 transition-all"
|
||||
>
|
||||
Contact Us
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 pt-2">
|
||||
<Link
|
||||
href="/services"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg px-8 py-3 text-base font-semibold border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-full px-6 sm:px-8 py-3 text-base font-semibold bg-primary text-primary-foreground hover:bg-primary/90 shadow-md shadow-primary/20 transition-transform hover:-translate-y-0.5"
|
||||
>
|
||||
Browse Services
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-full px-6 sm:px-8 py-3 text-base font-semibold border border-border bg-white text-primary hover:bg-primary/5 transition-colors"
|
||||
>
|
||||
Need Assistance?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full">
|
||||
<div className="relative aspect-[4/3] w-full overflow-hidden rounded-2xl border border-border/70 bg-white shadow-lg">
|
||||
<Image
|
||||
src="/assets/images/Hero Image.png"
|
||||
alt="Team collaborating in a modern office"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Solutions Carousel */}
|
||||
<section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#e8f5ff] py-12 sm:py-14">
|
||||
<div className="mx-auto max-w-7xl px-6 sm:px-10 lg:px-14">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-3xl sm:text-4xl font-extrabold text-foreground">Solutions</h2>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div
|
||||
ref={carouselRef}
|
||||
className="flex gap-6 overflow-x-auto scroll-smooth pb-6 pr-16"
|
||||
style={{ scrollbarWidth: "none" }}
|
||||
>
|
||||
{extendedServices.map((service, index) => (
|
||||
<Link
|
||||
key={`${service.title}-${index}`}
|
||||
href={service.href}
|
||||
className="group flex-shrink-0 w-[260px]"
|
||||
>
|
||||
<article
|
||||
data-service-card
|
||||
className="h-full rounded-3xl bg-white px-6 py-8 shadow-md border border-white/60 transition-transform duration-300 group-hover:-translate-y-1"
|
||||
>
|
||||
<div className="mb-5">{service.icon}</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-3">{service.title}</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">{service.description}</p>
|
||||
</article>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="absolute bottom-0 right-0 flex gap-3 pr-2">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Scroll solutions left"
|
||||
onClick={() => scrollServices(-1)}
|
||||
className="h-10 w-10 rounded-full border border-black/20 bg-white/80 text-foreground shadow-sm hover:bg-white transition-colors"
|
||||
>
|
||||
<span aria-hidden>‹</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Scroll solutions right"
|
||||
onClick={() => scrollServices(1)}
|
||||
className="h-10 w-10 rounded-full border border-black/20 bg-white/80 text-foreground shadow-sm hover:bg-white transition-colors"
|
||||
>
|
||||
<span aria-hidden>›</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Trust and Excellence Section */}
|
||||
<section className="max-w-6xl mx-auto px-6 sm:px-10 lg:px-14 py-14 sm:py-16">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-10 lg:gap-14 items-center">
|
||||
<div className="relative w-full overflow-hidden rounded-2xl shadow-md border border-border/60 bg-white aspect-[4/5]">
|
||||
<Image
|
||||
src="/assets/images/Why_us.png"
|
||||
alt="Team collaborating with trust and excellence"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 40vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<p className="text-2xl sm:text-3xl font-extrabold text-primary uppercase tracking-wide mb-3">
|
||||
Built on Trust and Excellence
|
||||
</p>
|
||||
<h3 className="text-xl sm:text-2xl font-semibold text-foreground leading-relaxed">
|
||||
For over two decades, we've been helping expats & businesses navigate complex
|
||||
technological challenges with confidence.
|
||||
</h3>
|
||||
</div>
|
||||
<ul className="space-y-3 text-foreground">
|
||||
{["One Stop Solution", "English Support", "Onsite Support"].map(item => (
|
||||
<li key={item} className="flex items-center gap-3 text-base font-semibold">
|
||||
<BadgeCheck className="h-5 w-5 text-primary" />
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/about"
|
||||
className="inline-flex items-center gap-2 text-primary font-semibold hover:text-primary/80 transition-colors"
|
||||
>
|
||||
About our company
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Support Downloads */}
|
||||
<section className="max-w-5xl mx-auto px-6 sm:px-10 lg:px-14 pb-16">
|
||||
<h3 className="text-center text-3xl sm:text-4xl font-extrabold text-primary tracking-tight mb-10">
|
||||
SUPPORT
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-10">
|
||||
{supportDownloads.map(item => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="flex flex-col items-center gap-4 rounded-2xl bg-white p-6 shadow-md"
|
||||
>
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-lg font-semibold text-foreground leading-snug">{item.title}</p>
|
||||
</div>
|
||||
<div className="h-24 w-24 rounded-full flex items-center justify-center bg-primary/5 shadow-sm">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
width={64}
|
||||
height={64}
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90 transition-colors shadow-sm"
|
||||
>
|
||||
Download <ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#e8f5ff] py-14 sm:py-16">
|
||||
<div className="max-w-6xl mx-auto px-6 sm:px-10 lg:px-14 space-y-6">
|
||||
<h2 className="text-3xl sm:text-4xl font-extrabold text-foreground">CONTACT US</h2>
|
||||
<div className="rounded-3xl bg-white border border-primary/20 shadow-sm p-6 sm:p-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-10 lg:gap-12">
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center gap-2 text-primary font-bold text-lg">
|
||||
<Mail className="h-5 w-5" />
|
||||
<span>By Online Form (Anytime)</span>
|
||||
</div>
|
||||
<form className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
name="subject"
|
||||
placeholder="Subject*"
|
||||
className="w-full rounded-md border border-border px-4 py-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 bg-white"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Name*"
|
||||
className="w-full rounded-md border border-border px-4 py-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 bg-white"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email*"
|
||||
className="w-full rounded-md border border-border px-4 py-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 bg-white"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
placeholder="Phone"
|
||||
className="w-full rounded-md border border-border px-4 py-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 bg-white"
|
||||
/>
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Inquiry*"
|
||||
rows={4}
|
||||
className="w-full rounded-md border border-border px-4 py-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 resize-none bg-white"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full inline-flex items-center justify-center rounded-md bg-primary px-4 py-3 text-sm font-semibold text-primary-foreground hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="inline-flex items-center gap-2 text-primary font-semibold">
|
||||
<MessageSquare className="h-5 w-5" />
|
||||
<span>By Chat (Anytime)</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground">
|
||||
Click the bottom right “Chat Button” to reach our team anytime.
|
||||
</p>
|
||||
<div className="inline-flex items-center gap-2 text-primary font-semibold">
|
||||
<PhoneCall className="h-5 w-5" />
|
||||
<span>By Phone (9:30-18:00 JST)</span>
|
||||
</div>
|
||||
<div className="text-sm text-foreground">
|
||||
<p className="font-semibold">Toll Free within Japan</p>
|
||||
<p className="text-lg font-bold text-primary">0120-660-470</p>
|
||||
<p className="font-semibold mt-1">From Overseas (may incur calling rates)</p>
|
||||
<p className="text-lg font-bold text-primary">+81-3-3560-1006</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="w-full rounded-2xl overflow-hidden shadow-md border border-border/60 bg-white aspect-[4/3]">
|
||||
<iframe
|
||||
title="Assist Solutions Corp Map"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.549653770843!2d139.7386725760842!3d35.66382513061992!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bce85cdcfdf%3A0x1c65fcd01aaa6d2f!2s3-ch%C5%8Dme-8-2%20Higashiazabu%2C%20Minato%20City%2C%20Tokyo%20106-0044%2C%20Japan!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus"
|
||||
className="w-full h-full"
|
||||
loading="lazy"
|
||||
allowFullScreen
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="rounded-2xl bg-white shadow-sm border border-border/60 p-5 space-y-2">
|
||||
<div className="inline-flex items-center gap-2 text-primary font-semibold">
|
||||
<Train className="h-5 w-5" />
|
||||
<span>Access</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground">
|
||||
Subway Oedo Line / Nanboku Line
|
||||
<br />
|
||||
Short distance walk from exit 6 of Azabu-Juban Station
|
||||
<br />
|
||||
(1F of our building is Domino's Pizza)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl bg-white shadow-sm border border-border/60 p-5 space-y-2">
|
||||
<div className="inline-flex items-center gap-2 text-primary font-semibold">
|
||||
<MapPin className="h-5 w-5" />
|
||||
<span>Address</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground">
|
||||
3F Azabu Maruka Bldg.,
|
||||
<br />
|
||||
3-8-2 Higashi Azabu, Minato-ku,
|
||||
<br />
|
||||
Tokyo 106-0044
|
||||
<br />
|
||||
Tel: 03-3560-1006 Fax: 03-3560-1007
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user