162 lines
8.3 KiB
TypeScript
162 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
|
|
export default function SocialMediaProfile() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="sharp"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="none"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="SocialHub"
|
|
navItems={[
|
|
{ name: "Profile", id: "profile" },
|
|
{ name: "Explore", id: "explore" },
|
|
{ name: "Messages", id: "messages" },
|
|
{ name: "Settings", id: "settings" },
|
|
{ name: "Help", id: "help" }
|
|
]}
|
|
button={{
|
|
text: "Sign Out", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="profile-header" data-section="profile-header">
|
|
<MediaSplitTabsAbout
|
|
title="Alexandra Morgan"
|
|
description="Creative Director | Photography Enthusiast | Storyteller"
|
|
tabs={[
|
|
{
|
|
id: "about", label: "About", description: "Passionate about capturing moments and sharing stories through visual content. Based in New York, exploring the intersection of creativity and technology."
|
|
},
|
|
{
|
|
id: "interests", label: "Interests", description: "Photography, travel, design, sustainable living, and connecting with amazing people from around the world."
|
|
},
|
|
{
|
|
id: "highlights", label: "Highlights", description: "Featured in Design Weekly, 50K+ engaged followers, collaborations with international brands, travel documentarian."
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"
|
|
imageAlt="Alexandra Morgan Profile Photo"
|
|
imagePosition="right"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="follower-stats" data-section="follower-stats">
|
|
<MetricCardSeven
|
|
title="Your Impact"
|
|
description="Key metrics showcasing your social presence and engagement"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
metrics={[
|
|
{
|
|
id: "followers", value: "52.4K", title: "Followers", items: ["Growing 8% monthly", "Engaged community", "Global reach"]
|
|
},
|
|
{
|
|
id: "following", value: "1.2K", title: "Following", items: ["Curated accounts", "Industry leaders", "Creative peers"]
|
|
},
|
|
{
|
|
id: "posts", value: "324", title: "Posts", items: ["Consistent posting", "Quality content", "Visual storytelling"]
|
|
},
|
|
{
|
|
id: "engagement", value: "8.3%", title: "Engagement Rate", items: ["Above average", "Strong connection", "Active followers"]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="stories" data-section="stories">
|
|
<BlogCardTwo
|
|
title="Stories"
|
|
description="Catch up on my latest stories and moments"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
carouselMode="buttons"
|
|
blogs={[
|
|
{
|
|
id: "story-1", category: "Current", title: "Morning Coffee", excerpt: "Starting the day right with inspiration and creativity. New York mornings never disappoint.", imageSrc: "https://img.b2bpic.net/free-vector/fashion-sale-instagram-stories-collection_23-2148182167.jpg", imageAlt: "Morning coffee story", authorName: "Alexandra", authorAvatar: "/placeholders/placeholder1.webp", date: "2 hours ago"
|
|
},
|
|
{
|
|
id: "story-2", category: "Adventure", title: "Exploring New Vibes", excerpt: "Found an amazing new spot in Brooklyn. The light here is absolutely perfect for photography.", imageSrc: "https://img.b2bpic.net/free-vector/instagram-stories-templates-with-empty-frame_52683-6083.jpg", imageAlt: "Brooklyn exploration story", authorName: "Alexandra", authorAvatar: "/placeholders/placeholder1.webp", date: "5 hours ago"
|
|
},
|
|
{
|
|
id: "story-3", category: "Reflection", title: "Gratitude Moment", excerpt: "Taking time to appreciate the journey so far. Every moment shapes the story we create.", imageSrc: "https://img.b2bpic.net/free-vector/instagram-stories-templates_52683-6731.jpg", imageAlt: "Gratitude reflection story", authorName: "Alexandra", authorAvatar: "/placeholders/placeholder1.webp", date: "12 hours ago"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="posts-feed" data-section="posts-feed">
|
|
<ProductCardFour
|
|
title="Posts"
|
|
description="My latest creations and shared moments"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
products={[
|
|
{
|
|
id: "post-1", name: "Sunset in Tokyo", price: "2.3K likes", variant: "Photography • Travel", imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-picture-coffee-with-smartphone_23-2147912449.jpg", imageAlt: "Sunset in Tokyo post", isFavorited: false
|
|
},
|
|
{
|
|
id: "post-2", name: "Brooklyn Studio Tour", price: "3.8K likes", variant: "Behind the Scenes • Studio", imageSrc: "https://img.b2bpic.net/free-photo/easter-holiday-photo-from-your-phone-beautifully-preserved-table-festive-easter-lunch-breakfast_169016-4234.jpg", imageAlt: "Brooklyn studio tour post", isFavorited: true
|
|
},
|
|
{
|
|
id: "post-3", name: "Weekend Reflections", price: "1.9K likes", variant: "Lifestyle • Personal", imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-photo-coffee-fruits-with-smartphone_23-2147912451.jpg", imageAlt: "Weekend reflections post", isFavorited: false
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="SocialHub"
|
|
copyrightText="© 2025 SocialHub. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Platform", items: [
|
|
{ label: "Explore", href: "explore" },
|
|
{ label: "Discover", href: "discover" },
|
|
{ label: "Trends", href: "trends" }
|
|
]
|
|
},
|
|
{
|
|
title: "Community", items: [
|
|
{ label: "Guidelines", href: "guidelines" },
|
|
{ label: "Safety", href: "safety" },
|
|
{ label: "Support", href: "support" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Contact", href: "contact" },
|
|
{ label: "Business", href: "business" },
|
|
{ label: "Partnerships", href: "partnerships" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |