Merge version_1 into main #2
436
src/app/page.tsx
436
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Camera, MonitorPlay, Zap } from "lucide-react";
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
@@ -26,336 +27,125 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "How it works",
|
||||
id: "how-it-works",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
]}
|
||||
brandName="DualShot Recorder"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "How it works", id: "how-it-works" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
]}
|
||||
brandName="DualShot Recorder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="DualShot Recorder"
|
||||
description="Record from front and back camera at the same time. Experience seamless dual-capture technology for creators, vloggers, and enthusiasts."
|
||||
buttons={[
|
||||
{
|
||||
text: "Download on Play Store",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "Download on App Store",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg?_wi=1",
|
||||
imageAlt: "Hero Mockup 1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg?_wi=2",
|
||||
imageAlt: "Hero Mockup 2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg?_wi=3",
|
||||
imageAlt: "Hero Mockup 3",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg?_wi=4",
|
||||
imageAlt: "Hero Mockup 4",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg?_wi=5",
|
||||
imageAlt: "Hero Mockup 5",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg?_wi=6",
|
||||
imageAlt: "Hero Mockup 6",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="DualShot Recorder"
|
||||
description="Record from front and back camera at the same time. Experience seamless dual-capture technology for creators, vloggers, and enthusiasts."
|
||||
buttons={[
|
||||
{ text: "Download on Play Store", href: "#" },
|
||||
{ text: "Download on App Store", href: "#" },
|
||||
]}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg", imageAlt: "Hero Mockup 1" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg", imageAlt: "Hero Mockup 2" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg", imageAlt: "Hero Mockup 3" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg", imageAlt: "Hero Mockup 4" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg", imageAlt: "Hero Mockup 5" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg", imageAlt: "Hero Mockup 6" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Dual Recording",
|
||||
description: "Front and back camera, synced perfectly.",
|
||||
buttonIcon: "Camera",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/set-light-blue-retro-photography-labels_23-2147557536.jpg",
|
||||
},
|
||||
{
|
||||
title: "PiP Mode",
|
||||
description: "Customizable overlay frames for your content.",
|
||||
buttonIcon: "MonitorPlay",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/video-player-front-side-with-white-background_187299-40025.jpg",
|
||||
},
|
||||
{
|
||||
title: "HD Quality",
|
||||
description: "Up to 4K resolution support for all cameras.",
|
||||
buttonIcon: "Zap",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-blue-frame-logo_187299-46805.jpg",
|
||||
},
|
||||
]}
|
||||
title="Unmatched Features"
|
||||
description="Everything you need to capture perfect dual perspectives."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Dual Recording", description: "Front and back camera, synced perfectly.", buttonIcon: Camera, imageSrc: "http://img.b2bpic.net/free-vector/set-light-blue-retro-photography-labels_23-2147557536.jpg" },
|
||||
{ title: "PiP Mode", description: "Customizable overlay frames for your content.", buttonIcon: MonitorPlay, imageSrc: "http://img.b2bpic.net/free-photo/video-player-front-side-with-white-background_187299-40025.jpg" },
|
||||
{ title: "HD Quality", description: "Up to 4K resolution support for all cameras.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-blue-frame-logo_187299-46805.jpg" },
|
||||
]}
|
||||
title="Unmatched Features"
|
||||
description="Everything you need to capture perfect dual perspectives."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<MetricCardTen
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Open the app",
|
||||
subtitle: "Instant access",
|
||||
category: "Launch",
|
||||
value: "01",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Dual Recording",
|
||||
subtitle: "Start capturing",
|
||||
category: "Record",
|
||||
value: "02",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Save & Share",
|
||||
subtitle: "Instantly export",
|
||||
category: "Finalize",
|
||||
value: "03",
|
||||
},
|
||||
]}
|
||||
title="Get Started Easily"
|
||||
description="Quick setup to start creating content."
|
||||
/>
|
||||
</div>
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<MetricCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", title: "Open the app", subtitle: "Instant access", category: "Launch", value: "01" },
|
||||
{ id: "2", title: "Dual Recording", subtitle: "Start capturing", category: "Record", value: "02" },
|
||||
{ id: "3", title: "Save & Share", subtitle: "Instantly export", category: "Finalize", value: "03" },
|
||||
]}
|
||||
title="Get Started Easily"
|
||||
description="Quick setup to start creating content."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="screenshots" data-section="screenshots">
|
||||
<ProductCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "ss1",
|
||||
name: "Record View",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/mobile-screenshots-templates_1057-550.jpg",
|
||||
},
|
||||
{
|
||||
id: "ss2",
|
||||
name: "Share Menu",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-drinking-matcha-tea_23-2150163439.jpg",
|
||||
},
|
||||
{
|
||||
id: "ss3",
|
||||
name: "Advanced Settings",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-ui-kit-collection_23-2149191915.jpg",
|
||||
},
|
||||
{
|
||||
id: "ss4",
|
||||
name: "Recording Timer",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/clay-phone-16-pro-max_187299-45890.jpg",
|
||||
},
|
||||
{
|
||||
id: "ss5",
|
||||
name: "Media Gallery",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/communication-social-media-icons-smartphone-device_23-2150781041.jpg",
|
||||
},
|
||||
{
|
||||
id: "ss6",
|
||||
name: "Camera Setup",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/iris-recognition-system-3d-render-set_107791-17577.jpg",
|
||||
},
|
||||
]}
|
||||
title="App UI Previews"
|
||||
description="Clean, intuitive controls for ultimate recording."
|
||||
/>
|
||||
</div>
|
||||
<div id="screenshots" data-section="screenshots">
|
||||
<ProductCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "ss1", name: "Record View", price: "", imageSrc: "http://img.b2bpic.net/free-vector/mobile-screenshots-templates_1057-550.jpg" },
|
||||
{ id: "ss2", name: "Share Menu", price: "", imageSrc: "http://img.b2bpic.net/free-photo/man-drinking-matcha-tea_23-2150163439.jpg" },
|
||||
{ id: "ss3", name: "Advanced Settings", price: "", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-ui-kit-collection_23-2149191915.jpg" },
|
||||
{ id: "ss4", name: "Recording Timer", price: "", imageSrc: "http://img.b2bpic.net/free-photo/clay-phone-16-pro-max_187299-45890.jpg" },
|
||||
{ id: "ss5", name: "Media Gallery", price: "", imageSrc: "http://img.b2bpic.net/free-photo/communication-social-media-icons-smartphone-device_23-2150781041.jpg" },
|
||||
{ id: "ss6", name: "Camera Setup", price: "", imageSrc: "http://img.b2bpic.net/free-photo/iris-recognition-system-3d-render-set_107791-17577.jpg" },
|
||||
]}
|
||||
title="App UI Previews"
|
||||
description="Clean, intuitive controls for ultimate recording."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "free",
|
||||
badge: "Essential",
|
||||
price: "$0",
|
||||
subtitle: "Basic dual recording",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Standard HD",
|
||||
"Dual Capture",
|
||||
"Basic Tools",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Pro",
|
||||
price: "$9.99",
|
||||
subtitle: "Pro-level performance",
|
||||
buttons: [
|
||||
{
|
||||
text: "Upgrade",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"4K Support",
|
||||
"PiP Customization",
|
||||
"No Watermark",
|
||||
"Priority Export",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Choose Your Plan"
|
||||
description="Simple pricing for all creators."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "free", badge: "Essential", price: "$0", subtitle: "Basic dual recording", buttons: [{ text: "Get Started", href: "#" }], features: ["Standard HD", "Dual Capture", "Basic Tools"] },
|
||||
{ id: "pro", badge: "Pro", price: "$9.99", subtitle: "Pro-level performance", buttons: [{ text: "Upgrade", href: "#" }], features: ["4K Support", "PiP Customization", "No Watermark", "Priority Export"] },
|
||||
]}
|
||||
title="Choose Your Plan"
|
||||
description="Simple pricing for all creators."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Game Changer",
|
||||
quote: "Finally, a way to record reactions and gameplay simultaneously without a second camera.",
|
||||
name: "Sarah J.",
|
||||
role: "Vlogger",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-pensive-cellphone-user-scratching-beard_74855-3640.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Perfect!",
|
||||
quote: "The PiP overlay options are amazing for my tutorials.",
|
||||
name: "Mark D.",
|
||||
role: "Educator",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-developing-photos-darkroom-side-view_23-2149893807.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Easy Workflow",
|
||||
quote: "I save hours on editing now, it's so intuitive.",
|
||||
name: "Emma L.",
|
||||
role: "Influencer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glad-wet-guy-with-shining-perfect-smile-has-walk-rainy-weather-enjoys-favourite-track-earphones_273609-8617.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Professional Grade",
|
||||
quote: "The HD quality is crisp, best dual recorder I have used.",
|
||||
name: "David W.",
|
||||
role: "Filmmaker",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-teenager-using-laptop_23-2147777276.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Love the features",
|
||||
quote: "Simple, fast, and does exactly what it says.",
|
||||
name: "Julia P.",
|
||||
role: "User",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-stately-ginger-fellow-stylish-navy-t-shirt-smiling-showing-ok-sign-looking-camera-while-posing-blue-studio-background-human-facial-expressions-sincer_639032-2122.jpg",
|
||||
},
|
||||
]}
|
||||
title="What users say"
|
||||
description="Trusted by thousands of creators globally."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Game Changer", quote: "Finally, a way to record reactions and gameplay simultaneously without a second camera.", name: "Sarah J.", role: "Vlogger", imageSrc: "http://img.b2bpic.net/free-photo/positive-pensive-cellphone-user-scratching-beard_74855-3640.jpg" },
|
||||
{ id: "2", title: "Perfect!", quote: "The PiP overlay options are amazing for my tutorials.", name: "Mark D.", role: "Educator", imageSrc: "http://img.b2bpic.net/free-photo/woman-developing-photos-darkroom-side-view_23-2149893807.jpg" },
|
||||
{ id: "3", title: "Easy Workflow", quote: "I save hours on editing now, it's so intuitive.", name: "Emma L.", role: "Influencer", imageSrc: "http://img.b2bpic.net/free-photo/glad-wet-guy-with-shining-perfect-smile-has-walk-rainy-weather-enjoys-favourite-track-earphones_273609-8617.jpg" },
|
||||
{ id: "4", title: "Professional Grade", quote: "The HD quality is crisp, best dual recorder I have used.", name: "David W.", role: "Filmmaker", imageSrc: "http://img.b2bpic.net/free-photo/cute-teenager-using-laptop_23-2147777276.jpg" },
|
||||
{ id: "5", title: "Love the features", quote: "Simple, fast, and does exactly what it says.", name: "Julia P.", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-stately-ginger-fellow-stylish-navy-t-shirt-smiling-showing-ok-sign-looking-camera-while-posing-blue-studio-background-human-facial-expressions-sincer_639032-2122.jpg" },
|
||||
]}
|
||||
title="What users say"
|
||||
description="Trusted by thousands of creators globally."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "YouTube",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 DualShot Recorder. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }] },
|
||||
{ title: "Social", items: [{ label: "Twitter", href: "#" }, { label: "Instagram", href: "#" }, { label: "YouTube", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Privacy", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© 2024 DualShot Recorder. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user