Merge version_1 into main #1
277
src/app/page.tsx
277
src/app/page.tsx
@@ -28,22 +28,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Stats",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Stats", id: "metrics" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="InstaFlow"
|
||||
/>
|
||||
@@ -51,105 +39,38 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Empower Your Digital Presence"
|
||||
description="Create, connect, and thrive with our advanced social platform designed for modern storytellers."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg",
|
||||
imageAlt: "modern social media interface dark",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-with-flowing-cyber-particles_1048-14023.jpg",
|
||||
imageAlt: "abstract tech background orange blue",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-taking-picture-modern-architecture-night-city-mobile-phone_23-2148184279.jpg",
|
||||
imageAlt: "modern social media interface dark",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301602.jpg",
|
||||
imageAlt: "abstract tech background orange blue",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-57295.jpg",
|
||||
imageAlt: "modern social media interface dark",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg", imageAlt: "modern social media interface dark" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-with-flowing-cyber-particles_1048-14023.jpg", imageAlt: "abstract tech background orange blue" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/person-taking-picture-modern-architecture-night-city-mobile-phone_23-2148184279.jpg", imageAlt: "modern social media interface dark" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301602.jpg", imageAlt: "abstract tech background orange blue" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-57295.jpg", imageAlt: "modern social media interface dark" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-poly-background-with-connecting-lines-dots_1048-6496.jpg",
|
||||
imageAlt: "abstract tech background orange blue",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-particle-flow-background-with-cyber-dots_1048-12440.jpg",
|
||||
imageAlt: "abstract tech background orange blue",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038903.jpg",
|
||||
imageAlt: "modern social media interface dark",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/orange-shades-bubbles-with-gradient-lights_23-2148290137.jpg",
|
||||
imageAlt: "abstract tech background orange blue",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg",
|
||||
imageAlt: "modern social media interface dark",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/low-poly-background-with-connecting-lines-dots_1048-6496.jpg", imageAlt: "abstract tech background orange blue" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-particle-flow-background-with-cyber-dots_1048-12440.jpg", imageAlt: "abstract tech background orange blue" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038903.jpg", imageAlt: "modern social media interface dark" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/orange-shades-bubbles-with-gradient-lights_23-2148290137.jpg", imageAlt: "abstract tech background orange blue" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg", imageAlt: "modern social media interface dark" },
|
||||
]}
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-employee-happy-be-back-work_23-2148727615.jpg",
|
||||
alt: "Portrait of employee happy to be back at work",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-confident-handsome-man-plaid-shirt-smiling-camera-grey-wall_176420-3405.jpg",
|
||||
alt: "Portrait of confident handsome man in plaid shirt smiling at camera over grey wall",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",
|
||||
alt: "Smiling young handsome guy wearing green shirt",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",
|
||||
alt: "Smiling millennial man looking at camera in cafe, headshot portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-outdoors_23-2149002410.jpg",
|
||||
alt: "Close up smiley woman outdoors",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-employee-happy-be-back-work_23-2148727615.jpg", alt: "Portrait of employee happy to be back at work" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-confident-handsome-man-plaid-shirt-smiling-camera-grey-wall_176420-3405.jpg", alt: "Portrait of confident handsome man in plaid shirt smiling at camera over grey wall" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg", alt: "Smiling young handsome guy wearing green shirt" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg", alt: "Smiling millennial man looking at camera in cafe, headshot portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-outdoors_23-2149002410.jpg", alt: "Close up smiley woman outdoors" },
|
||||
]}
|
||||
avatarText="Trusted by 10M+ creators"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Innovative Social Engine",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Global Creator Network",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure Data Infrastructure",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time Growth Analytics",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Seamless Community Tools",
|
||||
},
|
||||
{ type: "text", text: "Innovative Social Engine" },
|
||||
{ type: "text", text: "Global Creator Network" },
|
||||
{ type: "text", text: "Secure Data Infrastructure" },
|
||||
{ type: "text", text: "Real-time Growth Analytics" },
|
||||
{ type: "text", text: "Seamless Community Tools" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -160,39 +81,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Interactive Feeds",
|
||||
author: "Pro",
|
||||
description: "Engage with your followers through dynamic timelines.",
|
||||
tags: [
|
||||
"Social",
|
||||
"Growth",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033647.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Real-time Analytics",
|
||||
author: "Pro",
|
||||
description: "Know your audience better with live performance data.",
|
||||
tags: [
|
||||
"Data",
|
||||
"Insights",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-fitness-mobile-app-infographic_23-2148203348.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Secure Cloud",
|
||||
author: "Pro",
|
||||
description: "Safe storage for all your high-res photos and videos.",
|
||||
tags: [
|
||||
"Cloud",
|
||||
"Secure",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-15148.jpg",
|
||||
},
|
||||
{ id: "1", title: "Interactive Feeds", author: "Pro", description: "Engage with your followers through dynamic timelines.", tags: ["Social", "Growth"], imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033647.jpg" },
|
||||
{ id: "2", title: "Real-time Analytics", author: "Pro", description: "Know your audience better with live performance data.", tags: ["Data", "Insights"], imageSrc: "http://img.b2bpic.net/free-vector/flat-fitness-mobile-app-infographic_23-2148203348.jpg" },
|
||||
{ id: "3", title: "Secure Cloud", author: "Pro", description: "Safe storage for all your high-res photos and videos.", tags: ["Cloud", "Secure"], imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-15148.jpg" },
|
||||
]}
|
||||
title="Built for Creators"
|
||||
description="Everything you need to build a community and grow your brand."
|
||||
@@ -201,30 +92,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10M+",
|
||||
title: "Users",
|
||||
description: "Daily active members",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/graphic-tablet_1134-354.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "240%",
|
||||
title: "Growth",
|
||||
description: "Average engagement",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/student-home-taking-notes-while-watching-presentation-closeup_482257-118737.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
description: "Global availability",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/global-network-connectivity-modern-city-skyline-sunset_84443-73919.jpg",
|
||||
},
|
||||
{ id: "m1", value: "10M+", title: "Users", description: "Daily active members", imageSrc: "http://img.b2bpic.net/free-photo/graphic-tablet_1134-354.jpg" },
|
||||
{ id: "m2", value: "240%", title: "Growth", description: "Average engagement", imageSrc: "http://img.b2bpic.net/free-photo/student-home-taking-notes-while-watching-presentation-closeup_482257-118737.jpg" },
|
||||
{ id: "m3", value: "99.9%", title: "Uptime", description: "Global availability", imageSrc: "http://img.b2bpic.net/free-photo/global-network-connectivity-modern-city-skyline-sunset_84443-73919.jpg" },
|
||||
]}
|
||||
title="Proven Growth"
|
||||
description="Real results for real creators."
|
||||
@@ -236,56 +110,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
date: "Jan 2025",
|
||||
title: "CEO",
|
||||
quote: "InstaFlow changed how I grow my brand.",
|
||||
tag: "Pro",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiley-handsome-man-posing_23-2148911841.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-manager-talking-coworker-office-sitting-with-laptop_1258-194648.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mike D.",
|
||||
date: "Feb 2025",
|
||||
title: "Designer",
|
||||
quote: "So easy to use and beautiful design.",
|
||||
tag: "Pro",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-city_23-2149002436.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working_1303-3933.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena P.",
|
||||
date: "Mar 2025",
|
||||
title: "Developer",
|
||||
quote: "The API features are incredible.",
|
||||
tag: "Pro",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/frowning-young-woman-wearing-glasses-bandana-neck-standing-profile-view-keeping-arms-crossed-looking-camera-isolated-olive-green-background_141793-137048.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David W.",
|
||||
date: "Apr 2025",
|
||||
title: "Manager",
|
||||
quote: "Best analytics platform I've used.",
|
||||
tag: "Pro",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/excited-adult-handsome-man-looking-camera-doing-you-gesture-isolated-green-wall_141793-113627.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Chloe B.",
|
||||
date: "May 2025",
|
||||
title: "Influencer",
|
||||
quote: "My engagement doubled in a month.",
|
||||
tag: "Pro",
|
||||
avatarSrc: "http://img.b2bpic.net/free-vector/group-men_24908-60264.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-caucasian-businessman-suit-showing-empty-laptop-screen-demonstrate-promo-standing-whi_1258-173629.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Sarah J.", date: "Jan 2025", title: "CEO", quote: "InstaFlow changed how I grow my brand.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/smiley-handsome-man-posing_23-2148911841.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-manager-talking-coworker-office-sitting-with-laptop_1258-194648.jpg" },
|
||||
{ id: "t2", name: "Mike D.", date: "Feb 2025", title: "Designer", quote: "So easy to use and beautiful design.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-city_23-2149002436.jpg", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working_1303-3933.jpg" },
|
||||
{ id: "t3", name: "Elena P.", date: "Mar 2025", title: "Developer", quote: "The API features are incredible.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg", imageSrc: "http://img.b2bpic.net/free-photo/frowning-young-woman-wearing-glasses-bandana-neck-standing-profile-view-keeping-arms-crossed-looking-camera-isolated-olive-green-background_141793-137048.jpg" },
|
||||
{ id: "t4", name: "David W.", date: "Apr 2025", title: "Manager", quote: "Best analytics platform I've used.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg", imageSrc: "http://img.b2bpic.net/free-photo/excited-adult-handsome-man-looking-camera-doing-you-gesture-isolated-green-wall_141793-113627.jpg" },
|
||||
{ id: "t5", name: "Chloe B.", date: "May 2025", title: "Influencer", quote: "My engagement doubled in a month.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-vector/group-men_24908-60264.jpg", imageSrc: "http://img.b2bpic.net/free-photo/handsome-caucasian-businessman-suit-showing-empty-laptop-screen-demonstrate-promo-standing-whi_1258-173629.jpg" },
|
||||
]}
|
||||
title="What Users Say"
|
||||
description="Join our community of satisfied users."
|
||||
@@ -295,9 +124,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Join Now"
|
||||
title="Start Creating Today"
|
||||
description="Sign up for early access to our platform."
|
||||
@@ -312,29 +139,15 @@ export default function LandingPage() {
|
||||
logoText="InstaFlow"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#",
|
||||
},
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user