188 lines
11 KiB
TypeScript
188 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { Camera, Images, Mail, Zap } from "lucide-react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="aurora"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="inset-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="SnapCircle"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Stories", id: "stories" },
|
|
{ name: "Posts", id: "feed" },
|
|
{ name: "Stats", id: "metrics" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Follow"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Welcome to My Profile"
|
|
description="Join me on this creative journey and discover amazing content, stories, and moments that inspire."
|
|
tag="Creator Profile"
|
|
tagIcon={Camera}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg"
|
|
imageAlt="Profile hero image"
|
|
buttons={[
|
|
{ text: "Follow Now" },
|
|
{ text: "View Gallery", href: "feed" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
title="Growing Community & Engagement"
|
|
tag="Stats"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "245.8K", description: "Active followers engaging with my content daily"
|
|
},
|
|
{
|
|
id: "2", value: "12.5M", description: "Total impressions and reach across all platforms"
|
|
},
|
|
{
|
|
id: "3", value: "98%", description: "Audience engagement rate and interaction quality"
|
|
},
|
|
{
|
|
id: "4", value: "847", description: "Posts shared showcasing creative work and moments"
|
|
}
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="stories" data-section="stories">
|
|
<ProductCardFour
|
|
title="Latest Stories"
|
|
description="Check out my recent stories capturing moments from my daily life and creative endeavors"
|
|
tag="24H Content"
|
|
tagIcon={Zap}
|
|
products={[
|
|
{
|
|
id: "story-1", name: "Morning Adventures", price: "New", variant: "8 hours ago", imageSrc: "https://img.b2bpic.net/free-vector/gradient-inspirational-quotes-instagram-story-collection_23-2148952973.jpg", imageAlt: "Morning adventures story"
|
|
},
|
|
{
|
|
id: "story-2", name: "Creative Studio Time", price: "Hot", variant: "12 hours ago", imageSrc: "https://img.b2bpic.net/free-vector/flat-design-web-designer-instagram-stories_23-2150397672.jpg", imageAlt: "Creative studio story"
|
|
},
|
|
{
|
|
id: "story-3", name: "Behind The Scenes", price: "Trending", variant: "1 day ago", imageSrc: "https://img.b2bpic.net/free-vector/advertising-agency-instagram-stories-template_23-2150737965.jpg", imageAlt: "Behind the scenes story"
|
|
},
|
|
{
|
|
id: "story-4", name: "Collaboration Moment", price: "New", variant: "1 day ago", imageSrc: "https://img.b2bpic.net/free-psd/gradient-business-solutions-instagram-stories_23-2150027289.jpg", imageAlt: "Collaboration story"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="feed" data-section="feed">
|
|
<BlogCardThree
|
|
title="Posts Feed"
|
|
description="Explore my latest creations and posts from the community"
|
|
tag="Gallery"
|
|
tagIcon={Images}
|
|
blogs={[
|
|
{
|
|
id: "post-1", category: "Photography", title: "Golden Hour Captures", excerpt: "Beautiful sunset moments frozen in time with creative compositions and vibrant lighting techniques.", imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-luxurious-yacht-party-celebration_23-2150375361.jpg", imageAlt: "Golden hour photography", authorName: "Sarah Creator", authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", date: "Jan 14, 2025"
|
|
},
|
|
{
|
|
id: "post-2", category: "Lifestyle", title: "Coffee & Creativity", excerpt: "A day in my life exploring the perfect blend of inspiration and daily routines that fuel creativity.", imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-luxurious-yacht-party-celebration_23-2150375359.jpg", imageAlt: "Lifestyle moments", authorName: "Sarah Creator", authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", date: "Jan 12, 2025"
|
|
},
|
|
{
|
|
id: "post-3", category: "Design", title: "Color Theory Exploration", excerpt: "Diving deep into color palettes and visual harmony creating stunning visual experiences.", imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-outdoors-adventure-travel_23-2150288932.jpg", imageAlt: "Design exploration", authorName: "Sarah Creator", authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", date: "Jan 10, 2025"
|
|
},
|
|
{
|
|
id: "post-4", category: "Travel", title: "Wanderlust Diaries", excerpt: "Exploring new destinations and documenting the beauty of the world through my lens.", imageSrc: "https://img.b2bpic.net/free-psd/holiday-travel-template-design_23-2150263002.jpg", imageAlt: "Travel adventures", authorName: "Sarah Creator", authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", date: "Jan 8, 2025"
|
|
},
|
|
{
|
|
id: "post-5", category: "Inspiration", title: "Creative Collaborations", excerpt: "Working with amazing creators and brands to bring unique projects to life with shared vision.", imageSrc: "https://img.b2bpic.net/free-psd/world-photography-day-instagram-posts_23-2150543910.jpg", imageAlt: "Collaboration projects", authorName: "Sarah Creator", authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", date: "Jan 6, 2025"
|
|
},
|
|
{
|
|
id: "post-6", category: "Culture", title: "Street Art Stories", excerpt: "Discovering vibrant street art and cultural expressions that celebrate urban creativity worldwide.", imageSrc: "https://img.b2bpic.net/free-psd/world-photography-day-instagram-posts_23-2150543912.jpg", imageAlt: "Street art culture", authorName: "Sarah Creator", authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", date: "Jan 4, 2025"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
carouselMode="buttons"
|
|
uniformGridCustomHeightClasses="min-h-[500px]"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Connect"
|
|
tagIcon={Mail}
|
|
title="Stay Updated With My Latest Content"
|
|
description="Subscribe to receive notifications about new posts, stories, and exclusive behind-the-scenes content directly in your inbox."
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground="invertDefault"
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Subscribe Now"
|
|
termsText="We respect your privacy. Unsubscribe at any time."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Home", href: "#hero" },
|
|
{ label: "Stories", href: "#stories" },
|
|
{ label: "Feed", href: "#feed" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "TikTok", href: "https://tiktok.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "About", href: "#" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Privacy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 SnapCircle. All rights reserved."
|
|
bottomRightText="Made with creativity and passion"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |