206 lines
14 KiB
TypeScript
206 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne/ProductCardOne';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { Sparkles, Users, HeartHandshake, UploadCloud, User, MessageSquare, GalleryThumbnails, ShieldCheck } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmall"
|
|
background="aurora"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="InstaConnect"
|
|
navItems={[
|
|
{ name: "Home", id: "#home" },
|
|
{ name: "Features", id: "#features" },
|
|
{ name: "Explore", id: "#explore" },
|
|
{ name: "Community", id: "#community" },
|
|
{ name: "FAQ", id: "#faq" },
|
|
{ name: "Contact", id: "#contact" }
|
|
]}
|
|
button={{
|
|
text: "Start Sharing", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
<div id="home" data-section="home">
|
|
<HeroSplitKpi
|
|
title="Share Your Story, Connect Instantly"
|
|
description="Post photos and videos, discover creators you love, and build your community in one beautiful space."
|
|
background={{
|
|
variant: "canvas-reveal"
|
|
}}
|
|
kpis={[
|
|
{ value: "1M+", label: "Active Users" },
|
|
{ value: "5M+", label: "Content Shared" },
|
|
{ value: "100K+", label: "Engaged Creators" }
|
|
]}
|
|
enableKpiAnimation={true}
|
|
buttons={[
|
|
{ text: "Start Sharing", href: "#contact" },
|
|
{ text: "Explore Features", href: "#features" }
|
|
]}
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/beautiful-young-woman-headphones-smiling-beige-wall_176420-2695.jpg", alt: "Sarah Johnson" },
|
|
{ src: "http://img.b2bpic.net/free-photo/young-crazy-sports-man-happy-expression_1194-2045.jpg", alt: "Michael Chen" },
|
|
{ src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100246.jpg", alt: "Emily Rodriguez" },
|
|
{ src: "http://img.b2bpic.net/free-photo/serious-sad-attractive-young-bearded-student-wearing-trendy-black-hat-sitting-alone-modern-spacious-coffee-shop_273609-1629.jpg", alt: "David Kim" }
|
|
]}
|
|
avatarText="Join a vibrant community of creators"
|
|
imageSrc="http://img.b2bpic.net/free-photo/lifestyle-blogger-records-video-her-room-has-camera-coffee-table-shows-eyeshadow-palette_1258-254172.jpg"
|
|
imageAlt="InstaConnect social media platform dashboard"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
tag="New Platform"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="A Thriving Community, Built For You"
|
|
metrics={[
|
|
{ icon: Users, label: "Global Community", value: "100+ Countries" },
|
|
{ icon: HeartHandshake, label: "Meaningful Connections", value: "20M+ Interactions" },
|
|
{ icon: Sparkles, label: "Inspiring Content", value: "New Daily Trends" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
<div id="features" data-section="features">
|
|
<FeatureBorderGlow
|
|
title="Your Creative Journey, Enhanced"
|
|
description="InstaConnect provides powerful tools for visual storytelling and seamless community engagement."
|
|
features={[
|
|
{ icon: UploadCloud, title: "Effortless Sharing", description: "Upload high-quality photos and videos instantly, with intuitive editing tools and filters." },
|
|
{ icon: User, title: "Personalized Profiles", description: "Curate your unique aesthetic, showcase your portfolio, and grow your dedicated follower base." },
|
|
{ icon: MessageSquare, title: "Real-time Engagement", description: "Connect with your audience through comments, likes, and direct messages, fostering genuine interactions." },
|
|
{ icon: Sparkles, title: "Advanced Discovery", description: "Explore trending content, discover new creators, and find inspiration tailored to your interests." },
|
|
{ icon: GalleryThumbnails, title: "Curated Feeds", description: "Enjoy a personalized feed with content from creators you follow and recommendations you'll love." },
|
|
{ icon: ShieldCheck, title: "Secure & Private", description: "Manage your privacy settings with ease and share your content within a safe and supportive environment." }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="explore" data-section="explore">
|
|
<ProductCardOne
|
|
title="Discover Inspiring Content & Creators"
|
|
description="Explore a world of visual stories, from breathtaking photography to engaging video series."
|
|
products={[
|
|
{ id: "content-1", name: "Breathtaking Landscapes", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-garde-lake-italy-with-mountain-ranges_181624-8707.jpg", imageAlt: "Vibrant landscape photography" },
|
|
{ id: "content-2", name: "Engaging Lifestyle Vlogs", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/technology-lifestyle-concept-stylish-beautiful-woman-posing-selfie-sending-air-kiss-camera-using-photo-filters-app-mobile-phone-standing-against-blue-background_1258-300457.jpg", imageAlt: "Thumbnail of a lifestyle vlog" },
|
|
{ id: "content-3", name: "Creative Workspace Tours", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/view-messy-office-workspace-with-laptop_23-2150282016.jpg", imageAlt: "Flat lay of a creative workspace" },
|
|
{ id: "content-4", name: "Interactive Live Streams", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/business-professionals-collaborating-remotely_482257-124241.jpg", imageAlt: "Content creator in a live stream" },
|
|
{ id: "content-5", name: "Stunning Digital Art", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320698.jpg", imageAlt: "Visually striking digital art piece" },
|
|
{ id: "content-6", name: "Dynamic Creator Montages", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/multimedia-entertainment-communication-technology-icon_53876-13805.jpg", imageAlt: "Montage of diverse creator videos" }
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
<div id="community" data-section="community">
|
|
<MetricCardSeven
|
|
title="Our Impact: Connecting Millions Globally"
|
|
description="InstaConnect is more than an app; it's a rapidly growing movement dedicated to visual storytelling and authentic connections."
|
|
metrics={[
|
|
{ id: "metric-1", value: "1M+", title: "Daily Engagements", items: ["Photos & Videos uploaded", "Comments & Likes per day", "Creator interactions"] },
|
|
{ id: "metric-2", value: "100K+", title: "New Creators Monthly", items: ["Artist & Photographers", "Videographers & Bloggers", "Unique content niches"] },
|
|
{ id: "metric-3", value: "99.9%", title: "Platform Uptime", items: ["Reliable, fast performance", "Secure data handling", "Consistent feature rollout"] }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="What Our Creators Are Saying"
|
|
description="Hear directly from the community about how InstaConnect has transformed their creative journey and connections."
|
|
testimonials={[
|
|
{ id: "1", name: "Aisha Khan", handle: "@aisha.art", testimonial: "InstaConnect made sharing my digital art so easy. The community is incredibly supportive, and the tools are perfect for creators!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-female-with-gentle-smile-wearing-red-shirt_181624-24259.jpg", imageAlt: "Aisha Khan, digital artist" },
|
|
{ id: "2", name: "Ben Carter", handle: "@bencamera", testimonial: "As a videographer, finding a platform that truly respects video quality is rare. InstaConnect nails it! My audience loves the clarity.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/product-photographer-doing-his-job-studio_23-2148970264.jpg", imageAlt: "Ben Carter, videographer" },
|
|
{ id: "3", name: "Chloe Lee", handle: "@chloecreates", testimonial: "The discovery features here are phenomenal. I've found so many inspiring artists and grown my own reach significantly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/contemporary-dance-performance_1385-1583.jpg", imageAlt: "Chloe Lee, digital artist" },
|
|
{ id: "4", name: "Daniel Ramirez", handle: "@dan.adventures", testimonial: "Finally, a platform built for visual storytellers. It's intuitive, beautiful, and keeps me connected with my global audience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-female-florist-taking-selfie-mobile-phone-shop_23-2148049472.jpg", imageAlt: "Daniel Ramirez, travel blogger" },
|
|
{ id: "5", name: "Elena Petrova", handle: "@elena.ph", testimonial: "The best place to showcase my photography. The engagement feels authentic, and the overall experience is incredibly smooth.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-park-ranger-woods_23-2149309591.jpg", imageAlt: "Elena Petrova, photographer" }
|
|
]}
|
|
showRating={true}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find quick answers to common questions about InstaConnect, from getting started to maximizing your creative potential."
|
|
faqs={[
|
|
{ id: "faq-1", title: "How do I create an account?", content: "Creating an InstaConnect account is simple! Just click 'Start Sharing', fill in your details, and you're ready to dive into the community. You can sign up using your email or social media accounts." },
|
|
{ id: "faq-2", title: "What types of content can I share?", content: "InstaConnect supports high-resolution photos and videos. You can upload images in various aspect ratios and videos up to 10 minutes in length, with more options coming soon!" },
|
|
{ id: "faq-3", title: "How can I discover new creators?", content: "Our 'Explore' tab is designed for discovery. You can browse trending content, search by hashtags, or get personalized recommendations based on your interests and engagement history." },
|
|
{ id: "faq-4", title: "Is InstaConnect free to use?", content: "Yes, InstaConnect's core features, including sharing, following, and engaging with content, are completely free. We also offer premium features for advanced creators coming in the future." }
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get Started or Get Support"
|
|
description="Have questions or ready to join the InstaConnect community? Reach out to us, and let's connect!"
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Your Message (optional)", rows: 4
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/group-business-people-analysis-with-marketing-report-graph-young-specialists-are-discussing-business-ideas-new-digital-start-up-project_1150-1818.jpg"
|
|
imageAlt="content creators collaboration social media"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
videoSrc="http://img.b2bpic.net/free-photo/network-concept-with-colorful-dots_23-2148999202.jpg"
|
|
videoAriaLabel="Abstract digital network animation"
|
|
logoText="InstaConnect"
|
|
columns={[
|
|
{ title: "Platform", items: [{ label: "Home", href: "#home" }, { label: "Features", href: "#features" }, { label: "Explore", href: "#explore" }] },
|
|
{ title: "Community", items: [{ label: "Creators", href: "#community" }, { label: "Support", href: "#contact" }, { label: "FAQ", href: "#faq" }] },
|
|
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
|
]}
|
|
copyrightText="© 2024 InstaConnect. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|