Merge version_2 into main #1
294
src/app/page.tsx
294
src/app/page.tsx
@@ -2,14 +2,14 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Award } from "lucide-react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Camera, Film, Users, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -17,213 +17,97 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="blurBottom"
|
||||
background="fluid"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="TravelLens"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="TravelLens"
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Capture the Spirit of Your Travels."
|
||||
description="We specialize in high-end travel videos, cinematic reels, and visual storytelling that brings your journey to life with professional editing and expert color grading."
|
||||
tag="Award Winning Reel Creators"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Your Project",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/cinematic-wide-angle-shot-of-a-majestic--1774602820443-cb381503.png",
|
||||
imageAlt: "Epic travel landscape",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/close-up-shot-of-a-traveller-filming-wit-1774602820598-c194f911.png",
|
||||
imageAlt: "Filmmaker at work",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Trusted by 50+ Global Explorers"
|
||||
tagIcon={Award}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
title="Cinematic Travel Reel Creator"
|
||||
description="Turn your raw vacation footage into professional-grade travel films and high-impact social media reels."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Professional Video Editing"
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/cinematic-wide-angle-shot-of-a-majestic--1774602820443-cb381503.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "r1",
|
||||
title: "Bali Escape",
|
||||
description: "Cinematic beach and forest exploration.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/stunning-travel-reel-thumbnail-of-a-sere-1774602822647-320bbfeb.png",
|
||||
},
|
||||
{
|
||||
id: "r2",
|
||||
title: "Surf Portugal",
|
||||
description: "High-energy adventure and water sports.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/action-reel-thumbnail-of-a-surfer-riding-1774602823981-586107b8.png",
|
||||
},
|
||||
{
|
||||
id: "r3",
|
||||
title: "Jungle Trekking",
|
||||
description: "Atmospheric wildlife and nature journey.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/lush-green-jungle-trekking-cinematic-sho-1774602822519-b2b3a97e.png",
|
||||
},
|
||||
]}
|
||||
title="Professional Reel Portfolio"
|
||||
description="Selected travel highlights that demonstrate our unique editing style and visual narrative mastery."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
title="Our Editing Services"
|
||||
description="Expertly crafted visual narratives for every destination."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ icon: Camera, title: "Cinematic Color Grading", description: "Transforming raw footage into professional color palettes." },
|
||||
{ icon: Film, title: "Travel Reels", description: "High-energy short-form content optimized for social media." },
|
||||
{ icon: Zap, title: "Rhythm Sync Editing", description: "Edits perfectly synced to the beat of your soundtrack." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Visual Storytelling that Connects.",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/cinematic-shot-of-a-travel-filmmaker-sit-1774602821072-cbfbc1fc.png",
|
||||
alt: "Filmmaker at desk",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
title="Filmmaking with Experience"
|
||||
description="We blend technical expertise with artistic storytelling to capture the heartbeat of your travels."
|
||||
metrics={[
|
||||
{ value: "500+", title: "Projects Completed" },
|
||||
{ value: "50+", title: "Countries Filmed" },
|
||||
{ value: "10M+", title: "Total Reel Views" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/a-blurry-artistic-shot-of-a-mountain-vie-1774602821216-75ae0080.png",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark D.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/an-airy-shot-of-a-hot-air-balloon-over-c-1774602824157-52ba8b81.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena R.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/a-wide-cinematic-shot-of-a-snowy-alpine--1774602821626-8fc4b790.png",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/abstract-bokeh-light-effect-on-a-busy-st-1774602821932-26c1918c.png",
|
||||
},
|
||||
]}
|
||||
cardTitle="Client Journey Stories"
|
||||
cardTag="Stories of Success"
|
||||
cardAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="Client Highlights"
|
||||
description="See how we turned their journeys into visual memories."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex P.", date: "2024-05", title: "Bali Honeymoon Edit", quote: "The edits were stunning. Captured every moment perfectly.", tag: "Cinematic", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/a-blurry-artistic-shot-of-a-mountain-vie-1774602821216-75ae0080.png" },
|
||||
{ id: "2", name: "Jordan W.", date: "2024-06", title: "Portugal Surf Reel", quote: "Incredible rhythm syncing. Our travel reels went viral.", tag: "Short-Form", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/an-airy-shot-of-a-hot-air-balloon-over-c-1774602824157-52ba8b81.png" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Ready to Tell Your Story?"
|
||||
description="Send us your project details and let's craft something cinematic."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Describe your project or trip...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWRIQvdHmD0rRuY3PmHWPFSS1A/cinematic-shot-of-a-travel-filmmaker-sit-1774602821072-cbfbc1fc.png"
|
||||
imageAlt="Professional studio setup"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
title="Let's Create Your Next Travel Film"
|
||||
description="Tell us about your trip and the style you're looking for."
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttonText="Get a Quote"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Work",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Guides",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 TravelLens Productions"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="TravelLens"
|
||||
copyrightText="© 2024 TravelLens. All rights reserved."
|
||||
socialLinks={[{ icon: Users, href: "#", ariaLabel: "Social Media" }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user