198 lines
11 KiB
TypeScript
198 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Award, Database, Globe, Headphones, Package, Shield, Star, User, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="grid"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Laptops", id: "products"},
|
|
{
|
|
name: "Support", id: "contact"},
|
|
{
|
|
name: "FAQ", id: "faq"},
|
|
]}
|
|
brandName="Zenith Laptops"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "glowing-orb"}}
|
|
title="Zenith Laptops"
|
|
description="Power Meets Premium Technology. Experience the peak of portable computing."
|
|
leftCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-laptop-dark-table-glowing-screen_169016-51024.jpg", imageAlt: "Futuristic Laptop" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349235.jpg", imageAlt: "Laptop Display" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/social-distancing-barrier-table_53876-97676.jpg", imageAlt: "Workspace" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/workplace-with-laptop-stand-near-eyeglasses_23-2148040478.jpg", imageAlt: "Hardware Detail" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-copy-space-display-empty-desk-performance-metrics_482257-126532.jpg", imageAlt: "Screen Graphics" }
|
|
]}
|
|
rightCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-background-with-patterned-glass-texture_53876-125862.jpg", imageAlt: "Ultra-thin Design" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/colorful-light-coming-out-laptop-screen-darkness_181624-30431.jpg", imageAlt: "Gaming Laptop" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg", imageAlt: "Display" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-cup-black-coffee-white-background-top-view_169016-35328.jpg", imageAlt: "Workspace" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/white-card-with-handle-white-surface_187299-46594.jpg", imageAlt: "Hardware" }
|
|
]}
|
|
buttons={[{ text: "Shop Now", href: "#products" }]}
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg", alt: "Client 1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg", alt: "Client 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/senior-man-using-laptop-tablet-same-time_482257-8141.jpg", alt: "Client 3" },
|
|
{ src: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg", alt: "Client 4" },
|
|
{ src: "http://img.b2bpic.net/free-photo/stylish-empty-desk-high-end-loft-apartment-workspace_482257-120187.jpg", alt: "Client 5" }
|
|
]}
|
|
marqueeItems={[{ type: "text", text: "Intel Core i9" }, { type: "text", text: "NVIDIA RTX 4090" }, { type: "text", text: "4K OLED Display" }, { type: "text", text: "Liquid Metal Cooling" }, { type: "text", text: "Thunderbolt 4" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "AI Integration", description: "Cutting edge AI assisted workflow optimization.", bentoComponent: "chat", aiIcon: Star,
|
|
userIcon: User,
|
|
exchanges: [
|
|
{ userMessage: "Best laptop for AI?", aiResponse: "Zenith Premium Pro." },
|
|
],
|
|
placeholder: "Ask Zenith AI..."},
|
|
{
|
|
bentoComponent: "reveal-icon", icon: Database,
|
|
title: "Next-Gen Processors", description: "Unrivaled speed and efficiency."},
|
|
{
|
|
bentoComponent: "3d-stack-cards", items: [
|
|
{ icon: Shield, title: "Security", subtitle: "Encrypted", detail: "Hardware security." },
|
|
{ icon: Zap, title: "Battery", subtitle: "All day", detail: "Extended life." },
|
|
{ icon: Globe, title: "Global", subtitle: "Anywhere", detail: "Worldwide support." },
|
|
],
|
|
},
|
|
]}
|
|
title="Premium Tech Ecosystem"
|
|
description="Engineered for elite performance and unmatched elegance."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "1", name: "Zenith Pro M3", price: "$2,499", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/laptop-glasses-notebok-desktop-blurred-background_169016-38703.jpg" },
|
|
{ id: "2", name: "Zenith Air X", price: "$1,899", variant: "Space Gray", imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994366.jpg" },
|
|
{ id: "3", name: "Gaming Zenith Z1", price: "$3,200", variant: "Electric Blue", imageSrc: "http://img.b2bpic.net/free-photo/view-retro-computer-technology_23-2149506883.jpg" },
|
|
{ id: "4", name: "Zenith Studio One", price: "$4,500", variant: "Metallic White", imageSrc: "http://img.b2bpic.net/free-photo/billboard-with-fake-news-message_23-2148876043.jpg" },
|
|
{ id: "5", name: "Zenith Elite Carbon", price: "$2,999", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-glowing-screen-table-dark-top-view-copy-space_169016-53598.jpg" },
|
|
{ id: "6", name: "Zenith Nano Book", price: "$1,599", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/pro-gamer-chatting-with-his-community-showing-game-tactics-guide-viewers_482257-77089.jpg" },
|
|
]}
|
|
title="Trending Premium Laptops"
|
|
description="Hand-selected hardware for professional excellence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "m1", value: "99%", title: "Client Satisfaction", description: "Consistent elite performance.", icon: Award },
|
|
{ id: "m2", value: "10K+", title: "Units Sold", description: "Global distribution reached.", icon: Package },
|
|
{ id: "m3", value: "24/7", title: "Support Availability", description: "Always here to help.", icon: Headphones },
|
|
]}
|
|
title="Unrivaled Performance"
|
|
description="Real-world impact metrics."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
cardTag="Review"
|
|
testimonials={[
|
|
{ id: "t1", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/pov-businessman-attending-videocall-meeting-office-using-online-videoconference-talk-consultant-about-financial-strategy-company-employee-chatting-remote-teleconference-close-up_482257-40929.jpg" },
|
|
{ id: "t2", name: "David Chen", imageSrc: "http://img.b2bpic.net/free-photo/different-office-stationery-arranged-white-table-co-working-office_285396-9050.jpg" },
|
|
{ id: "t3", name: "Elena Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-boy-holding-laptop_23-2148847737.jpg" },
|
|
{ id: "t4", name: "Marcus Thorne", imageSrc: "http://img.b2bpic.net/free-photo/african-american-person-discussing-remote-video-conference_482257-121781.jpg" },
|
|
{ id: "t5", name: "Julia Varma", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-watching-video-laptop-looking-computer-screen-working-from-home-online_1258-199755.jpg" },
|
|
]}
|
|
cardTitle="Global Feedback"
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "Is the pricing negotiable?", content: "Yes, we prioritize transparent negotiation for all our premium hardware." },
|
|
{ id: "f2", title: "How do I order?", content: "Simply click 'Contact Seller' to open WhatsApp/Telegram for direct communication." },
|
|
{ id: "f3", title: "Do you ship globally?", content: "Yes, we ship premium tech gear to over 180 countries securely." },
|
|
]}
|
|
sideTitle="Frequently Asked Questions"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
tag="Contact"
|
|
background={{ variant: "plain" }}
|
|
title="Get in Touch"
|
|
description="Ready to upgrade your gear? Contact us for quotes and availability."
|
|
imageSrc="http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072234.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/futuristic-school-classroom-future-students_23-2150906368.jpg"
|
|
logoText="Zenith Laptops"
|
|
columns={[
|
|
{ title: "Shop", items: [{ label: "Laptops", href: "#products" }, { label: "Comparison", href: "#" }] },
|
|
{ title: "Support", items: [{ label: "Contact Us", href: "#contact" }, { label: "Help Center", href: "#" }] },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|