Merge version_3 into main #3

Merged
bender merged 5 commits from version_3 into main 2026-04-17 11:42:17 +00:00
5 changed files with 125 additions and 183 deletions

View File

@@ -89,4 +89,4 @@ export default function FeedPage() {
</ReactLenis>
</ThemeProvider>
);
}
}

View File

@@ -11,6 +11,11 @@ export default function LoginPage() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const navLinks = [
{ name: "Home", id: "/" },
{ name: "Login", id: "/login" },
];
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
@@ -27,7 +32,7 @@ export default function LoginPage() {
<div className="min-h-screen flex flex-col">
<NavbarStyleApple
brandName="Connect"
navItems={[{ name: "Home", id: "/" }]}
navItems={navLinks}
/>
<main className="flex-grow flex items-center justify-center p-6">
<div className="w-full max-w-md p-8 bg-card rounded-xl border border-border space-y-6">
@@ -39,7 +44,12 @@ export default function LoginPage() {
</div>
</div>
</main>
<FooterBaseReveal logoText="Connect" columns={[]} />
<FooterBaseReveal
logoText="Connect"
columns={[
{ title: "Navigation", items: navLinks }
]}
/>
</div>
</ThemeProvider>
);

View File

@@ -4,13 +4,14 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Bell, Heart, MessageCircle, UserPlus, Settings } from "lucide-react";
import { Bell, Heart, MessageCircle, UserPlus } from "lucide-react";
export default function NotificationsPage() {
const notifications = [
{ id: 1, type: 'like', text: 'Sarah liked your post', time: '2m ago', icon: Heart },
{ id: 2, type: 'comment', text: 'Mark commented on your photo', time: '1h ago', icon: MessageCircle },
{ id: 3, type: 'follow', text: 'David started following you', time: '3h ago', icon: UserPlus },
{ id: "1", type: "like", user: "Alex J.", content: "liked your photo", icon: Heart, time: "2m ago" },
{ id: "2", type: "comment", user: "Jamie R.", content: "commented on your post", icon: MessageCircle, time: "1h ago" },
{ id: "3", type: "follow", user: "Sam K.", content: "started following you", icon: UserPlus, time: "3h ago" },
{ id: "4", type: "like", user: "Jordan L.", content: "liked your comment", icon: Heart, time: "5h ago" },
];
return (
@@ -27,46 +28,46 @@ export default function NotificationsPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<NavbarStyleApple
navItems={[
{ name: "Home", id: "/" },
{ name: "Notifications", id: "/notifications" },
]}
brandName="Connect"
/>
<main className="pt-32 pb-20 px-6 max-w-3xl mx-auto min-h-screen">
<div className="flex items-center justify-between mb-8">
<h1 className="text-4xl font-bold">Notifications</h1>
<button className="p-2 rounded-full hover:bg-neutral-100">
<Settings className="w-6 h-6" />
</button>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Home", id: "/" },
{ name: "Notifications", id: "/notifications" },
]}
brandName="Connect"
/>
</div>
<main className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
<h1 className="text-4xl font-bold mb-10 flex items-center gap-3">
<Bell className="w-8 h-8" /> Notifications
</h1>
<div className="space-y-4">
{notifications.map((n) => (
<div key={n.id} className="flex items-center p-4 bg-white border border-neutral-200 rounded-xl shadow-sm hover:border-blue-500 transition-colors">
<div className="p-2 mr-4 bg-blue-50 rounded-full text-blue-600">
<n.icon className="w-5 h-5" />
<div key={n.id} className="p-4 rounded-xl border border-border flex items-center gap-4 bg-card">
<div className="p-3 rounded-full bg-primary/10">
<n.icon className="w-5 h-5 text-primary" />
</div>
<div className="flex-grow">
<p className="font-medium">{n.text}</p>
<p className="text-sm text-neutral-500">{n.time}</p>
<div>
<p className="font-medium">{n.user} {n.content}</p>
<p className="text-sm text-muted-foreground">{n.time}</p>
</div>
</div>
))}
</div>
</main>
<FooterBaseReveal
logoText="Connect"
columns={[
{ title: "Product", items: [{ label: "Features", href: "/" }, { label: "Community", href: "/" }] },
{ title: "Company", items: [{ label: "About", href: "/" }, { label: "Careers", href: "/" }] },
{ title: "Legal", items: [{ label: "Privacy", href: "/" }, { label: "Terms", href: "/" }] },
]}
/>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Connect"
columns={[
{ title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Community", href: "/#testimonials" }] },
{ title: "Company", items: [{ label: "About", href: "/#about" }, { label: "Careers", href: "#" }] },
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

View File

@@ -32,14 +32,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home", id: "hero"},
{
name: "Features", id: "features"},
{
name: "Community", id: "testimonials"},
{
name: "FAQ", id: "faq"},
{ name: "Home", id: "hero" },
{ name: "Features", id: "features" },
{ name: "Community", id: "testimonials" },
{ name: "FAQ", id: "faq" },
]}
brandName="Connect"
/>
@@ -48,57 +44,33 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitTestimonial
useInvertedBackground={false}
background={{
variant: "gradient-bars"}}
background={{ variant: "gradient-bars" }}
title="Your world, connected."
description="Experience the next generation of social interaction. Share, connect, and discover your community in one seamless interface."
testimonials={[
{
name: "Alex J.", handle: "@alexj", testimonial: "The best platform for connecting with like-minded creators.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328340.jpg"},
{
name: "Sam K.", handle: "@samk", testimonial: "Finally, a social app that values privacy and design.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/dining-office_1098-15489.jpg"},
{
name: "Jamie R.", handle: "@jamier", testimonial: "My go-to space for daily inspiration.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/glad-young-man-with-african-hairstyle-posing-with-arms-crossed-his-office-with-other-employees-male-manager-blue-shirt-smiling-conference-workplace_197531-3748.jpg"},
{
name: "Jordan L.", handle: "@jordanl", testimonial: "Incredibly smooth and intuitive, highly recommended.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-cheerful-businesswoman-drinking-coffee-smiling-workplace-office_176420-6974.jpg"},
{
name: "Casey B.", handle: "@caseyb", testimonial: "The community features are simply unmatched.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-camera-with-crossed-arms-happy-confident-satisfied-expression-lateral-view_1194-632052.jpg"},
]}
buttons={[
{
text: "Get Started", href: "#"},
{ name: "Alex J.", handle: "@alexj", testimonial: "The best platform for connecting with like-minded creators.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328340.jpg" },
{ name: "Sam K.", handle: "@samk", testimonial: "Finally, a social app that values privacy and design.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dining-office_1098-15489.jpg" },
{ name: "Jamie R.", handle: "@jamier", testimonial: "My go-to space for daily inspiration.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/glad-young-man-with-african-hairstyle-posing-with-arms-crossed-his-office-with-other-employees-male-manager-blue-shirt-smiling-conference-workplace_197531-3748.jpg" },
{ name: "Jordan L.", handle: "@jordanl", testimonial: "Incredibly smooth and intuitive, highly recommended.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-cheerful-businesswoman-drinking-coffee-smiling-workplace-office_176420-6974.jpg" },
{ name: "Casey B.", handle: "@caseyb", testimonial: "The community features are simply unmatched.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-camera-with-crossed-arms-happy-confident-satisfied-expression-lateral-view_1194-632052.jpg" },
]}
buttons={[{ text: "Get Started", href: "#" }]}
imageSrc="http://img.b2bpic.net/free-photo/cool-different-types-buttons_23-2150170585.jpg"
imageAlt="social media interface mockup"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/person-using-smartphone-his-automated-home_23-2149036912.jpg", alt: "User avatar 1"},
{
src: "http://img.b2bpic.net/free-photo/man-holding-smartphone-with-home-automation-app_23-2149036830.jpg", alt: "User avatar 2"},
{
src: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036887.jpg", alt: "User avatar 3"},
{
src: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671596.jpg", alt: "User avatar 4"},
{
src: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg", alt: "User avatar 5"},
{ src: "http://img.b2bpic.net/free-photo/person-using-smartphone-his-automated-home_23-2149036912.jpg", alt: "User avatar 1" },
{ src: "http://img.b2bpic.net/free-photo/man-holding-smartphone-with-home-automation-app_23-2149036830.jpg", alt: "User avatar 2" },
{ src: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036887.jpg", alt: "User avatar 3" },
{ src: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671596.jpg", alt: "User avatar 4" },
{ src: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg", alt: "User avatar 5" },
]}
marqueeItems={[
{
type: "text", text: "Connect with creators"},
{
type: "text", text: "Privacy-first design"},
{
type: "text", text: "Global interaction"},
{
type: "text", text: "Real-time updates"},
{
type: "text", text: "Join the revolution"},
{ type: "text", text: "Connect with creators" },
{ type: "text", text: "Privacy-first design" },
{ type: "text", text: "Global interaction" },
{ type: "text", text: "Real-time updates" },
{ type: "text", text: "Join the revolution" },
]}
/>
</div>
@@ -108,10 +80,7 @@ export default function LandingPage() {
useInvertedBackground={true}
title="Built for Connection"
description="We believe social media should be an empowering space. Our platform focuses on quality interactions, intuitive design, and user-centric features."
buttons={[
{
text: "Learn More"},
]}
buttons={[{ text: "Learn More" }]}
imageSrc="http://img.b2bpic.net/free-photo/woman-property-engineer-searching-layout-details-laptop-office_482257-130146.jpg"
imageAlt="digital connection ui concept"
/>
@@ -124,12 +93,9 @@ export default function LandingPage() {
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
features={[
{
title: "Real-time Messaging", description: "Instant connections with end-to-end encryption.", imageSrc: "http://img.b2bpic.net/free-photo/geometric-abstract-phone-wallpaper-technology-concept-connecting-dots-design_53876-160212.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160210.jpg", buttonText: "Discover"},
{
title: "Media Creation", description: "Powerful tools to edit and share text, images, and video.", imageSrc: "http://img.b2bpic.net/free-vector/business-elements-technology_1257-252.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/website-design-proposal-template-design_742173-25243.jpg", buttonText: "Create"},
{
title: "Smart Notifications", description: "Never miss what matters with our intelligent alert system.", imageSrc: "http://img.b2bpic.net/free-photo/speech-bubble-chat-message-icon-with-bell-notification-alert-notice-reminder-symbol-conversation-button-icon-symbol-background-3d-illustration_56104-2083.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg", buttonText: "Configure"},
{ title: "Real-time Messaging", description: "Instant connections with end-to-end encryption.", imageSrc: "http://img.b2bpic.net/free-photo/geometric-abstract-phone-wallpaper-technology-concept-connecting-dots-design_53876-160212.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160210.jpg", buttonText: "Discover" },
{ title: "Media Creation", description: "Powerful tools to edit and share text, images, and video.", imageSrc: "http://img.b2bpic.net/free-vector/business-elements-technology_1257-252.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/website-design-proposal-template-design_742173-25243.jpg", buttonText: "Create" },
{ title: "Smart Notifications", description: "Never miss what matters with our intelligent alert system.", imageSrc: "http://img.b2bpic.net/free-photo/speech-bubble-chat-message-icon-with-bell-notification-alert-notice-reminder-symbol-conversation-button-icon-symbol-background-3d-illustration_56104-2083.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg", buttonText: "Configure" },
]}
title="Feature Rich Experience"
description="Powerful tools designed to keep you connected and inspired."
@@ -142,15 +108,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
metrics={[
{
id: "m1", icon: Users,
title: "Active Users", value: "1M+"},
{
id: "m2", icon: MessageCircle,
title: "Messages Daily", value: "50M"},
{
id: "m3", icon: Share2,
title: "Posts Shared", value: "10M"},
{ id: "m1", icon: Users, title: "Active Users", value: "1M+" },
{ id: "m2", icon: MessageCircle, title: "Messages Daily", value: "50M" },
{ id: "m3", icon: Share2, title: "Posts Shared", value: "10M" },
]}
title="Our Community"
description="Growing rapidly with a global user base."
@@ -161,8 +121,7 @@ export default function LandingPage() {
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"TechCorp", "Innovate", "GlobalConnect", "CreatorBase", "SocialWave"]}
names={["TechCorp", "Innovate", "GlobalConnect", "CreatorBase", "SocialWave"]}
title="Trusted by Communities"
description="Our platform is growing worldwide."
/>
@@ -173,16 +132,11 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{
id: "1", title: "Amazing", quote: "The best social experience ever.", name: "Sarah", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153830.jpg"},
{
id: "2", title: "Love it", quote: "I find so much inspiration here.", name: "Mark", role: "Creator", imageSrc: "http://img.b2bpic.net/free-photo/nervous-puzzled-woman-banker-bites-lips-worries_273609-45620.jpg"},
{
id: "3", title: "Great features", quote: "The messaging system is flawless.", name: "Anna", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-it-technician-using-pc-innovative-startup-office_482257-125548.jpg"},
{
id: "4", title: "Highly recommend", quote: "Community feel is unmatched.", name: "David", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/confident-senior-executive-looking-camera_1262-2374.jpg"},
{
id: "5", title: "Fantastic app", quote: "My favorite social platform.", name: "Elena", role: "Creator", imageSrc: "http://img.b2bpic.net/free-photo/closeup-caucasian-man-with-poker-face-wearing-glasses-with-red-light-effect_181624-25965.jpg"},
{ id: "1", title: "Amazing", quote: "The best social experience ever.", name: "Sarah", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153830.jpg" },
{ id: "2", title: "Love it", quote: "I find so much inspiration here.", name: "Mark", role: "Creator", imageSrc: "http://img.b2bpic.net/free-photo/nervous-puzzled-woman-banker-bites-lips-worries_273609-45620.jpg" },
{ id: "3", title: "Great features", quote: "The messaging system is flawless.", name: "Anna", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-it-technician-using-pc-innovative-startup-office_482257-125548.jpg" },
{ id: "4", title: "Highly recommend", quote: "Community feel is unmatched.", name: "David", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/confident-senior-executive-looking-camera_1262-2374.jpg" },
{ id: "5", title: "Fantastic app", quote: "My favorite social platform.", name: "Elena", role: "Creator", imageSrc: "http://img.b2bpic.net/free-photo/closeup-caucasian-man-with-poker-face-wearing-glasses-with-red-light-effect_181624-25965.jpg" },
]}
title="Community Voices"
description="Hear what our users are saying."
@@ -194,12 +148,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1", title: "Is the account free?", content: "Yes, basic account features are free."},
{
id: "f2", title: "How to verify?", content: "Follow the instructions in your profile settings."},
{
id: "f3", title: "Privacy settings?", content: "You can customize visibility in settings."},
{ id: "f1", title: "Is the account free?", content: "Yes, basic account features are free." },
{ id: "f2", title: "How to verify?", content: "Follow the instructions in your profile settings." },
{ id: "f3", title: "Privacy settings?", content: "You can customize visibility in settings." },
]}
imageSrc="http://img.b2bpic.net/free-photo/orange-crystal-background_1017-3751.jpg"
title="Need Help?"
@@ -212,13 +163,9 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "sparkles-gradient"}}
background={{ variant: "sparkles-gradient" }}
text="Ready to join the network?"
buttons={[
{
text: "Sign Up Now"},
]}
buttons={[{ text: "Sign Up Now" }]}
/>
</div>
@@ -228,26 +175,20 @@ export default function LandingPage() {
columns={[
{
title: "Product", items: [
{
label: "Features", href: "#features"},
{
label: "Community", href: "#testimonials"},
{ label: "Features", href: "#features" },
{ label: "Community", href: "#testimonials" },
],
},
{
title: "Company", items: [
{
label: "About", href: "#"},
{
label: "Careers", href: "#"},
{ label: "About", href: "#" },
{ label: "Careers", href: "#" },
],
},
{
title: "Legal", items: [
{
label: "Privacy", href: "#"},
{
label: "Terms", href: "#"},
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
],
},
]}

View File

@@ -4,11 +4,8 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { useState } from 'react';
export default function ProfilePage() {
const [isFollowing, setIsFollowing] = useState(false);
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
@@ -26,54 +23,47 @@ export default function ProfilePage() {
<NavbarStyleApple
navItems={[
{ name: "Home", id: "/" },
{ name: "Profile", id: "/profile" }
{ name: "Features", id: "/#features" },
{ name: "Community", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Profile", id: "/profile" },
]}
brandName="Connect"
/>
<main className="py-24 px-6 md:px-12 max-w-5xl mx-auto min-h-screen">
<section className="flex flex-col items-center text-center mb-16">
<img
src="http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328340.jpg"
alt="Profile"
className="w-32 h-32 rounded-full object-cover mb-6 border-4 border-white shadow-lg"
/>
<h1 className="text-4xl font-bold mb-2">Alex J.</h1>
<p className="text-muted-foreground mb-6">@alexj Digital Creator & Social Innovator</p>
<div className="flex gap-4">
<button
onClick={() => setIsFollowing(!isFollowing)}
className="px-6 py-2 rounded-full font-semibold transition-all bg-primary text-white hover:opacity-90"
>
{isFollowing ? "Unfollow" : "Follow"}
</button>
<button className="px-6 py-2 rounded-full font-semibold bg-secondary border border-gray-200 transition-all">
Edit Profile
</button>
</div>
</section>
<section>
<h2 className="text-2xl font-bold mb-8">Recent Posts</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{[1, 2, 3, 4, 5, 6].map((i) => (
<div key={i} className="aspect-square bg-gray-100 rounded-2xl overflow-hidden hover:scale-105 transition-transform">
<img
src={`http://img.b2bpic.net/free-photo/young-beautiful-cheerful-businesswoman-drinking-coffee-smiling-workplace-office_176420-6974.jpg?i=${i}`}
alt="Post"
className="w-full h-full object-cover"
/>
<main className="pt-24 pb-12 min-h-screen px-6">
<div className="max-w-4xl mx-auto space-y-8">
<h1 className="text-4xl font-bold">User Profile</h1>
<div className="bg-[var(--card)] p-8 rounded-lg shadow-sm border border-[var(--background-accent)]">
<div className="flex items-center gap-6">
<div className="w-24 h-24 rounded-full bg-[var(--background-accent)] flex items-center justify-center text-2xl font-bold">JD</div>
<div>
<h2 className="text-2xl font-semibold">John Doe</h2>
<p className="text-[var(--foreground)] opacity-70">@johndoe</p>
</div>
))}
</div>
<div className="mt-8">
<h3 className="text-lg font-medium">Bio</h3>
<p className="mt-2 opacity-80">Creative soul, photography enthusiast, and tech explorer. Always looking for new connections!</p>
</div>
</div>
</section>
<div className="bg-[var(--card)] p-8 rounded-lg shadow-sm border border-[var(--background-accent)]">
<h3 className="text-xl font-semibold mb-6">Account Settings</h3>
<div className="space-y-4">
<button className="px-6 py-2 bg-[var(--primary-cta)] text-white rounded">Edit Profile</button>
<button className="px-6 py-2 bg-[var(--secondary-cta)] text-[var(--foreground)] rounded ml-4">Change Password</button>
</div>
</div>
</div>
</main>
<FooterBaseReveal
logoText="Connect"
columns={[]}
columns={[
{ title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Community", href: "/#testimonials" }] },
{ title: "Company", items: [{ label: "About", href: "/#" }, { label: "Careers", href: "/#" }] },
{ title: "Legal", items: [{ label: "Privacy", href: "/#" }, { label: "Terms", href: "/#" }] },
]}
/>
</ReactLenis>
</ThemeProvider>
);
}
}