202 lines
13 KiB
TypeScript
202 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
|
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Sparkles, Zap, Compass, Users, Instagram, Twitter, Linkedin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Explore", id: "explore" },
|
|
{ name: "Download", id: "download" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="VibeGram"
|
|
bottomLeftText="Social Media Redefined"
|
|
bottomRightText="hello@vibegram.app"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Share Your Vibe, Discover Connections"
|
|
description="Connect with the world through photos, reels, stories, and real-time messaging. Experience a premium social platform built for creators and explorers."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Social Media Revolution"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{ text: "Join VibeGram", href: "https://vibegram.app/signup" },
|
|
{ text: "Explore Features", href: "#features" },
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-modern-instagram-style-social-media-fe-1772779001071-0fa21c62.png?_wi=1"
|
|
imageAlt="VibeGram social media feed interface"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-professional-headshot-photo-of-a-young-1772778999845-4efa52ca.png", alt: "User 1"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-professional-headshot-photo-of-a-young-1772778999542-db617bb4.png", alt: "User 2"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-professional-headshot-photo-of-a-woman-1772778999254-e494a5d7.png", alt: "User 3"
|
|
},
|
|
]}
|
|
avatarText="Trusted by 50,000+ creators worldwide"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFour
|
|
title="Core Features"
|
|
description="Everything you need to share, connect, and discover content that matters to you."
|
|
tag="Features"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{
|
|
id: "1", title: "Stunning Photo Feed", author: "Photography First", description: "Share high-quality photos with advanced filters, editing tools, and professional-grade image display. Beautiful card layouts showcase your best moments.", tags: ["Photography", "Sharing"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-modern-instagram-style-social-media-fe-1772779001071-0fa21c62.png?_wi=2"
|
|
},
|
|
{
|
|
id: "2", title: "Vertical Video Reels", author: "Video Innovation", description: "Create and discover trending short-form video content. Infinite scroll through reels with engagement metrics, sharing, and algorithm-powered recommendations.", tags: ["Video", "Trending"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-vertical-reels-video-feed-ui-showing-s-1772778999861-282ab248.png"
|
|
},
|
|
{
|
|
id: "3", title: "Story Moments", author: "Ephemeral Content", description: "Share your daily moments with Stories that disappear after 24 hours. Beautiful carousel interface with viewer rings indicating who's watched your story.", tags: ["Stories", "Daily"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-stories-carousel-interface-showing-cir-1772779000931-33e5d411.png"
|
|
},
|
|
{
|
|
id: "4", title: "Real-Time Messaging", author: "Direct Connection", description: "Send messages, photos, and videos directly to friends. Real-time notifications, typing indicators, and seamless media sharing for instant connectivity.", tags: ["Messaging", "Direct"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-real-time-messaging-interface-showing--1772779000313-5fd7f2ef.png"
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Explore & Discover"
|
|
description="Find trending content, discover new creators, and stay connected with personalized recommendations."
|
|
tag="Discovery"
|
|
tagIcon={Compass}
|
|
products={[
|
|
{
|
|
id: "1", name: "Explore Trending Posts", price: "Algorithm", variant: "Personalized Feed", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-discovery-explore-page-showing-a-grid--1772779000547-9bf34969.png"
|
|
},
|
|
{
|
|
id: "2", name: "Create Your Post", price: "Express", variant: "Simple Tools", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-create-post-interface-showing-image-up-1772778999581-263b441c.png"
|
|
},
|
|
{
|
|
id: "3", name: "Curate Your Profile", price: "Identity", variant: "Your Showcase", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-user-profile-page-showing-profile-pict-1772779000335-953791a2.png"
|
|
},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Creator Stories"
|
|
description="Join thousands of creators who have transformed their social presence with VibeGram."
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Built My Entire Career Here", quote: "VibeGram gave me the platform to showcase my photography. Within months, I went from zero followers to 50K engaged community members. The tools are intuitive, the algorithm is fair, and the community is genuinely supportive.", name: "Sarah Martinez", role: "Professional Photographer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-professional-headshot-photo-of-a-young-1772778999845-4efa52ca.png"
|
|
},
|
|
{
|
|
id: "2", title: "Perfect for Video Creators", quote: "The reels feature is insanely good. My short-form videos get discovered organically without needing a massive following first. The engagement rate is 10x higher than other platforms.", name: "Alex Chen", role: "Content Creator & Filmmaker", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-professional-headshot-photo-of-a-young-1772778999542-db617bb4.png"
|
|
},
|
|
{
|
|
id: "3", title: "Community That Actually Cares", quote: "What sets VibeGram apart is the genuine community. People aren't just chasing likes—they're actually connecting. The messaging features make it easy to collaborate with other creators.", name: "Emma Rodriguez", role: "Digital Artist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-professional-headshot-photo-of-a-woman-1772778999254-e494a5d7.png"
|
|
},
|
|
{
|
|
id: "4", title: "Game Changer for Small Businesses", quote: "We launched our brand entirely on VibeGram. The discovery features helped us reach our target audience without expensive ads. It's the most authentic way to connect with customers.", name: "James Wilson", role: "Founder & Entrepreneur", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/a-professional-headshot-photo-of-a-man-w-1772778999643-7e4e4fde.png"
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Industry Leaders"
|
|
description="Join creators across all platforms who are building their communities on VibeGram."
|
|
tag="Partners"
|
|
tagIcon={Users}
|
|
names={[
|
|
"Instagram Creators", "TikTok Stars", "YouTube Influencers", "Snapchat Community", "Pinterest Artists", "Discord Communities", "Twitter Influencers", "YouTube Shorts Creators"
|
|
]}
|
|
logos={[
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/the-instagram-logo-a-stylized-camera-ico-1772778998812-9adf8539.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/the-tiktok-logo-a-stylized-musical-note--1772779000011-dd0cfbe5.jpg", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/the-youtube-logo-a-red-play-button-icon--1772778998910-b2c54556.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/the-snapchat-logo-a-yellow-ghost-mascot--1772778998993-c72d5396.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/the-pinterest-logo-a-stylized-p-in-a-red-1772778999963-7efd9277.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/the-discord-logo-a-stylized-speech-bubbl-1772779000089-ee00e480.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/the-twitter-x-logo-a-stylized-bird-silho-1772779001124-dec9f442.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYoZZL82Z7rVMT4V5bK0WFvjPE/the-facebook-logo-a-lowercase-f-in-a-blu-1772778999206-f71a3023.png"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="cta" data-section="cta">
|
|
<ContactText
|
|
text="Ready to share your vibe with the world? Join VibeGram today and become part of a global community of creators."
|
|
animationType="reveal-blur"
|
|
buttons={[
|
|
{ text: "Sign Up Free", href: "https://vibegram.app/signup" },
|
|
{ text: "Download App", href: "https://vibegram.app/download" },
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="VibeGram"
|
|
copyrightText="© 2025 VibeGram. All rights reserved. Built for creators, powered by community."
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/vibegram", ariaLabel: "VibeGram on Instagram"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/vibegram", ariaLabel: "VibeGram on Twitter"
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/company/vibegram", ariaLabel: "VibeGram on LinkedIn"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|