134 lines
5.5 KiB
TypeScript
134 lines
5.5 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import { Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Al Arabia Electronics"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="AL ARABIA"
|
|
description="Precision engineering meets future-ready design. Experience the high-tech edge of premium electronics."
|
|
buttons={[{ text: "View Collection", href: "#products" }]}
|
|
slides={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722691.jpg?_wi=1", imageAlt: "Tech device" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-tablet-stylus-earbuds_58702-17251.jpg", imageAlt: "Tech setup" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
title="Engineered for Excellence"
|
|
description="We combine advanced hardware with seamless integration to deliver superior electronic solutions for every user."
|
|
metrics={[
|
|
{ value: "2M+", title: "Devices Delivered" },
|
|
{ value: "98%", title: "Satisfied Tech Enthusiasts" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/laptop-background-concept-internet-navigating_1194-617369.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="blur-reveal"
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
title="High-Performance Gear"
|
|
description="Industry-leading hardware designed for those who demand the best."
|
|
products={[
|
|
{ id: "1", brand: "Nexus", name: "Pro Phone", price: "$999", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-scanning-qr-code-with-phone_23-2149357874.jpg" },
|
|
{ id: "2", brand: "Pulse", name: "Audio Pro", price: "$299", rating: 4, reviewCount: "800", imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722652.jpg" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
animationType="blur-reveal"
|
|
textboxLayout="split"
|
|
title="Select Your Access Level"
|
|
description="Choose the plan that powers your tech lifestyle."
|
|
plans={[
|
|
{
|
|
id: "pro", tag: "Performance", price: "$49", period: "/mo", description: "Full access to high-tier hardware updates and priority support.", featuresTitle: "Core Benefits", features: ["Priority Shipping", "Early Access", "24/7 Tech Concierge"]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="blur-reveal"
|
|
textboxLayout="split"
|
|
title="Validated by Experts"
|
|
description="Trusted by the global tech community."
|
|
testimonials={[
|
|
{ id: "1", name: "Ahmad R.", handle: "@ahmad_tech", testimonial: "The performance is unmatched. Truly high-tech." },
|
|
{ id: "2", name: "Sara K.", handle: "@sara_dev", testimonial: "Best hardware experience I've had in years." }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
animationType="blur-reveal"
|
|
faqs={[
|
|
{ id: "1", title: "Technical Support", content: "24/7 dedicated support for all premium hardware." },
|
|
{ id: "2", title: "International Shipping", content: "We ship globally with high-security logistics." }
|
|
]}
|
|
ctaTitle="Connect with Al Arabia"
|
|
ctaDescription="Speak with an expert about your specific technical needs."
|
|
ctaButton={{ text: "Get Started" }}
|
|
ctaIcon={Mail}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{ title: "Catalog", items: [{ label: "Smartphones", href: "#" }, { label: "Audio", href: "#" }] },
|
|
{ title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Warranty", href: "#" }] }
|
|
]}
|
|
copyrightText="© 2025 Al Arabia Electronics - High-Tech Division"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |