Update src/app/page.tsx

This commit is contained in:
2026-05-14 10:51:49 +00:00
parent 05cdeeb450
commit c4c2cfcf73

View File

@@ -17,406 +17,172 @@ import { Circle, Settings, Shield } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="glass-depth"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="light"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="glass-depth"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Products",
id: "products",
},
{
name: "Services",
id: "services",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Qamreen"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Products", id: "products" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" }
]}
brandName="Qamreen"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "plain",
}}
title="Qamreen Tires: Performance Starts From The Road"
description="Experience the pinnacle of automotive traction and safety with our curated selection of world-class tire brands and precision wheel services."
tag="PREMIUM AUTOMOTIVE SOLUTIONS"
buttons={[
{
text: "Explore Products",
href: "#products",
},
{
text: "Contact Us",
href: "#contact",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139123.jpg?_wi=1",
imageAlt: "Rotating premium wheel",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/blond-female-leather-motorcycle-uniform-lying-two-car-wheels_613910-8099.jpg",
imageAlt: "Cinematic tire display",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-cinema-film-reel_23-2151024873.jpg",
imageAlt: "3d cinema film reel",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/blond-female-leather-motorcycle-uniform-lying-two-car-wheels_613910-20217.jpg",
imageAlt: "Blond female in leather motorcycle uniform lying between two car wheels.",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/car-mechanic-wearing-white-uniform-stand-holding-wrench_1150-16602.jpg",
imageAlt: "Car mechanic wearing a white uniform stand holding wrench",
},
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by 5,000+ drivers"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{ variant: "plain" }}
title="Qamreen Tires: Performance Starts From The Road"
description="Experience the pinnacle of automotive traction and safety with our curated selection of world-class tire brands and precision wheel services."
tag="PREMIUM AUTOMOTIVE SOLUTIONS"
buttons={[{ text: "Explore Products", href: "#products" }, { text: "Contact Us", href: "#contact" }]}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139123.jpg", imageAlt: "Rotating premium wheel" },
{ imageSrc: "http://img.b2bpic.net/free-photo/blond-female-leather-motorcycle-uniform-lying-two-car-wheels_613910-8099.jpg", imageAlt: "Cinematic tire display" }
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by 5,000+ drivers"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Engineering Excellence & Durability"
description="With over 20 years of expertise, Qamreen Tires defines reliability in the automotive sector. We combine cutting-edge technology with premium craftsmanship to ensure your journey is safe, efficient, and performance-oriented."
imageSrc="http://img.b2bpic.net/free-photo/minimalistic-home-workspace-design_23-2148991453.jpg?_wi=1"
imageAlt="Qamreen garage workshop"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Engineering Excellence & Durability"
description="With over 20 years of expertise, Qamreen Tires defines reliability in the automotive sector. We combine cutting-edge technology with premium craftsmanship to ensure your journey is safe, efficient, and performance-oriented."
imageSrc="http://img.b2bpic.net/free-photo/minimalistic-home-workspace-design_23-2148991453.jpg"
imageAlt="Qamreen garage workshop"
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="split-description"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Performance Sport",
price: "From $250",
variant: "Racing",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fabric-texture_23-2151872088.jpg?_wi=1",
},
{
id: "p2",
name: "Rugged SUV All-Terrain",
price: "From $320",
variant: "Off-Road",
imageSrc: "http://img.b2bpic.net/free-photo/red-painted-car-tires-road_23-2148321937.jpg",
},
{
id: "p3",
name: "Heavy Duty Truck",
price: "From $450",
variant: "Commercial",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-glasses-abstract-table_23-2149974229.jpg",
},
{
id: "p4",
name: "Economy Efficiency",
price: "From $180",
variant: "City",
imageSrc: "http://img.b2bpic.net/free-photo/black-white-view-off-road-vehicle-driven-rough-terrain_23-2151476186.jpg",
},
{
id: "p5",
name: "Luxury Touring",
price: "From $290",
variant: "Comfort",
imageSrc: "http://img.b2bpic.net/free-photo/reflection-sky_181624-9195.jpg",
},
{
id: "p6",
name: "All-Season Premium",
price: "From $220",
variant: "Versatile",
imageSrc: "http://img.b2bpic.net/free-photo/fitness-equipment_53876-31257.jpg",
},
]}
title="Premium Tire Collections"
description="Precision engineered tires for every terrain and driving style."
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="split-description"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Performance Sport", price: "From $250", variant: "Racing", imageSrc: "http://img.b2bpic.net/free-photo/close-up-fabric-texture_23-2151872088.jpg" },
{ id: "p2", name: "Rugged SUV All-Terrain", price: "From $320", variant: "Off-Road", imageSrc: "http://img.b2bpic.net/free-photo/red-painted-car-tires-road_23-2148321937.jpg" },
{ id: "p3", name: "Heavy Duty Truck", price: "From $450", variant: "Commercial", imageSrc: "http://img.b2bpic.net/free-photo/top-view-glasses-abstract-table_23-2149974229.jpg" }
]}
title="Premium Tire Collections"
description="Precision engineered tires for every terrain and driving style."
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Precision Alignment",
description: "Ensure your vehicle travels straight and tires wear evenly.",
icon: Settings,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-working-workshop_1170-2528.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-standing-beside-tool-kit-repair-garage_1170-1488.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139123.jpg?_wi=2",
imageAlt: "wheel balancing machine professional",
},
{
title: "Dynamic Balancing",
description: "Eliminate vibrations for a smooth, stable driving experience.",
icon: Circle,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-redhead-worker-with-haircut-holding-electric-screwdriver-working-repair-shop_613910-19681.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-working-with-car-tire-auto-repair-shop_637285-7618.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/minimalistic-home-workspace-design_23-2148991453.jpg?_wi=2",
imageAlt: "wheel balancing machine professional",
},
{
title: "Safety Inspection",
description: "In-depth tire health checks for total peace of mind.",
icon: Shield,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/shelf-with-tools-shiny-car-little-girl-hat-with-big-wrench-hands_613910-17048.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/professional-female-auto-mechanic-is-fixing-broken-car-auto-workshop-near-window_613910-17132.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fabric-texture_23-2151872088.jpg?_wi=2",
imageAlt: "wheel balancing machine professional",
},
]}
title="Expert Automotive Solutions"
description="Comprehensive tire and wheel services delivered with precision engineering."
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Precision Alignment",
description: "Ensure your vehicle travels straight and tires wear evenly.",
icon: Settings,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/mechanic-working-workshop_1170-2528.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-standing-beside-tool-kit-repair-garage_1170-1488.jpg" }
]
},
{
title: "Dynamic Balancing",
description: "Eliminate vibrations for a smooth, stable driving experience.",
icon: Circle,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-redhead-worker-with-haircut-holding-electric-screwdriver-working-repair-shop_613910-19681.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-working-with-car-tire-auto-repair-shop_637285-7618.jpg" }
]
}
]}
title="Expert Automotive Solutions"
description="Comprehensive tire and wheel services delivered with precision engineering."
/>
</div>
<div id="brands" data-section="brands">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Pirelli",
"Michelin",
"Bridgestone",
"Goodyear",
"Continental",
"Yokohama",
"Hankook",
]}
title="Global Partner Brands"
description="We partner with the world's most trusted manufacturers."
/>
</div>
<div id="brands" data-section="brands">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["Pirelli", "Michelin", "Bridgestone", "Goodyear", "Continental", "Yokohama", "Hankook"]}
title="Global Partner Brands"
description="We partner with the world's most trusted manufacturers."
/>
</div>
<div id="gallery" data-section="gallery">
<MetricCardSeven
animationType="depth-3d"
textboxLayout="inline-image"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "20+",
title: "Years of Expertise",
items: [
"Certified experts",
"Proven track record",
],
},
{
id: "m2",
value: "5k+",
title: "Happy Customers",
items: [
"Client satisfaction",
"Long-term partnerships",
],
},
{
id: "m3",
value: "100%",
title: "Quality Assured",
items: [
"Warranty included",
"Premium authentic products",
],
},
]}
title="The Qamreen Standard"
description="Excellence defined through performance."
/>
</div>
<div id="gallery" data-section="gallery">
<MetricCardSeven
animationType="depth-3d"
textboxLayout="inline-image"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "20+", title: "Years of Expertise", items: ["Certified experts", "Proven track record"] },
{ id: "m2", value: "5k+", title: "Happy Customers", items: ["Client satisfaction", "Long-term partnerships"] },
{ id: "m3", value: "100%", title: "Quality Assured", items: ["Warranty included", "Premium authentic products"] }
]}
title="The Qamreen Standard"
description="Excellence defined through performance."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Johnson",
handle: "@sarahj",
testimonial: "The best alignment service in the region. Smooth drive ever since.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-car-repairman-greeting-with-male-customer-auto-repair-shop_637285-2425.jpg",
},
{
id: "2",
name: "Michael Chen",
handle: "@mchen",
testimonial: "Authentic premium tires, great advice, and quick installation.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/people-library-reading-learning-from-books_23-2150293552.jpg",
},
{
id: "3",
name: "Emily Rodriguez",
handle: "@erod",
testimonial: "Knowledgeable team that truly cares about vehicle safety.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-black-shirt-posing-white-background-high-quality-photo_114579-61017.jpg",
},
{
id: "4",
name: "David Kim",
handle: "@dkim",
testimonial: "Outstanding customer service and top-tier product range.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/expert-shows-client-car-checkup-steps_482257-75509.jpg",
},
{
id: "5",
name: "Alex Smith",
handle: "@alexs",
testimonial: "Efficient, professional, and very competitive pricing.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-handsome-stylish-redhead-biker-black-leather-jacket-holds-motorcycle-helmet-posing-studio-isolated-dark-background_613910-19244.jpg",
},
]}
showRating={true}
title="Client Success Stories"
description="Why drivers trust Qamreen with their vehicle's performance."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
showRating={true}
testimonials={[
{ id: "1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "The best alignment service in the region. Smooth drive ever since.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-car-repairman-greeting-with-male-customer-auto-repair-shop_637285-2425.jpg" },
{ id: "2", name: "Michael Chen", handle: "@mchen", testimonial: "Authentic premium tires, great advice, and quick installation.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/people-library-reading-learning-from-books_23-2150293552.jpg" }
]}
title="Client Success Stories"
description="Why drivers trust Qamreen with their vehicle's performance."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Request a Quote"
description="Reach out to our expert team for inquiries or service bookings."
inputs={[
{
name: "fullName",
type: "text",
placeholder: "Your Full Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
},
{
name: "carModel",
type: "text",
placeholder: "Vehicle Model",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Service required or message...",
rows: 4,
}}
imageSrc="http://img.b2bpic.net/free-photo/young-black-car-mechanic-using-computer-with-his-manager-auto-repair-shop_637285-4243.jpg"
imageAlt="Qamreen consultation office"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Request a Quote"
description="Reach out to our expert team for inquiries or service bookings."
inputs={[
{ name: "fullName", type: "text", placeholder: "Your Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "carModel", type: "text", placeholder: "Vehicle Model", required: true }
]}
textarea={{ name: "message", placeholder: "Service required or message...", rows: 4 }}
imageSrc="http://img.b2bpic.net/free-photo/young-black-car-mechanic-using-computer-with-his-manager-auto-repair-shop_637285-4243.jpg"
imageAlt="Qamreen consultation office"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Services",
items: [
{
label: "Installation",
href: "#services",
},
{
label: "Alignment",
href: "#services",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
bottomLeftText="© 2024 Qamreen Trading Co. All rights reserved."
bottomRightText="Driven by Quality."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
{ title: "Services", items: [{ label: "Installation", href: "#services" }, { label: "Alignment", href: "#services" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
]}
bottomLeftText="© 2024 Qamreen Trading Co. All rights reserved."
bottomRightText="Driven by Quality."
/>
</div>
</ReactLenis>
</ThemeProvider>
);