Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f0fce1ffe8 | |||
| c0c955f8cb | |||
| 97793bfab7 | |||
| 6a5fdfa44b |
390
src/app/page.tsx
390
src/app/page.tsx
@@ -2,299 +2,133 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { ShieldCheck } from "lucide-react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { Zap, Target, Award } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="grid"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Topmovers"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="NOIR"
|
||||
navItems={[
|
||||
{ name: "Collection", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Process", id: "features" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-static-grid",
|
||||
}}
|
||||
title="Seamless Relocation, Every Time."
|
||||
description="Premium moving services tailored to your specific needs. Experience a stress-free transition with our professional team."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-getting-ready-his-new-home-move_23-2149094133.jpg?_wi=1",
|
||||
imageAlt: "moving trucks professional loading",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delivery-person-getting-parcel-out-delivery_23-2149371919.jpg?_wi=1",
|
||||
imageAlt: "movers handling boxes carefully",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/diverse-warehouse-managers-packing-parcels_482257-90411.jpg?_wi=1",
|
||||
imageAlt: "moving crew working together",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-delivery-man-with-package_23-2148889999.jpg?_wi=1",
|
||||
imageAlt: "truck loading moving services",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/courier-doing-jobs-logistics_23-2149229210.jpg?_wi=1",
|
||||
imageAlt: "moving boxes inside truck",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laborers-preparing-warehouse-shipping_482257-75296.jpg",
|
||||
imageAlt: "moving service team portrait",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
title="Define the Shadow."
|
||||
description="Premium streetwear crafted for the modern edge. Uncompromising quality meets a dark, nocturnal aesthetic."
|
||||
tag="New Season Available"
|
||||
rating={5}
|
||||
ratingText="Rated 5.0 by our community"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/black-hoodie-mockup-men-wearing-streetwear_23-2149463996.jpg", imageAlt: "Black Hoodie Streetwear" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-man-wearing-black-leather-jacket_144627-24792.jpg", imageAlt: "Edgy Leather Style" }
|
||||
]}
|
||||
buttons={[{ text: "Explore Collection" }]}
|
||||
background={{ variant: "plain" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Commitment"
|
||||
title="We Move Your World With Care."
|
||||
description="With years of excellence in logistics, we ensure that your belongings arrive exactly how they left—perfectly intact."
|
||||
subdescription="From local moves to complex relocations, Topmovers provides bespoke solutions for every client."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/person-presenting-their-job-resignation_23-2149445185.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
icon={ShieldCheck}
|
||||
imageAlt="moving consultant helping family"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
title="The Essence of Noir"
|
||||
description="Born from the city streets, Noir is a brand for those who find power in the shadows. We prioritize heavy-weight textiles, precision cuts, and a monochromatic palette that stands the test of time."
|
||||
tag="Brand Identity"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-man-wearing-black-oversized-t-shirt_23-2149463994.jpg"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Residential Moving",
|
||||
description: "Safe transport for your home items.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home-together-african-american-couple-with-cardboard-boxes_1157-40330.jpg",
|
||||
},
|
||||
{
|
||||
title: "Corporate Relocation",
|
||||
description: "Minimize downtime for your business.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-working-together-warehouse_23-2149128291.jpg",
|
||||
},
|
||||
{
|
||||
title: "Storage Solutions",
|
||||
description: "Secure space for extra belongings.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interracial-couple-getting-ready-move_23-2149094080.jpg",
|
||||
},
|
||||
]}
|
||||
title="Comprehensive Moving Services"
|
||||
description="Everything you need for a successful transition under one roof."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
title="Our Craft"
|
||||
description="Details that define a premium garment."
|
||||
animationType="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Heavyweight Cotton", description: "High density, durable fabrics.", icon: Zap, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-fabric-texture_23-2148782354.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/cotton-fabric-rolls_23-2148782355.jpg" }] },
|
||||
{ title: "Precision Cuts", description: "Tailored for an oversized, architectural fit.", icon: Target, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-working-studio_23-2148782356.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/pattern-making-fashion_23-2148782357.jpg" }] },
|
||||
{ title: "Ethical Sourcing", description: "Crafted with respect for the artisan.", icon: Award, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/workshop-artisans_23-2148782358.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/ethical-fashion-label_23-2148782359.jpg" }] }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "15k+",
|
||||
description: "Moves Completed",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "99.8%",
|
||||
description: "Safety Rate",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "24/7",
|
||||
description: "Support Available",
|
||||
},
|
||||
]}
|
||||
title="Proven Performance"
|
||||
description="Our success is measured by the satisfaction of our clients and the safety of their goods."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
title="Impact Metrics"
|
||||
description="Stats behind the black."
|
||||
textboxLayout="default"
|
||||
animationType="depth-3d"
|
||||
metrics={[
|
||||
{ id: "1", value: "100%", title: "Midnight Aesthetics", items: ["Black-on-black", "Dark grey accents", "Shadow finish"] },
|
||||
{ id: "2", value: "50k", title: "Pieces Sold", items: ["Global reach", "Cult following", "Limited editions"] }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
date: "Jan 2024",
|
||||
title: "Great Service",
|
||||
quote: "Topmovers made my relocation simple and stress-free.",
|
||||
tag: "Relocation",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-getting-ready-his-new-home-move_23-2149094133.jpg?_wi=2",
|
||||
imageAlt: "happy home owner portrait",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "John Doe",
|
||||
date: "Feb 2024",
|
||||
title: "Professional Team",
|
||||
quote: "Very punctual and extremely careful with fragile items.",
|
||||
tag: "Residential",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-camera-office_482257-119300.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delivery-person-getting-parcel-out-delivery_23-2149371919.jpg?_wi=2",
|
||||
imageAlt: "happy home owner portrait",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Ross",
|
||||
date: "Mar 2024",
|
||||
title: "Highly Recommend",
|
||||
quote: "Efficient planning made a massive difference to our move.",
|
||||
tag: "Corporate",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-young-man-sitting-armchair-against-grey-wall_23-2148130370.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/diverse-warehouse-managers-packing-parcels_482257-90411.jpg?_wi=2",
|
||||
imageAlt: "happy home owner portrait",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Mike Smith",
|
||||
date: "Apr 2024",
|
||||
title: "Excellent Care",
|
||||
quote: "The team treated our furniture like it was their own.",
|
||||
tag: "Residential",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/displeased-businessman-showing-middle-finger-toward-camera-after-losing-his-job-office_637285-6833.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-delivery-man-with-package_23-2148889999.jpg?_wi=2",
|
||||
imageAlt: "happy home owner portrait",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Anna Wright",
|
||||
date: "May 2024",
|
||||
title: "Seamless Process",
|
||||
quote: "Five star service from start to finish!",
|
||||
tag: "Relocation",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/businessman-showing-thumbs-up-sign_93675-133117.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/courier-doing-jobs-logistics_23-2149229210.jpg?_wi=2",
|
||||
imageAlt: "happy home owner portrait",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Stories from families and businesses who trust Topmovers."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="Voices of Noir"
|
||||
description="See how our community wears the darkness."
|
||||
textboxLayout="split-description"
|
||||
animationType="blur-reveal"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex D.", role: "Stylist", testimonial: "The fit and feel of the materials is unparalleled. Finally, clothing that matches my vibe." },
|
||||
{ id: "2", name: "Maya K.", role: "Creative", testimonial: "Noir isn't just clothing; it's a statement. Clean, sharp, and perfectly edgy." }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-static-grid",
|
||||
}}
|
||||
tag="Get Started"
|
||||
title="Ready to move?"
|
||||
description="Enter your email to receive a customized moving consultation."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Join The Order"
|
||||
title="Early Access"
|
||||
description="Sign up to be the first to know about our exclusive limited-edition drops."
|
||||
buttons={[{ text: "Join Waitlist" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Residential",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Corporate",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Topmovers"
|
||||
copyrightText="© 2025 Topmovers. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="NOIR"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Hoodies", href: "#" }, { label: "T-Shirts", href: "#" }] },
|
||||
{ title: "Noir", items: [{ label: "Our Vision", href: "#about" }, { label: "Stockists", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f4ef;
|
||||
--card: #dad6cd;
|
||||
--foreground: #2a2928;
|
||||
--primary-cta: #2a2928;
|
||||
--background: #000000;
|
||||
--card: #0a0a0a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ffffff;
|
||||
--primary-cta-text: #f5f4ef;
|
||||
--secondary-cta: #ecebea;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #2a2928;
|
||||
--accent: #ffffff;
|
||||
--background-accent: #c6b180;
|
||||
--accent: #535353;
|
||||
--background-accent: #262626;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user