Merge version_2 into main #2
325
src/app/page.tsx
325
src/app/page.tsx
@@ -4,12 +4,12 @@ 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 HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
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() {
|
||||
@@ -20,272 +20,101 @@ export default function LandingPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
background="grid"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
<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">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Innovation Meets Elegance."
|
||||
description="Discover the latest in premium technology at Al Arabia Electronics. Crafted for the modern enthusiast."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Explore",
|
||||
href: "#about",
|
||||
},
|
||||
<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" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746579.jpg?_wi=1"
|
||||
imageAlt="Modern electronic showroom"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Redefining ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/young-business-woman-talking-phone-cafe_1303-27363.jpg",
|
||||
alt: "Gadgets",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " Future Tech",
|
||||
},
|
||||
<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">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
<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",
|
||||
name: "Wireless Headset",
|
||||
price: "$299",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722691.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Pro Smartphone",
|
||||
price: "$999",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-scanning-qr-code-with-phone_23-2149357874.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Thin Tablet",
|
||||
price: "$699",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-tablet-stylus-earbuds_58702-17251.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Smart Watch",
|
||||
price: "$399",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722652.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Performance Laptop",
|
||||
price: "$1499",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-background-concept-internet-navigating_1194-617369.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Wireless Buds",
|
||||
price: "$199",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-wireless-earphones-with-case-displayed-round-podium-with-soft-shadows_23-2150808020.jpg",
|
||||
},
|
||||
{ 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" },
|
||||
]}
|
||||
title="Top Picks"
|
||||
description="Our curated selection of premium electronics."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
<PricingCardFive
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
title="Select Your Access Level"
|
||||
description="Choose the plan that powers your tech lifestyle."
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
title: "Essential",
|
||||
price: "$0",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Standard Support",
|
||||
"Newsletter",
|
||||
],
|
||||
button: {
|
||||
text: "Get Started",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746579.jpg?_wi=2",
|
||||
imageAlt: "modern electronics retail store",
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
title: "Tech Pro",
|
||||
price: "$29",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Priority Support",
|
||||
"Advanced Gadget Access",
|
||||
"Monthly Discounts",
|
||||
],
|
||||
button: {
|
||||
text: "Upgrade",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-talking-phone-cafe_1303-27363.jpg",
|
||||
imageAlt: "sleek tech gadgets on table",
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
title: "Premium",
|
||||
price: "$99",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Personal Consultant",
|
||||
"VIP Priority",
|
||||
"Free Global Shipping",
|
||||
],
|
||||
button: {
|
||||
text: "Contact Us",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722691.jpg?_wi=2",
|
||||
imageAlt: "wireless headset product shot studio",
|
||||
},
|
||||
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"]
|
||||
}
|
||||
]}
|
||||
title="Membership Plans"
|
||||
description="Get exclusive access to premium support and discounts."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
<TestimonialCardSix
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
title="Validated by Experts"
|
||||
description="Trusted by the global tech community."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Ahmad R.",
|
||||
role: "Designer",
|
||||
company: "TechHub",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1532.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sara K.",
|
||||
role: "Developer",
|
||||
company: "Innovators",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-3693.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Khalid S.",
|
||||
role: "CEO",
|
||||
company: "Future",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-cafe-showing-tablet-screen_23-2147826875.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Layla M.",
|
||||
role: "Consultant",
|
||||
company: "Creative",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-5687.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Omar F.",
|
||||
role: "Engineer",
|
||||
company: "Solutions",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419464.jpg",
|
||||
},
|
||||
{ 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." }
|
||||
]}
|
||||
title="Loved by Tech Enthusiasts"
|
||||
description="See what our customers have to say."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
animationType="blur-reveal"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What is the warranty policy?",
|
||||
content: "All devices come with a 2-year warranty.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you offer shipping?",
|
||||
content: "Yes, we ship globally within 3-5 days.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I return products?",
|
||||
content: "Returns are accepted within 30 days of purchase.",
|
||||
},
|
||||
{ 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="Need Assistance?"
|
||||
ctaDescription="Get in touch with our experts today."
|
||||
ctaButton={{
|
||||
text: "Email Us",
|
||||
href: "mailto:info@alarabia.com",
|
||||
}}
|
||||
ctaTitle="Connect with Al Arabia"
|
||||
ctaDescription="Speak with an expert about your specific technical needs."
|
||||
ctaButton={{ text: "Get Started" }}
|
||||
ctaIcon={Mail}
|
||||
/>
|
||||
</div>
|
||||
@@ -293,37 +122,13 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "All Products",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Catalog", items: [{ label: "Smartphones", href: "#" }, { label: "Audio", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Warranty", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2024 Al Arabia Electronics"
|
||||
copyrightText="© 2025 Al Arabia Electronics - High-Tech Division"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -11,14 +11,14 @@
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #cee7ff;
|
||||
--primary-cta: #1f7cff;
|
||||
--primary-cta-text: #000000;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta: #0a0a0a;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #535353;
|
||||
--background-accent: #CEE7FF;
|
||||
--accent: #737373;
|
||||
--background-accent: #1f7cff;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user