Initial commit
This commit is contained in:
188
src/app/page.tsx
Normal file
188
src/app/page.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user