Merge version_1 into main #2
327
src/app/page.tsx
327
src/app/page.tsx
@@ -33,21 +33,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
name: "Home", id: "home"},
|
||||
{
|
||||
name: "Library",
|
||||
id: "library",
|
||||
},
|
||||
name: "Library", id: "library"},
|
||||
{
|
||||
name: "Plans",
|
||||
id: "plans",
|
||||
},
|
||||
name: "Plans", id: "plans"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="CineClip"
|
||||
/>
|
||||
@@ -56,104 +48,41 @@ export default function LandingPage() {
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Unmatched Cinematic Moments"
|
||||
description="Discover the most iconic movie and anime clips curated for creators, fans, and dreamers."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cwrnhc&_wi=1",
|
||||
imageAlt: "movie film cinema dark aesthetic",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f5wvou&_wi=1",
|
||||
imageAlt: "person watching video tablet cinematic",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mc491h&_wi=1",
|
||||
imageAlt: "action anime montage vibrant colors",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2b4cs5",
|
||||
imageAlt: "cinematic bokeh flares black background",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9gv2lx",
|
||||
imageAlt: "anime eye close up detailed",
|
||||
},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cwrnhc", imageAlt: "movie film cinema dark aesthetic" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f5wvou", imageAlt: "person watching video tablet cinematic" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mc491h", imageAlt: "action anime montage vibrant colors" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2b4cs5", imageAlt: "cinematic bokeh flares black background" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9gv2lx", imageAlt: "anime eye close up detailed" }
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g9oi4a",
|
||||
imageAlt: "clapperboard film studio lighting",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2nhymc",
|
||||
imageAlt: "action anime montage vibrant colors",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cc85w4",
|
||||
imageAlt: "cinematic bokeh flares black background",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rejzxw",
|
||||
imageAlt: "anime eye close up detailed",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4kjrul",
|
||||
imageAlt: "clapperboard film studio lighting",
|
||||
},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g9oi4a", imageAlt: "clapperboard film studio lighting" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2nhymc", imageAlt: "action anime montage vibrant colors" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cc85w4", imageAlt: "cinematic bokeh flares black background" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rejzxw", imageAlt: "anime eye close up detailed" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4kjrul", imageAlt: "clapperboard film studio lighting" }
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Exploring",
|
||||
href: "#library",
|
||||
},
|
||||
text: "Start Exploring", href: "#library"},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4pt9n2",
|
||||
alt: "professional male user portrait",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s439z1",
|
||||
alt: "professional female user portrait",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fkkmq0",
|
||||
alt: "young man casual portrait",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rehgw9",
|
||||
alt: "creative woman professional avatar",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9whau7",
|
||||
alt: "tech enthusiast man portrait",
|
||||
},
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4pt9n2", alt: "professional male user portrait" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s439z1", alt: "professional female user portrait" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fkkmq0", alt: "young man casual portrait" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rehgw9", alt: "creative woman professional avatar" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9whau7", alt: "tech enthusiast man portrait" }
|
||||
]}
|
||||
avatarText="Trusted by 20k+ creators"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Ultra HD",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Royalty Free",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "4K Quality",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fast Export",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Pro-Tier",
|
||||
},
|
||||
{ type: "text", text: "Ultra HD" },
|
||||
{ type: "text", text: "Royalty Free" },
|
||||
{ type: "text", text: "4K Quality" },
|
||||
{ type: "text", text: "Fast Export" },
|
||||
{ type: "text", text: "Pro-Tier" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -175,60 +104,12 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Cinema",
|
||||
name: "Classic Drama Series",
|
||||
price: "Free",
|
||||
rating: 5,
|
||||
reviewCount: "1.2k",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pzefk8",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Anime",
|
||||
name: "Epic Fantasy Action",
|
||||
price: "Premium",
|
||||
rating: 5,
|
||||
reviewCount: "900",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4pgh2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Cinema",
|
||||
name: "Suspense Thriller Shots",
|
||||
price: "Free",
|
||||
rating: 4,
|
||||
reviewCount: "500",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ppxivp",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Anime",
|
||||
name: "Cyberpunk Tokyo Night",
|
||||
price: "Premium",
|
||||
rating: 5,
|
||||
reviewCount: "2.1k",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hoi0g8",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Cinema",
|
||||
name: "High Octane Action",
|
||||
price: "Premium",
|
||||
rating: 5,
|
||||
reviewCount: "800",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9zeooj",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Anime",
|
||||
name: "Slice of Life Serenity",
|
||||
price: "Free",
|
||||
rating: 4,
|
||||
reviewCount: "400",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u0iikd",
|
||||
},
|
||||
{ id: "p1", brand: "Cinema", name: "Classic Drama Series", price: "Free", rating: 5, reviewCount: "1.2k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pzefk8" },
|
||||
{ id: "p2", brand: "Anime", name: "Epic Fantasy Action", price: "Premium", rating: 5, reviewCount: "900", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4pgh2" },
|
||||
{ id: "p3", brand: "Cinema", name: "Suspense Thriller Shots", price: "Free", rating: 4, reviewCount: "500", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ppxivp" },
|
||||
{ id: "p4", brand: "Anime", name: "Cyberpunk Tokyo Night", price: "Premium", rating: 5, reviewCount: "2.1k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hoi0g8" },
|
||||
{ id: "p5", brand: "Cinema", name: "High Octane Action", price: "Premium", rating: 5, reviewCount: "800", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9zeooj" },
|
||||
{ id: "p6", brand: "Anime", name: "Slice of Life Serenity", price: "Free", rating: 4, reviewCount: "400", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u0iikd" }
|
||||
]}
|
||||
title="Trending Clips Collection"
|
||||
description="Explore the latest in film drama, action sequences, and breathtaking anime moments."
|
||||
@@ -242,41 +123,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Advanced Filtering",
|
||||
description: "Narrow down results by genre, mood, duration, or lighting style instantly.",
|
||||
phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oh4efg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vlf48m",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cwrnhc&_wi=2",
|
||||
imageAlt: "mobile app streaming library ui",
|
||||
title: "Advanced Filtering", description: "Narrow down results by genre, mood, duration, or lighting style instantly.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oh4efg", imageAlt: "mobile app streaming library ui" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vlf48m", imageAlt: "video editing app interface dark" }
|
||||
},
|
||||
{
|
||||
title: "High Speed Exports",
|
||||
description: "Download your clips in any format, perfectly pre-optimized for social media platforms.",
|
||||
phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8wx1le",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dd0e9d",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f5wvou&_wi=2",
|
||||
imageAlt: "mobile app streaming library ui",
|
||||
title: "High Speed Exports", description: "Download your clips in any format, perfectly pre-optimized for social media platforms.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8wx1le", imageAlt: "video editing app interface dark" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dd0e9d", imageAlt: "mobile app streaming library ui" }
|
||||
},
|
||||
{
|
||||
title: "Smart Collaboration",
|
||||
description: "Create shared folders and collaborate with your team in real time.",
|
||||
phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fmdnd9",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sg13j2",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mc491h&_wi=2",
|
||||
imageAlt: "mobile app streaming library ui",
|
||||
},
|
||||
title: "Smart Collaboration", description: "Create shared folders and collaborate with your team in real time.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fmdnd9", imageAlt: "mobile app streaming library ui" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sg13j2", imageAlt: "video editing app interface dark" }
|
||||
}
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Built for Creators"
|
||||
@@ -291,34 +148,10 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "500k+",
|
||||
title: "Active Clips",
|
||||
description: "Constantly growing high-res library.",
|
||||
icon: Film,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "20k+",
|
||||
title: "Global Creators",
|
||||
description: "Community of professional storytellers.",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
description: "Reliable access whenever you need.",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "120+",
|
||||
title: "Genres",
|
||||
description: "Covering every cinematic style.",
|
||||
icon: Award,
|
||||
},
|
||||
{ id: "m1", value: "500k+", title: "Active Clips", description: "Constantly growing high-res library.", icon: Film },
|
||||
{ id: "m2", value: "20k+", title: "Global Creators", description: "Community of professional storytellers.", icon: Users },
|
||||
{ id: "m3", value: "99.9%", title: "Uptime", description: "Reliable access whenever you need.", icon: Zap },
|
||||
{ id: "m4", value: "120+", title: "Genres", description: "Covering every cinematic style.", icon: Award }
|
||||
]}
|
||||
title="Platform Impact"
|
||||
description="See why content creators worldwide choose our platform for their media needs."
|
||||
@@ -331,46 +164,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
handle: "@sarah_edit",
|
||||
testimonial: "The anime collection is unmatched. Perfect for my YouTube content.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4pt9n2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
handle: "@mchen_studio",
|
||||
testimonial: "Cinematic quality is exactly what I needed for my professional portfolio.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s439z1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
handle: "@emily_r",
|
||||
testimonial: "Best platform for sourcing background B-roll for my documentaries.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fkkmq0",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
handle: "@dkim_pro",
|
||||
testimonial: "Filters work perfectly, save me hours every single week.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rehgw9",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Alex Smith",
|
||||
handle: "@asmith_films",
|
||||
testimonial: "High quality, reliable, and exactly what creators need today.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9whau7",
|
||||
},
|
||||
{ id: "1", name: "Sarah Johnson", handle: "@sarah_edit", testimonial: "The anime collection is unmatched. Perfect for my YouTube content.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4pt9n2" },
|
||||
{ id: "2", name: "Michael Chen", handle: "@mchen_studio", testimonial: "Cinematic quality is exactly what I needed for my professional portfolio.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s439z1" },
|
||||
{ id: "3", name: "Emily Rodriguez", handle: "@emily_r", testimonial: "Best platform for sourcing background B-roll for my documentaries.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fkkmq0" },
|
||||
{ id: "4", name: "David Kim", handle: "@dkim_pro", testimonial: "Filters work perfectly, save me hours every single week.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rehgw9" },
|
||||
{ id: "5", name: "Alex Smith", handle: "@asmith_films", testimonial: "High quality, reliable, and exactly what creators need today.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9whau7" }
|
||||
]}
|
||||
showRating={true}
|
||||
title="Creator Testimonials"
|
||||
@@ -383,21 +181,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Are these clips royalty-free?",
|
||||
content: "Yes, all our plans include royalty-free licenses for personal and commercial projects.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Can I request specific scenes?",
|
||||
content: "Absolutely! We listen to our creators and update the library daily.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What video formats are provided?",
|
||||
content: "We offer high bitrate MP4 and ProRes formats for every single clip.",
|
||||
},
|
||||
{ id: "f1", title: "Are these clips royalty-free?", content: "Yes, all our plans include royalty-free licenses for personal and commercial projects." },
|
||||
{ id: "f2", title: "Can I request specific scenes?", content: "Absolutely! We listen to our creators and update the library daily." },
|
||||
{ id: "f3", title: "What video formats are provided?", content: "We offer high bitrate MP4 and ProRes formats for every single clip." }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x5i8st"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -410,16 +196,9 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Ready to elevate your project with the best cinematic clips?"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Get Started", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user