{service.icon}
+ {service.title}
+{service.description}
+
+
{children}
diff --git a/apps/portal/src/features/landing-page/views/PublicLandingLoadingView.tsx b/apps/portal/src/features/landing-page/views/PublicLandingLoadingView.tsx
index 38595f30..c0ca81d8 100644
--- a/apps/portal/src/features/landing-page/views/PublicLandingLoadingView.tsx
+++ b/apps/portal/src/features/landing-page/views/PublicLandingLoadingView.tsx
@@ -2,45 +2,108 @@ import { Skeleton } from "@/components/atoms/loading-skeleton";
export function PublicLandingLoadingView() {
return (
-
+
{/* Hero Section Skeleton */}
-
-
-
-
+
+
-
+
-
+
+
+
+
+
-
-
+
-
- {/* Concept Section Skeleton */}
-
-
-
- {Array.from({ length: 3 }).map((_, index) => (
-
- (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: ("[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 (
-
-
+
+
+ {/* Trust and Excellence Skeleton */}
+
+
+
+ {/* Support Downloads Skeleton */}
+
+
+
+ {/* Contact Skeleton */}
+
+
);
}
diff --git a/apps/portal/src/features/landing-page/views/PublicLandingView.tsx b/apps/portal/src/features/landing-page/views/PublicLandingView.tsx
index 1c0fcf42..2f4afe55 100644
--- a/apps/portal/src/features/landing-page/views/PublicLandingView.tsx
+++ b/apps/portal/src/features/landing-page/views/PublicLandingView.tsx
@@ -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
+
+
+ {Array.from({ length: 4 }).map((_, idx) => (
+
+
+
+ ))}
+
+
+
+
+
+ {Array.from({ length: 3 }).map((_, idx) => (
+
+
+
+ ))}
+
+ {Array.from({ length: 2 }).map((_, idx) => (
+
+
))}
+
+
+
+
+
+
+
+
+
+
+
{/* Hero Section */}
-
-
-
-
-
- {/* CONCEPT Section - Value Propositions (ONLY on homepage) */}
-
-
-
-
-
-
-
-
- Reliable Connectivity in Japan
-
- - A One Stop Solution - - for Your IT Needs - -
-- Serving Japan's international community with reliable, English-supported internet, - mobile, and VPN solutions. -
-
-
- Browse Services
-
-
-
- - Our Concept -
-- Why customers choose us -
-
- {/* One Stop Solution */}
-
-
-
- One Stop Solution
-
- All you need is just to contact us and we will take care of everything.
+
+ Serving Japan's international community with reliable, English-supported
+ internet, mobile, and VPN solutions and many more.
- We always assist you in English. No language barrier to worry about.
-
- Our tech staff can visit your residence for setup and troubleshooting.
- What we offer
- Contact us anytime — our bilingual team is here to help you find the right solution.
-
+ Built on Trust and Excellence
+ {item.title}
+ Click the bottom right “Chat Button” to reach our team anytime.
+ Toll Free within Japan 0120-660-470 From Overseas (may incur calling rates) +81-3-3560-1006
+ Subway Oedo Line / Nanboku Line
+
+ 3F Azabu Maruka Bldg.,
+
+
-
+
-
- {/* English Support */}
-
+ One Stop Solution
+ for Your IT Needs
+
+
-
-
- {/* Onsite Support */}
-
-
- English Support
-
-
-
-
- Onsite Support
-
- Our Services
-
-
-
-
-
- Browse all services
-
-
-
-
-
+
+
+ {/* Solutions Carousel */}
+
- Ready to get connected?
-
-
-
- Contact Us
-
+
+
Browse Services
+
+
+
+
+
+
+
+
+
+ Solutions
+
+
+
+ {extendedServices.map((service, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ For over two decades, we've been helping expats & businesses navigate complex
+ technological challenges with confidence.
+
+
+ {["One Stop Solution", "English Support", "Onsite Support"].map(item => (
+
+
+ About our company
+
+ SUPPORT
+
+
+ {supportDownloads.map(item => (
+
+
+
+ ))}
+
+
+
+
+
+ Download
+
CONTACT US
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Short distance walk from exit 6 of Azabu-Juban Station
+
+ (1F of our building is Domino's Pizza)
+
+
+
+
+
+ 3-8-2 Higashi Azabu, Minato-ku,
+
+ Tokyo 106-0044
+
+ Tel: 03-3560-1006 Fax: 03-3560-1007
+