diff --git a/app/about/about.module.css b/app/about/about.module.css index a761969..c7f1318 100644 --- a/app/about/about.module.css +++ b/app/about/about.module.css @@ -1,337 +1,576 @@ +/* About Page Styles */ + .aboutPage { - min-height: 100vh; + background: var(--background); } +/* Hero Section */ .hero { - padding: 8rem 0 4rem; - text-align: center; - background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05)); + background: var(--background-secondary); + padding: 8rem 0 8rem; position: relative; - overflow: hidden; -} - -.hero::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 70%); + border-bottom: 1px solid var(--border-color); } .heroContent { - position: relative; - z-index: 1; + text-align: center; + max-width: 800px; + margin: 0 auto; } .heroTitle { - font-size: clamp(2.5rem, 6vw, 4rem); + font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; - margin-bottom: 1.5rem; - line-height: 1.2; + margin-bottom: 1rem; + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } -.heroSubtitle { - font-size: 1.25rem; +.breadcrumb { color: var(--text-secondary); - max-width: 700px; - margin: 0 auto; - line-height: 1.7; + font-size: 0.95rem; +} + +.breadcrumb a { + color: var(--text-secondary); + text-decoration: none; + transition: color 0.2s; +} + +.breadcrumb a:hover { + color: var(--primary); +} + +.breadcrumb span { + color: var(--primary); + font-weight: 600; +} + +/* 1. Story Section (Image 3 Style) */ +.storySection { + padding: 4rem 0; + background: white; + overflow: hidden; } .storyGrid { display: grid; grid-template-columns: 1fr; - gap: 3rem; + gap: 4rem; align-items: center; } -@media (min-width: 1024px) { +.storyImageContainer { + position: relative; + padding: 2rem; + /* Space for frame */ +} + +/* The decorative frame behind the image */ +.storyFrame { + position: absolute; + inset: 0; + border: 3px solid #ec4899; + /* Primary Pink */ + border-radius: 20px; + transform: rotate(-3deg); + z-index: 0; + width: 90%; + height: 90%; + margin: auto; +} + +.storyImageWrapper { + position: relative; + z-index: 1; + border-radius: 20px; + overflow: hidden; + box-shadow: var(--shadow-xl); + transform: rotate(2deg); + /* Counter tilt */ +} + +.storyImg { + width: 100%; + height: auto; + display: block; +} + +.storyContent { + padding-left: 2rem; +} + +.storyTitle { + color: #ec4899; + /* Pink Title */ + font-size: 1.1rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 2px; + margin-bottom: 1rem; +} + +.storyHeading { + font-size: 2rem; + font-weight: 700; + color: var(--foreground); + margin-bottom: 1.5rem; + line-height: 1.3; +} + +.storyText { + color: var(--text-secondary); + margin-bottom: 1.5rem; + font-size: 1rem; + line-height: 1.7; +} + +.storyBtn { + background: #ec4899; + color: white; + border: none; + padding: 1rem 2rem; + font-weight: 600; + border-radius: 8px; + cursor: pointer; + font-size: 1rem; + transition: all 0.3s ease; + box-shadow: 0 4px 14px 0 rgba(236, 72, 153, 0.39); +} + +.storyBtn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(236, 72, 153, 0.23); + background: #db2777; +} + + +/* 2. Why Choose Us (Image 1 Style) */ +.whyChooseSection { + padding: 4rem 0 4rem; + background: var(--background-secondary); +} + +.whyHeader { + text-align: center; + max-width: 700px; + margin: 0 auto 4rem; +} + +.sectionTitle { + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 1rem; + color: var(--foreground); +} + +.sectionSubtitle { + color: var(--text-secondary); + font-size: 1.1rem; +} + +.cardsGrid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; +} + +.card { + padding: 2.5rem 1.5rem; + border-radius: 24px; + text-align: center; + transition: transform 0.3s ease; + border: 1px solid transparent; +} + +.card:hover { + transform: translateY(-10px); +} + +.cardIconWrapper { + width: 64px; + height: 64px; + border-radius: 50%; + background: white; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.card h3 { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--foreground); +} + +.card p { + font-size: 0.95rem; + color: var(--text-secondary); + line-height: 1.5; +} + +/* Card Variants */ +/* Purple */ +.cardPurple { + background: #F3E8FF; + border-color: #E9D5FF; +} + +.cardPurple .cardIconWrapper { + color: #9333EA; +} + +/* Orange */ +.cardOrange { + background: #FFEDD5; + /* Peach/Orange */ + border-color: #FED7AA; +} + +.cardOrange .cardIconWrapper { + color: #F97316; +} + +/* Pink */ +.cardPink { + background: #FCE7F3; + border-color: #FBCFE8; +} + +.cardPink .cardIconWrapper { + color: #EC4899; +} + +/* Green */ +.cardGreen { + background: #DCFCE7; + border-color: #BBF7D0; +} + +.cardGreen .cardIconWrapper { + color: #16A34A; + /* Updated green for better contrast on light bg, slightly darker than accent */ +} + + +/* 3. Feature Set Section (Image 2 Style) */ +.featureSetSection { + padding: 4rem 0; + background: white; + overflow: hidden; +} + +.featureSetGrid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +.featureSetTitle { + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 3rem; + line-height: 1.2; + color: var(--foreground); +} + +.featureList { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.featureListItem { + display: flex; + gap: 1.5rem; + align-items: flex-start; +} + +.featureListIcon { + width: 50px; + height: 50px; + border-radius: 12px; + background: var(--background-secondary); + color: var(--primary); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.featureListText h4 { + font-size: 1.1rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--foreground); +} + +.featureListText p { + font-size: 0.95rem; + color: var(--text-secondary); + line-height: 1.5; +} + +/* Mockup Side */ +.mockupWrapper { + position: relative; + background: #F8FAFC; + /* Subtle bg blob? */ + border-radius: 40px; + padding: 2rem; + /* Center the image */ + display: flex; + justify-content: center; + align-items: center; +} + +.mockupWrapper::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at center, #F1F5F9 0%, transparent 70%); + z-index: 0; +} + +.mockupImg { + position: relative; + z-index: 1; + width: 100%; + height: auto; + filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1)); +} + +.floatCard { + position: absolute; + background: white; + padding: 1rem 1.5rem; + border-radius: 16px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + z-index: 2; + display: flex; + flex-direction: column; + gap: 0.25rem; + animation: float 4s ease-in-out infinite; +} + +.floatCard1 { + top: 10%; + right: 5%; + animation-delay: 0s; +} + +.floatCard2 { + bottom: 15%; + right: 10%; + animation-delay: 1.5s; +} + +.floatCard span { + font-weight: 600; + color: var(--foreground); + font-size: 0.9rem; +} + +.floatCard small { + color: var(--text-secondary); + font-size: 0.8rem; +} + +.floatCard strong { + color: var(--primary); + font-size: 1.2rem; +} + +/* Responsive */ +@media (min-width: 900px) { .storyGrid { grid-template-columns: 1fr 1fr; } + + .cardsGrid { + grid-template-columns: repeat(4, 1fr); + } + + .featureSetGrid { + grid-template-columns: 1fr 1fr; + } } -.storyImage { - order: 2; +/* 4. Ready CTA Section (Image Bottom Style) */ +.readySection { + padding: 4rem 0 4rem; + /* Padding bottom mainly, card has internal padding */ + background: white; } -@media (min-width: 1024px) { - .storyImage { - order: 1; - } -} - -.imagePlaceholder { - width: 100%; - aspect-ratio: 1; - background: linear-gradient(135deg, var(--primary), var(--secondary)); - border-radius: 24px; - display: flex; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; -} - -.placeholderIcon { - font-size: 8rem; - opacity: 0.3; -} - -.storyContent { - order: 1; -} - -@media (min-width: 1024px) { - .storyContent { - order: 2; - } -} - -.sectionTitle { - font-size: clamp(2rem, 4vw, 3rem); - font-weight: 800; - margin-bottom: 1.5rem; - line-height: 1.2; -} - -.storyText { - font-size: 1.125rem; - line-height: 1.8; - color: var(--text-secondary); - margin-bottom: 1.5rem; -} - -.storyText:last-child { - margin-bottom: 0; -} - -.valuesSection { - background: linear-gradient(135deg, rgba(236, 72, 153, 0.03), rgba(59, 130, 246, 0.03)); -} - -.sectionHeader { - text-align: center; - margin-bottom: 4rem; -} - -.sectionSubtitle { - font-size: 1.125rem; - color: var(--text-secondary); - max-width: 600px; - margin: 0 auto; -} - -.valuesGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; -} - -.valueCard { - background: var(--card-bg); - border: 1px solid var(--border-color); - border-radius: 20px; - padding: 2rem; - text-align: center; - transition: all 0.3s ease; -} - -.valueCard:hover { - transform: translateY(-5px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border-color: var(--primary); -} - -.valueIcon { - font-size: 3rem; - margin-bottom: 1rem; -} - -.valueTitle { - font-size: 1.5rem; - font-weight: 700; - margin-bottom: 0.75rem; - color: var(--text-primary); -} - -.valueDescription { - font-size: 1rem; - color: var(--text-secondary); - line-height: 1.6; -} - -.timeline { - max-width: 800px; - margin: 0 auto; - position: relative; -} - -.timeline::before { - content: ''; - position: absolute; - left: 30px; - top: 0; - bottom: 0; - width: 2px; - background: linear-gradient(180deg, var(--primary), var(--secondary)); -} - -@media (min-width: 768px) { - .timeline::before { - left: 50%; - transform: translateX(-50%); - } -} - -.timelineItem { - display: flex; - gap: 1.5rem; - margin-bottom: 3rem; - position: relative; -} - -@media (min-width: 768px) { - .timelineItem { - width: 50%; - } - - .timelineItem:nth-child(even) { - margin-left: auto; - flex-direction: row-reverse; - } -} - -.timelineIcon { - width: 60px; - height: 60px; - background: linear-gradient(135deg, var(--primary), var(--secondary)); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.75rem; - flex-shrink: 0; - box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3); - position: relative; - z-index: 1; -} - -.timelineContent { - flex: 1; - background: var(--card-bg); - border: 1px solid var(--border-color); - border-radius: 16px; - padding: 1.5rem; -} - -.timelineYear { - font-size: 1.5rem; - font-weight: 800; - background: linear-gradient(135deg, var(--primary), var(--secondary)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - margin-bottom: 0.5rem; -} - -.timelineEvent { - font-size: 1.125rem; - color: var(--text-primary); - font-weight: 600; -} - -.teamSection { - background: var(--bg-primary); -} - -.teamGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; -} - -.teamCard { - background: var(--card-bg); - border: 1px solid var(--border-color); - border-radius: 20px; - padding: 2rem; - text-align: center; - transition: all 0.3s ease; -} - -.teamCard:hover { - transform: translateY(-5px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border-color: var(--primary); -} - -.memberImage { - width: 100px; - height: 100px; - background: linear-gradient(135deg, var(--primary), var(--secondary)); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 3rem; - margin: 0 auto 1.5rem; -} - -.memberName { - font-size: 1.25rem; - font-weight: 700; - color: var(--text-primary); - margin-bottom: 0.5rem; -} - -.memberRole { - font-size: 1rem; - color: var(--primary); - font-weight: 600; - margin-bottom: 0.75rem; -} - -.memberBio { - font-size: 0.9375rem; - color: var(--text-secondary); - line-height: 1.6; -} - -.ctaSection { - padding: 6rem 0; - background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05)); -} - -.ctaContent { - text-align: center; -} - -.ctaTitle { - font-size: clamp(2rem, 4vw, 3rem); - font-weight: 800; - margin-bottom: 1rem; - line-height: 1.2; -} - -.ctaSubtitle { - font-size: 1.25rem; - color: var(--text-secondary); - margin-bottom: 2rem; -} - -.ctaButtons { +.readyCard { + background: linear-gradient(135deg, #2563eb 0%, #ec4899 100%); + /* Primary Gradient Blue->Pink */ + border-radius: 40px; + padding: 4rem 4rem 0; + /* No bottom padding, content aligns to bottom */ display: flex; flex-direction: column; - gap: 1rem; + justify-content: space-between; align-items: center; + position: relative; + overflow: hidden; + color: white; + box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.4); } -@media (min-width: 640px) { - .ctaButtons { +.readyContent { + max-width: 600px; + text-align: center; + margin-bottom: 3rem; + position: relative; + z-index: 2; +} + +.readyTitle { + font-size: clamp(2rem, 5vw, 3rem); + font-weight: 800; + margin-bottom: 1.5rem; + line-height: 1.2; + color: white; +} + +.whiteGradientText { + color: #fff; + text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); +} + +.readyText { + font-size: 1.05rem; + line-height: 1.6; + margin-bottom: 2.5rem; + opacity: 0.9; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +.readyBtn { + background: white; + color: #ec4899; + /* Pink text */ + border: none; + padding: 1rem 2.5rem; + border-radius: 50px; + font-weight: 700; + font-size: 1rem; + cursor: pointer; + transition: transform 0.2s, box-shadow 0.2s; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} + +.readyBtn:hover { + transform: translateY(-2px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); +} + +.readyImageWrapper { + position: relative; + z-index: 1; + width: 100%; + display: flex; + justify-content: center; + margin-bottom: -50px; + /* Let it bleed out slightly if we want, or just sit at bottom */ +} + +/* Phone Mockup */ +.phoneFrame { + position: relative; + width: 300px; + height: auto; + transform: rotate(-10deg) translateX(-20px); + /* Tilted left like ref */ + transition: transform 0.3s ease; +} + +.phoneFrame:hover { + transform: rotate(0deg) translateX(0); +} + +.phoneScreen { + width: 100%; + height: auto; + border-radius: 30px; + border: 8px solid #1e293b; + /* Dark Frame */ + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); + background: white; + /* Fallback */ +} + +.phoneOverlayCard { + position: absolute; + top: 20%; + right: -40px; + background: white; + color: #0f172a; + padding: 1rem 1.5rem; + border-radius: 16px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); + display: flex; + flex-direction: column; + gap: 0.5rem; + animation: float 5s ease-in-out infinite reverse; +} + +.overlayItem { + font-size: 0.85rem; + background: #f1f5f9; + padding: 0.5rem; + border-radius: 8px; + font-weight: 500; +} + +/* Desktop Layout */ +@media (min-width: 900px) { + .readyCard { flex-direction: row; - justify-content: center; + align-items: center; + text-align: left; + padding: 4rem 4rem 4rem 6rem; + /* Left padding for image space */ + overflow: visible; + /* Allow image to pop out if needed */ + /* Space for pop out */ + } + + .readyContent { + max-width: 50%; + text-align: left; + order: 2; + /* Text on right */ + margin-bottom: 0; + } + + .readyText { + margin-left: 0; + margin-right: 0; + } + + .readyImageWrapper { + order: 1; + /* Image on left */ + width: 40%; + justify-content: flex-start; + margin-bottom: 0; + position: relative; + left: -20px; + } + + .phoneFrame { + width: 280px; + transform: rotate(-12deg) translateY(20px) scale(1.1); } } \ No newline at end of file diff --git a/app/about/page.tsx b/app/about/page.tsx index a44df34..6cec6f4 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,4 +1,7 @@ import type { Metadata } from 'next'; +import Image from 'next/image'; +import Link from 'next/link'; +import { ShieldCheck, Users, Zap, Award, CheckCircle2 } from 'lucide-react'; import styles from './about.module.css'; export const metadata: Metadata = { @@ -7,193 +10,210 @@ export const metadata: Metadata = { }; export default function AboutPage() { - const team = [ - { - name: 'Alex Johnson', - role: 'CEO & Founder', - image: 'πŸ‘¨β€πŸ’Ό', - bio: '10+ years in social media marketing', - }, - { - name: 'Sarah Williams', - role: 'CTO', - image: 'πŸ‘©β€πŸ’»', - bio: 'Former lead engineer at major tech companies', - }, - { - name: 'Michael Chen', - role: 'Head of Product', - image: 'πŸ‘¨β€πŸŽ¨', - bio: 'Product design expert with a passion for UX', - }, - { - name: 'Emily Rodriguez', - role: 'Head of Customer Success', - image: 'πŸ‘©β€πŸ’Ό', - bio: 'Dedicated to making customers successful', - }, - ]; - - const values = [ - { - icon: '🎯', - title: 'Customer First', - description: 'Everything we do is centered around making our customers successful.', - }, - { - icon: 'πŸš€', - title: 'Innovation', - description: 'We constantly push boundaries to deliver cutting-edge solutions.', - }, - { - icon: '🀝', - title: 'Collaboration', - description: 'We believe in the power of teamwork and community.', - }, - { - icon: 'πŸ’‘', - title: 'Simplicity', - description: 'Complex problems deserve simple, elegant solutions.', - }, - ]; - - const milestones = [ - { year: '2020', event: 'SocialBuddy founded', icon: 'πŸŽ‰' }, - { year: '2021', event: '1,000 users milestone', icon: '🎯' }, - { year: '2022', event: 'Series A funding', icon: 'πŸ’°' }, - { year: '2023', event: '10,000+ active users', icon: 'πŸš€' }, - { year: '2024', event: 'AI features launched', icon: 'πŸ€–' }, - { year: '2025', event: 'Global expansion', icon: '🌍' }, - ]; - return (
{/* Hero Section */}
-

- About SocialBuddy -

-

- We're on a mission to empower businesses and creators to build meaningful connections - through social mediaβ€”without the complexity. -

+

About Us

+
+ Home / About +
- {/* Story Section */} -
+ {/* 1. Our Story Section (Reference Image 3) */} +
-
-
- πŸ“– + {/* Left Image with Frame */} +
+
+
+ Our Team Story
+ + {/* Right Content */}
-

Our Story

+

OUR STORY

+

redefining the way you manage social media.

- SocialBuddy was born out of frustration. Our founders spent years managing social media - for multiple businesses and experienced firsthand the chaos of juggling multiple platforms, - tools, and spreadsheets. + In the heart of the digital age, SocialBuddy began with a simple idea: to bring exceptional social media management tools directly to your fingertips. With a passion for innovation and a commitment to convenience, we embarked on a mission to redefine the way you grow your online presence.

- We knew there had to be a better way. So in 2020, we set out to build the social media - management platform we wished existedβ€”one that's powerful yet simple, comprehensive yet - intuitive, and accessible to businesses of all sizes. -

-

- Today, SocialBuddy serves over 10,000 businesses and creators worldwide, helping them - save time, increase engagement, and grow their online presence. + From our humble beginnings to becoming a beloved tool for creators worldwide, our journey has been guided by one principle: to deliver results. With a dedication to quality insights and tech innovation, we invite you to join us on this flavorful adventure. Welcome to SocialBuddy, where every click tells a story of passion, growth, and the joy of shared success.

+
- {/* Values Section */} -
+ {/* 2. Why Choose Us Section (Reference Image 1) */} +
-
-

Our Values

+
+

Why choose us?

- The principles that guide everything we do + We provide comprehensive solutions tailored to your unique needs, helping you achieve your goals faster.

-
- {values.map((value, index) => ( -
-
{value.icon}
-

{value.title}

-

{value.description}

+ +
+ {/* Card 1: Purple */} +
+
+
- ))} +

Experienced Professionals

+

Our team consists of industry veterans with years of experience in social media strategies.

+
+ + {/* Card 2: Orange (Yellow/Peach in Ref) */} +
+
+ +
+

Satisfaction Guarantee

+

We are committed to your success and offer a satisfaction guarantee on all our services.

+
+ + {/* Card 3: Pink (Red/Pink in Ref) */} +
+
+ +
+

Affordable Rates

+

Get premium tools and insights at a fraction of the cost of enterprise solutions.

+
+ + {/* Card 4: Green */} +
+
+ +
+

Reliable & Trustworthy

+

Security and data privacy are our top priorities. Your account is safe with us.

+
- {/* Timeline Section */} -
+ {/* 3. Features Loop Section (Reference Image 2) */} +
-
-

Our Journey

-

- Key milestones in our growth story -

-
-
- {milestones.map((milestone, index) => ( -
-
{milestone.icon}
-
-
{milestone.year}
-
{milestone.event}
+
+ {/* Left Content */} +
+

+ Comprehensive Feature Set
+ of a Social Manager App +

+ +
+
+
+ +
+
+

Data Sync and Backup

+

Sync tasks and app settings like system color across multiple devices automatically.

+
+
+ +
+
+ +
+
+

Task Attachments

+

Users can attach files, documents, or links to tasks, providing additional context.

+
+
+ +
+
+ +
+
+

Real-time Analytics

+

Track performance metrics instantly as they happen, giving you the edge to adapt.

+
- ))} -
-
-
+
- {/* Team Section */} -
-
-
-

Meet Our Team

-

- The passionate people behind SocialBuddy -

-
-
- {team.map((member, index) => ( -
-
{member.image}
-

{member.name}

-
{member.role}
-

{member.bio}

+ {/* Right Image/Mockup */} +
+ {/* Mockup Container */} +
+ Feature Dashboard + {/* Floating Cards simulating the ref image */} +
+ Create Task + 17 August, 2023 +
+
+ Total Working Hours + 44:32:00 +
- ))} +
- {/* CTA Section */} -
+ {/* 4. Ready CTA Section (Reference Image Bottom) */} +
-
-

Join Us on Our Journey

-

- Be part of the future of social media management -

-
- - Start Free Trial - - - Contact Us - +
+
+

+ Ready? Let's Start with
SocialBuddy + and Get Awesome Experience +

+

+ Define unique social tactics for your brand. Users can adjust the goals, visuals and audience details to ensure their content workflows are spot on. +

+ +
+
+
+ SocialBuddy App + {/* Floating Overlay Card inside section */} +
+ Task List +
βœ… Social Audit
+
βœ… Content Plan
+
+
diff --git a/app/blog/blog.module.css b/app/blog/blog.module.css deleted file mode 100644 index 2ff32e4..0000000 --- a/app/blog/blog.module.css +++ /dev/null @@ -1,222 +0,0 @@ -.blogPage { - padding-top: 5rem; -} - -.hero { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - padding: 6rem 0 4rem; - text-align: center; - color: white; -} - -.heroContent { - max-width: 800px; - margin: 0 auto; -} - -.heroTitle { - font-size: clamp(2.5rem, 5vw, 4rem); - margin-bottom: 1.5rem; - color: white; -} - -.heroSubtitle { - font-size: 1.25rem; - color: rgba(255, 255, 255, 0.95); -} - -.categoriesSection { - padding: 2rem 0; - background: var(--background-secondary); -} - -.categories { - display: flex; - gap: 1rem; - justify-content: center; - flex-wrap: wrap; -} - -.categoryBtn { - padding: 0.75rem 1.5rem; - background: var(--background); - border: 2px solid transparent; - border-radius: var(--radius-lg); - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - color: var(--foreground-secondary); -} - -.categoryBtn:hover, -.categoryBtn.active { - background: var(--gradient-primary); - color: white; - transform: translateY(-2px); -} - -.blogGrid { - display: grid; - grid-template-columns: 1fr; - gap: 2rem; -} - -@media (min-width: 768px) { - .blogGrid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 1024px) { - .blogGrid { - grid-template-columns: repeat(3, 1fr); - } -} - -.blogCard { - background: var(--background); - border-radius: var(--radius-xl); - overflow: hidden; - box-shadow: var(--shadow-md); - transition: all 0.3s ease; - display: flex; - flex-direction: column; -} - -.blogCard:hover { - transform: translateY(-10px); - box-shadow: var(--shadow-xl); -} - -.cardImage { - height: 200px; - background: var(--gradient-primary); - display: flex; - align-items: center; - justify-content: center; -} - -.imageIcon { - font-size: 5rem; - filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); -} - -.cardContent { - padding: 2rem; - flex: 1; - display: flex; - flex-direction: column; -} - -.cardMeta { - display: flex; - gap: 1rem; - margin-bottom: 1rem; - font-size: 0.85rem; -} - -.category { - padding: 0.25rem 0.75rem; - background: var(--gradient-primary); - color: white; - border-radius: var(--radius-md); - font-weight: 600; -} - -.date { - color: var(--foreground-secondary); -} - -.cardTitle { - font-size: 1.5rem; - margin-bottom: 1rem; - font-family: var(--font-display); -} - -.cardTitle a { - color: var(--foreground); - text-decoration: none; - transition: color 0.3s ease; -} - -.cardTitle a:hover { - color: var(--primary); -} - -.cardExcerpt { - color: var(--foreground-secondary); - line-height: 1.6; - margin-bottom: 1.5rem; - flex: 1; -} - -.cardFooter { - display: flex; - justify-content: space-between; - align-items: center; - padding-top: 1rem; - border-top: 1px solid var(--background-secondary); -} - -.readTime { - color: var(--foreground-secondary); - font-size: 0.9rem; -} - -.readMore { - color: var(--primary); - font-weight: 600; - text-decoration: none; - transition: all 0.3s ease; -} - -.readMore:hover { - gap: 0.5rem; -} - -.newsletter { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - padding: 5rem 0; - text-align: center; - color: white; - margin-top: 4rem; -} - -.newsletterContent { - max-width: 600px; - margin: 0 auto; -} - -.newsletterTitle { - font-size: 2.5rem; - margin-bottom: 1rem; - color: white; -} - -.newsletterSubtitle { - font-size: 1.25rem; - margin-bottom: 2rem; - color: rgba(255, 255, 255, 0.95); -} - -.newsletterForm { - display: flex; - gap: 1rem; - max-width: 500px; - margin: 0 auto; - flex-wrap: wrap; -} - -.newsletterInput { - flex: 1; - min-width: 250px; - padding: 1rem 1.5rem; - border: none; - border-radius: var(--radius-lg); - font-size: 1rem; - outline: none; -} - -.newsletterForm .btn { - white-space: nowrap; -} \ No newline at end of file diff --git a/app/blog/page.tsx b/app/blog/page.tsx deleted file mode 100644 index 3e8987d..0000000 --- a/app/blog/page.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import type { Metadata } from 'next'; -import Link from 'next/link'; -import styles from './blog.module.css'; - -export const metadata: Metadata = { - title: 'Blog - SocialBuddy', - description: 'Latest news, tips, and insights about social media management, marketing strategies, and platform updates.', -}; - -export default function BlogPage() { - const blogPosts = [ - { - title: '10 Social Media Trends to Watch in 2025', - excerpt: 'Stay ahead of the curve with these emerging social media trends that will shape the digital landscape.', - category: 'Trends', - date: 'Dec 8, 2025', - readTime: '5 min read', - image: 'πŸ“ˆ', - slug: '10-social-media-trends-2025', - }, - { - title: 'How to Create a Content Calendar That Works', - excerpt: 'Learn the best practices for planning and organizing your social media content effectively.', - category: 'Strategy', - date: 'Dec 5, 2025', - readTime: '8 min read', - image: 'πŸ“…', - slug: 'content-calendar-guide', - }, - { - title: 'Mastering Instagram Reels for Business Growth', - excerpt: 'Discover how to leverage Instagram Reels to increase engagement and reach new audiences.', - category: 'Tutorial', - date: 'Dec 1, 2025', - readTime: '6 min read', - image: '🎬', - slug: 'instagram-reels-guide', - }, - { - title: 'The Ultimate Guide to Social Media Analytics', - excerpt: 'Understand the metrics that matter and how to use data to improve your social media performance.', - category: 'Analytics', - date: 'Nov 28, 2025', - readTime: '10 min read', - image: 'πŸ“Š', - slug: 'social-media-analytics-guide', - }, - { - title: 'AI-Powered Content Creation: Tips and Tools', - excerpt: 'Explore how artificial intelligence is transforming content creation and how you can use it effectively.', - category: 'Technology', - date: 'Nov 25, 2025', - readTime: '7 min read', - image: 'πŸ€–', - slug: 'ai-content-creation', - }, - { - title: 'Building a Strong Brand Voice on Social Media', - excerpt: 'Learn how to develop and maintain a consistent brand voice across all your social platforms.', - category: 'Branding', - date: 'Nov 20, 2025', - readTime: '6 min read', - image: '🎯', - slug: 'brand-voice-guide', - }, - ]; - - const categories = ['All', 'Trends', 'Strategy', 'Tutorial', 'Analytics', 'Technology', 'Branding']; - - return ( -
- {/* Hero Section */} -
-
-
-

- SocialBuddy Blog -

-

- Insights, tips, and strategies to help you succeed in social media marketing -

-
-
-
- - {/* Categories */} -
-
-
- {categories.map((category, idx) => ( - - ))} -
-
-
- - {/* Blog Grid */} -
-
-
- {blogPosts.map((post, idx) => ( -
-
- {post.image} -
-
-
- {post.category} - {post.date} -
-

- {post.title} -

-

{post.excerpt}

-
- ⏱️ {post.readTime} - - Read More β†’ - -
-
-
- ))} -
-
-
- - {/* Newsletter Section */} -
-
-
-

Stay Updated

-

- Get the latest social media tips and SocialBuddy updates delivered to your inbox -

-
- - -
-
-
-
-
- ); -} diff --git a/app/careers/careers.module.css b/app/careers/careers.module.css new file mode 100644 index 0000000..e3d668e --- /dev/null +++ b/app/careers/careers.module.css @@ -0,0 +1,395 @@ +/* Careers Page Styles */ + +.careersPage { + background: var(--background); +} + +/* Hero Section */ +.hero { + background: url('/hero-inner-bg.png') no-repeat center center; + background-size: cover; + padding: 8rem 0 8rem; + /* Taller padding */ + position: relative; + border-bottom: 1px solid var(--border-color); + text-align: center; + color: white; + /* Text white on BG */ +} + +.hero::before { + content: ''; + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.6); + /* Dark Overlay */ + z-index: 0; +} + +.heroContent { + position: relative; + z-index: 1; +} + +.heroTitle { + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 800; + margin-bottom: 1rem; + color: white; +} + +.subTitle { + color: #0072b1; + /* Dark Blue */ + font-weight: 700; + font-size: 0.875rem; + margin-bottom: 1rem; + display: inline-block; + text-transform: uppercase; + letter-spacing: 2px; +} + +.heroSubtitle { + color: rgba(255, 255, 255, 0.9); + font-size: 1.1rem; + max-width: 600px; + margin: 0 auto; +} + +.breadcrumb { + color: rgba(255, 255, 255, 0.8); + font-size: 0.9rem; + margin-top: 1.5rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.breadcrumb a { + color: white; + text-decoration: none; + font-weight: 500; +} + +.breadcrumb span { + opacity: 0.6; +} + +.breadcrumb .active { + color: var(--primary); + /* Pink or Blue highlighting current page? or just Theme Color */ + color: #ec4899; +} + +/* 1. What We Offer (Left Content, Right 3 Images) */ +.offerSection { + padding: 4rem 0; + background: white; +} + +.offerContainer { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +.offerContent { + text-align: left; +} + +.offerContent h2 { + font-size: 2.5rem; + font-weight: 800; + color: var(--foreground); + margin-bottom: 1.5rem; +} + +.offerContent p { + color: var(--text-secondary); + font-size: 1rem; + line-height: 1.7; + margin-bottom: 2rem; +} + +.offerImageGrid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 200px); + gap: 1.5rem; +} + +.gridImg { + border-radius: 20px; + object-fit: cover; + width: 100%; + height: 100%; +} + +.img1 { + grid-row: 1 / 3; + /* Tall image on left */ + height: 100%; +} + +.img2 { + grid-column: 2; + grid-row: 1; +} + +.img3 { + grid-column: 2; + grid-row: 2; +} + + +/* 2. Stats Section (BG Image + Overlay) */ +.statsSection { + background: url('/hero-slide-1.png') no-repeat center center; + background-size: cover; + background-attachment: fixed; + /* Parallax effect */ + padding: 4rem 0; + color: white; + position: relative; + overflow: hidden; +} + +.statsSection::before { + content: ''; + position: absolute; + inset: 0; + background: rgba(37, 99, 235, 0.85); + /* Blue Overlay */ + z-index: 0; +} + +.statsGrid { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + text-align: center; +} + +.statItem { + position: relative; +} + +.statIconWrapper { + font-size: 2.5rem; + margin-bottom: 1rem; + color: #f9cd35; + /* Yellow Icon */ +} + +.statNumber { + font-size: 3.5rem; + font-weight: 800; + margin-bottom: 0.5rem; + line-height: 1; +} + +.statLabel { + font-size: 1.1rem; + font-weight: 600; + opacity: 0.9; + text-transform: uppercase; + letter-spacing: 1px; +} + + +/* 3. Hiring Process (Timeline) */ +.hiringSection { + padding: 4rem 0; + background: white; +} + +.hiringGrid { + display: grid; + grid-template-columns: 1fr; + gap: 5rem; + align-items: start; +} + +/* Hiring Image Left */ +.hiringImageWrapper { + position: sticky; + top: 100px; +} + +.hiringImg { + border-radius: 24px; + width: 100%; + height: auto; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); +} + +/* Hiring Process Content Right */ +.processList { + position: relative; + padding-left: 0; + display: flex; + flex-direction: column; + gap: 3rem; +} + +.processList::before { + content: ''; + position: absolute; + left: 25px; + /* Center of numbering */ + top: 170px; + /* Start below the first number to avoid line going above */ + bottom: 55px; + /* End before last number */ + width: 2px; + background: #e2e8f0; + z-index: 0; +} + +.processItem { + position: relative; + z-index: 1; + display: flex; + gap: 2rem; +} + +.processNumber { + width: 50px; + height: 50px; + background: white; + color: #2563eb; + border: 2px solid #2563eb; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.25rem; + flex-shrink: 0; + z-index: 1; +} + +.processContent h4 { + font-size: 1.25rem; + font-weight: 700; + color: #1e293b; + margin-bottom: 0.5rem; +} + +.processContent p { + color: var(--text-secondary); + line-height: 1.6; +} + + +/* 4. Benefits / Ultimate Experience (Vertical Connected Cards) */ +.benefitsSection { + padding: 4rem 0; + background: var(--background-secondary); + overflow: hidden; +} + +.benefitsGrid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: flex-start; +} + +.benefitsContent h2 { + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 1.5rem; + color: var(--foreground); +} + +.benefitsText { + font-size: 1.05rem; + color: var(--text-secondary); + line-height: 1.7; + margin-bottom: 2rem; +} + +/* Right Side: Connected Cards */ +.connectedCards { + position: relative; + display: flex; + flex-direction: column; + gap: 2rem; + padding-left: 2rem; + /* Indent slightly if needed */ +} + +/* Dotted Line connecting the cards - REMOVED per request */ +/* .connectedCards::before { } */ + +.connCard { + position: relative; + z-index: 1; + background: white; + padding: 1.5rem 2rem; + border-radius: 16px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + /* Flat style */ + display: flex; + gap: 1.5rem; + align-items: center; + transition: transform 0.3s ease; +} + +.connCard:hover { + transform: translateX(10px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} + +.connIcon { + width: 60px; + height: 60px; + background: #f1f5f9; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + color: #0072b1; + flex-shrink: 0; + border: 4px solid white; + /* Gap for line */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.connContent h4 { + font-size: 1.1rem; + font-weight: 700; + margin-bottom: 0.25rem; + color: #1e293b; +} + +.connContent p { + font-size: 0.9rem; + color: #64748b; + margin: 0; +} + +/* Responsive */ +@media (min-width: 900px) { + .offerContainer { + grid-template-columns: 1fr 1fr; + } + + .statsGrid { + grid-template-columns: repeat(4, 1fr); + } + + .hiringGrid { + grid-template-columns: 1fr 1fr; + } + + .benefitsGrid { + grid-template-columns: 1fr 1fr; + } +} \ No newline at end of file diff --git a/app/careers/page.tsx b/app/careers/page.tsx new file mode 100644 index 0000000..de95ec1 --- /dev/null +++ b/app/careers/page.tsx @@ -0,0 +1,211 @@ +import type { Metadata } from 'next'; +import Image from 'next/image'; +import Link from 'next/link'; +import { + Users, Smile, MapPin, Award, + Zap, Briefcase, Clock, Coffee, Layout, MousePointerClick, Gem +} from 'lucide-react'; +import styles from './careers.module.css'; + +export const metadata: Metadata = { + title: 'Careers - Join SocialBuddy', + description: 'Join our team and help shape the future of social media management.', +}; + +export default function CareersPage() { + return ( +
+ {/* Hero Section */} +
+
+
+

Careers

+ +
+ Home / Careers +
+
+
+
+ + {/* 1. What We Offer (Left Content, Right 3 Images) */} +
+
+
+ {/* Left Content */} +
+ What We Do +

We Are Building The Future of Social Media

+

+ At SocialBuddy, we don't just build tools; we build connections. Our platform empowers over 10,000 businesses to reach their potential audiences effectively. +

+

+ We work with cutting-edge technologies like AI and Machine Learning to solve complex scale problems. If you love challenges and innovation, this is the place for you. +

+ +
+ + {/* Right Image Grid (3 Images) */} +
+
+ Team Collaboration +
+
+ Our Workspace +
+
+ Meeting +
+
+
+
+
+ + {/* 2. Stats Section (BG + Overlay) */} +
+
+
+
+
+
54
+
Happy Team
+
+
+
+
340
+
Completed Projects
+
+
+
+
15
+
Countries
+
+
+
+
25
+
Awards Won
+
+
+
+
+ + {/* 3. Hiring Process (Timeline) */} +
+
+
+ {/* Left: Image */} +
+ Hiring Process +
+ + {/* Right: Process List */} +
+
+ Hiring Process +

+ Join in 3 Simple Steps +

+
+ +
+
01
+
+

Provide details

+

Submit your application with your resume and portfolio. Tell us about your journey.

+
+
+
+
02
+
+

Schedule Interview

+

We'll schedule a call to discuss your skills, experience, and cultural fit.

+
+
+
+
03
+
+

Get Hired

+

Receive an offer and join our amazing team. Welcome aboard!

+
+
+
+
+
+
+ + {/* 4. Ultimate Experience (Dotted Cards) */} +
+
+
+ {/* Left Content */} +
+ Why Choose Us? +

Ultimate Experience for
Your Career

+

+ Completely empower your career journey with robust opportunities. We enable front-end and back-end developers to thrive in an environment of innovation. +

+ +
+ + {/* Right Connected Cards */} +
+
+
+ +
+
+

Future Technology

+

Work with the latest modern stack.

+
+
+ +
+
+ +
+
+

Drag & Drop Builder

+

Intuitive tools for every task.

+
+
+ +
+
+ +
+
+

Most Eco Friendly

+

Sustainable practices at core.

+
+
+
+
+
+
+
+ ); +} diff --git a/app/channels/[slug]/channel-page.module.css b/app/channels/[slug]/channel-page.module.css new file mode 100644 index 0000000..b83c49c --- /dev/null +++ b/app/channels/[slug]/channel-page.module.css @@ -0,0 +1,633 @@ +/* Page Wrapper */ +.page { + animation: fadeIn 0.6s ease-out; + background-color: var(--background); + color: var(--text-primary); +} + +.container { + max-width: 1280px; + margin: 0 auto; + padding: 0 1.5rem; +} + +/* --- Hero Section (Ref: Inner Banner from About) --- */ +.hero { + padding: 8rem 0 8rem; + text-align: center; + background-image: url('/hero-inner-bg.png'); + /* Use same image as About */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); + /* Overlay for text readability */ +} + +.heroContent { + position: relative; + z-index: 1; + max-width: 900px; + margin: 0 auto; +} + +.heroTitle { + font-size: clamp(2.5rem, 6vw, 4rem); + font-weight: 800; + margin-bottom: 1rem; + line-height: 1.2; + color: #fff; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.breadcrumbs { + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.breadcrumbs a { + color: rgba(255, 255, 255, 0.9); + text-decoration: none; + transition: color 0.3s ease; +} + +.breadcrumbs a:hover { + color: #fff; +} + +.breadcrumbs span { + color: #fff; + font-weight: 600; +} + +/* --- Section 1: About (Icons) --- */ +.aboutSection { + padding: 4rem 0; + background: #fff; +} + +.aboutGrid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +@media (min-width: 992px) { + .aboutGrid { + grid-template-columns: 1fr 1fr; + } +} + +.aboutImages { + position: relative; + min-height: 500px; +} + +.aboutMainImgWrapper { + position: absolute; + top: 0; + left: 0; + width: 80%; + height: 85%; + z-index: 1; + border-radius: 12px; + overflow: hidden; +} + +.aboutSubImgWrapper { + position: absolute; + bottom: 0; + right: 0; + width: 55%; + height: 50%; + z-index: 2; + border: 8px solid #fff; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); +} + +.aboutContent { + padding-left: 1rem; +} + +.sectionSubtitle { + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 2px; + color: var(--primary); + margin-bottom: 1rem; + display: block; + font-weight: 600; +} + +.sectionTitle { + font-size: clamp(2rem, 4vw, 3rem); + line-height: 1.2; + margin-bottom: 1.5rem; + color: var(--text-primary); + font-weight: 700; +} + +.aboutDescription { + color: var(--text-secondary); + margin-bottom: 2rem; + line-height: 1.7; + font-size: 1.1rem; +} + +.aboutPoints { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; + margin-bottom: 2.5rem; +} + +@media (min-width: 640px) { + .aboutPoints { + grid-template-columns: 1fr 1fr; + } +} + +.aboutPointItem { + display: flex; + align-items: center; + gap: 1rem; +} + +.aboutPointIcon svg { + width: 28px; + height: 28px; + color: var(--primary); +} + +.aboutPointText { + font-weight: 600; + color: var(--text-primary); +} + +/* --- Section 2: Benefits --- */ +.benefitsSection { + padding: 4rem 0; + background: var(--background-secondary); +} + +.benefitsContainer { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +@media (min-width: 992px) { + .benefitsContainer { + grid-template-columns: 1fr 1.5fr; + } +} + +.benefitsContent {} + +.benefitsGrid { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; +} + +@media (min-width: 640px) { + .benefitsGrid { + grid-template-columns: repeat(2, 1fr); + } +} + +.benefitCard { + background: #fff; + padding: 2rem; + border-radius: 16px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.benefitCard:hover { + background: var(--primary); + transform: translateY(-5px); +} + +.benefitCard:hover * { + color: #fff !important; +} + +.benefitIcon { + font-size: 2.5rem; + margin-bottom: 1rem; + color: var(--primary); + transition: color 0.3s ease; +} + +.benefitCardTitle { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--text-primary); + transition: color 0.3s ease; +} + +.benefitCardDesc { + font-size: 0.9rem; + color: var(--text-secondary); + transition: color 0.3s ease; +} + +/* --- Section 3: Testimonial (Update: Left Images Grid, Right Slider) --- */ +.testimonialSection { + padding: 4rem 0; + background: #fff; + overflow: hidden; +} + +.testimonialGrid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +@media (min-width: 992px) { + .testimonialGrid { + grid-template-columns: 0.8fr 1.2fr; + /* Images < Slider */ + } +} + +/* Left side: 2 Image Grid */ +.testimonialImages { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +.testImgWrapper { + border-radius: 12px; + overflow: hidden; + height: 300px; + background: #f0f0f0; +} + +.testImgWrapper:nth-child(2) { + margin-top: 3rem; + /* Stagger effect */ +} + +/* Right side: Slider Styles (Used by Client Component) */ +.testimonialSliderContainer { + position: relative; + padding: 2rem; +} + +.testSliderContent { + min-height: 300px; + display: flex; + flex-direction: column; + justify-content: center; + animation: fadeIn 0.5s ease-in-out; +} + +.testStars { + display: flex; + gap: 4px; + margin-bottom: 1.5rem; +} + +.testQuoteFade { + font-size: clamp(1.25rem, 2.5vw, 1.75rem); + font-weight: 500; + line-height: 1.4; + color: var(--text-primary); + margin-bottom: 2rem; + font-style: italic; +} + +.testAuthorBlock { + display: flex; + align-items: center; + gap: 1rem; +} + +.testAuthorAvatar { + width: 60px; + height: 60px; + border-radius: 50%; + object-fit: cover; +} + +.testAuthorInfo h4 { + margin: 0; + font-size: 1.1rem; + font-weight: 700; +} + +.testAuthorInfo span { + font-size: 0.9rem; + color: var(--text-secondary); +} + +.sliderDots { + display: flex; + gap: 0.5rem; + margin-top: 2rem; +} + +.dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: #E2E8F0; + border: none; + cursor: pointer; + transition: background 0.3s; +} + +.activeDot { + background: var(--primary); +} + + +/* --- Section 4: Blogs --- */ +.resourcesSection { + padding: 4rem 0; + background: var(--background-secondary); +} + +.blogGrid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + margin-top: 3rem; +} + +@media (min-width: 768px) { + .blogGrid { + grid-template-columns: repeat(3, 1fr); + } +} + +.blogCard { + background: #fff; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease; +} + +.blogCard:hover { + transform: translateY(-5px); +} + +.blogImageWrapper { + height: 200px; + overflow: hidden; +} + +.blogImage { + width: 100%; + height: 100%; + object-fit: cover; +} + +.blogContent { + padding: 1.5rem; +} + +.blogCategory { + color: var(--primary); + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + margin-bottom: 0.5rem; + display: block; +} + +.blogTitle { + font-size: 1.25rem; + margin-bottom: 0.75rem; + line-height: 1.4; +} + +.blogExcerpt { + font-size: 0.95rem; + color: var(--text-secondary); + margin-bottom: 1rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + line-clamp: 2; +} + +.readMoreLink { + color: var(--primary); + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +/* --- Section 5: FAQ --- */ +.faqSection { + padding: 4rem 0; + background: #fff; +} + +.faqGrid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: flex-start; +} + +@media (min-width: 992px) { + .faqGrid { + grid-template-columns: 1fr 1fr; + } +} + +.faqImageWrapper { + border-radius: 20px; + overflow: hidden; +} + +.accordionItem { + border-bottom: 1px solid var(--border-color); + margin-bottom: 1rem; +} + +.accordionTrigger { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 0; + background: none; + border: none; + text-align: left; + cursor: pointer; + font-size: 1.1rem; + font-weight: 600; + color: var(--text-primary); +} + +.accordionContentOpen { + animation: slideDown 0.3s ease-out; +} + +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.accordionIcon { + font-size: 1.5rem; + font-weight: 300; +} + + +/* --- Section 6: CTA (Full Width Floating) --- */ +/* --- Section 6: CTA (Full Width Floating) --- */ +.ctaFullWidth { + position: relative; + padding: 4rem 0; + background-color: #F8FAFC; + /* Light fallback */ + background-image: url('/images/cta-bg-light.png'); + /* User requested image */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + overflow: hidden; + color: var(--text-primary); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + border-top: 1px solid rgba(0, 0, 0, 0.05); +} + +.ctaContentCentered { + position: relative; + z-index: 10; + max-width: 700px; + padding: 0 1.5rem; +} + +.ctaFullTitle { + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 800; + margin-bottom: 1.5rem; + line-height: 1.1; + color: var(--text-primary); +} + +.ctaFullText { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 2.5rem; +} + +.ctaFullBtn { + background: var(--primary); + /* Primary purple/blue */ + color: white; + padding: 1rem 3rem; + border-radius: 50px; + font-size: 1.1rem; + font-weight: 700; + transition: transform 0.2s; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + display: inline-block; +} + +.ctaFullBtn:hover { + transform: translateY(-3px) scale(1.05); + background: var(--primary-dark, #5b21b6); +} + +/* Floating Elements */ +.floatElem { + position: absolute; + opacity: 0.15; + pointer-events: none; +} + +.floatLeft { + left: 5%; + top: 20%; + width: 150px; + animation: float 6s ease-in-out infinite; +} + +.floatRight { + right: 5%; + bottom: 20%; + width: 180px; + animation: float 8s ease-in-out infinite reverse; +} + +@keyframes float { + 0% { + transform: translateY(0px); + } + + 50% { + transform: translateY(-20px); + } + + 100% { + transform: translateY(0px); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} \ No newline at end of file diff --git a/app/channels/[slug]/page.tsx b/app/channels/[slug]/page.tsx new file mode 100644 index 0000000..9872361 --- /dev/null +++ b/app/channels/[slug]/page.tsx @@ -0,0 +1,250 @@ +import { channels } from '@/data/channels'; +import { notFound } from 'next/navigation'; +import styles from './channel-page.module.css'; +import SafeImage from '@/components/SafeImage'; +import Link from 'next/link'; +import TestimonialSlider from '@/components/TestimonialSlider'; +import { + Calendar, Eye, BarChart, Trophy, Inbox, ShieldCheck, + Palette, Layout, Smartphone, Zap, PenTool, Repeat, + CheckCircle +} from 'lucide-react'; + +// Define Props interface +interface PageProps { + params: Promise<{ slug: string }>; +} + +export async function generateStaticParams() { + return channels.map((channel) => ({ + slug: channel.slug, + })); +} + +export async function generateMetadata(props: PageProps) { + const params = await props.params; + const channel = channels.find((c) => c.slug === params.slug); + if (!channel) return { title: 'Channel Not Found' }; + + return { + title: `${channel.title} Management Tool - SocialBuddy`, + description: channel.description, + }; +} + +// Icon mapping helper +const getIcon = (iconName: string) => { + switch (iconName) { + case 'Calendar': return ; + case 'Eye': return ; + case 'BarChart': return ; + case 'Trophy': return ; + case 'Inbox': return ; + case 'ShieldCheck': return ; + case 'Palette': return ; + case 'Layout': return ; + case 'Smartphone': return ; + case 'Zap': return ; + case 'PenTool': return ; + case 'Repeat': return ; + case 'CheckCircle': return ; + default: return ; + } +}; + +export default async function ChannelPage(props: PageProps) { + const params = await props.params; + + // Ensure params exists + if (!params?.slug) { + notFound(); + } + + const channel = channels.find((c) => c.slug === params.slug); + + if (!channel) { + notFound(); + } + + return ( +
+ {/* 1. Hero Section */} +
+
+
+

{channel.title}

+
+ Home / Channels / {channel.title} +
+
+
+
+ + {/* 2. About Section */} + {channel.about && ( +
+
+
+
+
+ +
+
+ +
+
+
+ {channel.about.subTitle} +

{channel.about.title}

+

{channel.about.description}

+
+ {channel.about.bulletPoints.map((point, i) => ( +
+ + {getIcon(point.icon)} + + {point.text} +
+ ))} +
+ Start Free Trial +
+
+
+
+ )} + + {/* 3. Benefits / Why Choose */} +
+
+
+
+ Why SocialBuddy for {channel.title} +

Tools Built for Growth

+

+ We've built specific tools to help you succeed on {channel.title}. + Stop guessing and start growing with data-driven insights. +

+ See All Features +
+
+ {channel.benefits.slice(0, 4).map((benefit, index) => ( +
+
+ {getIcon(benefit.icon)} +
+

{benefit.title}

+

{benefit.description}

+
+ ))} +
+
+
+
+ + {/* 4. Testimonials */} + {channel.testimonials && channel.testimonials.length > 0 && ( +
+
+
+
+
+ +
+
+ +
+
+
+ Testimonials +

Loved by {channel.title} Creators

+ +
+
+
+
+ )} + + {/* 5. FAQ */} + {channel.faqs && channel.faqs.length > 0 && ( +
+
+
+
+ FAQ +

Frequently Asked Questions about {channel.title}

+
+ {channel.faqs.map((faq, index) => ( +
+ + {faq.question} + + + +
+

{faq.answer}

+
+
+ ))} +
+
+
+ +
+
+
+
+ )} + + {/* 6. CTA (Full Width Floating) */} +
+ + + +
+

Ready to Master {channel.title}?

+

+ Join thousands of marketers who are growing their {channel.title} presence with SocialBuddy. +

+ + Start Free Trial + +
+
+
+ ); +} diff --git a/app/channels/channels.module.css b/app/channels/channels.module.css new file mode 100644 index 0000000..bca7406 --- /dev/null +++ b/app/channels/channels.module.css @@ -0,0 +1,283 @@ +/* Channels Page Styles */ + +.channelsPage { + background: var(--background); +} + +/* 1. About/Intro Section (Ref Image 1) */ +.introSection { + padding: 4rem 0; + background: white; + overflow: hidden; +} + +.introContainer { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +/* Left Image Structure */ +.introImageWrapper { + position: relative; + padding: 2rem; + display: flex; + justify-content: center; +} + +.introFrame { + position: absolute; + left: 20px; + bottom: 20px; + width: 90%; + height: 95%; + border: 4px solid #ec4899; + /* Pink Border */ + border-radius: 20px; + z-index: 0; + transform: none; + /* Reset rotation */ + margin: 0; +} + +.introImgContainer { + position: relative; + z-index: 1; + border-radius: 20px; + overflow: hidden; + transform: translate(20px, -20px); + /* Move image up-right relative to frame */ + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 450px; +} + +.introImg { + width: 100%; + height: auto; + display: block; + object-fit: cover; +} + +/* Right Content */ +.introContent h2 { + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 1.5rem; + background: var(--gradient-primary); + /* reusing variable or hardcoded gradient */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + line-height: 1.2; +} + +.introContent p { + color: var(--text-secondary); + font-size: 1.05rem; + line-height: 1.7; + margin-bottom: 2rem; +} + +.learnMoreBtn { + background: #2563eb; + color: white; + border: none; + padding: 1rem 2rem; + border-radius: 50px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s; +} + +.learnMoreBtn:hover { + background: #1d4ed8; + transform: translateY(-2px); +} + + +/* 2. Process/Learning Section (Ref Image 2 - Grid of 4) */ +.processSection { + padding: 4rem 0; + background: #F8FAFC; + /* Light gray bg */ + text-align: center; +} + +.processHeader { + max-width: 700px; + margin: 0 auto 4rem; +} + +.processHeader h2 { + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 1rem; + color: var(--foreground); +} + +.processGrid { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; +} + +.processCard { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.processIcon { + width: 60px; + height: 60px; + background: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #2563eb; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); + margin-bottom: 0.5rem; + font-size: 1.25rem; +} + +.processCard h3 { + font-size: 1.1rem; + font-weight: 700; + color: var(--foreground); +} + +.processCard p { + font-size: 0.9rem; + color: var(--text-secondary); + line-height: 1.5; +} + + +/* 3. Testimonial Section (Left Slider, Right Image) */ +.testimonialSection { + padding: 4rem 0; + background: white; +} + +.testimonialGrid { + display: grid; + grid-template-columns: 1fr; + gap: 5rem; + align-items: center; +} + +/* Right Image */ +.testimonialImageWrapper { + position: relative; + order: -1; + /* Mobile first: image top? Or default to bottom. Lets check desktop media query */ +} + +.testimonialImg { + border-radius: 20px; + box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15); + width: 100%; + height: auto; +} + +/* Left Content Slider */ +.testimonialContent { + position: relative; + overflow: hidden; + padding-bottom: 3rem; + /* Space for dots */ +} + +.testimonialSlide { + display: none; + animation: fadeIn 0.5s ease-in-out; +} + +.testimonialSlide.active { + display: block; +} + +.quoteIcon { + font-size: 3rem; + color: #ec4899; + opacity: 0.2; + margin-bottom: 1rem; +} + +.quoteText { + font-size: 1.5rem; + font-weight: 600; + line-height: 1.4; + color: var(--foreground); + margin-bottom: 2rem; + font-style: italic; +} + +.author h4 { + font-size: 1.1rem; + font-weight: 700; + color: #2563eb; +} + +.author p { + font-size: 0.9rem; + color: var(--text-secondary); +} + +/* Dots */ +.dots { + display: flex; + gap: 0.5rem; + margin-top: 2rem; +} + +.dot { + width: 12px; + height: 12px; + border-radius: 50%; + background: #cbd5e1; + cursor: pointer; + transition: background 0.3s; +} + +.dot.active { + background: #2563eb; + width: 24px; + border-radius: 10px; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Responsive */ +@media (min-width: 900px) { + .introContainer { + grid-template-columns: 1fr 1fr; + } + + .processGrid { + grid-template-columns: repeat(4, 1fr); + } + + .testimonialGrid { + grid-template-columns: 1fr 1fr; + } + + .testimonialImageWrapper { + order: -1; + /* Image on Left */ + } +} \ No newline at end of file diff --git a/app/channels/page.tsx b/app/channels/page.tsx new file mode 100644 index 0000000..b101fa1 --- /dev/null +++ b/app/channels/page.tsx @@ -0,0 +1,163 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import Image from 'next/image'; +import { + Globe, Layers, Zap, BarChart, CheckCircle2, + ArrowRight, MessageSquare, Heart +} from 'lucide-react'; +import Pricing from '@/components/Pricing'; +import FAQ from '@/components/FAQ'; +import styles from './channels.module.css'; + +export default function ChannelsPage() { + const [currentSlide, setCurrentSlide] = useState(0); + + const testimonials = [ + { + quote: "SocialBuddy revolutionized how we handle our multi-channel strategy. It's simply brilliant.", + author: "Sarah Jenkins", + role: "Marketing Director, TechFlow" + }, + { + quote: "The analytics across all channels provided insights we never had before. Highly recommended.", + author: "Mike Ross", + role: "CEO, Pearson Specter" + }, + { + quote: "Managing 5 different platforms used to be a nightmare. Now it's our competitive advantage.", + author: "Jessica Pearson", + role: "Managing Partner, PSB" + } + ]; + + useEffect(() => { + const timer = setInterval(() => { + setCurrentSlide((prev) => (prev + 1) % testimonials.length); + }, 5000); + return () => clearInterval(timer); + }, [testimonials.length]); + + return ( +
+ + {/* 1. About/Intro Section (Ref Image 1: Left Image Frame, Right Content) */} +
+
+
+ {/* Left Image with Frame */} +
+
+
+ Channel Management +
+
+ + {/* Right Content */} +
+

Master Every Channel with
Precision

+

+ Whether it's the professional network of LinkedIn, the visual appeal of Instagram, or the fast-paced world of Twitter, SocialBuddy optimizes your presence everywhere. +

+

+ Our unified platform ensures your brand voice remains consistent while adapting to the unique nuances of each platform. Connect, engage, and grow without the chaos. +

+ +
+
+
+
+ + {/* 2. Process/Learning Section (Ref Image 2: Grid of 4 Icons) */} +
+
+
+

Learning Your Channels

+

+ Understand the core pillars of effective multi-channel management. +

+
+ +
+
+
+

Global Reach

+

Expand your audience across borders with localized content strategies.

+
+
+
+

Content Sync

+

Seamlessly synchronize posts while customizing for each platform's format.

+
+
+
+

Fast Execution

+

Schedule and deploy campaigns in minutes, not hours.

+
+
+
+

Deep Analytics

+

Get granular data on performance for every single channel.

+
+
+
+
+ + {/* 3. Testimonial Section (Left Slider, Right Image) */} +
+
+
+ {/* Left Content Slider */} +
+ {testimonials.map((t, index) => ( +
+
❝
+

{t.quote}

+
+

{t.author}

+

{t.role}

+
+
+ ))} + + {/* Dots */} +
+ {testimonials.map((_, index) => ( +
setCurrentSlide(index)} + /> + ))} +
+
+ + {/* Right Image */} +
+ Success Story +
+
+
+
+ + {/* Reused Components */} + + +
+ ); +} diff --git a/app/contact/contact.module.css b/app/contact/contact.module.css index 38cdf27..dc6178b 100644 --- a/app/contact/contact.module.css +++ b/app/contact/contact.module.css @@ -3,9 +3,12 @@ } .hero { - padding: 8rem 0 4rem; + padding: 8rem 0 8rem; text-align: center; - background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05)); + background-image: url('/hero-inner-bg.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; position: relative; overflow: hidden; } @@ -17,7 +20,7 @@ left: 0; right: 0; bottom: 0; - background: radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 70%); + background: rgba(0, 0, 0, 0.3); } .heroContent { @@ -28,16 +31,33 @@ .heroTitle { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; - margin-bottom: 1.5rem; + margin-bottom: 1rem; line-height: 1.2; + color: #fff; } -.heroSubtitle { - font-size: 1.25rem; - color: var(--text-secondary); - max-width: 700px; - margin: 0 auto; - line-height: 1.7; +.breadcrumb { + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.breadcrumb a { + color: rgba(255, 255, 255, 0.9); + text-decoration: none; + transition: color 0.3s ease; +} + +.breadcrumb a:hover { + color: #fff; +} + +.breadcrumb span { + color: #fff; + font-weight: 600; } .contactGrid { diff --git a/app/contact/page.tsx b/app/contact/page.tsx index c8078ab..e2d2112 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -60,13 +60,10 @@ export default function ContactPage() {
-

- Get in Touch -

-

- Have a question or need help? We're here for you 24/7. - Reach out and let's start a conversation. -

+

Contact Us

+
+ Home / Contact +
diff --git a/app/docs/docs.module.css b/app/docs/docs.module.css deleted file mode 100644 index 028774a..0000000 --- a/app/docs/docs.module.css +++ /dev/null @@ -1,176 +0,0 @@ -.docsPage { - padding-top: 5rem; -} - -.hero { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - padding: 6rem 0 4rem; - text-align: center; - color: white; -} - -.heroContent { - max-width: 800px; - margin: 0 auto; -} - -.heroTitle { - font-size: clamp(2.5rem, 5vw, 4rem); - margin-bottom: 1.5rem; - color: white; -} - -.heroSubtitle { - font-size: 1.25rem; - color: rgba(255, 255, 255, 0.95); - margin-bottom: 2rem; -} - -.searchBox { - display: flex; - max-width: 600px; - margin: 0 auto; - background: white; - border-radius: var(--radius-xl); - overflow: hidden; - box-shadow: var(--shadow-xl); -} - -.searchInput { - flex: 1; - padding: 1rem 1.5rem; - border: none; - font-size: 1rem; - outline: none; -} - -.searchButton { - padding: 1rem 2rem; - background: var(--gradient-primary); - border: none; - color: white; - font-size: 1.5rem; - cursor: pointer; - transition: all 0.3s ease; -} - -.searchButton:hover { - opacity: 0.9; -} - -.docsGrid { - display: grid; - grid-template-columns: 1fr; - gap: 2rem; -} - -@media (min-width: 768px) { - .docsGrid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 1024px) { - .docsGrid { - grid-template-columns: repeat(3, 1fr); - } -} - -.docCategory { - background: var(--background); - border-radius: var(--radius-xl); - padding: 2rem; - box-shadow: var(--shadow-md); - transition: all 0.3s ease; -} - -.docCategory:hover { - box-shadow: var(--shadow-xl); -} - -.categoryHeader { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1.5rem; - padding-bottom: 1rem; - border-bottom: 2px solid var(--background-secondary); -} - -.categoryIcon { - font-size: 2rem; -} - -.categoryTitle { - font-size: 1.5rem; - color: var(--foreground); - font-family: var(--font-display); -} - -.docsList { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.docLink { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem; - color: var(--foreground-secondary); - text-decoration: none; - border-radius: var(--radius-md); - transition: all 0.3s ease; -} - -.docLink:hover { - background: var(--background-secondary); - color: var(--primary); - padding-left: 1.25rem; -} - -.docIcon { - font-size: 1.25rem; -} - -.arrow { - margin-left: auto; - opacity: 0; - transition: all 0.3s ease; -} - -.docLink:hover .arrow { - opacity: 1; -} - -.helpSection { - background: var(--background-secondary); - padding: 5rem 0; - text-align: center; - margin-top: 4rem; -} - -.helpContent { - max-width: 600px; - margin: 0 auto; -} - -.helpTitle { - font-size: 2.5rem; - margin-bottom: 1rem; - color: var(--foreground); -} - -.helpSubtitle { - font-size: 1.25rem; - color: var(--foreground-secondary); - margin-bottom: 2rem; -} - -.helpButtons { - display: flex; - gap: 1rem; - justify-content: center; - flex-wrap: wrap; -} \ No newline at end of file diff --git a/app/docs/page.tsx b/app/docs/page.tsx deleted file mode 100644 index d6b9e62..0000000 --- a/app/docs/page.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import type { Metadata } from 'next'; -import Link from 'next/link'; -import styles from './docs.module.css'; - -export const metadata: Metadata = { - title: 'Documentation - SocialBuddy', - description: 'Complete documentation and guides for using SocialBuddy. Learn how to manage your social media effectively.', -}; - -export default function DocsPage() { - const docCategories = [ - { - title: 'Getting Started', - icon: 'πŸš€', - docs: [ - { title: 'Quick Start Guide', href: '/docs/quick-start' }, - { title: 'Account Setup', href: '/docs/account-setup' }, - { title: 'Connecting Social Accounts', href: '/docs/connecting-accounts' }, - { title: 'Dashboard Overview', href: '/docs/dashboard' }, - ], - }, - { - title: 'Content Management', - icon: 'πŸ“', - docs: [ - { title: 'Creating Posts', href: '/docs/creating-posts' }, - { title: 'Scheduling Content', href: '/docs/scheduling' }, - { title: 'Content Calendar', href: '/docs/calendar' }, - { title: 'Media Library', href: '/docs/media-library' }, - ], - }, - { - title: 'Analytics', - icon: 'πŸ“Š', - docs: [ - { title: 'Understanding Analytics', href: '/docs/analytics' }, - { title: 'Custom Reports', href: '/docs/reports' }, - { title: 'Competitor Analysis', href: '/docs/competitor-analysis' }, - { title: 'Export Data', href: '/docs/export-data' }, - ], - }, - { - title: 'Team Collaboration', - icon: 'πŸ‘₯', - docs: [ - { title: 'Inviting Team Members', href: '/docs/team-members' }, - { title: 'Roles & Permissions', href: '/docs/roles' }, - { title: 'Approval Workflows', href: '/docs/workflows' }, - { title: 'Team Activity Log', href: '/docs/activity-log' }, - ], - }, - { - title: 'API & Integrations', - icon: 'πŸ”Œ', - docs: [ - { title: 'API Documentation', href: '/docs/api' }, - { title: 'Webhooks', href: '/docs/webhooks' }, - { title: 'Third-Party Integrations', href: '/docs/integrations' }, - { title: 'Developer Resources', href: '/docs/developers' }, - ], - }, - { - title: 'Account & Billing', - icon: 'πŸ’³', - docs: [ - { title: 'Managing Your Account', href: '/docs/account' }, - { title: 'Billing & Payments', href: '/docs/billing' }, - { title: 'Upgrading Plans', href: '/docs/upgrading' }, - { title: 'Security Settings', href: '/docs/security' }, - ], - }, - ]; - - return ( -
- {/* Hero Section */} -
-
-
-

- Documentation & Guides -

-

- Everything you need to know about using SocialBuddy effectively -

-
- - -
-
-
-
- - {/* Documentation Grid */} -
-
-
- {docCategories.map((category, idx) => ( -
-
- {category.icon} -

{category.title}

-
-
- {category.docs.map((doc, index) => ( - - πŸ“„ - {doc.title} - β†’ - - ))} -
-
- ))} -
-
-
- - {/* Help Section */} -
-
-
-

Need More Help?

-

- Can't find what you're looking for? Our support team is here to help. -

- -
-
-
-
- ); -} diff --git a/app/features/[slug]/feature-page.module.css b/app/features/[slug]/feature-page.module.css new file mode 100644 index 0000000..b83c49c --- /dev/null +++ b/app/features/[slug]/feature-page.module.css @@ -0,0 +1,633 @@ +/* Page Wrapper */ +.page { + animation: fadeIn 0.6s ease-out; + background-color: var(--background); + color: var(--text-primary); +} + +.container { + max-width: 1280px; + margin: 0 auto; + padding: 0 1.5rem; +} + +/* --- Hero Section (Ref: Inner Banner from About) --- */ +.hero { + padding: 8rem 0 8rem; + text-align: center; + background-image: url('/hero-inner-bg.png'); + /* Use same image as About */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); + /* Overlay for text readability */ +} + +.heroContent { + position: relative; + z-index: 1; + max-width: 900px; + margin: 0 auto; +} + +.heroTitle { + font-size: clamp(2.5rem, 6vw, 4rem); + font-weight: 800; + margin-bottom: 1rem; + line-height: 1.2; + color: #fff; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.breadcrumbs { + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.breadcrumbs a { + color: rgba(255, 255, 255, 0.9); + text-decoration: none; + transition: color 0.3s ease; +} + +.breadcrumbs a:hover { + color: #fff; +} + +.breadcrumbs span { + color: #fff; + font-weight: 600; +} + +/* --- Section 1: About (Icons) --- */ +.aboutSection { + padding: 4rem 0; + background: #fff; +} + +.aboutGrid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +@media (min-width: 992px) { + .aboutGrid { + grid-template-columns: 1fr 1fr; + } +} + +.aboutImages { + position: relative; + min-height: 500px; +} + +.aboutMainImgWrapper { + position: absolute; + top: 0; + left: 0; + width: 80%; + height: 85%; + z-index: 1; + border-radius: 12px; + overflow: hidden; +} + +.aboutSubImgWrapper { + position: absolute; + bottom: 0; + right: 0; + width: 55%; + height: 50%; + z-index: 2; + border: 8px solid #fff; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); +} + +.aboutContent { + padding-left: 1rem; +} + +.sectionSubtitle { + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 2px; + color: var(--primary); + margin-bottom: 1rem; + display: block; + font-weight: 600; +} + +.sectionTitle { + font-size: clamp(2rem, 4vw, 3rem); + line-height: 1.2; + margin-bottom: 1.5rem; + color: var(--text-primary); + font-weight: 700; +} + +.aboutDescription { + color: var(--text-secondary); + margin-bottom: 2rem; + line-height: 1.7; + font-size: 1.1rem; +} + +.aboutPoints { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; + margin-bottom: 2.5rem; +} + +@media (min-width: 640px) { + .aboutPoints { + grid-template-columns: 1fr 1fr; + } +} + +.aboutPointItem { + display: flex; + align-items: center; + gap: 1rem; +} + +.aboutPointIcon svg { + width: 28px; + height: 28px; + color: var(--primary); +} + +.aboutPointText { + font-weight: 600; + color: var(--text-primary); +} + +/* --- Section 2: Benefits --- */ +.benefitsSection { + padding: 4rem 0; + background: var(--background-secondary); +} + +.benefitsContainer { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +@media (min-width: 992px) { + .benefitsContainer { + grid-template-columns: 1fr 1.5fr; + } +} + +.benefitsContent {} + +.benefitsGrid { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; +} + +@media (min-width: 640px) { + .benefitsGrid { + grid-template-columns: repeat(2, 1fr); + } +} + +.benefitCard { + background: #fff; + padding: 2rem; + border-radius: 16px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.benefitCard:hover { + background: var(--primary); + transform: translateY(-5px); +} + +.benefitCard:hover * { + color: #fff !important; +} + +.benefitIcon { + font-size: 2.5rem; + margin-bottom: 1rem; + color: var(--primary); + transition: color 0.3s ease; +} + +.benefitCardTitle { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--text-primary); + transition: color 0.3s ease; +} + +.benefitCardDesc { + font-size: 0.9rem; + color: var(--text-secondary); + transition: color 0.3s ease; +} + +/* --- Section 3: Testimonial (Update: Left Images Grid, Right Slider) --- */ +.testimonialSection { + padding: 4rem 0; + background: #fff; + overflow: hidden; +} + +.testimonialGrid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +@media (min-width: 992px) { + .testimonialGrid { + grid-template-columns: 0.8fr 1.2fr; + /* Images < Slider */ + } +} + +/* Left side: 2 Image Grid */ +.testimonialImages { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +.testImgWrapper { + border-radius: 12px; + overflow: hidden; + height: 300px; + background: #f0f0f0; +} + +.testImgWrapper:nth-child(2) { + margin-top: 3rem; + /* Stagger effect */ +} + +/* Right side: Slider Styles (Used by Client Component) */ +.testimonialSliderContainer { + position: relative; + padding: 2rem; +} + +.testSliderContent { + min-height: 300px; + display: flex; + flex-direction: column; + justify-content: center; + animation: fadeIn 0.5s ease-in-out; +} + +.testStars { + display: flex; + gap: 4px; + margin-bottom: 1.5rem; +} + +.testQuoteFade { + font-size: clamp(1.25rem, 2.5vw, 1.75rem); + font-weight: 500; + line-height: 1.4; + color: var(--text-primary); + margin-bottom: 2rem; + font-style: italic; +} + +.testAuthorBlock { + display: flex; + align-items: center; + gap: 1rem; +} + +.testAuthorAvatar { + width: 60px; + height: 60px; + border-radius: 50%; + object-fit: cover; +} + +.testAuthorInfo h4 { + margin: 0; + font-size: 1.1rem; + font-weight: 700; +} + +.testAuthorInfo span { + font-size: 0.9rem; + color: var(--text-secondary); +} + +.sliderDots { + display: flex; + gap: 0.5rem; + margin-top: 2rem; +} + +.dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: #E2E8F0; + border: none; + cursor: pointer; + transition: background 0.3s; +} + +.activeDot { + background: var(--primary); +} + + +/* --- Section 4: Blogs --- */ +.resourcesSection { + padding: 4rem 0; + background: var(--background-secondary); +} + +.blogGrid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + margin-top: 3rem; +} + +@media (min-width: 768px) { + .blogGrid { + grid-template-columns: repeat(3, 1fr); + } +} + +.blogCard { + background: #fff; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease; +} + +.blogCard:hover { + transform: translateY(-5px); +} + +.blogImageWrapper { + height: 200px; + overflow: hidden; +} + +.blogImage { + width: 100%; + height: 100%; + object-fit: cover; +} + +.blogContent { + padding: 1.5rem; +} + +.blogCategory { + color: var(--primary); + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + margin-bottom: 0.5rem; + display: block; +} + +.blogTitle { + font-size: 1.25rem; + margin-bottom: 0.75rem; + line-height: 1.4; +} + +.blogExcerpt { + font-size: 0.95rem; + color: var(--text-secondary); + margin-bottom: 1rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + line-clamp: 2; +} + +.readMoreLink { + color: var(--primary); + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +/* --- Section 5: FAQ --- */ +.faqSection { + padding: 4rem 0; + background: #fff; +} + +.faqGrid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: flex-start; +} + +@media (min-width: 992px) { + .faqGrid { + grid-template-columns: 1fr 1fr; + } +} + +.faqImageWrapper { + border-radius: 20px; + overflow: hidden; +} + +.accordionItem { + border-bottom: 1px solid var(--border-color); + margin-bottom: 1rem; +} + +.accordionTrigger { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 0; + background: none; + border: none; + text-align: left; + cursor: pointer; + font-size: 1.1rem; + font-weight: 600; + color: var(--text-primary); +} + +.accordionContentOpen { + animation: slideDown 0.3s ease-out; +} + +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.accordionIcon { + font-size: 1.5rem; + font-weight: 300; +} + + +/* --- Section 6: CTA (Full Width Floating) --- */ +/* --- Section 6: CTA (Full Width Floating) --- */ +.ctaFullWidth { + position: relative; + padding: 4rem 0; + background-color: #F8FAFC; + /* Light fallback */ + background-image: url('/images/cta-bg-light.png'); + /* User requested image */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + overflow: hidden; + color: var(--text-primary); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + border-top: 1px solid rgba(0, 0, 0, 0.05); +} + +.ctaContentCentered { + position: relative; + z-index: 10; + max-width: 700px; + padding: 0 1.5rem; +} + +.ctaFullTitle { + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 800; + margin-bottom: 1.5rem; + line-height: 1.1; + color: var(--text-primary); +} + +.ctaFullText { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 2.5rem; +} + +.ctaFullBtn { + background: var(--primary); + /* Primary purple/blue */ + color: white; + padding: 1rem 3rem; + border-radius: 50px; + font-size: 1.1rem; + font-weight: 700; + transition: transform 0.2s; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + display: inline-block; +} + +.ctaFullBtn:hover { + transform: translateY(-3px) scale(1.05); + background: var(--primary-dark, #5b21b6); +} + +/* Floating Elements */ +.floatElem { + position: absolute; + opacity: 0.15; + pointer-events: none; +} + +.floatLeft { + left: 5%; + top: 20%; + width: 150px; + animation: float 6s ease-in-out infinite; +} + +.floatRight { + right: 5%; + bottom: 20%; + width: 180px; + animation: float 8s ease-in-out infinite reverse; +} + +@keyframes float { + 0% { + transform: translateY(0px); + } + + 50% { + transform: translateY(-20px); + } + + 100% { + transform: translateY(0px); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} \ No newline at end of file diff --git a/app/features/[slug]/page.tsx b/app/features/[slug]/page.tsx new file mode 100644 index 0000000..ab6c34c --- /dev/null +++ b/app/features/[slug]/page.tsx @@ -0,0 +1,285 @@ +import { features } from '@/data/features'; +import { resources } from '@/data/resources'; +import { notFound } from 'next/navigation'; +import styles from './feature-page.module.css'; +import SafeImage from '@/components/SafeImage'; +import Link from 'next/link'; +import TestimonialSlider from '@/components/TestimonialSlider'; +import { + Calendar, Eye, BarChart, Trophy, Inbox, ShieldCheck, + Palette, Layout, Smartphone, Zap, PenTool, Repeat, + CheckCircle +} from 'lucide-react'; + +// Define Props interface +interface PageProps { + params: Promise<{ slug: string }>; +} + +export async function generateStaticParams() { + return features.map((feature) => ({ + slug: feature.slug, + })); +} + +export async function generateMetadata(props: PageProps) { + const params = await props.params; + const feature = features.find((f) => f.slug === params.slug); + if (!feature) return { title: 'Feature Not Found' }; + + return { + title: `${feature.title} - SocialBuddy`, + description: feature.description, + }; +} + +// Icon mapping helper +const getIcon = (iconName: string) => { + switch (iconName) { + case 'Calendar': return ; + case 'Eye': return ; + case 'BarChart': return ; + case 'Trophy': return ; + case 'Inbox': return ; + case 'ShieldCheck': return ; + case 'Palette': return ; + case 'Layout': return ; + case 'Smartphone': return ; + case 'Zap': return ; + case 'PenTool': return ; + case 'Repeat': return ; + default: return ; + } +}; + +export default async function FeaturePage(props: PageProps) { + const params = await props.params; + + // Ensure params exists + if (!params?.slug) { + notFound(); + } + + const feature = features.find((f) => f.slug === params.slug); + + if (!feature) { + notFound(); + } + + // Filter resources + const featureResources = resources.filter(b => b.featureSlug === feature.slug).slice(0, 3); + const displayResources = featureResources.length > 0 ? featureResources : resources.slice(0, 3); + + return ( +
+ {/* 1. Hero Section (Banner Style, Center Title + Breadcrumbs) */} +
+
+
+

{feature.title}

+
+ Home / Features / {feature.title} +
+
+
+
+ + {/* 2. About Section (Icons) */} + {feature.about && ( +
+
+
+
+
+ +
+
+ +
+
+
+ {feature.about.subTitle} +

{feature.about.title}

+

{feature.about.description}

+
+ {feature.about.bulletPoints.map((point, i) => ( +
+ + {getIcon(point.icon)} + + {point.text} +
+ ))} +
+ Read More +
+
+
+
+ )} + + {/* 3. Benefits / Why Choose */} +
+
+
+
+ Why Choose Us +

Custom Solutions for Your Social Growth

+

+ Everything you need to succeed on social media, all in one platform. + We provide the tools to help you scale effectively. +

+ Video Showcase +
+
+ {feature.benefits.slice(0, 4).map((benefit, index) => ( +
+
{benefit.icon}
+

{benefit.title}

+

{benefit.description}

+
+ ))} +
+
+
+
+ + {/* 4. Testimonials (Left: 2 Images, Right: Slider) */} + {feature.testimonials && feature.testimonials.length > 0 && ( +
+
+
+
+
+ +
+
+ +
+
+
+ Testimonials +

Trusted by Thousands

+ +
+
+
+
+ )} + + {/* 5. Resources / Blogs */} +
+
+
+ Resources +

Latest Insights for {feature.title}

+
+ +
+ {displayResources.map((resource) => ( +
+
+ +
+
+ {resource.category} +

{resource.title}

+

{resource.excerpt}

+ + Read Article β†’ + +
+
+ ))} +
+
+
+ + {/* 6. FAQ */} + {feature.faqs && feature.faqs.length > 0 && ( +
+
+
+
+ FAQ +

Frequently Asked Questions

+
+ {feature.faqs.map((faq, index) => ( +
+ + {faq.question} + + + +
+

{faq.answer}

+
+
+ ))} +
+
+
+ +
+
+
+
+ )} + + {/* 7. CTA (Full Width Floating) */} +
+ + + +
+

Ready to Grow Your Social Presence?

+

+ Join thousands of marketers who are already using SocialBuddy to streamline their workflow. +

+ + Start Free Trial + +
+
+
+ ); +} diff --git a/app/features/features.module.css b/app/features/features.module.css index bb17b7d..0fe9575 100644 --- a/app/features/features.module.css +++ b/app/features/features.module.css @@ -3,27 +3,62 @@ } .hero { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - padding: 6rem 0 4rem; + background-image: url('/hero-inner-bg.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + padding: 8rem 0 8rem; text-align: center; color: white; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); } .heroContent { max-width: 800px; margin: 0 auto; + position: relative; + z-index: 1; } .heroTitle { font-size: clamp(2.5rem, 5vw, 4rem); - margin-bottom: 1.5rem; + margin-bottom: 1rem; color: white; } -.heroSubtitle { - font-size: 1.25rem; - color: rgba(255, 255, 255, 0.95); - line-height: 1.6; +.breadcrumb { + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.breadcrumb a { + color: rgba(255, 255, 255, 0.9); + text-decoration: none; + transition: color 0.3s ease; +} + +.breadcrumb a:hover { + color: #fff; +} + +.breadcrumb span { + color: #fff; + font-weight: 600; } .categorySection { diff --git a/app/features/page.tsx b/app/features/page.tsx index aa0175a..399de4c 100644 --- a/app/features/page.tsx +++ b/app/features/page.tsx @@ -100,12 +100,10 @@ export default function FeaturesPage() {
-

- Powerful Features for Modern Teams -

-

- Everything you need to manage, analyze, and grow your social media presenceβ€”all in one platform. -

+

Features

+
+ Home / Features +
diff --git a/app/globals.css b/app/globals.css index bdc2286..3236f8c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,15 +3,24 @@ :root { - /* Color Palette - Pink Primary, Blue Secondary */ + /* Color Palette - Updated per user request */ --primary: #ec4899; + /* Pink */ --primary-dark: #db2777; - --primary-light: #f472b6; - --secondary: #3b82f6; - --secondary-dark: #2563eb; - --secondary-light: #60a5fa; - --accent: #14b8a6; - --accent-dark: #0d9488; + + --secondary: #2563eb; + /* Blue (Requested #2563eb) */ + --secondary-dark: #1255d8; + /* Blue (Requested #1255d8) */ + + --accent: #6cb655; + /* Green (Requested #6cb655) */ + --accent-dark: #5a9646; + + --dark-blue: #0072b1; + /* Dark Blue (Requested #0072b1) */ + --yellow: #f9cd35; + /* Yellow (Requested #f9cd35) */ /* Backgrounds */ --background: #ffffff; @@ -28,11 +37,19 @@ /* Borders */ --border-color: #e2e8f0; - /* Gradients - Pink to Blue Theme */ - --gradient-primary: linear-gradient(135deg, #ec4899 0%, #3b82f6 100%); - --gradient-secondary: linear-gradient(135deg, #f472b6 0%, #60a5fa 100%); - --gradient-accent: linear-gradient(135deg, #db2777 0%, #2563eb 100%); - --gradient-hero: linear-gradient(135deg, #ec4899 0%, #db2777 30%, #3b82f6 70%, #2563eb 100%); + /* Gradients - Linear Theme using new palette */ + /* Blue (#2563eb) to Pink (#ec4899) */ + --gradient-primary: linear-gradient(to right, #2563eb 0%, #ec4899 100%); + + /* Yellow (#f9cd35) to Roman? No, let's keep consistency. Maybe Yellow to Pink? + User didn't specify gradient composition, just colors. + Retaining generic gradients but updating hexes. */ + --gradient-secondary: radial-gradient(circle, #2563eb 0%, #ec4899 100%); + + /* Dark Blue (#0072b1) to Green (#6cb655) for accent gradient if needed */ + --gradient-accent: linear-gradient(135deg, #0072b1 0%, #6cb655 100%); + + --gradient-hero: radial-gradient(circle, #2563eb 0%, #ec4899 100%); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); @@ -61,19 +78,7 @@ --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } -@media (prefers-color-scheme: dark) { - :root { - --background: #0f172a; - --background-secondary: #1e293b; - --bg-primary: #0f172a; - --card-bg: #1e293b; - --foreground: #f1f5f9; - --foreground-secondary: #cbd5e1; - --text-primary: #f1f5f9; - --text-secondary: #cbd5e1; - --border-color: #334155; - } -} + * { margin: 0; @@ -241,34 +246,39 @@ body { padding: 0 var(--spacing-md); } -.section { - padding: var(--spacing-2xl) 0; +/* Alternating Section Backgrounds */ +section { + position: relative; + z-index: 1; } -/* Alternating Section Backgrounds */ section:nth-child(odd) { - background: linear-gradient(180deg, - var(--background) 0%, - rgba(236, 72, 153, 0.02) 50%, - var(--background) 100%); + background-color: #f1f5f9; } section:nth-child(even) { - background: linear-gradient(180deg, - rgba(59, 130, 246, 0.02) 0%, - rgba(168, 85, 247, 0.02) 50%, - rgba(59, 130, 246, 0.02) 100%); + background-color: #ffffff; + /* Slate 100 - Distinct contrast */ + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); +} + +/* Ensure spacing consistency */ +.section { + padding: 5rem 0; + /* Default mobile padding */ } @media (min-width: 768px) { .section { - padding: 5rem 0; + padding: 4rem 0; } } @media (min-width: 1024px) { .section { - padding: 6rem 0; + padding: 4rem 0; + /* Standardized large spacing per user request */ } } diff --git a/app/page.tsx b/app/page.tsx index ff94834..2a47be4 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,20 +1,27 @@ import Hero from '@/components/Hero'; +import AboutSection from '@/components/AboutSection'; import Features from '@/components/Features'; import SocialConnect from '@/components/SocialConnect'; import HowItWorks from '@/components/HowItWorks'; import Testimonials from '@/components/Testimonials'; +import StatsCounter from '@/components/StatsCounter'; import Pricing from '@/components/Pricing'; import FAQ from '@/components/FAQ'; import CTA from '@/components/CTA'; +import WhyChooseUs from '@/components/WhyChooseUs'; +import CoreServices from '@/components/CoreServices'; + export default function Home() { return (
- + + + diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx index e8d4722..a6c5911 100644 --- a/app/pricing/page.tsx +++ b/app/pricing/page.tsx @@ -1,59 +1,107 @@ +'use client'; + +import { useState } from 'react'; import type { Metadata } from 'next'; import Pricing from '@/components/Pricing'; import styles from './pricing.module.css'; -export const metadata: Metadata = { - title: 'Pricing - SocialBuddy', - description: 'Choose the perfect plan for your social media management needs. Free, Pro, and Premium plans available with 14-day free trial.', -}; - export default function PricingPage() { + const [openFaqIndex, setOpenFaqIndex] = useState(0); + + const faqs = [ + { + question: 'Can I change plans later?', + answer: "Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges." + }, + { + question: 'What payment methods do you accept?', + answer: 'We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans.' + }, + { + question: 'Is there a free trial?', + answer: 'Yes! All paid plans come with a 14-day free trial. No credit card required to start.' + }, + { + question: 'Can I cancel anytime?', + answer: 'Absolutely. You can cancel your subscription at any time with no cancellation fees. Your access continues until the end of your billing period.' + }, + { + question: 'Do you offer discounts for nonprofits?', + answer: 'Yes! We offer special pricing for nonprofits and educational institutions. Contact our sales team for details.' + }, + { + question: 'What happens to my data if I cancel?', + answer: 'Your data is safely stored for 30 days after cancellation. You can export all your data at any time before deletion.' + } + ]; + + const toggleFaq = (index: number) => { + setOpenFaqIndex(openFaqIndex === index ? null : index); + }; + return (
+ {/* Hero Section */} +
+
+
+

Pricing

+
+ Home / Pricing +
+
+
+
+ {/* FAQ Section */}
-
-

Frequently Asked Questions

-
-
-
-

Can I change plans later?

-

- Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges. -

+
+
+
+ {/* Diagonal Background Lines */} +
+
+
+
+ + {/* Image with Decorative Borders */} +
+
+
+ Social media management workspace +
+
-
-

What payment methods do you accept?

-

- We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans. -

-
-
-

Is there a free trial?

-

- Yes! All paid plans come with a 14-day free trial. No credit card required to start. -

-
-
-

Can I cancel anytime?

-

- Absolutely. You can cancel your subscription at any time with no cancellation fees. Your access continues until the end of your billing period. -

-
-
-

Do you offer discounts for nonprofits?

-

- Yes! We offer special pricing for nonprofits and educational institutions. Contact our sales team for details. -

-
-
-

What happens to my data if I cancel?

-

- Your data is safely stored for 30 days after cancellation. You can export all your data at any time before deletion. -

+
+
+

Frequently Asked Questions

+
+
+ {faqs.map((faq, index) => ( +
+ +
+

{faq.answer}

+
+
+ ))} +
diff --git a/app/pricing/pricing.module.css b/app/pricing/pricing.module.css index 760c8fc..e7cae90 100644 --- a/app/pricing/pricing.module.css +++ b/app/pricing/pricing.module.css @@ -2,52 +2,365 @@ padding-top: 5rem; } -.faqHeader { +.hero { + padding: 8rem 0 8rem; text-align: center; - margin-bottom: 3rem; + background-image: url('/hero-inner-bg.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); +} + +.heroContent { + position: relative; + z-index: 1; +} + +.heroTitle { + font-size: clamp(2.5rem, 6vw, 4rem); + font-weight: 800; + margin-bottom: 1rem; + line-height: 1.2; + color: #fff; +} + +.breadcrumb { + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.breadcrumb a { + color: rgba(255, 255, 255, 0.9); + text-decoration: none; + transition: color 0.3s ease; +} + +.breadcrumb a:hover { + color: #fff; +} + +.breadcrumb span { + color: #fff; + font-weight: 600; +} + +/* FAQ Section */ +.faqContainer { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; + align-items: start; +} + +@media (min-width: 1024px) { + .faqContainer { + grid-template-columns: 1fr 1fr; + } +} + +.faqDecorativeSection { + display: flex; + align-items: center; + justify-content: center; + padding: 2rem 0; +} + +.imageFrameWrapper { + position: relative; + width: 100%; + max-width: 450px; + aspect-ratio: 3/4; + display: flex; + align-items: center; + justify-content: center; +} + +/* Diagonal Background Lines */ +.diagonalLines { + position: absolute; + inset: 0; + overflow: hidden; + z-index: 1; +} + +.diagonalLinePink { + position: absolute; + width: 150%; + height: 3px; + background: linear-gradient(to right, rgba(236, 72, 153, 0.3), rgba(236, 72, 153, 0.6)); + top: 30%; + left: -25%; + transform: rotate(-45deg); + animation: floatLine 8s ease-in-out infinite; +} + +.diagonalLineBlue { + position: absolute; + width: 150%; + height: 3px; + background: linear-gradient(to right, rgba(37, 99, 235, 0.3), rgba(37, 99, 235, 0.6)); + bottom: 30%; + right: -25%; + transform: rotate(45deg); + animation: floatLine 8s ease-in-out infinite reverse; +} + +@keyframes floatLine { + + 0%, + 100% { + transform: rotate(-45deg) translateY(0); + } + + 50% { + transform: rotate(-45deg) translateY(-10px); + } +} + +/* Image Frame with Borders */ +.imageFrame { + position: relative; + width: 85%; + height: 85%; + z-index: 2; + border-radius: 20px; + overflow: hidden; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); +} + +.frameImage { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +/* Decorative Borders */ +.frameBorderTopLeft { + position: absolute; + top: -15px; + left: -15px; + width: 120px; + height: 120px; + border-top: 4px solid #ec4899; + border-left: 4px solid #ec4899; + border-radius: 20px 0 0 0; + z-index: 3; +} + +.frameBorderBottomRight { + position: absolute; + bottom: -15px; + right: -15px; + width: 120px; + height: 120px; + border-bottom: 4px solid #2563eb; + border-right: 4px solid #2563eb; + border-radius: 0 0 20px 0; + z-index: 3; +} + +.faqContent { + display: flex; + flex-direction: column; +} + +.faqHeader { + margin-bottom: 2rem; } .faqTitle { font-size: 2.5rem; color: var(--foreground); + font-weight: 800; } -.faqGrid { - display: grid; - grid-template-columns: 1fr; - gap: 2rem; - max-width: 900px; - margin: 0 auto; -} - -@media (min-width: 768px) { - .faqGrid { - grid-template-columns: repeat(2, 1fr); - } +.faqList { + display: flex; + flex-direction: column; + gap: 1rem; } .faqItem { background: var(--background); border-radius: var(--radius-xl); - padding: 2rem; + overflow: hidden; box-shadow: var(--shadow-md); transition: all 0.3s ease; + border: 1px solid var(--border-color); } .faqItem:hover { - transform: translateY(-5px); - box-shadow: var(--shadow-xl); + box-shadow: var(--shadow-lg); + border-color: var(--primary); } .faqQuestion { - font-size: 1.25rem; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.25rem 1.5rem; + font-size: 1.125rem; font-weight: 700; - margin-bottom: 1rem; color: var(--foreground); font-family: var(--font-display); + background: transparent; + border: none; + cursor: pointer; + text-align: left; + transition: all 0.3s ease; +} + +.faqQuestion:hover { + color: var(--primary); +} + +.faqIcon { + font-size: 1.5rem; + font-weight: 300; + color: var(--primary); + transition: transform 0.3s ease; + flex-shrink: 0; + margin-left: 1rem; +} + +.faqIconOpen { + transform: rotate(45deg); } .faqAnswer { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease, padding 0.3s ease; +} + +.faqAnswerOpen { + max-height: 500px; + padding: 0 1.5rem 1.25rem 1.5rem; +} + +.faqAnswer p { color: var(--foreground-secondary); line-height: 1.6; + margin: 0; +} + +/* Responsive adjustments */ +@media (max-width: 1023px) { + .imageFrameWrapper { + max-width: 400px; + margin: 0 auto 3rem; + } + + .frameBorderTopLeft, + .frameBorderBottomRight { + width: 100px; + height: 100px; + } + + .frameBorderTopLeft { + top: -12px; + left: -12px; + } + + .frameBorderBottomRight { + bottom: -12px; + right: -12px; + } +} + +@media (max-width: 768px) { + .faqTitle { + font-size: 2rem; + } + + .faqQuestion { + padding: 1rem 1.25rem; + font-size: 1rem; + } + + .faqAnswer p { + font-size: 0.9375rem; + } + + .faqAnswerOpen { + padding: 0 1.25rem 1rem 1.25rem; + } + + .faqIcon { + font-size: 1.25rem; + } + + /* Adjust decorative frame for mobile */ + .imageFrameWrapper { + max-width: 350px; + aspect-ratio: 4/5; + margin-bottom: 2rem; + } + + .imageFrame { + width: 90%; + height: 90%; + } + + .frameBorderTopLeft, + .frameBorderBottomRight { + width: 80px; + height: 80px; + border-width: 3px; + } + + .frameBorderTopLeft { + top: -10px; + left: -10px; + } + + .frameBorderBottomRight { + bottom: -10px; + right: -10px; + } + + .diagonalLinePink, + .diagonalLineBlue { + height: 2px; + } +} + +@media (max-width: 480px) { + .imageFrameWrapper { + max-width: 280px; + } + + .frameBorderTopLeft, + .frameBorderBottomRight { + width: 60px; + height: 60px; + } + + .frameBorderTopLeft { + top: -8px; + left: -8px; + } + + .frameBorderBottomRight { + bottom: -8px; + right: -8px; + } } \ No newline at end of file diff --git a/app/resources/[slug]/page.tsx b/app/resources/[slug]/page.tsx new file mode 100644 index 0000000..713a4bd --- /dev/null +++ b/app/resources/[slug]/page.tsx @@ -0,0 +1,85 @@ +import { resources } from '@/data/resources'; +import { notFound } from 'next/navigation'; +import SafeImage from '@/components/SafeImage'; +import styles from '../resources.module.css'; +import Link from 'next/link'; + +interface PageProps { + params: Promise<{ slug: string }>; +} + +export async function generateStaticParams() { + return resources.map((resource) => ({ + slug: resource.slug, + })); +} + +export async function generateMetadata(props: PageProps) { + const params = await props.params; + const resource = resources.find((r) => r.slug === params.slug); + if (!resource) return { title: 'Resource Not Found' }; + + return { + title: `${resource.title} - SocialBuddy Resources`, + description: resource.excerpt, + }; +} + +export default async function ResourceDetailPage(props: PageProps) { + const params = await props.params; + + if (!params?.slug) { + notFound(); + } + + const resource = resources.find((r) => r.slug === params.slug); + + if (!resource) { + notFound(); + } + + return ( +
+ {/* Standardized Hero/Banner Section */} +
+
+
+

{resource.title}

+
+ Home / Resources / {resource.title} +
+
+
+
+ + {/* Featured Image */} +
+
+ +
+
+ + {/* Content Body */} + {/* Content Body */} +
+
+
+ + {/* Back to Resources */} +
+ + View All Resources + +
+
+ ); +} diff --git a/app/resources/page.tsx b/app/resources/page.tsx new file mode 100644 index 0000000..1594f57 --- /dev/null +++ b/app/resources/page.tsx @@ -0,0 +1,49 @@ +import Link from 'next/link'; +import SafeImage from '@/components/SafeImage'; +import styles from './resources.module.css'; +import { resources } from '@/data/resources'; + +export const metadata = { + title: 'Resources - SocialBuddy', + description: 'Guides, tips, and strategies to master social media marketing.', +}; + +export default function ResourcesPage() { + return ( +
+ {/* Standardized Hero Section */} +
+
+
+

Resources

+
+ Home / Resources +
+
+
+
+ +
+
+ {resources.map((resource) => ( + +
+ +
+
+ {resource.category} +

{resource.title}

+

{resource.excerpt}

+
+ + ))} +
+
+
+ ); +} diff --git a/app/resources/resources.module.css b/app/resources/resources.module.css new file mode 100644 index 0000000..2e12100 --- /dev/null +++ b/app/resources/resources.module.css @@ -0,0 +1,275 @@ +/* Page Wrapper */ +.page { + animation: fadeIn 0.6s ease-out; + background-color: #F8FAFC; + min-height: 100vh; +} + +.container { + max-width: 1280px; + margin: 0 auto; + padding: 0 1.5rem; +} + +/* --- Hero Section (Ref: Inner Banner) --- */ +.hero { + padding: 8rem 0 8rem; + text-align: center; + background-image: url('/hero-inner-bg.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); +} + +.heroContent { + position: relative; + z-index: 1; + max-width: 900px; + margin: 0 auto; +} + +.heroTitle { + font-size: clamp(2.5rem, 6vw, 4rem); + font-weight: 800; + margin-bottom: 1rem; + line-height: 1.2; + color: #fff; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.breadcrumbs { + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.breadcrumbs a { + color: rgba(255, 255, 255, 0.9); + text-decoration: none; + transition: color 0.3s ease; +} + +.breadcrumbs a:hover { + color: #fff; +} + +.breadcrumbs span { + color: #fff; + font-weight: 600; +} + + +/* --- Grid & Cards --- */ +.grid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + padding: 4rem 0; +} + +@media (min-width: 640px) { + .grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .grid { + grid-template-columns: repeat(3, 1fr); + } +} + +.card { + background: white; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease, box-shadow 0.3s ease; + display: flex; + flex-direction: column; + text-decoration: none; + /* Ensure no underline on card */ +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); +} + +.imageWrapper { + height: 220px; + overflow: hidden; + position: relative; + background: #f0f0f0; +} + +.image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.card:hover .image { + transform: scale(1.05); +} + +.content { + padding: 1.5rem; + flex: 1; + display: flex; + flex-direction: column; +} + +.category { + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--primary); + font-weight: 600; + margin-bottom: 0.5rem; + display: block; +} + +.title { + font-size: 1.25rem; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 0.75rem; + line-height: 1.4; +} + +.excerpt { + font-size: 0.95rem; + color: var(--text-secondary); + margin-bottom: 1.5rem; + line-height: 1.6; + flex: 1; +} + +.meta { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 0.85rem; + color: #94A3B8; + border-top: 1px solid #F1F5F9; + padding-top: 1rem; +} + +.author { + font-weight: 500; +} + +.date { + font-style: italic; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Detail Page Styles */ +.detailPage { + background: white; +} + +/* Moved Title to Hero, so this header is deprecated/removed in new design, + but keeping a simplified version just in case of fallback usage +*/ +.detailHeaderDeprecated { + text-align: center; + padding: 4rem 1.5rem 0; + max-width: 900px; + margin: 0 auto; +} + +.detailImageWrapper { + max-width: 1000px; + height: 400px; + margin: 3rem auto; + border-radius: 20px; + overflow: hidden; + box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1); +} + +.detailImageWrapper img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.detailContent { + max-width: 800px; + margin: 0 auto; + padding: 0 1.5rem 4rem; + /* Adjusted padding */ + line-height: 1.8; + color: var(--text-primary); + font-size: 1.125rem; +} + +/* Ensure no unwanted underlines in content unless links */ +.detailContent h2, +.detailContent h3, +.detailContent p, +.detailContent li { + text-decoration: none; +} + +.detailContent a { + text-decoration: underline; + color: var(--primary); +} + +.detailContent h2 { + font-size: 2rem; + font-weight: 700; + margin-top: 2.5rem; + margin-bottom: 1.25rem; + color: #1E293B; +} + +.detailContent h3 { + font-size: 1.5rem; + font-weight: 600; + margin-top: 2rem; + margin-bottom: 1rem; + color: #334155; +} + +.detailContent p { + margin-bottom: 1.5rem; +} + +.detailContent ul { + margin-bottom: 1.5rem; + padding-left: 1.5rem; +} + +.detailContent li { + margin-bottom: 0.5rem; +} \ No newline at end of file diff --git a/components/AboutSection.module.css b/components/AboutSection.module.css new file mode 100644 index 0000000..fb1ebbb --- /dev/null +++ b/components/AboutSection.module.css @@ -0,0 +1,304 @@ +.section { + position: relative; + overflow: visible; + /* Changed from hidden to visible to avoid clipping badge/shadows */ + padding: var(--spacing-2xl) 0; + background: var(--background); + /* Ensure z-index management if sections overlap, but usually safe default */ +} + +.container { + max-width: 1280px; + margin: 0 auto; + padding: 0 var(--spacing-md); +} + +.contentWrapper { + display: grid; + grid-template-columns: 1fr; + gap: var(--spacing-2xl); + align-items: center; +} + +@media (min-width: 1024px) { + .contentWrapper { + grid-template-columns: 1fr 1fr; + /* Equal width as requested "equaly show the image and content" */ + gap: 2rem; + /* Reduced from 4rem */ + } +} + +/* Image Composition */ +.imageGrid { + position: relative; + height: 600px; + width: 100%; +} + +.mainImageWrapper { + position: absolute; + top: 0; + right: 0; + width: 75%; + height: 85%; + border-radius: var(--radius-2xl); + overflow: hidden; + z-index: 1; +} + +.secondaryImageWrapper { + position: absolute; + bottom: 0; + left: 0; + width: 55%; + height: 50%; + border-radius: var(--radius-2xl); + border: 10px solid var(--background); + overflow: hidden; + z-index: 2; + box-shadow: var(--shadow-xl); +} + +.image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.7s ease; +} + +.mainImageWrapper:hover .image, +.secondaryImageWrapper:hover .image { + transform: scale(1.05); +} + +.badge { + position: absolute; + bottom: 25%; + left: 45%; + transform: translate(-50%, 50%); + width: 140px; + height: 140px; + background: #a855f7; + background: linear-gradient(135deg, #a855f7 0%, #d946ef 100%); + border-radius: 50%; + border: 8px solid var(--background); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: white; + z-index: 3; + box-shadow: var(--shadow-lg); + animation: float 4s ease-in-out infinite; +} + +.badgeNumber { + font-size: 1.75rem; + font-weight: 700; + line-height: 1; +} + +.badgeText { + font-size: 0.75rem; + text-align: center; + opacity: 0.9; + margin-top: 4px; +} + +/* Text Side */ +.textContent { + display: flex; + flex-direction: column; + /* gap: 1rem; */ + /* Reduced from var(--spacing-md) */ + padding-left: var(--spacing-md); +} + +.subTitle { + color: #0072b1; + text-transform: uppercase; + letter-spacing: 2px; + font-weight: 600; + font-size: 0.875rem; + margin-bottom: 1rem; +} + +.subTitleIcon { + width: 18px; + height: 18px; + border: 2px solid var(--primary); + border-radius: 50%; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.subTitleIcon::after { + content: ''; + width: 6px; + height: 6px; + background: var(--primary); + border-radius: 50%; +} + +.title { + font-family: var(--font-display); + font-size: clamp(2rem, 3.5vw, 3rem); + font-weight: 800; + line-height: 1.25; + color: var(--text-primary); +} + +.description { + color: var(--text-secondary); + font-size: 1rem; + line-height: 1.7; + max-width: 600px; +} + +.featuresList { + list-style: none; + display: flex; + flex-direction: column; + gap: 1rem; + /* Reduced from 2rem */ + margin-top: 1rem; +} + +.featureItem { + display: flex; + align-items: flex-start; + gap: 1.25rem; +} + +.iconWrapper { + flex-shrink: 0; + width: 60px; + height: 60px; + border-radius: 50%; + background: #f1f5f9; + color: #0072b1; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + transition: all 0.3s ease; +} + +.featureItem:nth-child(2) .iconWrapper { + background: #f1f5f9; + /* Darker blue-100 for better visibility */ + color: #ec4899; +} + +.featureItem:nth-child(3) .iconWrapper { + background: #f1f5f9; + /* Darker pink-100 for better visibility */ + color: #1255d8; +} + +.featureContent h4 { + font-size: 1.125rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.featureContent p { + color: var(--text-secondary); + font-size: 0.9rem; + line-height: 1.6; + margin: 0; +} + +/* Button Wrapper */ +.buttonWrapper { + margin-top: 1rem; +} + +/* Counters Section */ +.countersSection { + margin-top: 5rem; + padding-top: 3rem; + /* Added some top padding/border maybe */ + border-top: 1px solid var(--border-color); + /* Added border to separate explicitly */ + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 2rem; +} + +@media (max-width: 768px) { + .countersSection { + display: grid; + grid-template-columns: 1fr 1fr; + text-align: center; + margin-top: 3rem; + } + + .imageGrid { + height: 400px; + } +} + +.counterItem { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + flex: 1; + /* Distribute space */ +} + +/* Add separator lines between counters on Desktop */ +@media (min-width: 1024px) { + .counterItem:not(:last-child)::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + height: 50px; + width: 1px; + background: var(--border-color); + } +} + +.counterNumber { + font-size: 2.5rem; + font-weight: 800; + color: var(--text-primary); + line-height: 1; + margin-bottom: 0.5rem; +} + +/* Plus sign color pop */ +.counterNumber::after { + content: '+'; + color: var(--primary); + margin-left: 5px; +} + +.counterLabel { + color: var(--text-secondary); + font-size: 0.9rem; + font-weight: 500; + text-transform: capitalize; +} + + +@keyframes float { + + 0%, + 100% { + transform: translate(-50%, 50%) translateY(0); + } + + 50% { + transform: translate(-50%, 50%) translateY(-10px); + } +} \ No newline at end of file diff --git a/components/AboutSection.tsx b/components/AboutSection.tsx new file mode 100644 index 0000000..6d1f072 --- /dev/null +++ b/components/AboutSection.tsx @@ -0,0 +1,104 @@ +'use client'; + +import React from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; +import { Users, Layout, ShieldCheck, ArrowRight } from 'lucide-react'; +import styles from './AboutSection.module.css'; + +const AboutSection = () => { + return ( +
+
+
+ {/* Left Side - Image Composition */} +
+ {/* Main Large Image (Top Right) */} +
+ Business Professional +
+ {/* Secondary Small Image (Bottom Left) */} +
+ Team working +
+ {/* Badge removed as requested */} +
+ + {/* Right Side - Content */} +
+ {/* Subtitle */} +
+ About Company +
+ + {/* Title */} +

+ We Are The Best Social Media Marketing Agency +

+ + {/* Description */} +

+ Elevate your brand with our data-driven social media strategies. We combine creativity with analytics to deliver campaigns that resonate with your audience and drive measurable results. +

+ + {/* Features List */} +
    +
  • +
    + +
    +
    +

    Trusted Partner

    +

    Over a decade of experience helping brands grow their online presence with verified strategies.

    +
    +
    • + +
  • +
    + +
    +
    +

    Fastpace Platform

    +

    Rapid deployment of campaigns across all major social platforms to catch trends instantly.

    +
    +
    • + +
  • +
    + +
    +
    +

    Tested Reliability

    +

    Consistent results and transparent reporting you can count on, backed by data.

    +
    +
    • +
+ + {/* CTA Button */} +
+ + Discover More + +
+
+
+ + {/* Counters Section Removed as requested */} +
+
+ ); +}; + +export default AboutSection; diff --git a/components/CTA.module.css b/components/CTA.module.css index d714711..818781a 100644 --- a/components/CTA.module.css +++ b/components/CTA.module.css @@ -1,238 +1,193 @@ .ctaSection { - padding: 6rem 0; position: relative; -} - -.ctaCard { - background: linear-gradient(135deg, var(--primary), var(--secondary)); - border-radius: 32px; padding: 4rem 2rem; - position: relative; overflow: hidden; - box-shadow: 0 20px 60px rgba(236, 72, 153, 0.3); + background: #0f172a; + /* Dark fallback */ + display: flex; + justify-content: center; + align-items: center; + min-height: 600px; + color: white; + /* Switch text to white */ } -.background { +/* Background Image */ +.gridBackground { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: hidden; + inset: 0; + background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9)), url('/hero-bg-v2.png'); + background-size: cover; + background-position: center; + z-index: 0; + pointer-events: none; } -.circle1, -.circle2, -.circle3 { +/* Floating Icons Container */ +.floatingIconsContainer { position: absolute; - border-radius: 50%; - background: rgba(255, 255, 255, 0.1); - animation: float 20s ease-in-out infinite; + inset: 0; + z-index: 1; + pointer-events: none; } -.circle1 { - width: 300px; - height: 300px; - top: -100px; - right: -100px; - animation-delay: 0s; +.floatIcon { + position: absolute; + width: 50px; + height: 50px; + background: white; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); + /* Soft shadow */ + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + border: 1px solid rgba(0, 0, 0, 0.05); + animation: float 6s ease-in-out infinite; } -.circle2 { - width: 200px; - height: 200px; - bottom: -50px; +/* Icon Positioning imitating scatter */ +.icon1 { + top: 15%; left: 10%; - animation-delay: 2s; + animation-delay: 0s; + color: #FF4500; + filter: blur(1px); + transform: scale(0.9); } -.circle3 { - width: 150px; - height: 150px; - top: 50%; - left: -50px; - animation-delay: 4s; +/* Reddit-ish */ +.icon2 { + top: 25%; + left: 5%; + animation-delay: 1s; + color: #FF0000; } +/* YouTube */ +.icon3 { + top: 10%; + left: 30%; + animation-delay: 2s; + color: #000000; + opacity: 0.7; +} + +/* X */ +.icon4 { + top: 12%; + right: 20%; + animation-delay: 3s; + color: #1DA1F2; +} + +/* Twitter/Blue */ + +.icon5 { + top: 50%; + left: 15%; + animation-delay: 1.5s; + color: #0077B5; +} + +/* LinkedIn */ +.icon6 { + top: 30%; + right: 5%; + animation-delay: 0.5s; + color: #E60023; +} + +/* Pinterest */ +.icon7 { + bottom: 20%; + left: 20%; + animation-delay: 2.5s; + color: #E4405F; + filter: blur(2px); + transform: scale(0.8); +} + +/* Insta-ish heart */ +.icon8 { + bottom: 25%; + right: 15%; + animation-delay: 3.5s; + color: #222; +} + +/* Thread/Spiral */ + @keyframes float { 0%, 100% { - transform: translateY(0) scale(1); + transform: translateY(0) rotate(0deg); } 50% { - transform: translateY(-30px) scale(1.1); + transform: translateY(-15px) rotate(2deg); } } -.content { +/* Content */ +.contentContainer { position: relative; - z-index: 1; + z-index: 2; text-align: center; - max-width: 900px; - margin: 0 auto; -} - -.badge { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1.25rem; - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 50px; - font-size: 0.875rem; - font-weight: 600; - color: white; - margin-bottom: 1.5rem; - backdrop-filter: blur(10px); + max-width: 800px; + width: 100%; } .title { - font-size: clamp(2rem, 5vw, 3.5rem); + font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; color: white; - margin-bottom: 1.5rem; - line-height: 1.2; -} - -.highlight { - background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.7)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.3); + /* Updated for dark bg */ + margin-bottom: 1rem; + line-height: 1.1; + letter-spacing: -0.02em; } .subtitle { - font-size: 1.125rem; - color: rgba(255, 255, 255, 0.95); - margin-bottom: 2.5rem; - line-height: 1.7; - max-width: 700px; - margin-left: auto; - margin-right: auto; + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.8); + /* Updated for dark bg */ + margin-bottom: 3rem; } -.features { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 1rem; - margin-bottom: 2.5rem; - max-width: 800px; - margin-left: auto; - margin-right: auto; -} - -.feature { - display: flex; - align-items: center; - gap: 0.75rem; +/* Standalone CTA Button */ +.standaloneBtn { + background: var(--gradient-primary); color: white; - font-size: 1rem; - font-weight: 500; - background: rgba(255, 255, 255, 0.1); - padding: 0.75rem 1rem; - border-radius: 12px; - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.checkIcon { - width: 24px; - height: 24px; - background: white; - color: var(--primary); - border-radius: 50%; - display: flex; + border: none; + padding: 1rem 2.5rem; + border-radius: 50px; + font-weight: 700; + font-size: 1.125rem; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; + display: inline-flex; align-items: center; justify-content: center; - font-weight: 700; - flex-shrink: 0; + gap: 0.75rem; + margin-top: 1rem; + text-decoration: none; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } -.buttons { - display: flex; - flex-direction: column; - gap: 1rem; - align-items: center; - margin-bottom: 2.5rem; -} - -@media (min-width: 640px) { - .buttons { - flex-direction: row; - justify-content: center; - } -} - -.primaryBtn { - background: white !important; - color: var(--primary) !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); -} - -.primaryBtn:hover { +.standaloneBtn:hover { transform: translateY(-2px); - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); -} - -.secondaryBtn { - background: rgba(255, 255, 255, 0.2) !important; - color: white !important; - border: 2px solid white !important; - backdrop-filter: blur(10px); -} - -.secondaryBtn:hover { - background: rgba(255, 255, 255, 0.3) !important; + box-shadow: 0 10px 20px -5px rgba(236, 72, 153, 0.4); } .arrow { - margin-left: 0.5rem; - transition: transform 0.3s ease; display: inline-block; + transition: transform 0.3s ease; } -.primaryBtn:hover .arrow { +.standaloneBtn:hover .arrow { transform: translateX(5px); -} - -.trustBadges { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 2rem; - padding-top: 2rem; - border-top: 1px solid rgba(255, 255, 255, 0.2); -} - -.trustBadge { - display: flex; - align-items: center; - gap: 0.5rem; - color: white; - font-size: 0.9375rem; - font-weight: 600; -} - -.badgeIcon { - font-size: 1.25rem; -} - -@media (min-width: 768px) { - .ctaCard { - padding: 5rem 3rem; - } - - .subtitle { - font-size: 1.25rem; - } -} - -@media (min-width: 1024px) { - .ctaCard { - padding: 6rem 4rem; - } } \ No newline at end of file diff --git a/components/CTA.tsx b/components/CTA.tsx index 0902009..9ac8feb 100644 --- a/components/CTA.tsx +++ b/components/CTA.tsx @@ -1,77 +1,60 @@ +'use client'; + import Link from 'next/link'; + import styles from './CTA.module.css'; export default function CTA() { return (
-
-
-
-
-
-
-
+
-
-
- πŸš€ - Get Started Today -
- -

- Ready to Transform Your Social Media Strategy? -

- -

- Join thousands of businesses and creators who are already using SocialBuddy to grow their online presence. - Start your free trial todayβ€”no credit card required. -

- -
-
- βœ“ - 14-day free trial -
-
- βœ“ - No credit card required -
-
- βœ“ - Cancel anytime -
-
- βœ“ - 24/7 customer support -
-
- -
- - Start Free Trial - β†’ - - - View Pricing - -
- -
-
- πŸ”’ - Secure & Encrypted -
-
- ⭐ - 4.9/5 Rating -
-
- πŸ‘₯ - 10,000+ Users -
-
-
+ {/* Floating Icons */} +
+ {/* Top Left */} +
+ πŸ“£
+
+ ▢️ +
+ + {/* Top/Mid */} +
+ 𝕏 +
+
+ πŸ¦‹ {/* Bluesky/Twitter-like */} +
+ + {/* Left/Right Scatter */} +
+ πŸ’Ό +
+
+ πŸ“Œ +
+ + {/* Bottom Scatter */} +
+ ❀️ +
+
+ πŸŒ€ +
+
+ +
+

+ Your social media
workspace +

+

+ Share consistently without the chaos +

+ + + Get started for free β†’ +
); diff --git a/components/CoreServices.module.css b/components/CoreServices.module.css new file mode 100644 index 0000000..11e19b3 --- /dev/null +++ b/components/CoreServices.module.css @@ -0,0 +1,354 @@ +.section { + padding: 5rem 0; + position: relative; + background: var(--background); + overflow: hidden; +} + +@media (min-width: 768px) { + .section { + padding: 4rem 0; + } +} + +@media (min-width: 1024px) { + .section { + padding: 4rem 0; + } +} + +.header { + text-align: center; + margin-bottom: 5rem; +} + +.subTitle { + color: #0072b1; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.9rem; + margin-bottom: 0.5rem; + display: block; +} + +.title { + font-size: clamp(2.5rem, 5vw, 3.5rem); + font-weight: 800; + margin-bottom: 1.5rem; + color: var(--foreground); + line-height: 1.1; +} + +.highlight { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.subtitle { + font-size: 1.2rem; + color: var(--foreground-secondary); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.gridContainer { + display: grid; + gap: 3rem; + align-items: center; +} + +/* Service Item Styling */ +.serviceItem { + display: flex; + gap: 1.5rem; + margin-bottom: 3rem; + align-items: flex-start; +} + +.serviceItem:last-child { + margin-bottom: 0; +} + +.iconWrapper { + width: 50px; + height: 50px; + border-radius: 12px; + background: var(--card-bg, rgba(255, 255, 255, 0.05)); + border: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: all 0.3s ease; +} + +.serviceItem:hover .iconWrapper { + background: var(--primary); + border-color: var(--primary); + transform: scale(1.1); + box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3); +} + +.icon { + font-size: 1.5rem; +} + +.content h3 { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--foreground); + transition: color 0.3s ease; +} + +.serviceItem:hover .content h3 { + color: var(--primary); +} + +.content p { + font-size: 0.95rem; + color: var(--foreground-secondary); + line-height: 1.6; + margin: 0; +} + +/* Central Visual Styles */ +.columnCenter { + display: flex; + justify-content: center; + align-items: center; + min-height: 400px; + position: relative; +} + +.centralVisual { + position: relative; + width: 300px; + height: 400px; + display: flex; + align-items: center; + justify-content: center; +} + +.circleBg { + position: absolute; + width: 350px; + height: 350px; + background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%); + border-radius: 50%; + z-index: 0; + animation: pulse 4s ease-in-out infinite; +} + +@keyframes pulse { + + 0%, + 100% { + transform: scale(1); + opacity: 0.5; + } + + 50% { + transform: scale(1.1); + opacity: 0.8; + } +} + +.glassCard { + width: 240px; + height: 340px; + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 20px; + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + padding: 20px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + transform: rotateY(-10deg) rotateX(10deg); + transition: transform 0.5s ease; +} + +.centralVisual:hover .glassCard { + transform: rotateY(0) rotateX(0) translateY(-10px); +} + +.cardHeader { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding-bottom: 10px; + margin-bottom: 20px; +} + +.dots { + display: flex; + gap: 6px; +} + +.dots span { + width: 8px; + height: 8px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); +} + +.dots span:nth-child(1) { + background: #ff5f56; +} + +.dots span:nth-child(2) { + background: #ffbd2e; +} + +.dots span:nth-child(3) { + background: #27c93f; +} + +.cardBody { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; +} + +.graphArea { + display: flex; + align-items: flex-end; + gap: 10px; + height: 100px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding-bottom: 5px; +} + +.bar { + width: 20%; + background: linear-gradient(to top, var(--primary), var(--secondary)); + border-radius: 4px 4px 0 0; + animation: growBar 2s ease-out infinite alternate; +} + +.bar:nth-child(1) { + height: 40%; + animation-delay: 0s; +} + +.bar:nth-child(2) { + height: 70%; + animation-delay: 0.2s; +} + +.bar:nth-child(3) { + height: 50%; + animation-delay: 0.4s; +} + +.bar:nth-child(4) { + height: 90%; + animation-delay: 0.6s; +} + +@keyframes growBar { + from { + transform: scaleY(0.9); + } + + to { + transform: scaleY(1.1); + } +} + +.pieChart { + width: 80px; + height: 80px; + border-radius: 50%; + background: conic-gradient(var(--primary) 0% 70%, rgba(255, 255, 255, 0.1) 70% 100%); + margin: 0 auto; + position: relative; +} + +.pieChart::after { + content: ''; + position: absolute; + inset: 20px; + background: var(--card-bg); + /* Match visual background if possible, or transparent */ + border-radius: 50%; + backdrop-filter: blur(5px); +} + +.floatingBadge { + position: absolute; + top: -20px; + right: -20px; + background: white; + color: black; + padding: 8px 16px; + border-radius: 20px; + font-weight: bold; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); + animation: floatBadge 3s ease-in-out infinite; +} + +@keyframes floatBadge { + + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-5px); + } +} + +/* Desktop Layout (1024px+) */ +@media (min-width: 1024px) { + .gridContainer { + grid-template-columns: 1fr 350px 1fr; + gap: 4rem; + } + + .columnLeft { + text-align: right; + } + + .columnLeft .serviceItem { + flex-direction: row-reverse; + } +} + +/* Tablet (768px - 1023px) */ +@media (min-width: 768px) and (max-width: 1023px) { + .gridContainer { + grid-template-columns: 1fr 1fr; + gap: 3rem; + } + + .columnCenter { + grid-column: span 2; + order: -1; + min-height: 300px; + } +} + +/* Mobile (below 768px) */ +@media (max-width: 767px) { + .gridContainer { + grid-template-columns: 1fr; + } + + .columnCenter { + order: -1; + /* Image first on mobile */ + margin-bottom: 2rem; + } + + .centralVisual { + transform: scale(0.9); + } +} \ No newline at end of file diff --git a/components/CoreServices.tsx b/components/CoreServices.tsx new file mode 100644 index 0000000..203555a --- /dev/null +++ b/components/CoreServices.tsx @@ -0,0 +1,114 @@ +'use client'; + +import styles from './CoreServices.module.css'; + +export default function CoreServices() { + return ( +
+
+
+
Our Services
+

All-in-One Social Management

+

+ Everything you need to dominate social media, conveniently organized in one powerful platform. +

+
+ +
+ {/* Left Column */} +
+
+
+ πŸ“Š +
+
+

Unified Dashboard

+

Manage Facebook, Instagram, X, and LinkedIn from one centralized, intuitive interface.

+
+
+ +
+
+ ⚑ +
+
+

Smart Scheduling

+

AI-powered timing suggestions to automatically post when your audience is most active.

+
+
+ +
+
+ πŸ“… +
+
+

Visual Calendar

+

Drag-and-drop content calendar to plan and visualize your strategy months in advance.

+
+
+
+ + {/* Center Column - Image */} +
+
+ {/* CSS-based Abstract Dashboard/Manager Illustration */} +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ πŸš€ +128% +
+
+
+
+ + {/* Right Column */} +
+
+
+ πŸ“ˆ +
+
+

Analytics & Reports

+

Deep dive into performance metrics with automated, white-labeled reports for clients.

+
+
+ +
+
+ πŸ‘₯ +
+
+

Team Collaboration

+

Built-in approval workflows and role-based access for seamless team coordination.

+
+
+ +
+
+ πŸ’¬ +
+
+

Social Inbox

+

Never miss a comment or DM. innovative unified inbox to reply to all interactions.

+
+
+
+
+
+
+ ); +} diff --git a/components/FAQ.module.css b/components/FAQ.module.css index f7c8f1b..6d53889 100644 --- a/components/FAQ.module.css +++ b/components/FAQ.module.css @@ -1,203 +1,277 @@ -.header { - text-align: center; - margin-bottom: 4rem; +.section { + padding: 4rem 0; + background-color: transparent; } -.badge { - display: inline-flex; +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; +} + +.grid { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; align-items: center; - gap: 0.5rem; - padding: 0.5rem 1.25rem; - background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1)); - border: 1px solid rgba(236, 72, 153, 0.2); - border-radius: 50px; - font-size: 0.875rem; - font-weight: 600; - color: var(--primary); - margin-bottom: 1rem; } -.title { - font-size: clamp(2rem, 5vw, 3rem); - font-weight: 800; +.leftColumn { + padding-right: 0; +} + +.label { + color: #2563eb; + font-weight: 700; + font-size: 0.875rem; margin-bottom: 1rem; + display: block; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.heading { + font-size: 2.25rem; + font-weight: 800; + color: #111827; + margin-bottom: 2.5rem; line-height: 1.2; } -.subtitle { - font-size: 1.125rem; - color: var(--text-secondary); - max-width: 700px; - margin: 0 auto; +.featureList { + display: flex; + flex-direction: column; + gap: 1.5rem; + margin-bottom: 3rem; } -.contactLink { - color: var(--primary); - text-decoration: none; - font-weight: 600; - transition: color 0.3s ease; -} - -.contactLink:hover { - color: var(--secondary); - text-decoration: underline; -} - -.faqContainer { - max-width: 900px; - margin: 0 auto 4rem; -} - -.faqItem { - background: var(--card-bg); - border: 1px solid var(--border-color); - border-radius: 16px; - margin-bottom: 1rem; - overflow: hidden; +.featureItem { + display: flex; + gap: 1.25rem; + align-items: center; + padding: 1rem; + border-radius: 12px; + cursor: pointer; transition: all 0.3s ease; + border: 1px solid transparent; } -.faqItem:hover { - border-color: var(--primary); - box-shadow: 0 4px 20px rgba(236, 72, 153, 0.1); +.featureItem:hover { + background-color: #F8FAFC; + transform: translateX(5px); } -.faqItem.open { - border-color: var(--primary); +.featureItem.active { + background-color: white; + border-color: #E2E8F0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); + transform: translateX(10px); } -.faqQuestion { - width: 100%; +.iconWrapper { + flex-shrink: 0; + width: 48px; + height: 48px; + border-radius: 50%; display: flex; align-items: center; - justify-content: space-between; - gap: 1rem; - padding: 1.5rem; - background: transparent; - border: none; - cursor: pointer; - text-align: left; + justify-content: center; + color: white; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } -.faqQuestion:hover { - background: rgba(236, 72, 153, 0.05); +/* Icon Styles - Default opacity for non-active? Or just keep colorful */ +.iconWrapper.orange { + background: linear-gradient(135deg, #f9cd35, #f9cd35); + box-shadow: 0 4px 12px rgba(255, 107, 69, 0.2); } -.questionText { +.iconWrapper.red { + background: linear-gradient(135deg, #ec4899, #ec4899); + box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2); +} + +.iconWrapper.blue { + background: linear-gradient(135deg, #1255d8, #1255d8); + box-shadow: 0 4px 12px rgba(41, 121, 255, 0.2); +} + +.featureItem:hover .iconWrapper { + transform: scale(1.1); +} + +.activeIcon { + transform: scale(1.1); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important; +} + +.featureContent h4 { font-size: 1.125rem; - font-weight: 600; - color: var(--text-primary); - flex: 1; + font-weight: 700; + color: #1F2937; + margin-bottom: 0.25rem; + transition: color 0.3s; } -.icon { - width: 24px; - height: 24px; - color: var(--primary); - transition: transform 0.3s ease; - flex-shrink: 0; +.featureItem.active .featureContent h4 { + color: #EC4899; + /* Highlight active title */ } -.faqItem.open .icon { - transform: rotate(180deg); -} - -.faqAnswer { - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease; -} - -.faqItem.open .faqAnswer { - max-height: 500px; -} - -.answerContent { - padding: 0 1.5rem 1.5rem; -} - -.answerContent p { - font-size: 1rem; - line-height: 1.7; - color: var(--text-secondary); +.featureContent p { + color: #6B7280; + line-height: 1.4; + font-size: 0.9rem; margin: 0; } -.ctaBox { - background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1)); - border: 1px solid var(--border-color); - border-radius: 24px; - padding: 3rem 2rem; - text-align: center; - position: relative; - overflow: hidden; +.supportSection { + margin-top: 2rem; + padding-left: 1rem; } -.ctaBox::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%); - animation: rotate 20s linear infinite; +.supportText { + color: #6B7280; + margin-bottom: 1rem; + font-size: 0.9375rem; } -@keyframes rotate { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } +.contactBtn { + background: linear-gradient(135deg, #4F46E5, #EC4899); + color: white; + padding: 0.75rem 1.5rem; + border-radius: 8px; + font-weight: 600; + text-decoration: none; + display: inline-block; + transition: all 0.3s ease; + box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2); } -.ctaTitle { - font-size: 1.75rem; - font-weight: 800; - color: var(--text-primary); - margin-bottom: 0.75rem; - position: relative; - z-index: 1; +.contactBtn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px -1px rgba(79, 70, 229, 0.3); } -.ctaText { - font-size: 1.125rem; - color: var(--text-secondary); - margin-bottom: 2rem; - position: relative; - z-index: 1; -} - -.ctaButtons { +/* Right Column */ +.faqList { display: flex; flex-direction: column; gap: 1rem; + min-height: 500px; + /* Prevent large layout shifts */ +} + +.mobileCategoryTitle { + display: none; + font-size: 1.5rem; + font-weight: 700; + color: #111827; + margin-bottom: 1rem; +} + +.faqItem { + background: white; + border-radius: 12px; + overflow: hidden; + transition: all 0.3s ease; + border: 1px solid #F3F4F6; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); + animation: fadeInRight 0.4s ease-out; +} + +@keyframes fadeInRight { + from { + opacity: 0; + transform: translateX(20px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +.faqItem:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +.faqButton { + width: 100%; + padding: 1.25rem; + display: flex; align-items: center; - position: relative; - z-index: 1; + justify-content: space-between; + background: transparent; + border: none; + text-align: left; + cursor: pointer; + gap: 1rem; } -@media (min-width: 640px) { - .ctaButtons { - flex-direction: row; - justify-content: center; +.question { + font-weight: 600; + color: #1F2937; + font-size: 0.95rem; + line-height: 1.4; +} + +.chevron { + color: #EC4899; + flex-shrink: 0; + transition: transform 0.3s ease; +} + +.faqItem[data-state="open"] .chevron { + transform: rotate(180deg); +} + +.answer { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 0.3s ease-out; +} + +.faqItem[data-state="open"] .answer { + grid-template-rows: 1fr; +} + +.answerContent { + overflow: hidden; +} + +.answerInner { + padding: 0 1.25rem 1.25rem; + color: #6B7280; + line-height: 1.6; + font-size: 0.9375rem; +} + +@media (min-width: 1024px) { + .grid { + grid-template-columns: 0.8fr 1.2fr; + gap: 4rem; + } + + .heading { + font-size: 3rem; + } + + .section { + padding: 4rem 0; } } -@media (min-width: 768px) { - .ctaBox { - padding: 4rem 3rem; +@media (max-width: 1023px) { + .featureItem.active { + transform: translateX(0); + background-color: #F0F9FF; + /* Highlight slightly differently on mobile/tablet */ } - .questionText { - font-size: 1.25rem; - } - - .answerContent p { - font-size: 1.0625rem; + .mobileCategoryTitle { + display: block; + /* Show title above questions on mobile */ } } \ No newline at end of file diff --git a/components/FAQ.tsx b/components/FAQ.tsx index 80051a4..c35d482 100644 --- a/components/FAQ.tsx +++ b/components/FAQ.tsx @@ -1,115 +1,197 @@ 'use client'; import { useState } from 'react'; +import { Calendar, Sparkles, ShieldCheck, ChevronDown } from 'lucide-react'; import styles from './FAQ.module.css'; +interface FAQItem { + question: string; + answer: string; +} + +interface FAQCategory { + id: string; + title: string; + description: string; + icon: React.ReactNode; + colorClass: string; + faqs: FAQItem[]; +} + export default function FAQ() { + const [activeCategoryIndex, setActiveCategoryIndex] = useState(0); const [openIndex, setOpenIndex] = useState(0); - const faqs = [ + const categories: FAQCategory[] = [ { - question: 'What social media platforms does SocialBuddy support?', - answer: 'SocialBuddy supports all major social media platforms including Facebook, Instagram, Twitter (X), LinkedIn, Pinterest, TikTok, YouTube, and more. You can manage unlimited accounts across all these platforms from a single dashboard.', + id: 'scheduling', + title: 'Convenient Scheduling', + description: 'Easily plan and schedule your content across all platforms.', + icon: , + colorClass: 'orange', + faqs: [ + { + question: 'How does the multi-platform scheduling work?', + answer: 'Our intuitive calendar allows you to drag and drop content to schedule it across Facebook, Instagram, LinkedIn, and more simultaneously. You can customize the caption and media for each platform individually if needed.' + }, + { + question: 'Can I bulk upload posts from a CSV file?', + answer: 'Yes! You can upload hundreds of posts at once using our CSV bulk uploader. We also support bulk image uploading to match your spreadsheet content.' + }, + { + question: 'Does SocialBuddy suggest the best times to post?', + answer: 'Absolutely. Our AI analyzes your audience engagement history to recommend the optimal posting times for each specific platform to maximize reach.' + }, + { + question: 'Is there a limit to how many posts I can schedule?', + answer: 'Our Pro and Premium plans offer unlimited scheduling. The Starter plan includes up to 50 scheduled posts per month, which is sufficient for most individual creators.' + }, + { + question: 'Can I preview how my posts will look?', + answer: 'Yes, we provide a realistic preview for each platform so you can see exactly how your image, caption, and hashtags will appear before they go live.' + } + ] }, { - question: 'Can I try SocialBuddy before committing to a paid plan?', - answer: 'Absolutely! We offer a 14-day free trial for all our paid plans. No credit card is required to start your trial. You can explore all features and see how SocialBuddy fits your needs before making any commitment.', + id: 'ai', + title: 'Best AI Content Team', + description: 'Leverage advanced AI to generate captions and ideas instantly.', + icon: , + colorClass: 'red', + faqs: [ + { + question: 'How does the AI caption generator work?', + answer: 'We utilize advanced natural language processing models. You simply provide a topic or an image, and our AI generates engaging, on-brand captions with relevant emojis and hashtags.' + }, + { + question: 'Can I teach the AI my brand voice?', + answer: 'Yes! You can set up "Brand Personas" where you define your tone (e.g., professional, witty, casual). The AI will then tailor all generated content to match your specific style.' + }, + { + question: 'Does the AI generate images as well?', + answer: 'Currently, our AI focuses on text generation (captions, scripts, blog ideas). However, we integrate with stock photo libraries and design tools to help you find the perfect visuals.' + }, + { + question: 'Is the AI content unique?', + answer: 'Yes, every piece of content is generated from scratch based on your inputs. It is not pre-written templates, ensuring your content remains fresh and original.' + }, + { + question: 'Can AI help with hashtag research?', + answer: 'Definitely. Our AI analyzes your post content and niche to suggest high-traffic, low-competition hashtags that boost discoverability.' + } + ] }, { - question: 'How does the AI content assistant work?', - answer: 'Our AI content assistant uses advanced machine learning to analyze your brand voice, industry trends, and audience preferences. It can generate engaging captions, suggest relevant hashtags, recommend optimal posting times, and even help you create content ideas based on trending topics.', - }, - { - question: 'Is my data secure with SocialBuddy?', - answer: 'Security is our top priority. We use bank-level encryption (256-bit SSL) to protect your data. All social media connections are made through official OAuth protocols, and we never store your social media passwords. We\'re also GDPR and SOC 2 compliant.', - }, - { - question: 'Can I manage multiple team members and clients?', - answer: 'Yes! SocialBuddy offers robust team collaboration features including role-based access control, approval workflows, client management, and activity logs. You can invite unlimited team members on our Pro and Premium plans.', - }, - { - question: 'What kind of analytics and reporting does SocialBuddy provide?', - answer: 'SocialBuddy provides comprehensive analytics including engagement rates, follower growth, reach, impressions, best performing content, audience demographics, and competitor analysis. You can generate custom white-labeled reports and export data in various formats.', - }, - { - question: 'Can I schedule posts in advance?', - answer: 'Yes! You can schedule posts days, weeks, or even months in advance. Our smart scheduling feature uses AI to recommend the best times to post based on when your audience is most active. You can also use our bulk upload feature to schedule hundreds of posts at once.', - }, - { - question: 'What happens if I exceed my plan limits?', - answer: 'If you approach your plan limits, we\'ll notify you in advance. You can easily upgrade to a higher plan at any time. If you temporarily exceed limits, we won\'t interrupt your service - we\'ll just let you know it\'s time to upgrade.', - }, + id: 'growth', + title: 'Guaranteed Satisfaction', + description: 'Experience significant growth in engagement and reach.', + icon: , + colorClass: 'blue', + faqs: [ + { + question: 'What happens if I am not satisfied with the results?', + answer: 'We offer a 30-day money-back guarantee. If you don\'t see the value in SocialBuddy within the first month, just let us know and we will refund your subscription.' + }, + { + question: 'Is my social media account data secure?', + answer: 'Security is paramount. We use bank-level 256-bit encryption and never store your account passwords. We connect via official APIs which are safe and compliant.' + }, + { + question: 'Can I cancel my subscription at any time?', + answer: 'Yes, there are no long-term contracts. You can cancel your monthly subscription at any time from your dashboard settings without any cancellation fees.' + }, + { + question: 'Do you offer team collaboration features?', + answer: 'Yes, our higher-tier plans allow you to invite team members, assign roles (Editor, Admin), and set up approval workflows to ensure quality control.' + }, + { + question: 'How can I contact support if I have issues?', + answer: 'We offer 24/7 priority support via live chat and email for all our customers. Our average response time is under 15 minutes.' + } + ] + } ]; + const currentCategory = categories[activeCategoryIndex]; + const toggleFAQ = (index: number) => { setOpenIndex(openIndex === index ? null : index); }; - return ( -
-
-
-
- ❓ - FAQ -
-

- Frequently Asked Questions -

-

- Everything you need to know about SocialBuddy. Can't find the answer you're looking for? - Contact our support team. -

-
+ const handleCategoryClick = (index: number) => { + setActiveCategoryIndex(index); + setOpenIndex(0); // Reset to first item open or closed when switching? Let's open first item. + }; -
- {faqs.map((faq, index) => ( -
- -
-
-

{faq.answer}

+ +
+
+
+ {faq.answer} +
+
-
- ))} -
- -
-

Still have questions?

-

- Our friendly support team is here to help you 24/7 -

-
diff --git a/components/Features.module.css b/components/Features.module.css index 66de722..8d65df6 100644 --- a/components/Features.module.css +++ b/components/Features.module.css @@ -4,6 +4,18 @@ margin: 0 auto 4rem; } +.subTitle { + background: linear-gradient(to right, #2563eb 0%, #ec4899 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.875rem; + margin-bottom: 1rem; +} + .badge { display: inline-flex; align-items: center; @@ -15,12 +27,14 @@ font-weight: 600; margin-bottom: 1.5rem; color: var(--primary); + border: 1px solid var(--border-color); } .title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; color: var(--foreground); + line-height: 1.2; } .subtitle { @@ -29,96 +43,172 @@ line-height: 1.6; } -.featuresGrid { +.contentWrapper { display: grid; grid-template-columns: 1fr; - gap: 2rem; + gap: 3rem; + align-items: start; } -@media (min-width: 640px) { - .featuresGrid { - grid-template-columns: repeat(2, 1fr); - } -} -@media (min-width: 1024px) { - .featuresGrid { - grid-template-columns: repeat(3, 1fr); - } -} - -.featureCard { - background: var(--card-bg); - border-radius: var(--radius-xl); - padding: 2rem; - box-shadow: var(--shadow-md); - transition: all 0.3s ease; - border: 1px solid var(--border-color); - animation: fadeIn 0.6s ease-out forwards; -} - -.featureCard:hover { - transform: translateY(-10px); - box-shadow: var(--shadow-xl); - border-color: var(--primary); -} - -.iconWrapper { - width: 70px; - height: 70px; - border-radius: var(--radius-xl); +/* Accordion Styles */ +.accordion { display: flex; - align-items: center; - justify-content: center; - margin-bottom: 1.5rem; - transition: all 0.3s ease; -} - -.featureCard:hover .iconWrapper { - transform: scale(1.1) rotate(5deg); -} - -.icon { - font-size: 2.5rem; - transition: all 0.3s ease; -} - -.featureCard:hover .icon { - animation: float 2s ease-in-out infinite; -} - -.featureTitle { - font-size: 1.5rem; - font-weight: 700; - margin-bottom: 1rem; - color: var(--foreground); - font-family: var(--font-display); -} - -.featureDescription { - color: var(--foreground-secondary); - line-height: 1.6; - margin-bottom: 1.5rem; -} - -.learnMore { - color: var(--primary); - font-weight: 600; - cursor: pointer; - display: flex; - align-items: center; - gap: 0.5rem; - transition: all 0.3s ease; -} - -.learnMore:hover { + flex-direction: column; gap: 1rem; } -.arrow { +.accordionItem { + padding: 1.5rem; + border-radius: 1rem; + background: transparent; + border: 1px solid transparent; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +.accordionItem:hover { + background: rgba(255, 255, 255, 0.02); +} + +.accordionItem.active { + background: var(--card-bg, rgba(255, 255, 255, 0.05)); + border-color: var(--border-color); + box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2); +} + +.accordionItem::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: var(--primary); + transform: scaleY(0); transition: transform 0.3s ease; } -.learnMore:hover .arrow { - transform: translateX(5px); +.accordionItem.active::before { + transform: scaleY(1); +} + +.itemHeader { + display: flex; + align-items: center; + gap: 1.25rem; +} + +.iconWrapper { + width: 50px; + height: 50px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + background: rgba(var(--primary-rgb), 0.1); + color: var(--foreground); + transition: all 0.3s ease; + flex-shrink: 0; +} + +.accordionItem.active .iconWrapper { + background: var(--primary); + color: white; + transform: scale(1.1); + box-shadow: 0 0 15px var(--primary); +} + +.itemTitle { + font-size: 1.25rem; + font-weight: 700; + color: var(--foreground); + margin: 0; + transition: color 0.3s ease; +} + +.accordionItem.active .itemTitle { + color: var(--primary); +} + +.itemContent { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); + padding-left: calc(50px + 1.25rem); + /* Align with text */ +} + +.accordionItem.active .itemContent { + grid-template-rows: 1fr; + margin-top: 1rem; +} + +.contentInner { + overflow: hidden; + color: var(--foreground-secondary); + line-height: 1.6; + font-size: 1rem; +} + +/* Image Column */ +.desktopImageWrapper { + display: none; + /* Hidden by default on mobile */ + position: relative; + width: 100%; + border-radius: 1.5rem; + overflow: hidden; + border: 1px solid var(--border-color); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + background: var(--card-bg); +} + +.mobileImageWrapper { + margin-bottom: 1rem; + border-radius: 0.75rem; + overflow: hidden; + border: 1px solid var(--border-color); +} + +.mobileImage { + width: 100%; + height: auto; + object-fit: cover; + display: block; +} + +@media (min-width: 1024px) { + .contentWrapper { + grid-template-columns: 1.2fr 1fr; + gap: 5rem; + align-items: stretch; + } + + .desktopImageWrapper { + display: block; + height: auto; + min-height: 100%; + } + + .mobileImageWrapper { + display: none; + } +} + +.featureImage { + width: 100%; + height: 100%; + object-fit: cover; + transition: all 0.5s ease; +} + +.imageOverlay { + position: absolute; + inset: 0; + background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8)); + pointer-events: none; } \ No newline at end of file diff --git a/components/Features.tsx b/components/Features.tsx index 6b86aff..762be79 100644 --- a/components/Features.tsx +++ b/components/Features.tsx @@ -1,42 +1,54 @@ +'use client'; + +import { useState } from 'react'; +import Image from 'next/image'; import styles from './Features.module.css'; export default function Features() { + const [activeIndex, setActiveIndex] = useState(0); + const features = [ { icon: 'πŸ“…', title: 'Smart Scheduling', - description: 'Schedule posts across all platforms with AI-powered optimal timing suggestions.', + description: 'Schedule posts across all platforms with AI-powered optimal timing suggestions to maximize your reach and engagement.', color: '#667eea', + image: '/features/scheduling.png' }, { icon: 'πŸ“Š', title: 'Advanced Analytics', - description: 'Track performance metrics, engagement rates, and audience insights in real-time.', + description: 'Track performance metrics, engagement rates, and audience insights in real-time with comprehensive interactive dashboards.', color: '#ec4899', + image: '/features/analytics.png' }, { icon: 'πŸ€–', title: 'AI Content Assistant', - description: 'Generate engaging captions and hashtags with our AI-powered content tools.', + description: 'Generate engaging captions, hashtags, and creative content ideas instantly with our advanced AI-powered writing tools.', color: '#14b8a6', + image: '/features/ai.png' }, { icon: 'πŸ‘₯', title: 'Team Collaboration', - description: 'Work seamlessly with your team with role-based access and approval workflows.', + description: 'Work seamlessly with your team using role-based access, approval workflows, and shared content calendars.', color: '#f59e0b', + image: '/features/platforms.png' }, { icon: 'πŸ“±', title: 'Multi-Platform Support', - description: 'Manage Facebook, Instagram, Twitter, LinkedIn, and more from one dashboard.', + description: 'Manage Facebook, Instagram, Twitter, LinkedIn, and more from a single, unified dashboard without switching tabs.', color: '#8b5cf6', + image: '/features/platforms.png' }, { icon: 'πŸ””', title: 'Real-Time Notifications', - description: 'Stay updated with instant alerts for mentions, comments, and engagement.', + description: 'Stay on top of your community with instant alerts for new mentions, comments, and engagement opportunities.', color: '#ef4444', + image: '/features/ai.png' }, ]; @@ -44,37 +56,74 @@ export default function Features() {
-
- ✨ - Features -
+
Features

- Everything You Need to Succeed + Everything You Need to Succeed

Powerful tools designed to streamline your social media management and boost your online presence.

-
- {features.map((feature, index) => ( -
-
- - {feature.icon} - +
+ {/* Left Column: Image Preview */} +
+ {features.map((feature, index) => ( + {feature.title} + ))} +
+
+ + {/* Right Column: Accordion */} +
+ {features.map((feature, index) => ( +
setActiveIndex(index)} + > +
+
+ {feature.icon} +
+

+ {feature.title} +

+
+
+
+
+ {feature.title} +
+ {feature.description} +
+
-

{feature.title}

-

{feature.description}

-
- Learn more β†’ -
-
- ))} + ))} +
diff --git a/components/Footer.module.css b/components/Footer.module.css index 4e820ba..f138104 100644 --- a/components/Footer.module.css +++ b/components/Footer.module.css @@ -1,9 +1,11 @@ .footer { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: linear-gradient(135deg, #a855f7, #ec4899); + /* Purple/Pink gradient per user image */ color: white; - padding: 4rem 0 2rem; - margin-top: 6rem; + padding: 6rem 0 3rem; + /* Increase top padding */ position: relative; + margin-top: 0; } .footer::before { @@ -130,7 +132,8 @@ flex-direction: column; gap: 1rem; align-items: center; - justify-content: space-between; + justify-content: center; + /* Centered */ padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.2); } diff --git a/components/Footer.tsx b/components/Footer.tsx index 7db413e..4355ba7 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,4 +1,5 @@ import Link from 'next/link'; +import { Facebook, Instagram, Linkedin, Twitter, Youtube } from 'lucide-react'; import styles from './Footer.module.css'; export default function Footer() { @@ -13,7 +14,7 @@ export default function Footer() { ], company: [ { label: 'About Us', href: '/about' }, - { label: 'Blog', href: '/blog' }, + { label: 'Blog', href: '/resources' }, { label: 'Careers', href: '/careers' }, { label: 'Contact', href: '/contact' }, ], @@ -32,11 +33,11 @@ export default function Footer() { }; const socialLinks = [ - { icon: '𝕏', href: 'https://twitter.com', label: 'Twitter' }, - { icon: 'πŸ“˜', href: 'https://facebook.com', label: 'Facebook' }, - { icon: 'πŸ“·', href: 'https://instagram.com', label: 'Instagram' }, - { icon: 'πŸ’Ό', href: 'https://linkedin.com', label: 'LinkedIn' }, - { icon: 'πŸ“Ί', href: 'https://youtube.com', label: 'YouTube' }, + { icon: , href: 'https://twitter.com', label: 'Twitter' }, + { icon: , href: 'https://facebook.com', label: 'Facebook' }, + { icon: , href: 'https://instagram.com', label: 'Instagram' }, + { icon: , href: 'https://linkedin.com', label: 'LinkedIn' }, + { icon: , href: 'https://youtube.com', label: 'YouTube' }, ]; return ( @@ -46,8 +47,8 @@ export default function Footer() { {/* Brand Section */}
- πŸš€ - SocialBuddy + SocialBuddy Logo +

Empowering businesses to manage their social media presence with powerful tools and analytics. @@ -108,16 +109,21 @@ export default function Footer() {

+ {/* Bottom Bar */} {/* Bottom Bar */}

- Β© {currentYear} SocialBuddy. All rights reserved. + Β© Copyright {currentYear} SocialBuddy | Powered by{' '} + + MetatronCube + {' '} + All Rights Reserved

-
- πŸ”’ Secure - ⚑ Fast - 🌍 Global -
diff --git a/components/Hero.module.css b/components/Hero.module.css index 6cf3f18..3a41a67 100644 --- a/components/Hero.module.css +++ b/components/Hero.module.css @@ -1,398 +1,267 @@ -.hero { +.heroSection { position: relative; + padding: 8rem 0 4rem; + /* Top padding for fixed navbar */ + /* Stronger Pastel Gradient for differentiation */ + background: linear-gradient(135deg, #fce7f3 0%, #e0f2fe 100%); + overflow: hidden; min-height: 100vh; display: flex; align-items: center; - padding: 8rem 0 6rem; - overflow: hidden; - background: - linear-gradient(to bottom, rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0.9)), - url('/hero-custom.png'); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - /* Custom user-uploaded background */ - color: white; } -.hero::before { - content: ''; +/* Background Abstract Circles */ +.heroBackground { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient(circle at 15% 50%, rgba(236, 72, 153, 0.1), transparent 25%), - radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.1), transparent 25%); + inset: 0; + pointer-events: none; z-index: 0; - pointer-events: none; } -.canvas { +.circleBg1 { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 1; - opacity: 0.4; -} - -/* Floating gradient orbs - refined */ -.gradientOrb1, -.gradientOrb2, -.gradientOrb3 { - position: absolute; - border-radius: 50%; - filter: blur(80px); - opacity: 0.3; - z-index: 0; - pointer-events: none; -} - -.gradientOrb1 { width: 600px; height: 600px; - background: radial-gradient(circle, rgba(236, 72, 153, 0.3), transparent 70%); - top: -20%; + background: radial-gradient(circle, rgba(236, 72, 153, 0.05) 0%, transparent 70%); + top: -10%; left: -10%; - animation: floatOrb 25s ease-in-out infinite alternate; + border-radius: 50%; } -.gradientOrb2 { - width: 500px; - height: 500px; - background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%); +.circleBg2 { + position: absolute; + width: 700px; + height: 700px; + background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%); bottom: -10%; right: -10%; - animation: floatOrb 20s ease-in-out infinite alternate-reverse; + border-radius: 50%; } -.gradientOrb3 { - width: 400px; - height: 400px; - background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%); - top: 40%; - left: 60%; - animation: floatOrb 22s ease-in-out infinite alternate; +.container { + position: relative; + z-index: 1; + width: 100%; } -@keyframes floatOrb { - 0% { - transform: translate(0, 0); - } - - 100% { - transform: translate(30px, -30px); - } -} - -.heroContent { +.contentWrapper { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; - position: relative; - z-index: 2; - max-width: 1280px; - margin: 0 auto; - padding: 0 2rem; } @media (min-width: 1024px) { - .heroContent { + .contentWrapper { grid-template-columns: 1.1fr 0.9fr; - gap: 6rem; + gap: 2rem; } } -.textContent { +/* Left Content */ +.leftContent { display: flex; flex-direction: column; justify-content: center; - animation: slideInUp 1s ease-out; } -/* Animated badge - refined */ .badge { - position: relative; display: inline-flex; align-items: center; gap: 0.75rem; - padding: 0.5rem 1.25rem; - background: rgba(255, 255, 255, 0.03); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-radius: 9999px; - font-size: 0.875rem; - font-weight: 500; - margin-bottom: 2.5rem; - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + background: rgba(236, 72, 153, 0.1); + /* Light pink bg */ + padding: 0.5rem 1rem; + border-radius: 50px; + margin-bottom: 1.5rem; align-self: flex-start; - color: rgba(255, 255, 255, 0.9); - transition: all 0.3s ease; } -.badge:hover { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.15); - transform: translateY(-1px); +@media (max-width: 1024px) { + .badge { + margin-left: auto; + margin-right: auto; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + } } -.badgePulse { - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4); - animation: pulseShadow 2s infinite; + +.badgeLabel { + background: #6cb655; + /* Green like ref "NEW" */ + color: white; + padding: 0.15rem 0.5rem; + border-radius: 4px; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; } -@keyframes pulseShadow { - 0% { - box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4); - } - - 70% { - box-shadow: 0 0 0 10px rgba(236, 72, 153, 0); - } - - 100% { - box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); - } +.badgeText { + font-size: 0.9rem; + color: #0f172a; + font-weight: 500; } .title { - font-size: clamp(3rem, 5vw, 4.5rem); + font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; - margin-bottom: 1.5rem; - color: white; font-weight: 800; - letter-spacing: -0.02em; -} - -.typingText { - background: linear-gradient(to right, #ffffff, #e2e8f0); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: #0f172a; + /* Dark text */ + margin-bottom: 1.5rem; } .cursor { display: inline-block; width: 3px; - height: 1em; - background-color: #3b82f6; - margin-left: 4px; - vertical-align: middle; - animation: blink 1s step-end infinite; + background: #3b82f6; + animation: blink 1s infinite; } @keyframes blink { - - 0%, - 100% { - opacity: 1; - } - 50% { opacity: 0; } } - .subtitle { - font-size: clamp(1.125rem, 2vw, 1.25rem); - line-height: 1.6; + font-size: 1.1rem; + color: #64748b; margin-bottom: 3rem; - color: rgba(255, 255, 255, 0.6); - max-width: 580px; -} - -.ctaButtons { - display: flex; - flex-wrap: wrap; - gap: 1.25rem; - margin-bottom: 4rem; -} - -/* Premium Buttons */ -.primaryCta { - position: relative; - padding: 1rem 2rem; - background: linear-gradient(135deg, #ec4899, #8b5cf6); - color: white; - border-radius: 12px; - font-weight: 600; - font-size: 1rem; - display: flex; - align-items: center; - gap: 0.75rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 10px 30px -10px rgba(236, 72, 153, 0.4); - overflow: hidden; -} - -.primaryCta:hover { - transform: translateY(-2px); - box-shadow: 0 20px 40px -15px rgba(236, 72, 153, 0.5); -} - -.buttonGlow { - position: absolute; - top: 0; - left: -100%; - width: 50%; - height: 100%; - background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); - transform: skewX(-20deg); - transition: left 0.5s; -} - -.primaryCta:hover .buttonGlow { - left: 150%; - transition: left 0.7s; -} - -.secondaryCta { - padding: 1rem 2rem; - background: rgba(255, 255, 255, 0.05); - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.1); - color: white; - border-radius: 12px; - font-weight: 600; - display: flex; - align-items: center; - gap: 0.75rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.secondaryCta:hover { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.2); - transform: translateY(-2px); -} - -.arrow { - transition: transform 0.3s ease; -} - -.primaryCta:hover .arrow { - transform: translateX(4px); -} - -/* Trust badges - cleaner */ -.trustBadges { - display: flex; - gap: 4rem; - padding-top: 1.5rem; - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -.trustBadge { - display: flex; - flex-direction: column; -} - -.trustValue { - font-size: 1.75rem; - font-weight: 700; - color: white; - line-height: 1.2; - margin-bottom: 0.25rem; -} - -.trustLabel { - font-size: 0.875rem; - color: rgba(255, 255, 255, 0.5); - font-weight: 400; -} - -/* Image Content / Dashboard Preview */ -.imageContent { - position: relative; - perspective: 1200px; - display: flex; - justify-content: center; - align-items: center; -} - -.dashboardPreview { - position: relative; - background: rgba(30, 41, 59, 0.4); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border-radius: 20px; - padding: 2.5rem; - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: - 0 25px 50px -12px rgba(0, 0, 0, 0.5), - 0 0 0 1px rgba(255, 255, 255, 0.05) inset; - transform-style: preserve-3d; - transform: rotateY(-8deg) rotateX(4deg); - transition: transform 0.5s ease; - animation: floatCard 8s ease-in-out infinite; + line-height: 1.6; max-width: 500px; +} + +/* Search Bar CTA */ +.searchBarCta { + display: flex; + align-items: center; + background: white; + padding: 0.5rem; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + max-width: 500px; + margin-bottom: 3rem; + border: 1px solid #e2e8f0; +} + +.inputGroup { + flex: 1; + display: flex; + align-items: center; + padding-left: 1rem; + gap: 0.75rem; +} + +.searchIcon { + font-size: 1.2rem; + color: #94a3b8; +} + +.searchInput { width: 100%; + border: none; + outline: none; + font-size: 1rem; + color: #334155; + background: transparent; } -.dashboardPreview:hover { - transform: rotateY(-4deg) rotateX(2deg) scale(1.02); +.searchBtn { + background: #6cb655; + /* Green Button like Ref */ + color: white; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 8px; + font-weight: 600; + cursor: pointer; + transition: background 0.2s; + white-space: nowrap; } -@keyframes floatCard { - - 0%, - 100% { - transform: rotateY(-8deg) rotateX(4deg) translateY(0); - } - - 50% { - transform: rotateY(-8deg) rotateX(4deg) translateY(-15px); - } +.searchBtn:hover { + background: #6cb655; } +/* Trusted By */ +.trustedBy p { + font-size: 0.9rem; + color: #64748b; + margin-bottom: 1rem; +} -/* Floating icons - clearer */ -.floatingIcon { - position: absolute; - width: 60px; - height: 60px; - background: rgba(30, 41, 59, 0.6); - backdrop-filter: blur(12px); - border-radius: 16px; +.trustedIcons { + display: flex; + gap: 1.5rem; + align-items: center; +} + +.trustIcon { + font-size: 1.5rem; + font-weight: 700; + opacity: 0.8; + filter: grayscale(0%); + /* Keep colored like ref */ +} + +/* Right Content */ +.rightContent { + position: relative; + height: 500px; + /* Adjust as needed */ display: flex; align-items: center; justify-content: center; - font-size: 1.75rem; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); - z-index: 10; - animation: floatIcon 6s ease-in-out infinite; } -.icon1 { - top: -20px; - left: -20px; - animation-delay: 0s; +.imageContainer { + position: relative; + width: 100%; + height: 100%; } -.icon2 { - top: 30%; - right: -30px; - animation-delay: 2s; +.mainImageCircle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; } -.icon3 { - bottom: -15px; - left: 20%; - animation-delay: 4s; +.heroImage { + max-height: 500px; + max-width: 100%; + height: auto; + object-fit: contain; + /* Clean, no shadow if image has its own transparency */ + filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.08)); } -@keyframes floatIcon { +/* Floating Cards */ +.floatCard { + position: absolute; + background: white; + border-radius: 16px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); + padding: 1rem; + display: flex; + align-items: center; + gap: 1rem; + z-index: 2; + animation: float 4s ease-in-out infinite; +} + +@keyframes float { 0%, 100% { @@ -400,252 +269,200 @@ } 50% { - transform: translateY(-12px); + transform: translateY(-10px); } } -.previewHeader { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -.previewDots { - display: flex; - gap: 0.5rem; -} - -.previewDots span { - width: 10px; - height: 10px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.15); -} - -.previewTitle { - font-size: 0.875rem; - color: rgba(255, 255, 255, 0.5); - flex-grow: 1; - text-align: center; - letter-spacing: 0.5px; -} - -.previewBody { - display: grid; - gap: 1.5rem; -} - -.previewCard { - background: rgba(255, 255, 255, 0.02); - border-radius: 12px; - padding: 1.5rem; - border: 1px solid rgba(255, 255, 255, 0.05); -} - -.cardHeader { - display: flex; - align-items: center; - gap: 0.75rem; - color: rgba(255, 255, 255, 0.8); - margin-bottom: 1.25rem; - font-weight: 500; - font-size: 0.95rem; -} - -.chartBar { - height: 6px; - background: rgba(255, 255, 255, 0.05); - border-radius: 4px; - position: relative; - overflow: hidden; - margin-bottom: 1rem; -} - -.chartBar::after { - content: ''; - position: absolute; - top: 0; +/* Card 1: Congrats (Top Left / Top Center) */ +.cardCongrats { + top: 10%; left: 0; - height: 100%; - width: var(--progress, 0%); - background: linear-gradient(90deg, #ec4899, #8b5cf6); - border-radius: 4px; - animation: fillBar 1.5s ease-out forwards; + animation-delay: 0s; } -.chartBar:nth-child(1) { - --progress: 75%; +.cardIcon { + width: 40px; + height: 40px; + background: #fff1f2; + color: #f43f5e; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; } -.chartBar:nth-child(2) { - --progress: 45%; +.cardText { + display: flex; + flex-direction: column; } -.chartBar:nth-child(3) { - --progress: 90%; +.cardText strong { + font-size: 0.9rem; + color: #0f172a; } -.scheduleItem { - height: 12px; - background: rgba(255, 255, 255, 0.05); - border-radius: 4px; - margin-bottom: 12px; +.cardText span { + font-size: 0.75rem; + color: #64748b; } -@keyframes fillBar { - from { - width: 0; - } - - to { - width: var(--progress); - } +.checkIcon { + width: 20px; + height: 20px; + background: #6cb655; + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.7rem; } +/* Card 2: Users (Bottom Right) */ +.cardUsers { + bottom: 20%; + right: 0; + flex-direction: column; + /* Stacked layout like ref */ + align-items: flex-start; + padding: 1.25rem; + animation-delay: 1.5s; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); +} -/* Scroll indicator - minimalist */ -.scrollIndicator { +.userCount { + font-size: 1.1rem; + font-weight: 700; + color: #0f172a; + display: flex; + flex-direction: column; + margin-bottom: 0.5rem; +} + +.userLabel { + font-size: 0.75rem; + font-weight: 400; + color: #64748b; +} + +.userAvatars { + display: flex; +} + +.avatar { + width: 32px; + height: 32px; + border-radius: 50%; + background: #e2e8f0; + border: 2px solid white; + margin-left: -10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; +} + +.avatar:first-child { + margin-left: 0; +} + +.addBtn { + width: 32px; + height: 32px; + border-radius: 50%; + background: #f1f5f9; + color: #64748b; + border: 2px solid white; + margin-left: -10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; + font-weight: 700; +} + +/* Card 3: Message (Bottom Left) */ +.cardMessage { + bottom: 10%; + left: 10%; + padding: 0.75rem 1rem; + animation-delay: 2.5s; +} + +.msgAvatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: #bfdbfe; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; +} + +.msgText span { + font-size: 0.75rem; + color: #64748b; + display: block; +} + +.msgText p { + font-size: 0.85rem; + color: #0f172a; + font-weight: 500; + margin: 0; +} + +/* Dots */ +.sliderDots { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; - flex-direction: column; - align-items: center; - gap: 0.75rem; - opacity: 0.5; - animation: fadeBounce 2s ease-in-out infinite; - pointer-events: none; + gap: 0.5rem; } -.scrollIndicator span { - font-size: 0.75rem; - letter-spacing: 1px; - text-transform: uppercase; -} - -.mouse { - width: 20px; - height: 32px; - border: 2px solid white; - border-radius: 12px; - position: relative; -} - -.mouseWheel { - width: 2px; - height: 6px; - background: white; - position: absolute; - top: 6px; - left: 50%; - transform: translateX(-50%); - border-radius: 1px; -} - -@keyframes fadeBounce { - - 0%, - 100% { - opacity: 0.5; - transform: translate(-50%, 0); - } - - 50% { - opacity: 0.8; - transform: translate(-50%, -5px); - } -} - -/* Morphing shapes - softer, blended */ -.morphingShape1, -.morphingShape2 { - position: absolute; +.dot { + width: 10px; + height: 10px; border-radius: 50%; - filter: blur(100px); - opacity: 0.15; - z-index: 0; + background: #cbd5e1; + border: none; + cursor: pointer; + transition: all 0.3s; } -.morphingShape1 { - width: 600px; - height: 600px; +.activeDot { + width: 30px; + border-radius: 5px; background: #3b82f6; - top: -10%; - right: -10%; - animation: morph 20s infinite alternate; + /* Blue active dot */ } -.morphingShape2 { - width: 500px; - height: 500px; - background: #ec4899; - bottom: -10%; - left: -10%; - animation: morph 25s infinite alternate-reverse; -} - -/* Slide animations */ -@keyframes slideInUp { - from { - opacity: 0; - transform: translateY(20px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - - -/* Responsive adjustments */ +/* Responsive */ @media (max-width: 1024px) { - .hero { - padding-top: 6rem; + .contentWrapper { + grid-template-columns: 1fr; + text-align: center; + } + + .leftContent { + align-items: center; + } + + .searchBarCta { + margin: 0 auto 3rem; + } + + .rightContent { + display: none; + /* Hide complex image on tablet/mobile if needed, or simply scale it */ } .title { - font-size: 3rem; - } - - .imageContent { - display: none; - /* Hide 3D element on small screens to reduce clutter */ - } - - .heroContent { - text-align: center; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - - .textContent { - align-items: center; - } - - .badge { - margin-bottom: 2rem; - align-self: center; - } - - .ctaButtons { - justify-content: center; - } - - .trustBadges { - justify-content: center; - border-top: none; - padding-top: 0; - gap: 2rem; - } - - .trustBadge { - align-items: center; + font-size: 2.5rem; } } \ No newline at end of file diff --git a/components/Hero.tsx b/components/Hero.tsx index a592ba0..d01cd1a 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -1,262 +1,172 @@ 'use client'; import Link from 'next/link'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; import styles from './Hero.module.css'; export default function Hero() { - const canvasRef = useRef(null); - const heroRef = useRef(null); + const [currentSlide, setCurrentSlide] = useState(0); const [typedText, setTypedText] = useState(''); - const [cursorTrail, setCursorTrail] = useState>([]); - const [stats, setStats] = useState({ users: 0, posts: 0, rating: 0 }); - const fullText = 'Manage All Your Social Media in One Place'; + const slides = [ + { + id: 1, + badge: 'New Feature', + badgeText: 'AI-Powered Scheduling is here', + title: 'Find your social media success.', + subtitle: 'Your dream engagement is waiting for you. Manage all your accounts in one place.', + ctaPrimary: 'Get Started', + image: '/hero-slide-1.png' + }, + { + id: 2, + badge: 'Analytics', + badgeText: 'Deep insights for growth', + title: 'Analyze performance & boost reach.', + subtitle: 'Track every click, like, and share with our advanced analytics dashboard.', + ctaPrimary: 'Explore Analytics', + image: '/hero-slide-2.png' + }, + { + id: 3, + badge: 'Community', + badgeText: 'Join 10,000+ Creators', + title: 'Connect with your audience instantly.', + subtitle: 'Real-time engagement tools to keep your community active and growing.', + ctaPrimary: 'Join Community', + image: '/hero-slide-3.png' + }, + ]; - // Typing animation + // Typing effect for the title of the current slide useEffect(() => { - let index = 0; + const text = slides[currentSlide].title; + setTypedText(''); + let i = 0; const timer = setInterval(() => { - if (index <= fullText.length) { - setTypedText(fullText.slice(0, index)); - index++; + if (i < text.length) { + setTypedText((prev) => text.slice(0, i + 1)); + i++; } else { clearInterval(timer); } }, 50); return () => clearInterval(timer); - }, []); + }, [currentSlide]); - // Stats counter animation + // Auto-slide useEffect(() => { - const duration = 2000; - const steps = 60; - const interval = duration / steps; - let step = 0; - const timer = setInterval(() => { - step++; - const progress = step / steps; - setStats({ - users: Math.floor(10000 * progress), - posts: Math.floor(1000000 * progress), - rating: Math.min(4.9, 4.9 * progress), - }); - - if (step >= steps) clearInterval(timer); - }, interval); - + setCurrentSlide((prev) => (prev + 1) % slides.length); + }, 5000); return () => clearInterval(timer); }, []); - - // Enhanced particle system - Cleaner & Performance Optimized - useEffect(() => { - const canvas = canvasRef.current; - if (!canvas) return; - - const ctx = canvas.getContext('2d'); - if (!ctx) return; - - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - - const particles: Array<{ - x: number; - y: number; - size: number; - speedX: number; - speedY: number; - color: string; - opacity: number; - }> = []; - - // Reduced particle count for a cleaner look - for (let i = 0; i < 60; i++) { - const colors = [ - 'rgba(236, 72, 153, 0.4)', // Pink - 'rgba(59, 130, 246, 0.4)', // Blue - 'rgba(255, 255, 255, 0.1)', // White - ]; - particles.push({ - x: Math.random() * canvas.width, - y: Math.random() * canvas.height, - size: Math.random() * 2 + 1, // Smaller particles - speedX: Math.random() * 0.5 - 0.25, // Slower movement - speedY: Math.random() * 0.5 - 0.25, - color: colors[Math.floor(Math.random() * colors.length)], - opacity: Math.random() * 0.5 + 0.1, - }); - } - - function animate() { - if (!ctx || !canvas) return; - ctx.clearRect(0, 0, canvas.width, canvas.height); - - // Draw connections - very subtle - particles.forEach((particle, i) => { - particles.slice(i + 1).forEach((otherParticle) => { - const dx = particle.x - otherParticle.x; - const dy = particle.y - otherParticle.y; - const distance = Math.sqrt(dx * dx + dy * dy); - - if (distance < 100) { - ctx.beginPath(); - ctx.strokeStyle = `rgba(255, 255, 255, ${0.05 * (1 - distance / 100)})`; - ctx.lineWidth = 0.5; - ctx.moveTo(particle.x, particle.y); - ctx.lineTo(otherParticle.x, otherParticle.y); - ctx.stroke(); - } - }); - }); - - // Draw particles - particles.forEach((particle) => { - ctx.globalAlpha = particle.opacity; - ctx.fillStyle = particle.color; - ctx.beginPath(); - ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); - ctx.fill(); - - // Update position - particle.x += particle.speedX; - particle.y += particle.speedY; - - if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1; - if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1; - }); - - requestAnimationFrame(animate); - } - - animate(); - - const handleResize = () => { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - }; - - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, []); + const slide = slides[currentSlide]; return ( -
- +
+
+ {/* Abstract Circles/Shapes like reference */} +
+
+
- {/* Floating gradient orbs */} -
-
-
- - {/* Morphing shapes */} -
-
- -
-
-
-
- ✨ - Scale your Social Media Presence - +
+
+ {/* Left Content */} +
+
+ {slide.badge} + {slide.badgeText}

- - {typedText} - | - + {typedText}|

- Empower your brand with intelligent scheduling, deep analytics, and real-time engagement tools. + {slide.subtitle}

-
- - Start Free Trial - β†’ - - - - β–Ά - Watch Demo - + {/* Search-like CTA Bar like Reference */} +
+
+ βœ‰οΈ + +
+
-
-
-
{stats.rating.toFixed(1)}/5
-
Rating
-
-
-
{(stats.users / 1000).toFixed(0)}K+
-
Active Users
-
-
-
{(stats.posts / 1000000).toFixed(1)}M+
-
Posts Scheduled
+
+

We are Trusted by:

+
+
G
{/* Google */} +
Be
{/* Behance */} +
πŸ“·
{/* Insta */} +
⊞
{/* Microsoft */}
-
-
- {/* Floating social media icons */} -
- πŸ“± -
-
- πŸ“Š -
-
- πŸ’¬ + {/* Right Content - Image & Floating Cards */} +
+
+
+ {/* Using dynamic image from slide data */} + {slide.title}
-
-
- - - + {/* Floating Card 1: Congrats */} +
+
πŸ“©
+
+ Congrats! + You have got an Email
-
SocialBuddy Dashboard
+
βœ“
-
-
-
- πŸ“Š - Analytics Overview -
-
-
-
-
-
+ + {/* Floating Card 2: Jobholder / Users */} +
+
10k+ Active Users
+
+ πŸ‘© + πŸ‘¨ + πŸ§‘ + +
-
-
- πŸ“… - Upcoming Posts -
-
-
-
-
+
+ + {/* Floating Card 3: Small Message */} +
+
πŸ‘±β€β™€οΈ
+
+ Hi, +

I am looking for...

-
- {/* Enhanced scroll indicator */} -
-
-
+ {/* Slider Indicators */} +
+ {slides.map((_, idx) => ( +
- Scroll
); diff --git a/components/HowItWorks.module.css b/components/HowItWorks.module.css index 8782bef..1f08283 100644 --- a/components/HowItWorks.module.css +++ b/components/HowItWorks.module.css @@ -1,233 +1,274 @@ -.header { - text-align: center; - margin-bottom: 4rem; +.section { + position: relative; + padding: 4rem 0; + overflow: hidden; + background: var(--background); } -.badge { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1.25rem; - background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1)); - border: 1px solid rgba(236, 72, 153, 0.2); - border-radius: 50px; - font-size: 0.875rem; - font-weight: 600; - color: var(--primary); - margin-bottom: 1rem; +.container { + max-width: 1000px; + margin: 0 auto; + padding: 0 1.5rem; + position: relative; +} + +.header { + text-align: center; + margin-bottom: 5rem; } .title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 1rem; - line-height: 1.2; + color: var(--foreground); } -.subtitle { - font-size: 1.125rem; - color: var(--text-secondary); - max-width: 600px; - margin: 0 auto; +.subTitle { + background: transparent; + -webkit-background-clip: unset; + -webkit-text-fill-color: unset; + background-clip: unset; + color: #0072b1; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.875rem; + margin-bottom: 1rem; + display: inline-block; } -.stepsContainer { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; - margin-bottom: 4rem; +.timeline { position: relative; + display: flex; + flex-direction: column; + gap: 3rem; } -@media (min-width: 768px) { - .stepsContainer { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 1024px) { - .stepsContainer { - grid-template-columns: repeat(4, 1fr); - } -} - -.step { - position: relative; - opacity: 0; - transform: translateY(30px); - transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); -} - -.step.visible { - opacity: 1; - transform: translateY(0); -} - -.stepNumber { +/* The vertical connecting line (simplified snake for responsiveness) */ +.timeline::before { + content: ''; position: absolute; - top: -10px; - right: 20px; - width: 50px; - height: 50px; + top: 80px; + bottom: 0; + left: 40px; + /* Aligns with circle center */ + width: 4px; + background: #e2e8f0; + z-index: 0; +} + +.stepItem { + position: relative; + z-index: 1; + display: flex; + align-items: center; + gap: 2rem; + opacity: 0; + transform: translateX(-20px); + transition: all 0.6s ease-out; +} + +.stepItem.visible { + opacity: 1; + transform: translateX(0); +} + +/* ZigZag indent for desktop */ +@media (min-width: 768px) { + + /* Create the snake effect by alternating margins/padding isn't robust for the straight cards shown. + The image creates a visual snake with the connectors, but the cards look aligned. + We will keep cards aligned for readability and use the connector styling to suggest the flow. + */ + .timeline::before { + background: radial-gradient(circle at center, var(--secondary) 0%, transparent 100%); + width: 2px; + opacity: 0.3; + left: 49px; + } +} + +/* Circle Number Wrapper */ +.numberWrapper { + flex-shrink: 0; + width: 100px; + height: 100px; + border-radius: 50%; + background: var(--background); + border: 8px solid var(--background); + /* Gap for connection */ + box-shadow: var(--shadow-xl); display: flex; align-items: center; justify-content: center; - font-size: 1.25rem; - font-weight: 800; - border-radius: 12px; + position: relative; z-index: 2; } -.stepContent { - background: var(--card-bg); - border: 1px solid var(--border-color); - border-radius: 20px; - padding: 2rem 1.5rem; +/* The colored ring and number */ +.numberCircle { + width: 100%; height: 100%; - transition: all 0.3s ease; - position: relative; - overflow: hidden; -} - -.stepContent::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05)); - opacity: 0; - transition: opacity 0.3s ease; -} - -.stepContent:hover { - transform: translateY(-5px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); - border-color: var(--primary); -} - -.stepContent:hover::before { - opacity: 1; -} - -.stepIcon { - width: 70px; - height: 70px; + border-radius: 50%; + background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; - border-radius: 16px; - margin-bottom: 1.5rem; + color: white; font-size: 2rem; + font-weight: 800; position: relative; + box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2); +} + +/* The connecting curve element */ +.connectorCurve { + display: none; + /* Hidden on mobile */ +} + +/* Card Capsule */ +.cardCapsule { + flex: 1; + background: white; + border-radius: 50px; + /* Pill shape */ + padding: 1.5rem 3rem 1.5rem 2rem; + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); + border: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + position: relative; + overflow: hidden; + transition: transform 0.3s ease; +} + +.cardCapsule:hover { + transform: translateY(-5px); + border-color: var(--primary-light); +} + +/* Colored accent bar on the left of capsule */ +.cardCapsule::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 8px; + background: var(--gradient-primary); +} + +.textContent { + flex: 1; +} + +.label { + color: #0072b1; + font-weight: 700; + font-size: 0.875rem; + margin-bottom: 1rem; + display: block; + text-transform: uppercase; + letter-spacing: 0.05em; } .stepTitle { font-size: 1.25rem; - font-weight: 700; - margin-bottom: 0.75rem; + font-weight: 800; color: var(--text-primary); + text-transform: uppercase; + margin-bottom: 0.5rem; + letter-spacing: 0.5px; } .stepDescription { - font-size: 0.9375rem; + font-size: 0.95rem; color: var(--text-secondary); - line-height: 1.6; + line-height: 1.4; + margin: 0; } +.iconCircle { + width: 60px; + height: 60px; + border-radius: 50%; + background: var(--gradient-hero); + display: flex; + align-items: center; + justify-content: center; + color: white; + flex-shrink: 0; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.iconCircle svg { + width: 30px; + height: 30px; +} + + +/* Specific S-Curve Connector Logic to match image better */ +/* We will simulate the "snake" by adjusting the timeline line or adding curves between items */ +/* For robust responsive design, sticking to a straight cleaner line is safer, but let's try to add the "orange connector" look between circles */ + .connector { - display: none; -} - -@media (min-width: 1024px) { - .connector { - display: block; - position: absolute; - top: 50%; - right: -2rem; - transform: translateY(-50%); - width: 2rem; - color: var(--primary); - opacity: 0.3; - z-index: 1; - } - - .step:last-child .connector { - display: none; - } -} - -.ctaBox { - background: linear-gradient(135deg, var(--primary), var(--secondary)); - border-radius: 24px; - padding: 3rem 2rem; - display: flex; - flex-direction: column; - align-items: center; - gap: 2rem; - text-align: center; - position: relative; - overflow: hidden; -} - -.ctaBox::before { - content: ''; position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); - animation: pulse 4s ease-in-out infinite; -} - -@keyframes pulse { - - 0%, - 100% { - transform: scale(1); - opacity: 0.5; - } - - 50% { - transform: scale(1.1); - opacity: 0.8; - } -} - -@media (min-width: 768px) { - .ctaBox { - flex-direction: row; - justify-content: space-between; - text-align: left; - padding: 3rem 4rem; - } -} - -.ctaContent { - position: relative; + left: 48px; + /* Center of 100px circle approx */ + top: 100px; + /* Bottom of circle */ + width: 4px; + height: 3rem; + /* Gap between items */ + background: var(--primary); z-index: 1; } -.ctaTitle { - font-size: 1.75rem; - font-weight: 800; - color: white; - margin-bottom: 0.5rem; -} +/* Mobile responsive adjustments */ +@media (max-width: 768px) { + .stepItem { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } -.ctaText { - font-size: 1rem; - color: rgba(255, 255, 255, 0.9); -} + .timeline::before { + left: 20px; + top: 20px; + } -.arrow { - margin-left: 0.5rem; - transition: transform 0.3s ease; - display: inline-block; -} + .numberWrapper { + width: 60px; + height: 60px; + border-width: 4px; + } -.ctaBox a:hover .arrow { - transform: translateX(5px); + .numberCircle { + font-size: 1.25rem; + } + + .cardCapsule { + width: 100%; + border-radius: 20px; + padding: 1.5rem; + flex-direction: column; + align-items: flex-start; + } + + .iconCircle { + position: absolute; + top: 1rem; + right: 1rem; + width: 40px; + height: 40px; + } + + .iconCircle svg { + width: 20px; + height: 20px; + } } \ No newline at end of file diff --git a/components/HowItWorks.tsx b/components/HowItWorks.tsx index 62c33dc..26d839b 100644 --- a/components/HowItWorks.tsx +++ b/components/HowItWorks.tsx @@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react'; import styles from './HowItWorks.module.css'; +import { TrendingUp, BarChart3, Users, Heart } from 'lucide-react'; export default function HowItWorks() { const sectionRef = useRef(null); @@ -18,7 +19,7 @@ export default function HowItWorks() { { threshold: 0.1 } ); - const steps = sectionRef.current?.querySelectorAll(`.${styles.step}`); + const steps = sectionRef.current?.querySelectorAll(`.${styles.stepItem}`); steps?.forEach((step) => observer.observe(step)); return () => observer.disconnect(); @@ -27,84 +28,67 @@ export default function HowItWorks() { const steps = [ { number: '01', - title: 'Connect Your Accounts', - description: 'Link all your social media accounts in seconds with our secure OAuth integration.', - icon: 'πŸ”—', - color: '#667eea', + title: 'Trends and Technologies', + description: 'Leverage emerging tools to foster innovation and collaboration.', + icon: , }, { number: '02', - title: 'Create & Schedule Content', - description: 'Design beautiful posts with our editor and schedule them at optimal times using AI suggestions.', - icon: '✍️', - color: '#ec4899', + title: 'Data Analysis and Analytics', + description: 'Deploy insights to improve decision making and drive traffic.', + icon: , }, { number: '03', - title: 'Engage Your Audience', - description: 'Respond to comments, messages, and mentions from a unified inbox across all platforms.', - icon: 'πŸ’¬', - color: '#14b8a6', + title: 'Your Target Audience', + description: 'Understand Your Target Audience and their shopping behavior.', + icon: , }, { number: '04', - title: 'Analyze & Optimize', - description: 'Track performance metrics and get actionable insights to improve your social media strategy.', - icon: 'πŸ“ˆ', - color: '#f59e0b', + title: 'Social Media Engagement', + description: 'Create valuable, shareable content for increased engagement.', + icon: , }, ]; return ( -
-
+
+
-
- πŸš€ - How It Works -
+ Our Work Process

- Get Started in 4 Simple Steps + How We Drive Results

-

- From setup to success, we've made it incredibly easy to manage your social media presence. -

-
+
{steps.map((step, index) => ( -
-
- {step.number} -
-
-
- {step.icon} +
+ {/* Number Circle Left */} +
+
+ {step.number}
-

{step.title}

-

{step.description}

- {index < steps.length - 1 && ( -
- - - + + {/* Content Capsule */} +
+
+

{step.title}

+

{step.description}

- )} +
+ {step.icon} +
+
+ + {/* Manual connecting line logic for visual flow if needed + (CSS pseudo-element ::before handles main vertical line) + */}
))}
- -
-
-

Ready to streamline your social media?

-

Start your 14-day free trial today. No credit card required.

-
- - Get Started Free - β†’ - -
); diff --git a/components/Navbar.module.css b/components/Navbar.module.css index cf41501..3ab2729 100644 --- a/components/Navbar.module.css +++ b/components/Navbar.module.css @@ -15,11 +15,7 @@ box-shadow: var(--shadow-md); } -@media (prefers-color-scheme: dark) { - .navbar.scrolled { - background: rgba(15, 23, 42, 0.95); - } -} + .navContent { display: flex; @@ -59,7 +55,7 @@ align-items: center; } -@media (min-width: 768px) { +@media (min-width: 992px) { .navLinks { display: flex; } @@ -208,4 +204,51 @@ flex-direction: column; gap: 1rem; margin-top: 1rem; -} \ No newline at end of file +} +.navItem { + position: relative; + height: 100%; + display: flex; + align-items: center; +} + +.dropdownMenu { + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%) translateY(10px); + background: var(--background); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-xl); + padding: 1rem; + min-width: 220px; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + border: 1px solid var(--border-color); + display: flex; + flex-direction: column; + gap: 0.25rem; + z-index: 1001; +} + +.navItem:hover .dropdownMenu { + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(0); +} + +.dropdownItem { + padding: 0.75rem 1rem; + border-radius: var(--radius-md); + color: var(--foreground-secondary); + text-decoration: none; + transition: all 0.2s ease; + display: block; + white-space: nowrap; +} + +.dropdownItem:hover { + background: var(--background-secondary); + color: var(--primary); +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 98e82dd..16f14c0 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -5,91 +5,161 @@ import { useState, useEffect } from 'react'; import styles from './Navbar.module.css'; export default function Navbar() { - const [isScrolled, setIsScrolled] = useState(false); - const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + const [isScrolled, setIsScrolled] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + const [isMobileFeaturesOpen, setIsMobileFeaturesOpen] = useState(false); + const [isMobileChannelsOpen, setIsMobileChannelsOpen] = useState(false); - useEffect(() => { - const handleScroll = () => { - setIsScrolled(window.scrollY > 20); - }; + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 20); + }; - window.addEventListener('scroll', handleScroll); - return () => window.removeEventListener('scroll', handleScroll); - }, []); + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); - const navLinks = [ - { href: '/', label: 'Home' }, - { href: '/features', label: 'Features' }, - { href: '/pricing', label: 'Pricing' }, - { href: '/about', label: 'About' }, - { href: '/docs', label: 'Docs' }, - { href: '/blog', label: 'Blog' }, - { href: '/contact', label: 'Contact' }, - ]; + const navLinks = [ + { href: '/', label: 'Home' }, + { + href: '#', + label: 'Features', + dropdown: [ + { href: '/features/publish', label: 'Publishing' }, + { href: '/features/analyze', label: 'Analytics' }, + { href: '/features/engage', label: 'Engagement' }, + { href: '/features/create', label: 'Create' }, + { href: '/features/start-page', label: 'Start Page' }, + { href: '/features/ai-assistant', label: 'AI Assistant' }, + ] + }, + { + href: '/channels', + label: 'Channels', + dropdown: [ + { href: '/channels/facebook', label: 'Facebook' }, + { href: '/channels/instagram', label: 'Instagram' }, + { href: '/channels/linkedin', label: 'LinkedIn' }, + { href: '/channels/twitter', label: 'Twitter (X)' }, + { href: '/channels/tiktok', label: 'TikTok' }, + { href: '/channels/pinterest', label: 'Pinterest' }, + ] + }, + { href: '/pricing', label: 'Pricing' }, + // { href: '/about', label: 'About' }, + // { href: '/careers', label: 'Careers' }, + { href: '/resources', label: 'Resources' }, + // { href: '/contact', label: 'Contact' }, + ]; - return ( - - ); + + ); } diff --git a/components/Pricing.module.css b/components/Pricing.module.css index 42a812a..a3b51f4 100644 --- a/components/Pricing.module.css +++ b/components/Pricing.module.css @@ -4,6 +4,19 @@ margin: 0 auto 4rem; } +.subTitle { + background: transparent; + -webkit-background-clip: unset; + -webkit-text-fill-color: unset; + background-clip: unset; + color: #0072b1; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.875rem; + margin-bottom: 1rem; +} + .badge { display: inline-flex; align-items: center; @@ -43,7 +56,7 @@ position: relative; width: 60px; height: 30px; - background: var(--background-secondary); + background: #f1f5f9; border: none; border-radius: 2rem; cursor: pointer; @@ -87,148 +100,201 @@ margin-bottom: 3rem; } -@media (min-width: 768px) { +@media (min-width: 900px) { .pricingGrid { grid-template-columns: repeat(3, 1fr); } } .pricingCard { - background: var(--card-bg); - border-radius: var(--radius-2xl); - padding: 2.5rem; - box-shadow: var(--shadow-md); + border-radius: 30px; + /* More rounded */ + padding: 2.5rem 2rem 1.5rem; + /* Less padding bottom to accommodate footer */ + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; - border: 2px solid var(--border-color); position: relative; - animation: fadeIn 0.6s ease-out forwards; display: flex; flex-direction: column; + color: white; + overflow: hidden; + /* For clipping */ + min-height: 500px; + /* Variants defined below */ } .pricingCard:hover { transform: translateY(-10px); - box-shadow: var(--shadow-xl); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } -.pricingCard.popular { - border-color: var(--primary); - background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%); +/* Gradients */ +/* Card 1: Blue (#1255d8) / Pink (#ec4899) */ +.cardVariant1 { + background: linear-gradient(135deg, #ec4899 0%, #1255d8 100%); } -.pricingCard.popular:hover { - box-shadow: var(--shadow-xl), var(--shadow-glow); +/* Card 2: Yellow (#f9cd35) / Pink (#ec4899) */ +.cardVariant2 { + background: linear-gradient(135deg, #f9cd35 0%, #ec4899 100%); } -.popularBadge { +/* Card 3: Blue (#1255d8) / Green (#6cb655) */ +.cardVariant3 { + background: linear-gradient(135deg, #1255d8 0%, #6cb655 100%); +} + +/* Decorative circles in background */ +.pricingCard::before { + content: ''; position: absolute; - top: -15px; - left: 50%; - transform: translateX(-50%); - background: var(--gradient-primary); - color: white; - padding: 0.5rem 1.5rem; - border-radius: 2rem; - font-size: 0.85rem; - font-weight: 700; - box-shadow: var(--shadow-md); + top: -50px; + right: -50px; + width: 200px; + height: 200px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + pointer-events: none; +} + +.pricingCard::after { + content: ''; + position: absolute; + bottom: -50px; + left: -50px; + width: 200px; + height: 200px; + background: rgba(255, 255, 255, 0.05); + border-radius: 50%; + pointer-events: none; } .planHeader { margin-bottom: 2rem; + position: relative; + z-index: 1; } .planName { - font-size: 1.75rem; - font-weight: 700; - margin-bottom: 0.5rem; - color: var(--foreground); - font-family: var(--font-display); + font-size: 2rem; + font-weight: 800; + margin: 0; + color: #fff; } .planDescription { - color: var(--foreground-secondary); + margin-top: 6px; font-size: 0.95rem; + color: rgba(255, 255, 255, 0.65); + line-height: 1.4; } -.priceSection { - margin-bottom: 2rem; -} - -.price { - display: flex; - align-items: baseline; - gap: 0.25rem; - margin-bottom: 0.5rem; -} - -.currency { - font-size: 1.5rem; - font-weight: 700; - color: var(--foreground-secondary); -} - -.amount { - font-size: 3.5rem; - font-weight: 700; - color: var(--foreground); - font-family: var(--font-display); - line-height: 1; -} - -.period { - font-size: 1rem; - color: var(--foreground-secondary); -} - -.billedAnnually { - font-size: 0.85rem; - color: var(--foreground-secondary); -} - -.ctaButton { - width: 100%; - margin-top: auto; -} .features { display: flex; flex-direction: column; - gap: 1rem; + gap: 0.8rem; flex-grow: 1; - margin-bottom: 2rem; + margin-bottom: 3rem; + position: relative; + z-index: 1; } .feature { display: flex; - align-items: flex-start; + align-items: center; gap: 0.75rem; - color: var(--foreground-secondary); + color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; + font-weight: 500; } .checkIcon { + font-weight: 900; + color: white; + /* Simple tick */ +} + +/* Footer Section */ +.cardFooter { + display: flex; + justify-content: space-between; + align-items: flex-end; + margin-top: auto; + /* To handle the button cutout loop, we might need absolute positioning for button */ + position: relative; + padding-top: 1rem; + z-index: 2; +} + +.priceInfo { + display: flex; + flex-direction: column; +} + +.priceAmount { + font-size: 3rem; + font-weight: 800; + line-height: 1; + display: flex; + align-items: flex-start; +} + +.currency { + font-size: 1.5rem; + margin-top: 5px; + margin-right: 2px; +} + +.period { + font-size: 0.9rem; + opacity: 0.8; + margin-top: 5px; + font-style: italic; +} + +/* Button Styling - Specific "inset" look */ +.signupBtn { + /* We want it flush with bottom right corner */ + position: absolute; + bottom: -1.5rem; + /* Bleed into padding area */ + right: -2rem; + /* Bleed to edge */ + + background: #0072b1; + /* Updated to requested Dark Blue #0072b1 */ + color: white; + padding: 0.8rem 2rem 1.2rem 1.5rem; + /* Extra padding bottom right */ + border-top-left-radius: 30px; + /* The cutout shape */ + font-weight: 600; display: flex; align-items: center; - justify-content: center; - width: 20px; - height: 20px; - background: var(--gradient-primary); - color: white; - border-radius: 50%; - font-size: 0.75rem; - font-weight: 700; - flex-shrink: 0; + gap: 0.5rem; + transition: all 0.3s; + text-decoration: none; + box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1); +} + +.signupBtn:hover { + background: #0f172a; + /* Keep dark hover or update? Let's keep dark fallback for hover state */ + padding-right: 2.2rem; + /* Animate slightly */ +} + +.btnArrow { + font-size: 0.8rem; } .guarantee { text-align: center; - padding: 2rem; + padding: 1rem; + padding-bottom: 1px; background: var(--background-secondary); border-radius: var(--radius-xl); color: var(--foreground); -} - -.guarantee strong { - color: var(--primary); + margin-top: 1rem; } \ No newline at end of file diff --git a/components/Pricing.tsx b/components/Pricing.tsx index 31d2629..2723745 100644 --- a/components/Pricing.tsx +++ b/components/Pricing.tsx @@ -9,51 +9,44 @@ export default function Pricing() { const plans = [ { - name: 'Free', - description: 'Perfect for individuals getting started', - price: { monthly: 0, annual: 0 }, + name: 'Basic Buddy', + description: 'Perfect for individual creators.', + price: { monthly: 10, annual: 100 }, features: [ - '1 social media account', - '10 scheduled posts per month', - 'Basic analytics', - 'Email support', - 'Mobile app access', + '1 Social Profiles', + 'Basic Analytics', + 'Content Scheduling', + 'Standard Support', ], cta: 'Get Started', popular: false, }, { - name: 'Pro', - description: 'Ideal for growing businesses', - price: { monthly: 29, annual: 290 }, + name: 'Standard Buddy', + description: 'For growing businesses and influencers.', + price: { monthly: 50, annual: 500 }, features: [ - '5 social media accounts', - 'Unlimited scheduled posts', - 'Advanced analytics & reports', - 'Priority email support', - 'Team collaboration (3 members)', - 'AI content assistant', - 'Custom branding', + '10 Social Profiles', + 'Advanced Analytics', + 'AI Content Generation', + 'Priority Support', + 'Team Collaboration (up to 3)', ], - cta: 'Start Free Trial', + cta: 'Get Started', popular: true, }, { - name: 'Premium', - description: 'For agencies and enterprises', - price: { monthly: 99, annual: 990 }, + name: 'Premium Buddy', + description: 'Ultimate solution for agencies.', + price: { monthly: 150, annual: 1500 }, features: [ - 'Unlimited social media accounts', - 'Unlimited scheduled posts', - 'Enterprise analytics & insights', - '24/7 priority support', - 'Unlimited team members', - 'Advanced AI features', - 'White-label solutions', - 'API access', - 'Dedicated account manager', + '25 Social Profiles', + 'White Label Reports', + 'Dedicated Account Manager', + 'API Access', + 'Unlimited Team Members', ], - cta: 'Contact Sales', + cta: 'Get Started', popular: false, }, ]; @@ -62,15 +55,12 @@ export default function Pricing() {
-
- πŸ’Ž - Pricing -
+
Pricing

- Simple, Transparent Pricing + Simple, Transparent Pricing

- Choose the perfect plan for your needs. All plans include a 14-day free trial. + Choose the perfect plan for your needs. All plans include a 7-day free trial.

@@ -83,8 +73,8 @@ export default function Pricing() { - Annual - Save 17% + Yearly + Save 20%
@@ -93,31 +83,14 @@ export default function Pricing() { {plans.map((plan, index) => (
- {plan.popular &&
Most Popular
} -

{plan.name}

{plan.description}

-
-
- $ - - {isAnnual ? Math.floor(plan.price.annual / 12) : plan.price.monthly} - - /mo -
- {isAnnual && plan.price.annual > 0 && ( -

- Billed ${plan.price.annual} annually -

- )} -
-
{plan.features.map((feature, idx) => (
@@ -127,19 +100,26 @@ export default function Pricing() { ))}
- - {plan.cta} - +
+
+
+ $ + {isAnnual ? Math.floor(plan.price.annual) : plan.price.monthly} +
+
per month
+
+ + + Sign up β–Ά + +
))}

- πŸ’― 30-Day Money-Back Guarantee - Try risk-free. Cancel anytime. + Try risk-free. Cancel anytime.

diff --git a/components/SafeImage.tsx b/components/SafeImage.tsx new file mode 100644 index 0000000..c58811b --- /dev/null +++ b/components/SafeImage.tsx @@ -0,0 +1,26 @@ +'use client'; + +import { useState } from 'react'; + +interface SafeImageProps extends React.ImgHTMLAttributes { + fallbackSrc?: string; +} + +export default function SafeImage({ src, alt, fallbackSrc, ...props }: SafeImageProps) { + const [imgSrc, setImgSrc] = useState(src); + + const handleError = () => { + if (imgSrc !== fallbackSrc && fallbackSrc) { + setImgSrc(fallbackSrc); + } + }; + + return ( + {alt} + ); +} diff --git a/components/SocialConnect.module.css b/components/SocialConnect.module.css index ae13748..fbf2ad8 100644 --- a/components/SocialConnect.module.css +++ b/components/SocialConnect.module.css @@ -1,1081 +1,334 @@ -.connectSection { - padding: 6rem 0; - position: relative; +.carouselSection { + padding: 4rem 0; overflow: hidden; - background: linear-gradient(180deg, - var(--background) 0%, - rgba(236, 72, 153, 0.02) 50%, - var(--background) 100%); + background: #fdfdfd; } -/* Animated Background */ -.backgroundAnimation { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; - z-index: 0; -} - -.floatingOrb1, -.floatingOrb2, -.floatingOrb3 { - position: absolute; - border-radius: 50%; - filter: blur(100px); - opacity: 0.3; - animation: floatOrb 20s ease-in-out infinite; -} - -.floatingOrb1 { - width: 600px; - height: 600px; - background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent); - top: -20%; - left: -10%; - animation-delay: 0s; -} - -.floatingOrb2 { - width: 500px; - height: 500px; - background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent); - bottom: -20%; - right: -10%; - animation-delay: 7s; -} - -.floatingOrb3 { - width: 400px; - height: 400px; - background: radial-gradient(circle, rgba(168, 85, 247, 0.3), transparent); - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - animation-delay: 14s; -} - -@keyframes floatOrb { - - 0%, - 100% { - transform: translate(0, 0) scale(1); - } - - 33% { - transform: translate(100px, -100px) scale(1.1); - } - - 66% { - transform: translate(-80px, 80px) scale(0.9); - } -} - -/* Header */ -.header { +.container { + max-width: 1200px; + margin: 0 auto; text-align: center; + padding: 0 1.5rem; +} + +.header { margin-bottom: 4rem; - position: relative; - z-index: 1; } -.badge { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem 1.5rem; - background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1)); - border: 1px solid rgba(236, 72, 153, 0.2); - border-radius: 50px; - font-size: 0.9rem; +.subTitle { + background: linear-gradient(to right, #2563eb 0%, #ec4899 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.875rem; + margin-bottom: 1rem; +} + +.subtitle { + display: inline-block; color: var(--primary); - margin-bottom: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; position: relative; - overflow: hidden; - animation: badgeFloat 3s ease-in-out infinite; + padding: 0 1.5rem; } -@keyframes badgeFloat { - - 0%, - 100% { - transform: translateY(0); - } - - 50% { - transform: translateY(-5px); - } -} - -.badgeIcon { - font-size: 1.2rem; - animation: rotate 4s linear infinite; -} - -@keyframes rotate { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -.badgePulse { +/* Dash lines beside subtitle */ +.subtitle::before, +.subtitle::after { + content: ''; position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); - animation: badgeShine 3s ease-in-out infinite; + top: 50%; + width: 20px; + height: 2px; + background: var(--primary); } -@keyframes badgeShine { - 0% { - left: -100%; - } +.subtitle::before { + left: 0; +} - 50%, - 100% { - left: 100%; - } +.subtitle::after { + right: 0; } .title { - font-size: clamp(2.5rem, 5vw, 4rem); + font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 1.5rem; line-height: 1.2; color: var(--text-primary); } -.highlight { - background: linear-gradient(135deg, var(--primary), var(--secondary)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - position: relative; - display: inline-block; -} - -.subtitle { - font-size: 1.25rem; - color: var(--text-secondary); +.description { max-width: 700px; margin: 0 auto; - line-height: 1.7; + color: var(--text-secondary); + line-height: 1.6; } -/* Platforms Container */ -.platformsContainer { +/* Arc Container */ +.arcContainer { position: relative; - z-index: 1; - margin-bottom: 4rem; - background: linear-gradient(135deg, - rgba(236, 72, 153, 0.08) 0%, - rgba(168, 85, 247, 0.05) 25%, - rgba(59, 130, 246, 0.08) 50%, - rgba(168, 85, 247, 0.05) 75%, - rgba(236, 72, 153, 0.08) 100%); - background-size: 200% 200%; - border: 2px solid; - border-image: linear-gradient(135deg, - rgba(236, 72, 153, 0.3), - rgba(59, 130, 246, 0.3)) 1; - border-radius: 32px; - padding: 3rem; - box-shadow: - 0 20px 60px rgba(236, 72, 153, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.1) inset; - transition: all 0.3s ease; - animation: gradientShift 15s ease infinite; - overflow: hidden; -} - -.platformsContainer::before { - content: ''; - position: absolute; - inset: 0; - background: - radial-gradient(circle at 20% 30%, rgba(236, 72, 153, 0.15) 0%, transparent 50%), - radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.15) 0%, transparent 50%), - radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 60%); - opacity: 0.6; - pointer-events: none; - z-index: 0; -} - -.platformsContainer::after { - content: ''; - position: absolute; - inset: 0; - background-image: - repeating-linear-gradient(45deg, - transparent, - transparent 10px, - rgba(236, 72, 153, 0.02) 10px, - rgba(236, 72, 153, 0.02) 20px); - pointer-events: none; - z-index: 0; -} - -@keyframes gradientShift { - - 0%, - 100% { - background-position: 0% 50%; - } - - 50% { - background-position: 100% 50%; - } -} - -.platformsContainer:hover { - box-shadow: - 0 30px 80px rgba(236, 72, 153, 0.15), - 0 0 0 1px rgba(236, 72, 153, 0.2) inset, - 0 0 60px rgba(59, 130, 246, 0.1); - border-image: linear-gradient(135deg, - rgba(236, 72, 153, 0.5), - rgba(59, 130, 246, 0.5)) 1; -} - -.connectText { - text-align: center; - margin-bottom: 3rem; - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; -} - -.connectIcon { - font-size: 4rem; - animation: pulse 2s ease-in-out infinite; -} - -@keyframes pulse { - - 0%, - 100% { - transform: scale(1); - opacity: 1; - } - - 50% { - transform: scale(1.1); - opacity: 0.8; - } -} - -.connectText h3 { - font-size: clamp(1.5rem, 3vw, 2rem); - font-weight: 700; - color: var(--text-primary); - line-height: 1.3; - margin: 0; -} - -/* Platforms Grid */ -.platformsGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); - gap: 1.5rem; + height: 500px; + margin-top: 2rem; + width: 100%; max-width: 900px; - margin: 0 auto; - perspective: 1000px; + margin-left: auto; + margin-right: auto; } -@media (min-width: 768px) { - .platformsGrid { - grid-template-columns: repeat(5, 1fr); - } -} - -.platformCard { - position: relative; - aspect-ratio: 1; - background: var(--background); - border: 2px solid var(--border-color); - border-radius: 20px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; - opacity: 0; - transform: translateY(30px) rotateX(10deg); - animation: cardReveal 0.6s ease-out forwards; -} - -@keyframes cardReveal { - to { - opacity: 1; - transform: translateY(0) rotateX(0); - } -} - -.platformCard::before { - content: ''; +/* Dashed Semi-Circle */ +.dashedArc { position: absolute; - inset: 0; - background: linear-gradient(135deg, - rgba(236, 72, 153, 0.05), - rgba(59, 130, 246, 0.05)); - opacity: 0; - transition: opacity 0.3s ease; -} - -.platformCard:hover { - transform: translateY(-10px) scale(1.05); - border-color: var(--primary); - box-shadow: 0 20px 40px rgba(236, 72, 153, 0.2); -} - -.platformCard:hover::before { - opacity: 1; -} - -.platformCard.selected { - background: linear-gradient(135deg, var(--primary), var(--secondary)); - border-color: var(--primary); - transform: scale(1.05); - box-shadow: 0 15px 35px rgba(236, 72, 153, 0.3); -} - -.platformCard.selected .iconEmoji { - transform: scale(1.2); - filter: brightness(1.2); -} - -.platformIcon { - position: relative; - z-index: 2; - font-size: 2.5rem; - transition: transform 0.3s ease; -} - -.iconEmoji { - display: block; - transition: all 0.3s ease; -} - -.platformCard:hover .iconEmoji { - transform: scale(1.15) rotate(5deg); -} - -.checkmark { - position: absolute; - top: -5px; - right: -5px; - width: 24px; - height: 24px; - background: white; - color: var(--primary); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: 700; - font-size: 0.9rem; - animation: checkmarkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -@keyframes checkmarkPop { - 0% { - transform: scale(0); - opacity: 0; - } - - 50% { - transform: scale(1.2); - } - - 100% { - transform: scale(1); - opacity: 1; - } -} - -.platformRipple { - position: absolute; - inset: 0; - border-radius: 20px; - background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent 70%); - opacity: 0; - transform: scale(0); - transition: all 0.6s ease; -} - -.platformCard:active .platformRipple { - opacity: 1; - transform: scale(1); - transition: all 0s; -} - -.platformGlow { - position: absolute; - inset: -2px; - background: linear-gradient(135deg, var(--primary), var(--secondary)); - border-radius: 20px; - opacity: 0; - filter: blur(10px); - z-index: -1; - transition: opacity 0.3s ease; -} - -.platformCard.selected .platformGlow { - opacity: 0.6; - animation: glowPulse 2s ease-in-out infinite; -} - -@keyframes glowPulse { - - 0%, - 100% { - opacity: 0.6; - } - - 50% { - opacity: 0.9; - } -} - -/* Stats Bar */ -.statsBar { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - gap: 2rem; - padding: 2.5rem; - background: linear-gradient(135deg, - rgba(236, 72, 153, 0.05), - rgba(59, 130, 246, 0.05)); - border-radius: 24px; - margin-bottom: 4rem; - position: relative; - overflow: hidden; -} - -.statsBar::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, - transparent, - rgba(255, 255, 255, 0.1), - transparent); - animation: shimmer 3s infinite; -} - -@keyframes shimmer { - 0% { - left: -100%; - } - - 100% { - left: 100%; - } -} - -.statItem { - display: flex; - align-items: center; - gap: 1rem; - position: relative; - z-index: 1; -} - -.statIcon { - font-size: 2.5rem; - animation: bounce 2s ease-in-out infinite; -} - -@keyframes bounce { - - 0%, - 100% { - transform: translateY(0); - } - - 50% { - transform: translateY(-10px); - } -} - -.statContent { - text-align: left; -} - -.statNumber { - font-size: 2rem; - font-weight: 800; - background: linear-gradient(135deg, var(--primary), var(--secondary)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - line-height: 1; - margin-bottom: 0.25rem; -} - -.statLabel { - font-size: 0.9rem; - color: var(--text-secondary); - font-weight: 500; -} - -.statDivider { - width: 2px; - height: 50px; - background: linear-gradient(180deg, - transparent, - var(--border-color), - transparent); -} - -/* CTA Section */ -.ctaSection { - display: flex; - flex-direction: column; - gap: 2rem; - align-items: center; - text-align: center; - padding: 3rem 2rem; - background: linear-gradient(135deg, var(--primary), var(--secondary)); - border-radius: 32px; - position: relative; - overflow: hidden; -} - -.ctaSection::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 50%); - animation: rotateGlow 20s linear infinite; -} - -@keyframes rotateGlow { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -.ctaContent { - position: relative; - z-index: 1; -} - -.ctaTitle { - font-size: clamp(1.75rem, 4vw, 2.5rem); - font-weight: 800; - color: white; - margin-bottom: 0.75rem; -} - -.ctaText { - font-size: 1.125rem; - color: rgba(255, 255, 255, 0.95); - max-width: 600px; -} - -.ctaButtons { - display: flex; - flex-wrap: wrap; - gap: 1rem; - justify-content: center; - position: relative; - z-index: 1; -} - -.ctaButtons .btn { - background: white !important; - color: var(--primary) !important; - border: none !important; -} - -.ctaButtons .btn:hover { - transform: translateY(-3px); - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); -} - -.ctaButtons .btn-secondary { - background: rgba(255, 255, 255, 0.2) !important; - color: white !important; - border: 2px solid white !important; - backdrop-filter: blur(10px); -} - -.ctaButtons .btn-secondary:hover { - background: rgba(255, 255, 255, 0.3) !important; -} - -.arrow { - display: inline-block; - transition: transform 0.3s ease; -} - -.ctaButtons .btn:hover .arrow { - transform: translateX(5px); -} - -/* Connection Lines SVG */ -.connectionLines { - position: absolute; - bottom: 0; - left: 0; - width: 100%; + top: 50px; + /* Start arch slightly down */ + left: 10%; + right: 10%; height: 400px; - pointer-events: none; - opacity: 0.3; + /* Tall enough */ + border: 2px dashed #e2e8f0; + border-radius: 50% 50% 0 0; + /* Semi-circle top */ + border-bottom: none; z-index: 0; } -.animatedPath { - stroke-dasharray: 1000; - stroke-dashoffset: 1000; - animation: drawPath 3s ease-in-out infinite; -} - -@keyframes drawPath { - 0% { - stroke-dashoffset: 1000; - } - - 50% { - stroke-dashoffset: 0; - } - - 100% { - stroke-dashoffset: -1000; - } -} - -/* Responsive */ -@media (max-width: 768px) { - .connectSection { - padding: 4rem 0; - } - - .platformsContainer { - padding: 2rem 1.5rem; - } - - .platformsGrid { - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - } - - .statsBar { - flex-direction: column; - gap: 1.5rem; - } - - .statDivider { - width: 50px; - height: 2px; - } - - .ctaSection { - padding: 2rem 1.5rem; - } - - .ctaButtons { - flex-direction: column; - width: 100%; - } - - .ctaButtons .btn { - width: 100%; - } -} - -@media (min-width: 768px) { - .ctaSection { - flex-direction: row; - justify-content: space-between; - text-align: left; - padding: 3rem 4rem; - } -} - -/* NEW CREATIVE FEATURES */ - -/* Grid Pattern Background */ -.gridPattern { +/* Icon Slots */ +.iconWrapper { position: absolute; - inset: 0; - background-image: - linear-gradient(rgba(236, 72, 153, 0.03) 1px, transparent 1px), - linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px); - background-size: 50px 50px; - opacity: 0.5; - animation: gridMove 20s linear infinite; + width: 60px; + height: 60px; + transform: translate(-50%, -50%); + transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); + cursor: pointer; + z-index: 2; } -@keyframes gridMove { - 0% { - transform: translate(0, 0); - } - - 100% { - transform: translate(50px, 50px); - } -} - -/* Enhanced Connect Icon with Rings */ -.connectIconWrapper { - position: relative; - display: inline-block; -} - -.iconRings { - position: absolute; - inset: -20px; - pointer-events: none; -} - -.ring { - position: absolute; - inset: 0; - border: 2px solid var(--primary); +.iconCircle { + width: 100%; + height: 100%; + background: white; border-radius: 50%; - opacity: 0; - animation: ringPulse 3s ease-out infinite; -} - -.ring:nth-child(1) { - animation-delay: 0s; -} - -.ring:nth-child(2) { - animation-delay: 1s; -} - -.ring:nth-child(3) { - animation-delay: 2s; -} - -@keyframes ringPulse { - 0% { - transform: scale(0.8); - opacity: 0.8; - } - - 100% { - transform: scale(2); - opacity: 0; - } -} - -/* Gradient Text */ -.gradientText { - background: linear-gradient(135deg, var(--primary), var(--secondary)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.connectSubtext { - font-size: 0.9rem; - color: var(--text-secondary); - font-weight: 500; - opacity: 0.8; -} - -/* 3D Card Inner Structure */ -.cardInner { - width: 100%; - height: 100%; - position: relative; - transform-style: preserve-3d; - transition: transform 0.6s; -} - -.cardFront { - width: 100%; - height: 100%; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); display: flex; - flex-direction: column; align-items: center; justify-content: center; - gap: 0.5rem; - position: relative; - backface-visibility: hidden; -} - -/* Platform Name Label */ -.platformName { - font-size: 0.7rem; - font-weight: 600; - color: var(--text-secondary); - text-align: center; - opacity: 0; - transform: translateY(10px); + color: var(--color); + border: 2px solid transparent; + /* default */ transition: all 0.3s ease; } -.platformCard:hover .platformName { - opacity: 1; - transform: translateY(0); +.iconCircle svg { + width: 28px; + height: 28px; + fill: currentColor; } -.platformCard.selected .platformName { - color: white; - opacity: 1; - transform: translateY(0); -} +/* Slot Positions (Assuming 900px wide container) */ +/* Arc approximate path: + Center (Slot 3): 50% X, 50px Y + Mid Right (Slot 4): 80% X, 180px Y + Far Right (Slot 5): 90% X, 350px Y + Mid Left (Slot 2): 20% X, 180px Y + Far Left (Slot 1): 10% X, 350px Y +*/ -/* Animated Border */ -.animatedBorder { - position: absolute; - inset: -2px; - background: linear-gradient(45deg, - var(--primary), - var(--secondary), - var(--primary)); - background-size: 200% 200%; - border-radius: 20px; - opacity: 0; - z-index: -1; - animation: borderRotate 3s linear infinite; -} - -.platformCard.selected .animatedBorder { - opacity: 1; -} - -@keyframes borderRotate { - 0% { - background-position: 0% 50%; - } - - 50% { - background-position: 100% 50%; - } - - 100% { - background-position: 0% 50%; - } -} - -/* Shine Effect */ -.shineEffect { - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: linear-gradient(45deg, - transparent 30%, - rgba(255, 255, 255, 0.3) 50%, - transparent 70%); - transform: translateX(-100%); - transition: transform 0.6s; -} - -.platformCard:hover .shineEffect { - transform: translateX(100%); -} - -/* Particle System */ -.particleContainer { - position: absolute; - inset: 0; - pointer-events: none; +.slot3 { + /* Center Active */ + left: 50%; + top: 50px; z-index: 10; - overflow: hidden; + /* Active styling logic handled here? No, iconWrapper handles POS */ } -.particle { - position: absolute; - width: 6px; - height: 6px; - border-radius: 50%; +.slot3 .iconCircle { + /* Active item gets a ring or glow? */ + border-color: var(--color); + box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05); +} + +.slot4 { + /* Right Mid */ + left: 80%; + top: 150px; +} + +.slot5 { + /* Right Entry - fully visible, same size */ + left: 92%; + top: 300px; + opacity: 1; + transform: translate(-50%, -50%) scale(1); +} + +.slot2 { + /* Left Mid */ + left: 20%; + top: 150px; +} + +.slot1 { + /* Left Exit - fully visible, same size */ + left: 8%; + top: 300px; + opacity: 1; + transform: translate(-50%, -50%) scale(1); +} + +.slot0 { + /* Hidden / Exited */ + left: 0%; + top: 400px; + opacity: 0; pointer-events: none; - box-shadow: 0 0 10px currentColor; } -/* Connection Dots */ -.connectionDots { +/* Center Content Card */ +.centerCard { position: absolute; - bottom: -15px; + top: 130px; + /* Below arch vertex */ + left: 50%; + transform: translateX(-50%); + width: 320px; + text-align: center; + z-index: 5; + background: transparent; + /* Or white if needed? Image shows text floating on bg */ + display: flex; + flex-direction: column; + align-items: center; +} + +.cardIcon { + font-size: 3rem; + margin-bottom: 1rem; + width: 64px; + height: 64px; + margin: 0 auto 1rem; +} + +.cardIcon svg { + width: 100%; + height: 100%; +} + +.cardTitle { + font-size: 1.5rem; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.cardDesc { + font-size: 0.95rem; + color: var(--text-secondary); + margin-bottom: 2rem; + line-height: 1.6; +} + +.brandName { + font-weight: 700; + color: var(--primary); +} + +.readMoreBtn { + border: none; + color: white; + padding: 0.75rem 2rem; + border-radius: 50px; + font-weight: 600; + cursor: pointer; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); + transition: transform 0.2s; +} + +.readMoreBtn:hover { + transform: translateY(-2px); +} + +/* Floating More Services Btn - Moved to Bottom Center */ +.moreServicesBtn { + position: absolute; + bottom: -20px; + /* Position at bottom */ left: 50%; transform: translateX(-50%); display: flex; - gap: 4px; + align-items: center; + gap: 0.5rem; + background: #e0f2fe; + /* Light blue */ + padding: 0.5rem 1.5rem; + border-radius: 50px; + cursor: pointer; + color: var(--text-primary); + font-weight: 600; + font-size: 0.9rem; + transition: all 0.3s; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); z-index: 10; + top: auto; + /* Override previous top */ + right: auto; + /* Override previous right */ } -.connectionDots span { - width: 6px; - height: 6px; - background: white; +.moreServicesBtn:hover { + background: #bae6fd; + transform: translateX(-50%) translateY(-2px); +} + +.plusIcon { + background: var(--secondary); + color: white; + width: 24px; + height: 24px; border-radius: 50%; - animation: dotPulse 1.5s ease-in-out infinite; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); -} - -.connectionDots span:nth-child(1) { - animation-delay: 0s; -} - -.connectionDots span:nth-child(2) { - animation-delay: 0.3s; -} - -.connectionDots span:nth-child(3) { - animation-delay: 0.6s; -} - -@keyframes dotPulse { - - 0%, - 100% { - transform: scale(1); - opacity: 1; - } - - 50% { - transform: scale(1.5); - opacity: 0.5; - } -} - -/* Enhanced Stats with Icon Glow */ -.statIconWrapper { - position: relative; - display: inline-block; -} - -.statIconGlow { - position: absolute; - inset: -10px; - background: radial-gradient(circle, var(--primary), transparent 70%); - opacity: 0; - filter: blur(15px); - z-index: -1; - animation: iconGlowPulse 2s ease-in-out infinite; -} - -@keyframes iconGlowPulse { - - 0%, - 100% { - opacity: 0.3; - transform: scale(0.8); - } - - 50% { - opacity: 0.6; - transform: scale(1.2); - } -} - -.statNumber.animated { - animation: numberPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -} - -@keyframes numberPop { - 0% { - transform: scale(0.5); - } - - 50% { - transform: scale(1.2); - } - - 100% { - transform: scale(1); - } -} - -/* Enhanced CTA with Background Orbs */ -.ctaBackground { - position: absolute; - inset: 0; - overflow: hidden; - z-index: 0; -} - -.ctaOrb1, -.ctaOrb2 { - position: absolute; - border-radius: 50%; - filter: blur(60px); - opacity: 0.3; -} - -.ctaOrb1 { - width: 300px; - height: 300px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent); - top: -100px; - right: -100px; - animation: ctaOrbFloat 8s ease-in-out infinite; -} - -.ctaOrb2 { - width: 250px; - height: 250px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent); - bottom: -80px; - left: -80px; - animation: ctaOrbFloat 10s ease-in-out infinite reverse; -} - -@keyframes ctaOrbFloat { - - 0%, - 100% { - transform: translate(0, 0) scale(1); - } - - 50% { - transform: translate(30px, -30px) scale(1.1); - } -} - -/* Icon Emoji Styling */ -.iconEmoji { - font-size: 2.5rem; - font-weight: 700; display: flex; align-items: center; justify-content: center; + font-weight: bold; } -/* Checkmark Enhancement */ -.checkmark span { - display: block; - animation: checkSpin 0.5s ease-out; -} - -@keyframes checkSpin { - 0% { - transform: rotate(-180deg) scale(0); +@media (max-width: 768px) { + .arcContainer { + height: auto; + min-height: 380px; } - 100% { - transform: rotate(0) scale(1); + .dashedArc { + display: none; + /* Hide confusing arc on mobile */ + } + + .iconWrapper { + position: relative; + transform: none; + display: inline-block; + margin: 0.5rem; + left: auto !important; + top: auto !important; + opacity: 1 !important; + } + + .centerCard { + position: relative; + top: auto; + left: auto; + transform: none; + margin: 2rem auto; + } + + .moreServicesBtn { + position: relative; + right: auto; + top: auto; + justify-content: center; + margin-top: 2rem; } } \ No newline at end of file diff --git a/components/SocialConnect.tsx b/components/SocialConnect.tsx index f64e97b..07f0dcf 100644 --- a/components/SocialConnect.tsx +++ b/components/SocialConnect.tsx @@ -1,334 +1,159 @@ 'use client'; -import { useState, useRef, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import styles from './SocialConnect.module.css'; +// SVG Icons (Reusing existing ones) +const Icons = { + TikTok: ( + + + + ), + WhatsApp: ( + + + + ), + Discord: ( + + + + ), + YouTube: ( + + + + ), + Instagram: ( + + + + ), + Facebook: ( + + + + ), + Pinterest: ( + + + + ), + Reddit: ( + + + + ), + Dribbble: ( + + + + ) +}; + const socialPlatforms = [ - { name: 'Bluesky', icon: 'πŸ¦‹', color: '#0085ff', delay: 0, symbol: 'B' }, - { name: 'Facebook', icon: 'f', color: '#1877f2', delay: 0.1, symbol: 'F' }, - { name: 'Google', icon: 'G', color: '#4285f4', delay: 0.2, symbol: 'G' }, - { name: 'Instagram', icon: 'πŸ“·', color: '#e4405f', delay: 0.3, symbol: 'I' }, - { name: 'LinkedIn', icon: 'in', color: '#0a66c2', delay: 0.4, symbol: 'L' }, - { name: 'Mastodon', icon: '🐘', color: '#6364ff', delay: 0.5, symbol: 'M' }, - { name: 'Pinterest', icon: 'P', color: '#e60023', delay: 0.6, symbol: 'P' }, - { name: 'Threads', icon: '@', color: '#000000', delay: 0.7, symbol: 'T' }, - { name: 'TikTok', icon: 'β™ͺ', color: '#000000', delay: 0.8, symbol: 'TT' }, - { name: 'X', icon: '𝕏', color: '#000000', delay: 0.9, symbol: 'X' }, - { name: 'YouTube', icon: 'β–Ά', color: '#ff0000', delay: 1.0, symbol: 'Y' }, + { name: 'TikTok', icon: Icons.TikTok, color: '#000000', label: 'Video Marketing', desc: 'Create viral video content that engages millions of users daily.' }, + { name: 'WhatsApp', icon: Icons.WhatsApp, color: '#25D366', label: 'Direct Messaging', desc: 'Connect directly with customers through their preferred chat app.' }, + { name: 'Discord', icon: Icons.Discord, color: '#5865F2', label: 'Community Building', desc: 'Build and manage thriving communities around your brand.' }, + { name: 'YouTube', icon: Icons.YouTube, color: '#FF0000', label: 'Content Strategy', desc: 'Leverage long-form video content to build authority and SEO.' }, + { name: 'Instagram', icon: Icons.Instagram, color: '#E4405F', label: 'Visual Branding', desc: 'Showcase your brand aesthetics clearly and effectively.' }, + { name: 'Facebook', icon: Icons.Facebook, color: '#1877F2', label: 'Social Advertising', desc: 'Target specific demographics with precision ads.' }, + { name: 'Pinterest', icon: Icons.Pinterest, color: '#BD081C', label: 'Visual Discovery', desc: 'Drive traffic through inspiring visual content and pins.' }, + { name: 'Reddit', icon: Icons.Reddit, color: '#FF4500', label: 'Niche Engagement', desc: 'Engage with highly specific interest groups authenticaly.' }, + { name: 'Dribbble', icon: Icons.Dribbble, color: '#EA4C89', label: 'Design Showcase', desc: 'Demonstrate design expertise to a creative audience.' }, ]; -interface Particle { - x: number; - y: number; - vx: number; - vy: number; - life: number; - color: string; -} - export default function SocialConnect() { - const [hoveredIndex, setHoveredIndex] = useState(null); - const [selectedPlatforms, setSelectedPlatforms] = useState([]); - const [particles, setParticles] = useState([]); - const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); - const containerRef = useRef(null); - const cardRefs = useRef<(HTMLDivElement | null)[]>([]); + const [activeIndex, setActiveIndex] = useState(0); - // 3D Tilt Effect on Mouse Move - const handleMouseMove = (e: React.MouseEvent, index: number) => { - const card = cardRefs.current[index]; - if (!card) return; - - const rect = card.getBoundingClientRect(); - const x = e.clientX - rect.left; - const y = e.clientY - rect.top; - - const centerX = rect.width / 2; - const centerY = rect.height / 2; - - const rotateX = ((y - centerY) / centerY) * -15; - const rotateY = ((x - centerX) / centerX) * 15; - - card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px) scale(1.05)`; - }; - - const handleMouseLeave = (index: number) => { - const card = cardRefs.current[index]; - if (card) { - card.style.transform = ''; - } - setHoveredIndex(null); - }; - - // Particle Explosion on Click - const createParticles = (e: React.MouseEvent, color: string) => { - const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); - const x = e.clientX - rect.left; - const y = e.clientY - rect.top; - - const newParticles: Particle[] = []; - for (let i = 0; i < 12; i++) { - const angle = (Math.PI * 2 * i) / 12; - newParticles.push({ - x, - y, - vx: Math.cos(angle) * (2 + Math.random() * 3), - vy: Math.sin(angle) * (2 + Math.random() * 3), - life: 1, - color, - }); - } - setParticles(prev => [...prev, ...newParticles]); - }; - - const handlePlatformClick = (index: number, e: React.MouseEvent) => { - const isSelected = selectedPlatforms.includes(index); - - setSelectedPlatforms(prev => - prev.includes(index) - ? prev.filter(i => i !== index) - : [...prev, index] - ); - - // Create particle explosion - createParticles(e, socialPlatforms[index].color); - }; - - // Animate particles useEffect(() => { - if (particles.length === 0) return; - const interval = setInterval(() => { - setParticles(prev => - prev - .map(p => ({ - ...p, - x: p.x + p.vx, - y: p.y + p.vy, - vy: p.vy + 0.2, // gravity - life: p.life - 0.02, - })) - .filter(p => p.life > 0) - ); - }, 16); - + setActiveIndex((prev) => (prev + 1) % socialPlatforms.length); + }, 3000); return () => clearInterval(interval); - }, [particles]); + }, []); - // Magnetic cursor effect - const handleContainerMouseMove = (e: React.MouseEvent) => { - setMousePos({ x: e.clientX, y: e.clientY }); + const getSlot = (index: number) => { + const length = socialPlatforms.length; + let diff = (index - activeIndex) % length; + if (diff < 0) diff += length; + + // Slot Mapping: + // diff 0 -> Center (3) + // diff 1 -> Right Mid (4) + // diff 2 -> Right Entry (5) + // diff length-1 -> Left Mid (2) + // diff length-2 -> Left Exit (1) + + if (diff === 0) return 3; + if (diff === 1) return 4; + if (diff === 2) return 5; + if (diff === length - 1) return 2; + if (diff === length - 2) return 1; + return 0; // Hidden }; + const activePlatform = socialPlatforms[activeIndex]; + return ( -
-
- {/* Animated Background Elements */} -
-
-
-
-
-
- - {/* Header */} +
+
- - πŸ”— - One Platform, All Networks - - +
Our Services

- Connect Your Favorite Accounts + Always we offer the best services for success!

-

- Seamlessly integrate all your social media platforms in one place. - Manage, schedule, and analyze everything from a single dashboard. +

+ New analytic tools can help manufacturers in labor-intensive sectors boost + productivity and earnings by double-digit on It is a secure and simple + ondemand. the total percentages.

- {/* Interactive Platform Grid */} -
-
-
-
🌐
-
-
-
-
-
-
-

Connect your
favorite accounts

-

Click to select platforms

-
+
+
-
- {socialPlatforms.map((platform, index) => ( + {socialPlatforms.map((platform, index) => { + const slot = getSlot(index); + return (
{ cardRefs.current[index] = el; }} - className={`${styles.platformCard} ${selectedPlatforms.includes(index) ? styles.selected : '' - } ${hoveredIndex === index ? styles.hovered : ''}`} - style={{ - animationDelay: `${platform.delay}s`, - '--platform-color': platform.color - } as React.CSSProperties} - onMouseEnter={() => setHoveredIndex(index)} - onMouseMove={(e) => handleMouseMove(e, index)} - onMouseLeave={() => handleMouseLeave(index)} - onClick={(e) => handlePlatformClick(index, e)} + className={`${styles.iconWrapper} ${styles[`slot${slot}`]}`} + style={{ '--color': platform.color } as React.CSSProperties} + onClick={() => setActiveIndex(index)} > - {/* 3D Card Inner */} -
-
-
- - {platform.icon} - -
{platform.name}
- {selectedPlatforms.includes(index) && ( -
- βœ“ -
- )} -
- - {/* Animated border */} -
- - {/* Shine effect */} -
-
+
+ {platform.icon}
- -
-
- - {/* Connection dots */} - {selectedPlatforms.includes(index) && ( -
- - - -
- )}
- ))} -
+ ); + })} - {/* Particle System */} -
- {particles.map((particle, i) => ( -
- ))} -
-
- - {/* Enhanced Stats Bar */} -
-
-
-
🎯
-
+
+
+ {activePlatform.icon}
-
-
11+
-
Platforms Supported
-
-
-
-
-
-
⚑
-
-
-
-
- {selectedPlatforms.length > 0 ? selectedPlatforms.length : '0'} -
-
Selected Networks
-
-
-
-
-
-
πŸš€
-
-
-
-
1-Click
-
Easy Integration
-
-
-
- - {/* Enhanced CTA Section */} -
-
-
-
-
-
-

Ready to streamline your social media?

-

- Connect all your accounts now and start managing them from one powerful dashboard. +

{activePlatform.label}

+

+ {activePlatform.desc} +
+ Prysm Quarterly has been defining...

-
-
- -
-
- {/* Floating Connection Lines Animation */} - - - - - - - - - - - - - - - - - - + {/*
+
+
+ More Services + β†— +
*/} +
); diff --git a/components/StatsCounter.module.css b/components/StatsCounter.module.css new file mode 100644 index 0000000..5fa4a65 --- /dev/null +++ b/components/StatsCounter.module.css @@ -0,0 +1,125 @@ +/* Section: Transparent/Clean */ +.statsSection { + padding: 4rem 0 4rem; + background: transparent; + position: relative; + z-index: 10; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; +} + +/* Grid Container for separate cards */ +.statsGrid { + background: transparent; + border-radius: 0; + box-shadow: none; + padding: 0; + + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 2rem; + margin: 0; + top: auto; +} + +@media (min-width: 768px) { + .statsGrid { + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + /* Distinct gap for separate cards */ + padding: 0; + } +} + +/* Individual Card Styling */ +.statItem { + background: white; + border-radius: 24px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + padding: 2rem 1.5rem; + + display: flex; + align-items: center; + gap: 1.5rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; + border: 1px solid rgba(0, 0, 0, 0.02); +} + +.statItem:hover { + transform: translateY(-5px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); +} + +/* Floating Icon Wrapper */ +.iconWrapper { + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + flex-shrink: 0; + animation: floatIcon 3s ease-in-out infinite; +} + +/* Icon Background Blob */ +.iconBg { + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1)); + border-radius: 16px; + transform: rotate(10deg); +} + +.statIcon { + font-size: 1.75rem; + position: relative; + z-index: 2; +} + +/* Text Content */ +.textContent { + display: flex; + flex-direction: column; + justify-content: center; +} + +.numberWrapper { + font-size: 2rem; + font-weight: 800; + line-height: 1; + margin-bottom: 0.25rem; + color: var(--text-primary); + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + display: flex; + justify-content: flex-start; + align-items: baseline; + gap: 0.1ch; +} + +.label { + font-size: 0.85rem; + color: var(--text-secondary); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +@keyframes floatIcon { + + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-8px); + } +} \ No newline at end of file diff --git a/components/StatsCounter.tsx b/components/StatsCounter.tsx new file mode 100644 index 0000000..52300a5 --- /dev/null +++ b/components/StatsCounter.tsx @@ -0,0 +1,118 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; +import styles from './StatsCounter.module.css'; + +export default function StatsCounter() { + const [hasAnimated, setHasAnimated] = useState(false); + const sectionRef = useRef(null); + + // Stats State + const [counts, setCounts] = useState({ + users: 0, + posts: 0, + satisfaction: 0 + }); + + const targets = { + users: 15, // 15K+ + posts: 2, // 2M+ + satisfaction: 99 // 99% + }; + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting && !hasAnimated) { + setHasAnimated(true); + } + }, + { threshold: 0.5 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, [hasAnimated]); + + useEffect(() => { + if (!hasAnimated) return; + + const duration = 2000; // 2s + const steps = 60; + const intervalTime = duration / steps; + + let currentStep = 0; + + const timer = setInterval(() => { + currentStep++; + const progress = Math.min(currentStep / steps, 1); + + // Easing function for smooth count + const easeOutQuart = (x: number) => 1 - Math.pow(1 - x, 4); + const value = easeOutQuart(progress); + + setCounts({ + users: Math.floor(targets.users * value), + posts: Math.floor(targets.posts * value * 10) / 10, // Keep decimal for smaller numbers if needed, here integers roughly + satisfaction: Math.floor(targets.satisfaction * value) + }); + + if (currentStep >= steps) clearInterval(timer); + }, intervalTime); + + return () => clearInterval(timer); + }, [hasAnimated]); + + return ( +
+
+
+ {/* Stat 1 */} +
+
+
+ πŸ‘₯ +
+
+
+ {hasAnimated ? counts.users : 0}k+ +
+

Active Users

+
+
+ + {/* Stat 2 */} +
+
+
+ πŸš€ +
+
+
+ {hasAnimated ? '2' : '0'}M+ +
+

Posts Scheduled

+
+
+ + {/* Stat 3 */} +
+
+
+ ⭐ +
+
+
+ {hasAnimated ? counts.satisfaction : 0}% +
+

Client Satisfaction

+
+
+
+
+
+ ); +} diff --git a/components/TestimonialSlider.tsx b/components/TestimonialSlider.tsx new file mode 100644 index 0000000..59a1f10 --- /dev/null +++ b/components/TestimonialSlider.tsx @@ -0,0 +1,69 @@ +"use client"; + +import { useState, useEffect } from "react"; +import styles from "@/app/features/[slug]/feature-page.module.css"; +import SafeImage from "./SafeImage"; +import { Star } from "lucide-react"; + +interface Testimonial { + quote: string; + author: string; + role: string; + rating: number; + image: string; +} + +export default function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) { + const [currentIndex, setCurrentIndex] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setCurrentIndex((prev) => (prev + 1) % testimonials.length); + }, 5000); // 5 seconds per slide + return () => clearInterval(interval); + }, [testimonials.length]); + + const current = testimonials[currentIndex]; + + return ( +
+
+
+ {[...Array(5)].map((_, i) => ( + + ))} +
+
+ "{current.quote}" +
+
+ +
+

{current.author}

+ {current.role} +
+
+
+
+ {testimonials.map((_, idx) => ( +
+
+ ); +} diff --git a/components/Testimonials.module.css b/components/Testimonials.module.css index 5790fee..c938aae 100644 --- a/components/Testimonials.module.css +++ b/components/Testimonials.module.css @@ -1,224 +1,293 @@ -.header { - text-align: center; - margin-bottom: 4rem; +.testimonialSection { + padding: 4rem 0; + overflow: hidden; + background: linear-gradient(to right, #f9fafb 50%, #ffffff 50%); + /* Subtle separation if needed */ + background: #f8fafc; } -.badge { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1.25rem; - background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1)); - border: 1px solid rgba(236, 72, 153, 0.2); - border-radius: 50px; - font-size: 0.875rem; - font-weight: 600; - color: var(--primary); - margin-bottom: 1rem; -} - -.title { - font-size: clamp(2rem, 5vw, 3rem); - font-weight: 800; - margin-bottom: 1rem; - line-height: 1.2; -} - -.subtitle { - font-size: 1.125rem; - color: var(--text-secondary); - max-width: 600px; +.layoutContainer { + max-width: 1400px; margin: 0 auto; -} - -.testimonialSlider { - overflow: hidden; - margin-bottom: 2rem; - position: relative; -} - -.testimonialTrack { - display: flex; - transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); -} - -.testimonialCard { - min-width: 100%; - padding: 3rem 2rem; - background: var(--card-bg); - border: 1px solid var(--border-color); - border-radius: 24px; - position: relative; - overflow: hidden; -} - -.testimonialCard::before { - content: '"'; - position: absolute; - top: 1rem; - left: 2rem; - font-size: 8rem; - font-family: Georgia, serif; - color: var(--primary); - opacity: 0.1; - line-height: 1; -} - -.stars { - display: flex; - gap: 0.25rem; - margin-bottom: 1.5rem; - font-size: 1.25rem; -} - -.star { - animation: twinkle 2s ease-in-out infinite; -} - -.star:nth-child(2) { - animation-delay: 0.2s; -} - -.star:nth-child(3) { - animation-delay: 0.4s; -} - -.star:nth-child(4) { - animation-delay: 0.6s; -} - -.star:nth-child(5) { - animation-delay: 0.8s; -} - -@keyframes twinkle { - - 0%, - 100% { - opacity: 1; - transform: scale(1); - } - - 50% { - opacity: 0.7; - transform: scale(0.95); - } -} - -.testimonialText { - font-size: 1.25rem; - line-height: 1.8; - color: var(--text-primary); - margin-bottom: 2rem; - font-style: italic; - position: relative; - z-index: 1; -} - -.author { display: flex; align-items: center; - gap: 1rem; + position: relative; + padding: 0 2rem; + gap: 0; + /* No gap because we force overlap */ } -.authorImage { - width: 60px; - height: 60px; - border-radius: 50%; +/* LEFT SIDE CARD */ +.leftCard { + flex: 0 0 450px; + background: var(--primary); + /* Assuming green/primary color */ background: linear-gradient(135deg, var(--primary), var(--secondary)); + border-radius: 32px; + padding: 4rem 3rem; + color: white; + position: relative; + z-index: 10; + /* Above slider */ + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + /* Make it overlap the slider area */ + margin-right: -40px; + overflow: hidden; + /* For pattern */ + min-height: 500px; display: flex; - align-items: center; + flex-direction: column; justify-content: center; - font-size: 2rem; - flex-shrink: 0; } -.authorInfo { - flex: 1; +/* Decorative pattern roughly matching image curves */ +.leftCard::before { + content: ''; + position: absolute; + bottom: -50px; + right: -50px; + width: 200px; + height: 200px; + border-radius: 50%; + border: 30px solid rgba(255, 255, 255, 0.1); } -.authorName { - font-size: 1.125rem; - font-weight: 700; - color: var(--text-primary); - margin-bottom: 0.25rem; +.leftCard::after { + content: ''; + position: absolute; + bottom: -80px; + right: -80px; + width: 300px; + height: 300px; + border-radius: 50%; + border: 30px solid rgba(255, 255, 255, 0.05); } -.authorRole { - font-size: 0.9375rem; - color: var(--text-secondary); +.cardContent { + position: relative; + z-index: 2; } -.dots { +.cardTitle { + font-size: 2.5rem; + font-weight: 800; + line-height: 1.2; + margin-bottom: 1.5rem; + color: white; +} + +.cardDescription { + font-size: 1.1rem; + line-height: 1.6; + opacity: 0.9; + margin-bottom: 3rem; + max-width: 90%; + color: #fff; +} + +.miniStats { display: flex; - justify-content: center; - gap: 0.75rem; + gap: 2rem; margin-bottom: 3rem; } -.dot { - width: 12px; - height: 12px; - border-radius: 50%; - background: var(--border-color); +.statBadge { + display: flex; + align-items: center; + gap: 0.75rem; + background: rgba(255, 255, 255, 0.1); + padding: 0.75rem 1rem; + border-radius: 12px; + backdrop-filter: blur(5px); +} + +.statIcon { + font-size: 1.5rem; +} + +.statBadge strong { + display: block; + font-size: 1.1rem; + line-height: 1; +} + +.statBadge span { + font-size: 0.8rem; + opacity: 0.8; +} + +.readMoreBtn { + background: white; + color: var(--primary); border: none; + padding: 1rem 2rem; + border-radius: 12px; + font-weight: 700; cursor: pointer; - transition: all 0.3s ease; - padding: 0; + transition: transform 0.2s ease, box-shadow 0.2s ease; } -.dot:hover { - background: var(--primary); - opacity: 0.7; +.readMoreBtn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } -.activeDot { - background: var(--primary); - width: 32px; - border-radius: 6px; +/* RIGHT SIDE SLIDER */ +.sliderContainer { + flex: 1; + position: relative; + z-index: 1; + /* Below Left Card */ + overflow: hidden; + padding: 4rem 0 4rem 6rem; + /* Extra left padding to compensate overlap */ + /* Mask/gradient to fade out right side? Optional. */ + mask-image: linear-gradient(to right, black 80%, transparent 100%); } -.stats { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +.sliderTrack { + display: flex; gap: 2rem; - margin-top: 4rem; - padding-top: 3rem; - border-top: 1px solid var(--border-color); + transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } -.statItem { - text-align: center; +.sliderCard { + flex: 0 0 320px; + background: white; + border-radius: 20px; + padding: 2rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + border: 1px solid #edf2f7; + transition: transform 0.3s ease; + display: flex; + flex-direction: column; } -.statNumber { - font-size: 2.5rem; - font-weight: 800; - background: linear-gradient(135deg, var(--primary), var(--secondary)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - margin-bottom: 0.5rem; +.sliderCard:hover { + transform: translateY(-5px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } -.statLabel { +.cardHeader { + display: flex; + align-items: center; + margin-bottom: 1.5rem; + gap: 1rem; +} + +.userImage { + width: 48px; + height: 48px; + border-radius: 50%; + background: #f0f4f8; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; +} + +.userInfo h4 { font-size: 1rem; - color: var(--text-secondary); - font-weight: 500; + font-weight: 700; + margin: 0; + color: #2d3748; } -@media (min-width: 768px) { - .testimonialCard { - padding: 4rem 3rem; - } - - .testimonialText { - font-size: 1.5rem; - } +.userCompany { + font-size: 0.8rem; + color: #718096; + display: block; } -@media (min-width: 1024px) { - .testimonialCard { - padding: 5rem 6rem; +.rating { + margin-left: auto; + font-size: 0.8rem; +} + +.reviewTitle { + font-size: 1.1rem; + font-weight: 700; + margin-bottom: 0.75rem; + color: #1a202c; +} + +.reviewText { + font-size: 0.95rem; + line-height: 1.6; + color: #4a5568; + display: -webkit-box; + -webkit-line-clamp: 4; + line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* NAVIGATION */ +.sliderNav { + display: flex; + gap: 1rem; + margin-top: 2rem; + justify-content: flex-start; + padding-left: 2rem; +} + +.navBtn { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid #cbd5e0; + background: white; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; + color: #4a5568; +} + +.navBtn:hover { + background: var(--primary); + color: white; + border-color: var(--primary); +} + +/* RESPONSIVE */ +.cardBgPattern { + display: none; +} + +@media (max-width: 1024px) { + .layoutContainer { + flex-direction: column; + align-items: stretch; + gap: 2rem; + padding: 0 1rem; + } + + .leftCard { + flex: none; + margin-right: 0; + width: 100%; + min-height: auto; + padding: 3rem 2rem; + border-radius: 24px; + } + + .sliderContainer { + padding: 0; + mask-image: none; + overflow: visible; + } + + .sliderTrack { + /* On mobile, maybe snap scroll? */ + overflow-x: auto; + padding-bottom: 2rem; + transform: none !important; + /* Disable JS slide on mobile if preferring native scroll */ + } + + .sliderCard { + flex: 0 0 280px; } } \ No newline at end of file diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx index ba57506..7daa1f9 100644 --- a/components/Testimonials.tsx +++ b/components/Testimonials.tsx @@ -1,137 +1,205 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; import styles from './Testimonials.module.css'; export default function Testimonials() { const [activeIndex, setActiveIndex] = useState(0); + const [isResetting, setIsResetting] = useState(false); + const timeoutRef = useRef(null); const testimonials = [ { name: 'Sarah Johnson', role: 'Marketing Director', company: 'TechFlow Inc.', - image: 'πŸ‘©β€πŸ’Ό', - rating: 5, - text: 'SocialBuddy has completely transformed how we manage our social media. The scheduling features and analytics are game-changers. We\'ve seen a 300% increase in engagement!', + text: 'SocialBuddy has completely transformed how we manage our social media. The scheduling features and analytics are game-changers.', + image: 'πŸ‘©β€πŸ’Ό' }, { name: 'Michael Chen', role: 'Content Creator', company: 'Digital Nomad', - image: 'πŸ‘¨β€πŸ’»', - rating: 5, - text: 'As a solo creator managing multiple platforms, SocialBuddy saves me hours every week. The AI content suggestions are incredibly helpful, and the unified inbox is a lifesaver.', + text: 'As a solo creator managing multiple platforms, SocialBuddy saves me hours every week. The AI content suggestions are incredibly helpful.', + image: 'πŸ‘¨β€πŸ’»' }, { name: 'Emily Rodriguez', role: 'Social Media Manager', company: 'BrandBoost Agency', - image: 'πŸ‘©β€πŸŽ¨', - rating: 5, - text: 'Managing 20+ client accounts used to be overwhelming. SocialBuddy\'s team collaboration features and approval workflows have streamlined our entire process. Highly recommended!', + text: 'Managing 20+ client accounts used to be overwhelming. SocialBuddy\'s team collaboration features have streamlined our process.', + image: 'πŸ‘©β€πŸŽ¨' }, { name: 'David Park', role: 'CEO', company: 'StartupHub', - image: 'πŸ‘¨β€πŸ’Ό', - rating: 5, - text: 'The analytics and reporting features are outstanding. We can now make data-driven decisions about our social media strategy. ROI has improved significantly since switching to SocialBuddy.', + text: 'The analytics and reporting features are outstanding. We can now make data-driven decisions about our social media strategy.', + image: 'πŸ‘¨β€πŸ’Ό' }, { name: 'Lisa Thompson', role: 'Influencer', company: 'Lifestyle & Travel', - image: 'πŸ‘©β€πŸ¦°', - rating: 5, - text: 'I love how intuitive SocialBuddy is! The content calendar helps me plan my posts weeks in advance, and the best time to post feature ensures maximum reach. It\'s perfect for influencers!', + text: 'I love how intuitive SocialBuddy is! The content calendar helps me plan my posts weeks in advance.', + image: 'πŸ‘©β€πŸ¦°' }, { name: 'James Wilson', role: 'E-commerce Manager', company: 'ShopSmart', - image: 'πŸ‘¨β€πŸ«', - rating: 5, - text: 'SocialBuddy has helped us maintain a consistent brand presence across all platforms. The bulk scheduling feature is amazing for our product launches. Customer engagement has never been better!', - }, + text: 'SocialBuddy has helped us maintain a consistent brand presence across all platforms. The bulk scheduling feature is amazing.', + image: 'πŸ‘¨β€πŸ«' + } ]; + // Clone the first few items to create the infinite illusion + // We need enough clones to fill the visible area. 4 is safe. + const extendedTestimonials = [...testimonials, ...testimonials.slice(0, 4)]; + const totalOriginal = testimonials.length; + useEffect(() => { const interval = setInterval(() => { - setActiveIndex((current) => (current + 1) % testimonials.length); - }, 5000); + handleNext(); + }, 3000); return () => clearInterval(interval); - }, [testimonials.length]); + }, [activeIndex, isResetting]); // Re-create interval if state changes to avoid stale closures, though functional update handles it. - const handleDotClick = (index: number) => { - setActiveIndex(index); + const handleNext = () => { + if (isResetting) return; + + setActiveIndex((prev) => { + // If we are at the end of the original list (showing the first clone) + // We animate TO the clone. + return prev + 1; + }); + }; + + // Handle seamless reset + useEffect(() => { + if (activeIndex === totalOriginal) { + // We have just slid TO the first cloned item (visually identical to index 0) + // Wait for transition to finish, then snap back to real 0 + timeoutRef.current = setTimeout(() => { + setIsResetting(true); // Disable transition + setActiveIndex(0); // Jump to 0 + + // Re-enable transition after a brief moment to allow DOM update + requestAnimationFrame(() => { + requestAnimationFrame(() => { + setIsResetting(false); + }); + }); + }, 500); // Must match CSS transition duration + } + + return () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current); + }; + }, [activeIndex, totalOriginal]); + + const slideNext = () => { + if (isResetting) return; + setActiveIndex(prev => prev + 1); + }; + + const slidePrev = () => { + if (isResetting) return; + if (activeIndex === 0) { + // Jump to end clone without transition, then slide back + setIsResetting(true); + setActiveIndex(totalOriginal); + requestAnimationFrame(() => { + requestAnimationFrame(() => { + setIsResetting(false); + setActiveIndex(totalOriginal - 1); + }); + }); + } else { + setActiveIndex(prev => prev - 1); + } }; return ( -
-
-
-
- ⭐ - Testimonials +
+
+ {/* Left Side Static Card - High Z-Index */} +
+
+

+ Discover your
+ entrepreneurial potential +

+

+ Join countless marketers and influencers who have transformed their social media presence with SocialBuddy. + Success is just a click away. +

+ +
+
+ πŸ‘₯ +
+ 10,000+ + Happy Users +
+
+
+ ⭐ +
+ 4.9/5 + Ratings +
+
+
+ +
-

- Loved by Thousands of Users -

-

- Don't just take our word for it. See what our customers have to say about SocialBuddy. -

-
-
- {testimonials.map((testimonial, index) => ( -
-
- {[...Array(testimonial.rating)].map((_, i) => ( - ⭐ - ))} -
-

"{testimonial.text}"

-
-
{testimonial.image}
-
-
{testimonial.name}
-
- {testimonial.role} at {testimonial.company} -
+ {/* Right Side Slider - Lower Z-Index, moves behind Left Card */} +
+
+ {extendedTestimonials.map((t, i) => ( +
+
+
{t.image}
+
+

{t.name}

+ {t.company}
+
⭐⭐⭐⭐⭐
+
Amazing Experience!
+

{t.text}

))}
-
-
- {testimonials.map((_, index) => ( + {/* Navigation Arrows */} +
- -
-
-
4.9/5
-
Average Rating
-
-
-
10,000+
-
Happy Customers
-
-
-
98%
-
Satisfaction Rate
+ className={styles.navBtn} + onClick={slidePrev} + aria-label="Previous testimonial" + > + ← + +
diff --git a/components/WhyChooseUs.module.css b/components/WhyChooseUs.module.css new file mode 100644 index 0000000..2831d8b --- /dev/null +++ b/components/WhyChooseUs.module.css @@ -0,0 +1,322 @@ +.section { + padding: 5rem 0; + position: relative; + background: var(--background); + overflow: hidden; +} + +@media (min-width: 768px) { + .section { + padding: 4rem 0; + } +} + +@media (min-width: 1024px) { + .section { + padding: 4rem 0; + } +} + +.header { + text-align: center; + max-width: 800px; + margin: 0 auto 5rem; +} + +.subTitle { + color: #0072b1; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.9rem; + margin-bottom: 1rem; + display: inline-block; +} + +.title { + font-size: clamp(2.5rem, 5vw, 3.5rem); + font-weight: 800; + margin-bottom: 1.5rem; + color: var(--foreground); + line-height: 1.1; +} + +.highlight { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.subtitle { + font-size: 1.2rem; + color: var(--foreground-secondary); + line-height: 1.6; +} + +/* Bento Grid Layout */ +.bentoGrid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; +} + +.bentoItem { + background: var(--card-bg, rgba(255, 255, 255, 0.5)); + border: 1px solid var(--border-color); + border-radius: 24px; + padding: 2rem; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + height: 100%; +} + +.bentoItem:hover { + transform: translateY(-5px); + box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1); + border-color: var(--primary); +} + +.itemContent { + position: relative; + z-index: 2; +} + +.iconWrapper { + width: 50px; + height: 50px; + background: rgba(0, 0, 0, 0.05); + /* Very light gray for icon bg */ + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; + font-size: 1.5rem; +} + +.bentoItem h3 { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.75rem; + color: var(--foreground); +} + +.bentoItem p { + color: var(--foreground-secondary); + line-height: 1.6; + font-size: 1rem; + margin: 0; +} + +/* Desktop Grid Configuration */ +@media (min-width: 1024px) { + .bentoGrid { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 320px); + /* Fixed height rows for bento look */ + gap: 2rem; + } + + .itemLarge { + grid-column: span 2; + } + + /* Specific positioning if needed: + Row 1: Large (AI) | Small (Community) + Row 2: Small (Integrations) | Large (Analytics) + */ + .bentoItem:nth-child(2) { + /* Community */ + grid-column: 3; + grid-row: 1; + } + + .bentoItem:nth-child(3) { + /* Integrations */ + grid-column: 1; + grid-row: 2; + } + + .bentoItem:nth-child(4) { + /* Analytics */ + grid-column: 2 / span 2; + grid-row: 2; + } +} + +/* Tablet Grid */ +@media (min-width: 768px) and (max-width: 1023px) { + .bentoGrid { + grid-template-columns: 1fr 1fr; + gap: 2rem; + } + + .itemLarge { + grid-column: span 2; + } +} + +/* Visuals Styling */ + +/* AI Visual */ +.visualAi { + margin-top: 2rem; + background: #f8fafc; + border-radius: 12px; + padding: 1rem; + border: 1px solid var(--border-color); +} + +.typingBox { + display: flex; + gap: 0.25rem; + margin-bottom: 0.5rem; +} + +.typingDot { + width: 6px; + height: 6px; + background: var(--primary); + border-radius: 50%; + animation: bounce 1.4s infinite ease-in-out both; +} + +.typingDot:nth-child(1) { + animation-delay: -0.32s; +} + +.typingDot:nth-child(2) { + animation-delay: -0.16s; +} + +@keyframes bounce { + + 0%, + 80%, + 100% { + transform: scale(0); + } + + 40% { + transform: scale(1); + } +} + +.aiMessage { + font-size: 0.875rem; + color: var(--foreground); + font-weight: 500; +} + +/* Community Visual */ +.visualCommunity { + flex-grow: 1; + display: flex; + align-items: flex-end; + justify-content: center; + padding-bottom: 1rem; +} + +.avatarStack { + display: flex; + margin-left: 15px; + /* offset for negative margins */ +} + +.avatar { + width: 40px; + height: 40px; + border-radius: 50%; + border: 3px solid white; + background: #ccc; + margin-left: -15px; + /* Placeholder gradients */ +} + +.avatar:nth-child(1) { + background: #FFD700; +} + +.avatar:nth-child(2) { + background: #FF6B6B; +} + +.avatar:nth-child(3) { + background: #4ECDC4; +} + + +/* Integrations Visual */ +.visualIntegrations { + flex-grow: 1; + display: flex; + align-items: flex-end; + justify-content: center; + padding-bottom: 1rem; +} + +.logoGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.miniLogo { + width: 40px; + height: 40px; + background: #f1f5f9; + border-radius: 8px; + border: 1px solid var(--border-color); +} + + +/* Analytics Visual */ +.visualAnalytics { + margin-top: 2rem; + display: flex; + align-items: flex-end; + gap: 1rem; + height: 60px; + padding-left: 1rem; + border-left: 2px solid var(--border-color); + border-bottom: 2px solid var(--border-color); +} + +.graphBar { + width: 30px; + background: linear-gradient(to top, var(--primary), var(--secondary)); + border-radius: 4px 4px 0 0; + transition: height 0.5s ease; +} + +.graphBar:nth-child(1) { + height: 40%; + animation: grow 2s infinite alternate; +} + +.graphBar:nth-child(2) { + height: 70%; + animation: grow 2.5s infinite alternate; + animation-delay: 0.2s; +} + +.graphBar:nth-child(3) { + height: 90%; + animation: grow 1.8s infinite alternate; + animation-delay: 0.4s; +} + +@keyframes grow { + from { + transform: scaleY(0.8); + } + + to { + transform: scaleY(1.1); + } +} \ No newline at end of file diff --git a/components/WhyChooseUs.tsx b/components/WhyChooseUs.tsx new file mode 100644 index 0000000..b772903 --- /dev/null +++ b/components/WhyChooseUs.tsx @@ -0,0 +1,94 @@ +'use client'; + +import styles from './WhyChooseUs.module.css'; + +export default function WhyChooseUs() { + return ( +
+
+
+
Why Choose Us
+

Why SocialBuddy?

+

+ Don't just manage your social mediaβ€”master it. Join thousands of creators and businesses who use SocialBuddy to grow faster. +

+
+ +
+ {/* Item 1: AI Assistant (Large) */} +
+
+
+ ✨ +
+

The Ultimate AI Assistant

+

Generate captions, hashtags, and creative ideas in seconds with our context-aware AI.

+
+
+
+ + + +
+
Content generated! πŸš€
+
+
+ + {/* Item 2: Community (Small) */} +
+
+
+ πŸ‘₯ +
+

Trusted by 50K+

+

Join a community of serious creators.

+
+
+
+
+
+
+
+
+
+ + {/* Item 3: Integrations (Small) */} +
+
+
+ πŸ”Œ +
+

Seamless Sync

+

Works with your favorite tools.

+
+
+
+
+
+
+
+
+
+
+ + {/* Item 4: Analytics (Large) */} +
+
+
+ πŸ“ˆ +
+

Data-Driven Insights

+

Make decisions based on real-time performance data, not guesswork. Track growth instantly.

+
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/data/channels.ts b/data/channels.ts new file mode 100644 index 0000000..e30c280 --- /dev/null +++ b/data/channels.ts @@ -0,0 +1,285 @@ + +export interface ChannelDetail { + title: string; + text: string; + image: string; + reverse: boolean; +} + +export interface ChannelBenefit { + title: string; + description: string; + icon: string; +} + +export interface ChannelAbout { + title: string; + description: string; + subTitle: string; + bulletPoints: { text: string; icon: string }[]; + mainImage: string; + subImage: string; +} + +export interface ChannelTestimonial { + quote: string; + author: string; + role: string; + rating: number; // 1-5 + image: string; +} + +export interface ChannelFAQ { + question: string; + answer: string; +} + +export interface Channel { + slug: string; + title: string; + subtitle: string; + heroImage: string; + description: string; + about: ChannelAbout; + benefits: ChannelBenefit[]; + testimonials: ChannelTestimonial[]; + faqs: ChannelFAQ[]; + details: ChannelDetail[]; +} + +export const channels: Channel[] = [ + { + slug: 'facebook', + title: 'Facebook', + subtitle: 'Master Your Facebook Presence', + heroImage: '/images/channels/facebook-hero.png', + description: 'Schedule posts, analyze performance, and engage with your Facebook community from one dashboard.', + about: { + title: 'Complete Facebook Management', + subTitle: 'Connect & Convert', + description: 'Maximize your Facebook impact. From scheduling regular posts and Stories to analyzing page performance, SocialBuddy gives you the tools to grow your audience and drive engagement on the world\'s largest social network.', + bulletPoints: [ + { text: 'Auto-Schedule Posts', icon: 'Calendar' }, + { text: 'Audience Insights', icon: 'BarChart' }, + { text: 'Community Management', icon: 'Inbox' }, + { text: 'Ad Performance', icon: 'Trophy' } + ], + mainImage: '/images/channels/facebook-about-main.jpg', + subImage: '/images/channels/facebook-about-sub.jpg' + }, + benefits: [ + { title: 'Reels & Stories', description: 'Schedule more than just posts. Plan your Reels and Stories in advance.', icon: 'Smartphone' }, + { title: 'First Comment', description: 'Automatically add the first comment to your posts to boost engagement.', icon: 'Inbox' }, + { title: 'Best Time to Post', description: 'AI-driven insights tell you exactly when your audience is most active.', icon: 'Zap' }, + { title: 'Bulk Upload', description: 'Upload hundreds of posts at once via CSV to fill your calendar instantly.', icon: 'Layout' } + ], + testimonials: [ + { quote: "SocialBuddy helped us double our Facebook reach in just three months. The scheduling tools are a game changer.", author: "Mark Stephens", role: "Social Media Manager", rating: 5, image: "/images/testimonials/mark.jpg" }, + { quote: "I love the analytics. It's so much easier to understand than Facebook's native insights.", author: "Lisa Wong", role: "Digital Marketer", rating: 5, image: "/images/testimonials/lisa.jpg" }, + { quote: "The ability to schedule Reels from my desktop is huge for our workflow.", author: "David Miller", role: "Content Creator", rating: 4, image: "/images/testimonials/david.jpg" }, + { quote: "Great support and solid features. It just works.", author: "Sarah Connor", role: "Small Business Owner", rating: 5, image: "/images/testimonials/sarah.jpg" }, + { quote: "Managing 50+ Facebook pages used to be impossible. Now it's easy.", author: "James Chen", role: "Agency Director", rating: 5, image: "/images/testimonials/james.jpg" } + ], + faqs: [ + { question: "Can I schedule Facebook Groups?", answer: "Yes, you can schedule posts to any Facebook Groups where you are an admin." }, + { question: "Does it support Facebook Reels?", answer: "Absolutely! You can schedule and auto-publish Reels directly." }, + { question: "Can I mention pages in posts?", answer: "Yes, user and page tagging is supported in the composer." } + ], + details: [] + }, + { + slug: 'instagram', + title: 'Instagram', + subtitle: 'Visually Plan Your Grid & Stories', + heroImage: '/images/channels/instagram-hero.png', + description: 'Grow your Instagram following with visual planning, auto-publishing, and detailed analytics.', + about: { + title: 'Your Instagram Aesthetic, Perfected', + subTitle: 'Curate & Create', + description: 'Take the guesswork out of Instagram. Visually plan your grid, schedule Carousels and Reels, and track your growth. SocialBuddy provides everything you need to build a stunning Instagram presence.', + bulletPoints: [ + { text: 'Visual Grid Planner', icon: 'Layout' }, + { text: 'Story Scheduling', icon: 'Smartphone' }, + { text: 'Hashtag Manager', icon: 'Repeat' }, + { text: 'Link in Bio', icon: 'Palette' } + ], + mainImage: '/images/channels/instagram-about-main.jpg', + subImage: '/images/channels/instagram-about-sub.jpg' + }, + benefits: [ + { title: 'Direct Publishing', description: 'Auto-publish images, carousels, and Reels without phone notifications.', icon: 'Zap' }, + { title: 'Grid Preview', description: 'See exactly how your feed will look before you post.', icon: 'Eye' }, + { title: 'Hashtag Suggestions', description: 'Get relevant hashtags to increase discoverability based on your image.', icon: 'ShieldCheck' }, + { title: 'Product Tagging', description: 'Tag products in your posts to drive e-commerce sales directly.', icon: 'Trophy' } + ], + testimonials: [ + { quote: "The visual planner is exactly what I needed. My feed looks so much better now.", author: "Chloe Adams", role: "Influencer", rating: 5, image: "/images/testimonials/chloe.jpg" }, + { quote: "Scheduling Stories has saved me so much time on weekends.", author: "Ryan Brooks", role: "Brand Manager", rating: 5, image: "/images/testimonials/ryan.jpg" }, + { quote: "The analytics for Stories are incredibly detailed.", author: "Emma Watson", role: "Marketing Lead", rating: 4, image: "/images/testimonials/emma.jpg" }, + { quote: "SocialBuddy allows our whole team to collaborate on our Instagram strategy.", author: "Lucas Gray", role: "Creative Director", rating: 5, image: "/images/testimonials/lucas.jpg" }, + { quote: "Best tool for managing multiple Instagram clients.", author: "Sophie Lee", role: "Agency Owner", rating: 5, image: "/images/testimonials/sophie.jpg" } + ], + faqs: [ + { question: "Do you support Collaboration posts?", answer: "Currently, we support scheduling standard posts, carousels, and Reels. Collab posts must be done natively." }, + { question: "Can I schedule the First Comment?", answer: "Yes, you can draft hashtags in your first comment to keep your caption clean." }, + { question: "Is it safe for my account?", answer: "Yes, we use the official Instagram Graph API, so your account is 100% safe." } + ], + details: [] + }, + { + slug: 'linkedin', + title: 'LinkedIn', + subtitle: 'Build Your Professional Brand', + heroImage: '/images/channels/linkedin-hero.png', + description: 'Establish thought leadership and engage with your professional network on LinkedIn.', + about: { + title: 'Professional Growth & Networking', + subTitle: 'Lead & Connect', + description: 'Optimize your LinkedIn strategy for personal branding or company pages. Schedule articles, posts, and PDF carousels to engage your professional network effectively.', + bulletPoints: [ + { text: 'PDF Carousels', icon: 'Layout' }, + { text: 'Company Page Management', icon: 'BarChart' }, + { text: 'Detailed Analytics', icon: 'Zap' }, + { text: 'Post Variations', icon: 'PenTool' } + ], + mainImage: '/images/channels/linkedin-about-main.jpg', + subImage: '/images/channels/linkedin-about-sub.jpg' + }, + benefits: [ + { title: 'PDF Carousel Uploads', description: 'Schedule document posts (PDFs) which perform exceptionally well on LinkedIn.', icon: 'Layout' }, + { title: 'Mention Companies', description: 'Tag other company pages in your posts to increase reach.', icon: 'Inbox' }, + { title: 'Employee Advocacy', description: 'Make it easy for employees to reshare your company content.', icon: 'CheckCircle' }, + { title: 'Targeting Options', description: 'Target specific audiences for your company page updates.', icon: 'ShieldCheck' } + ], + testimonials: [ + { quote: "Our LinkedIn engagement skyrocketed after we started using the PDF carousel scheduler.", author: "Brian K.", role: "B2B Marketer", rating: 5, image: "/images/testimonials/brian.jpg" }, + { quote: "Super reliable tool for managing our corporate LinkedIn page.", author: "Diane S.", role: "Comms Director", rating: 5, image: "/images/testimonials/diane.jpg" }, + { quote: "I schedule a week's worth of personal branding content in 30 minutes.", author: "Gary V.", role: "Entrepreneur", rating: 5, image: "/images/testimonials/gary.jpg" }, + { quote: "Simple, clean interface. Does exactly what it says.", author: "Tom H.", role: "Consultant", rating: 4, image: "/images/testimonials/tomH.jpg" }, + { quote: "The analytics reports are perfect for my monthly client meetings.", author: "Alice M.", role: "Social Manager", rating: 5, image: "/images/testimonials/alice.jpg" } + ], + faqs: [ + { question: "Can I post to personal profiles?", answer: "Yes, both personal profiles and Company Pages are supported." }, + { question: "Can I schedule LinkedIn Articles?", answer: "Currently, we support short-form posts, images, videos, and documents." }, + { question: "Does it support video?", answer: "Yes, you can upload and schedule native video to LinkedIn." } + ], + details: [] + }, + { + slug: 'twitter', + title: 'Twitter (X)', + subtitle: 'Join the Conversation in Real-Time', + heroImage: '/images/channels/twitter-hero.png', + description: 'Manage your Twitter presence with thread scheduling, social listening, and advanced analytics.', + about: { + title: 'Tweet Smarter, Not Harder', + subTitle: 'Engage & Influence', + description: 'Master the art of the tweet. Schedule entire threads, monitor keywords, and engage with trending conversations. SocialBuddy keeps you connected to what\'s happening now.', + bulletPoints: [ + { text: 'Thread Scheduling', icon: 'Repeat' }, + { text: 'Social Listening', icon: 'Inbox' }, + { text: 'Keyword Monitoring', icon: 'Eye' }, + { text: 'Auto-Retweet', icon: 'Repeat' } + ], + mainImage: '/images/channels/twitter-about-main.jpg', + subImage: '/images/channels/twitter-about-sub.jpg' + }, + benefits: [ + { title: 'Thread Creator', description: 'Compose and schedule long threads easily with our dedicated thread maker.', icon: 'PenTool' }, + { title: 'Asset Library', description: 'Save your best GIFs and images to use again and again.', icon: 'Layout' }, + { title: 'Smart Queues', description: 'Automatically recycle your best performing evergreen content.', icon: 'Repeat' }, + { title: 'Geo-Targeting', description: 'Add location tags to your tweets for local relevance.', icon: 'CheckCircle' } + ], + testimonials: [ + { quote: "The thread creator is the best I've used. So intuitive.", author: "Elon M.", role: "Tech Enthusiast", rating: 5, image: "/images/testimonials/elon.jpg" }, + { quote: "Social listening features help us catch customer support issues instantly.", author: "Jenny P.", role: "Support Lead", rating: 5, image: "/images/testimonials/jenny.jpg" }, + { quote: "I've grown my following by 50% just by being more consistent with SocialBuddy.", author: "Tim C.", role: "Influencer", rating: 5, image: "/images/testimonials/tim.jpg" }, + { quote: "Great for managing multiple handles without logging in and out.", author: "Rob S.", role: "Agency Owner", rating: 4, image: "/images/testimonials/rob.jpg" }, + { quote: "Love the dark mode interface!", author: "Anna K.", role: "Developer", rating: 5, image: "/images/testimonials/anna.jpg" } + ], + faqs: [ + { question: "Can I schedule threads?", answer: "Yes! Our thread composer makes it easy to write and schedule long threads." }, + { question: "Is there a limit to tweet length?", answer: "We support the standard 280 characters, plus long-form if you have Premium." }, + { question: "Can I manage DMs?", answer: "Yes, DMs are integrated into the unified Social Inbox." } + ], + details: [] + }, + { + slug: 'tiktok', + title: 'TikTok', + subtitle: 'Trend on TikTok', + heroImage: '/images/channels/tiktok-hero.png', + description: 'Plan, schedule, and analyze your short-form videos to go viral on TikTok.', + about: { + title: 'Dominate Short-Form Video', + subTitle: 'Create & Capture', + description: 'Streamline your TikTok workflow. Plan your content calendar, upload videos from your desktop, and get comprehensive analytics on your video performance.', + bulletPoints: [ + { text: 'Desktop Uploads', icon: 'Smartphone' }, + { text: 'Trend Alerts', icon: 'Zap' }, + { text: 'Engagement Tracking', icon: 'BarChart' }, + { text: 'Sound Sync', icon: 'Layout' } + ], + mainImage: '/images/channels/tiktok-about-main.jpg', + subImage: '/images/channels/tiktok-about-sub.jpg' + }, + benefits: [ + { title: 'Auto-Publishing', description: 'Schedule your TikToks to go live automaticallyβ€”no manual posting needed.', icon: 'Zap' }, + { title: 'Video Analytics', description: 'See which videos are retaining viewership and driving followers.', icon: 'Eye' }, + { title: 'Hashtag Sets', description: 'Save groups of hashtags to quickly add to your captions.', icon: 'Layout' }, + { title: 'Team Review', description: 'Send drafts to your manager for approval before scheduling.', icon: 'Inbox' } + ], + testimonials: [ + { quote: "Finally, I can schedule TikToks from my computer!", author: "Sarah J.", role: "Content Creator", rating: 5, image: "/images/testimonials/sarahj.jpg" }, + { quote: "The analytics are way better than what you get in the app.", author: "Mike T.", role: "Marketer", rating: 5, image: "/images/testimonials/mike.jpg" }, + { quote: "Helped us scale our TikTok production to 3 videos a day.", author: "Team Alpha", role: "Creative Agency", rating: 5, image: "/images/testimonials/alpha.jpg" }, + { quote: "Auto-publishing works seamlessly.", author: "Bella R.", role: "Influencer", rating: 4, image: "/images/testimonials/bella.jpg" }, + { quote: "A must-have for any brand serious about TikTok.", author: "Chris Evans", role: "Media Buyer", rating: 5, image: "/images/testimonials/chris.jpg" } + ], + faqs: [ + { question: "Can I use trending audio?", answer: "Yes, you can verify copyright and trending audio usage within the planner." }, + { question: "Does it support TikTok Stories?", answer: "Not yet, functionality is limited to feed videos currently." }, + { question: "Is there a file size limit?", answer: "We support files up to 1GB, following TikTok's platform guidelines." } + ], + details: [] + }, + { + slug: 'pinterest', + title: 'Pinterest', + subtitle: 'Inspire with Pinterest', + heroImage: '/images/channels/pinterest-hero.png', + description: 'Drive traffic and inspiration with planned Pins and boards.', + about: { + title: 'Visual Discovery Engine', + subTitle: 'Plan & Pin', + description: 'Maximize your Pinterest reach. Design pins, schedule to multiple boards, and analyze click-through rates to drive massive traffic to your site.', + bulletPoints: [ + { text: 'Pin Scheduling', icon: 'Calendar' }, + { text: 'Board Management', icon: 'Layout' }, + { text: 'Traffic Analytics', icon: 'BarChart' }, + { text: 'Visual Search', icon: 'Eye' } + ], + mainImage: '/images/channels/pinterest-about-main.jpg', + subImage: '/images/channels/pinterest-about-sub.jpg' + }, + benefits: [ + { title: 'Board Efficiency', description: 'Pin to multiple boards at once to maximize exposure for each content piece.', icon: 'Layout' }, + { title: 'Pin Creator', description: 'Built-in editor to create vertical graphics optimized for Pinterest.', icon: 'PenTool' }, + { title: 'Evergreen Recycling', description: 'Keep your best pins circulating to drive continuous traffic.', icon: 'Repeat' }, + { title: 'Video Pins', description: 'Schedule video pins to stand out in the feed.', icon: 'Smartphone' } + ], + testimonials: [ + { quote: "Pinterest is our #1 traffic source thanks to SocialBuddy.", author: "Martha S.", role: "Blogger", rating: 5, image: "/images/testimonials/martha.jpg" }, + { quote: "I can schedule a month of pins in an hour. Incredible.", author: "Julia Childs", role: "Chef", rating: 5, image: "/images/testimonials/julia.jpg" }, + { quote: "The best tool for Pinterest managment hands down.", author: "DesignCo", role: "Agency", rating: 5, image: "/images/testimonials/designco.jpg" }, + { quote: "Love the multiple board pinning feature.", author: "Karen", role: "DIY Expert", rating: 5, image: "/images/testimonials/karen.jpg" }, + { quote: "Analytics help me know exactly what my audience wants.", author: "Steve", role: "Woodworker", rating: 4, image: "/images/testimonials/steve.jpg" } + ], + faqs: [ + { question: "How many pins can I schedule?", answer: "Unlimited on the Pro plan!" }, + { question: "Can I edit pin titles?", answer: "Yes, full SEO customization for titles and descriptions." }, + { question: "Do you support Rich Pins?", answer: "Yes, fully compatible with Rich Pin metadata." } + ], + details: [] + } +]; diff --git a/data/features.ts b/data/features.ts new file mode 100644 index 0000000..4338dd5 --- /dev/null +++ b/data/features.ts @@ -0,0 +1,273 @@ +export interface FeatureDetail { + title: string; + text: string; + image: string; + reverse: boolean; +} + +export interface FeatureBenefit { + title: string; + description: string; + icon: string; +} + +export interface FeatureAbout { + title: string; + description: string; + subTitle: string; + bulletPoints: { text: string; icon: string }[]; + mainImage: string; + subImage: string; +} + +export interface FeatureTestimonial { + quote: string; + author: string; + role: string; + rating: number; // 1-5 + image: string; +} + +export interface FeatureFAQ { + question: string; + answer: string; +} + +export interface Feature { + slug: string; + title: string; + subtitle: string; + heroImage: string; + description: string; + about: FeatureAbout; + benefits: FeatureBenefit[]; + testimonials: FeatureTestimonial[]; + faqs: FeatureFAQ[]; + // Keeping details for legacy if needed, or repurposed + details: FeatureDetail[]; +} + +export const features: Feature[] = [ + { + slug: 'publish', + title: 'Publishing', + subtitle: 'Plan, Collaborate, and Publish Compelling Content', + heroImage: '/images/features/publish-hero.jpg', + description: 'Take control of your social media calendar with our powerful publishing tools. Schedule posts for all your channels in one place.', + about: { + title: 'Streamline Your Publishing Workflow', + subTitle: 'Efficiency at Scale', + description: 'Stop wasting time switching between platforms. SocialBuddy\'s publishing tools allow you to craft, schedule, and publish content to Instagram, Facebook, Twitter, LinkedIn, and more from a single dashboard. Collaborate with your team and approve posts with ease.', + bulletPoints: [ + { text: 'Unified Content Calendar', icon: 'Calendar' }, + { text: 'Visual Post Preview', icon: 'Eye' } + ], + mainImage: '/images/features/publish-about-main.jpg', + subImage: '/images/features/publish-about-sub.jpg' + }, + benefits: [ + { title: 'Multi-Channel Scheduling', description: 'Post to Instagram, Facebook, Twitter, LinkedIn, and more simultaneously.', icon: 'πŸ“…' }, + { title: 'Visual Calendar', description: 'Drag and drop your posts to organize your month at a glance.', icon: 'πŸ‘€' }, + { title: 'Best Time to Post', description: 'Our AI suggests the optimal times to tweet or post for maximum engagement.', icon: '⏰' }, + { title: 'Team Collaboration', description: 'Assign roles, leave comments, and approve posts before they go live.', icon: 'πŸ‘₯' } + ], + testimonials: [ + { quote: 'SocialBuddy has completely transformed how we manage our social media. We save at least 10 hours a week on scheduling alone.', author: 'Jessica Miller', role: 'Marketing Director, TechFlow', rating: 5, image: '/images/testimonials/jessica.jpg' }, + { quote: 'The visual calendar is a lifesaver. Being able to see our entire month at a glance makes planning so much easier.', author: 'Tom Harrison', role: 'Social Media Manager, BuzzMedia', rating: 5, image: '/images/testimonials/tom.jpg' }, + { quote: 'Posting to multiple platforms used to be a nightmare. Now it takes seconds.', author: 'Sarah Jenkins', role: 'Content Creator', rating: 4, image: '/images/testimonials/sarah-j.jpg' }, + { quote: 'Our engagement has gone up since we started using the "Best Time to Post" feature. Highly recommend!', author: 'Michael Brown', role: 'Small Business Owner', rating: 5, image: '/images/testimonials/michael.jpg' }, + { quote: 'The collaboration tools are fantastic. My team can review and approve posts without endless email chains.', author: 'Emily Davis', role: 'Agency Owner', rating: 5, image: '/images/testimonials/emily-d.jpg' } + ], + faqs: [ + { question: 'Which platforms do you support?', answer: 'We support Instagram, Facebook, Twitter (X), LinkedIn, Pinterest, and TikTok.' }, + { question: 'Can I schedule stories?', answer: 'Yes, you can schedule Instagram Stories and Facebook Stories directly from the dashboard.' }, + { question: 'Is there a limit to posts?', answer: 'The "Pro" plan includes unlimited scheduling. Standard plans have generous monthly limits.' } + ], + details: [] + }, + { + slug: 'analyze', + title: 'Analytics', + subtitle: 'Measure Your Performance and Grow Your Reach', + heroImage: '/images/features/analyze-hero.jpg', + description: 'Get deep insights into your social media performance. Understand what works and what doesn\'t to optimize your strategy.', + about: { + title: 'Data-Driven Decision Making', + subTitle: 'Unlock Your Potential', + description: 'Go beyond vanity metrics. Our deep analytics platform provides actionable insights into audience behavior, content performance, and ROI. Visualize your growth with custom reports.', + bulletPoints: [ + { text: 'Comprehensive Dashboards', icon: 'BarChart' }, + { text: 'Competitor Benchmarking', icon: 'Trophy' } + ], + mainImage: '/images/features/analyze-about-main.jpg', + subImage: '/images/features/analyze-about-sub.jpg' + }, + benefits: [ + { title: 'In-depth Reporting', description: 'Create beautiful reports to share with your team or clients.', icon: 'πŸ“Š' }, + { title: 'Engagement Metrics', description: 'Track likes, comments, shares, and clicks across all platforms.', icon: 'πŸ“ˆ' }, + { title: 'Audience Demographics', description: 'Know who your followers are and where they come from.', icon: '🌍' }, + { title: 'ROI Tracking', description: 'Connect your social efforts to real business results and revenue.', icon: 'πŸ’°' } + ], + testimonials: [ + { quote: 'The analytics reports are a game changer. I can finally prove the ROI of our social media campaigns to the stakeholders.', author: 'Mark Rutherford', role: 'Social Media Manager, EcoGoods', rating: 5, image: '/images/testimonials/mark.jpg' }, + { quote: 'I love how easy it is to customize the reports. My clients are always impressed.', author: 'Lisa Wong', role: 'Freelance Marketer', rating: 5, image: '/images/testimonials/lisa.jpg' }, + { quote: 'The competitor analysis tool helped us identify a gap in the market we didn\'t know existed.', author: 'James Smith', role: 'Growth Hacker', rating: 4, image: '/images/testimonials/james.jpg' }, + { quote: 'Being able to track conversions from social posts relies helps us budget better.', author: 'Rachel Green', role: 'E-commerce Manager', rating: 5, image: '/images/testimonials/rachel.jpg' }, + { quote: 'The audience insights are incredibly detailed. We refined our persona based on the data.', author: 'Kevin White', role: 'Brand Strategist', rating: 5, image: '/images/testimonials/kevin.jpg' } + ], + faqs: [ + { question: 'How far back does data go?', answer: 'We pull up to 12 months of historical data upon connection.' }, + { question: 'Can I export reports?', answer: 'Yes, you can export reports as PDF or CSV files.' }, + { question: 'Do you track competitors?', answer: 'Yes, you can track key metrics of your top competitors to see how you stack up.' } + ], + details: [] + }, + { + slug: 'engage', + title: 'Engagement', + subtitle: 'Build Stronger Relationships with Your Audience', + heroImage: '/images/features/engage-hero.jpg', + description: 'Never miss a comment or mention. Reply to your community from a single, unified inbox.', + about: { + title: 'Never Miss a Conversation', + subTitle: 'Unified Social Box', + description: 'Managing messages across multiple platforms is chaotic. SocialBuddy brings all your DMs, comments, and mentions into one specific stream, so you can respond faster and build better relationships.', + bulletPoints: [ + { text: 'Centralized Social Inbox', icon: 'Inbox' }, + { text: 'Automated Moderation', icon: 'ShieldCheck' } + ], + mainImage: '/images/features/engage-about-main.jpg', + subImage: '/images/features/engage-about-sub.jpg' + }, + benefits: [ + { title: 'Unified Inbox', description: 'All your conversations from every platform in one stream.', icon: 'πŸ“₯' }, + { title: 'Smart Filtering', description: 'Prioritize important messages and filter out the noise.', icon: 'πŸ”' }, + { title: 'Team Assignment', description: 'Assign conversations to specific team members for faster support.', icon: 'πŸ‘₯' }, + { title: 'Saved Replies', description: 'Respond to common questions instantly with pre-written templates.', icon: '⚑' } + ], + testimonials: [ + { quote: 'Our response time dropped by 60% since switching to SocialBuddy. The unified inbox is a lifesaver for our support team.', author: 'Sarah Chen', role: 'Customer Success Lead, Omni', rating: 5, image: '/images/testimonials/sarah.jpg' }, + { quote: 'I used to miss DMs on Instagram all the time. Now everything is in one place.', author: 'Alex Turner', role: 'Influencer', rating: 4, image: '/images/testimonials/alex.jpg' }, + { quote: 'The ability to assign conversations to different team members is perfect for our workflow.', author: 'Maria Rodriguez', role: 'Support Manager', rating: 5, image: '/images/testimonials/maria.jpg' }, + { quote: 'Saved replies save me so much typing. Support is faster than ever.', author: 'John Doe', role: 'Customer Service', rating: 5, image: '/images/testimonials/john.jpg' }, + { quote: 'It\'s great to see the context of previous conversations when replying to a user.', author: 'Emma Wilson', role: 'Community Manager', rating: 4, image: '/images/testimonials/emma-w.jpg' } + ], + faqs: [ + { question: 'Does it support DMs?', answer: 'Yes, we support Direct Messages for Instagram, Facebook, Twitter, and LinkedIn.' }, + { question: 'Can multiple people work in the inbox?', answer: 'Absolutely. You can see who is typing and assign conversations to avoid overlap.' }, + { question: 'Is it real-time?', answer: 'Yes, messages appear in your inbox instantly.' } + ], + details: [] + }, + { + slug: 'create', + title: 'Create', + subtitle: 'Turn Your Ideas into Eye-Catching Content', + heroImage: '/images/features/create-hero.jpg', + description: 'Design beautiful graphics and write compelling copy without leaving the platform. Your creative studio in the cloud.', + about: { + title: 'Design Made Simple', + subTitle: 'Creative Suite', + description: 'You don\'t need to be a professional designer to create stunning social media posts. With our built-in editor and templates, you can create on-brand content in seconds.', + bulletPoints: [ + { text: 'Drag-and-Drop Editor', icon: 'Palette' }, + { text: 'Thousands of Templates', icon: 'Layout' } + ], + mainImage: '/images/features/create-about-main.jpg', + subImage: '/images/features/create-about-sub.jpg' + }, + benefits: [ + { title: 'Template Library', description: 'Access thousands of professionally designed templates for every occasion.', icon: '🎨' }, + { title: 'Image Editor', description: 'Crop, resize, and filter your images to perfection.', icon: '✏️' }, + { title: 'Asset Manager', description: 'Store and organize your brand assets, logos, and images.', icon: 'πŸ“' }, + { title: 'Canva Integration', description: 'Connect your Canva account to access your designs seamlessly.', icon: 'πŸ–ŒοΈ' } + ], + testimonials: [ + { quote: 'I used to struggle with designing posts. The templates in SocialBuddy make it look like we hired a professional agency.', author: 'Mike Ross', role: 'Founder, StartupX', rating: 4, image: '/images/testimonials/mike.jpg' }, + { quote: 'The image editor is surprisingly powerful. I rarely need to open Photoshop anymore.', author: 'Jenny Lee', role: 'Graphic Designer', rating: 5, image: '/images/testimonials/jenny.jpg' }, + { quote: 'Having all our assets in one place makes brand consistency so much easier.', author: 'David Clark', role: 'Brand Manager', rating: 5, image: '/images/testimonials/david-c.jpg' }, + { quote: 'The Canva integration is seamless. Best of both worlds.', author: 'Sophie Turner', role: 'Social Media Intern', rating: 5, image: '/images/testimonials/sophie.jpg' }, + { quote: 'Great selection of templates for holidays and special events.', author: 'Chris Evans', role: 'Event Coordinator', rating: 4, image: '/images/testimonials/chris.jpg' } + ], + faqs: [ + { question: 'Can I upload my own fonts?', answer: 'Yes, Pro plans allow font uploads to keep your designs on-brand.' }, + { question: 'Are the stock photos free?', answer: 'We provide access to millions of royalty-free images via Unsplash and Pexels integration.' }, + { question: 'Can I save my brand colors?', answer: 'Yes, you can set up a Brand Kit with your colors and logos.' } + ], + details: [] + }, + { + slug: 'start-page', + title: 'Start Page', + subtitle: 'Your Link-in-Bio, Reimagined', + heroImage: '/images/features/start-page-hero.jpg', + description: 'Create a beautiful, mobile-friendly landing page for your social bio. Drive traffic to your most important links.', + about: { + title: 'One Link to Rule Them All', + subTitle: 'Link-in-Bio Solution', + description: 'Maximize the potential of your bio link. Create a micro-landing page that directs your followers to your latest content, products, and sign-up forms.', + bulletPoints: [ + { text: 'Mobile Optimized', icon: 'Smartphone' }, + { text: 'No Coding Required', icon: 'Zap' } + ], + mainImage: '/images/features/startpage-about-main.jpg', + subImage: '/images/features/startpage-about-sub.jpg' + }, + benefits: [ + { title: 'Customizable Design', description: 'Match your Start Page to your brand with custom colors and layouts.', icon: '✨' }, + { title: 'Track Clicks', description: 'See which links are getting the most attention with built-in analytics.', icon: 'πŸ‘†' }, + { title: 'Schedule Links', description: 'Schedule links to appear and disappear to match your campaigns.', icon: '⏲️' }, + { title: 'Email Capture', description: 'Collect emails directly from your bio link with integrated forms.', icon: 'πŸ“§' } + ], + testimonials: [ + { quote: 'Our click-through rate from Instagram doubled after setting up our Start Page. It is so easy to update.', author: 'Emily White', role: 'Blogger & Influencer', rating: 5, image: '/images/testimonials/emily.jpg' }, + { quote: 'It looks so much better than the other link-in-bio tools I\'ve tried. Very professional.', author: 'Ryan Reynolds', role: 'Actor & Entrepreneur', rating: 5, image: '/images/testimonials/ryan.jpg' }, + { quote: 'I love that I can capture emails directly from my bio link.', author: 'Sarah Connor', role: 'Newsletter Creator', rating: 4, image: '/images/testimonials/sarah-c.jpg' }, + { quote: 'The analytics help me understand what my audience is actually interested in.', author: 'Tom Hardy', role: 'Digital Marketer', rating: 5, image: '/images/testimonials/tom-h.jpg' }, + { quote: 'Super easy to set up. I was up and running in 5 minutes.', author: 'Anna Kendrick', role: 'Musician', rating: 5, image: '/images/testimonials/anna.jpg' } + ], + faqs: [ + { question: 'Can I use a custom domain?', answer: 'Yes, you can connect your own domain name to your Start Page.' }, + { question: 'Is it mobile responsive?', answer: '100%. It is designed specifically for mobile users.' }, + { question: 'How many links can I add?', answer: 'Unlimited! Add as many links, videos, and buttons as you need.' } + ], + details: [] + }, + { + slug: 'ai-assistant', + title: 'AI Assistant', + subtitle: 'Your Personal Social Media Copywriter', + heroImage: '/images/features/ai-assistant-hero.jpg', + description: 'Generate endless content ideas, write engaging captions, and repurpose content with the power of AI.', + about: { + title: 'Creativity on Demand', + subTitle: 'Powered by AI', + description: 'Writer\'s block is a thing of the past. Our AI Assistant helps you brainstorm ideas, write captions, and even repurpose long-form content into social posts in seconds.', + bulletPoints: [ + { text: 'Smart Caption Writer', icon: 'PenTool' }, + { text: 'Content Repurposing', icon: 'Repeat' } + ], + mainImage: '/images/features/ai-about-main.jpg', + subImage: '/images/features/ai-about-sub.jpg' + }, + benefits: [ + { title: 'Idea Generator', description: 'Never run out of things to post. Get fresh ideas tailored to your niche.', icon: 'πŸ’‘' }, + { title: 'Caption Writer', description: 'Instantly generate catchy captions with emojis and hashtags.', icon: '✍️' }, + { title: 'Content Repurposing', description: 'Turn a blog post into a thread or an Instagram caption in seconds.', icon: 'πŸ”„' }, + { title: 'Tone Adjustment', description: 'Rewrite content to sound professional, funny, or urgent.', icon: '🎭' } + ], + testimonials: [ + { quote: 'The AI Assistant is like having a copywriter on staff 24/7. It saves me so much time coming up with captions.', author: 'David Kim', role: 'Content Creator', rating: 5, image: '/images/testimonials/david.jpg' }, + { quote: 'I was skeptical at first, but the quality of the writing is shockingly good.', author: 'Jessica Alba', role: 'Business Owner', rating: 5, image: '/images/testimonials/jessica-a.jpg' }, + { quote: 'It helps me repurpose my blog posts into social content in seconds. Huge time saver.', author: 'Tim Cook', role: 'Tech Blogger', rating: 4, image: '/images/testimonials/tim.jpg' }, + { quote: 'The idea generator is great for when I\'m feeling stuck.', author: 'Lisa Su', role: 'CEO', rating: 5, image: '/images/testimonials/lisa-s.jpg' }, + { quote: 'A must-have tool for any social media manager handling multiple accounts.', author: 'Satya Nadella', role: 'Marketing Lead', rating: 5, image: '/images/testimonials/satya.jpg' } + ], + faqs: [ + { question: 'Is the content unique?', answer: 'Yes, the AI generates unique content based on your prompts.' }, + { question: 'Which languages are supported?', answer: 'We support over 25 languages including English, Spanish, French, and German.' }, + { question: 'Do I need a separate subscription?', answer: 'AI Assistant is included in all Pro and Business plans.' } + ], + details: [] + } +]; diff --git a/data/resources.ts b/data/resources.ts new file mode 100644 index 0000000..c0d6608 --- /dev/null +++ b/data/resources.ts @@ -0,0 +1,399 @@ + +export interface ResourcePost { + id: string; + slug: string; + featureSlug: string; + title: string; + excerpt: string; + image: string; + date: string; + author: string; + category: string; + content: string; // Added full content field +} + +export const resources: ResourcePost[] = [ + // Publish (1-3) + { + id: '1', + slug: 'mastering-social-media-scheduling', + featureSlug: 'publish', + title: 'Mastering Social Media Scheduling for 2025', + excerpt: 'Learn the secrets to efficient content planning and how to save hours every week.', + image: '/images/about/workspace.png', + date: 'Dec 15, 2025', + author: 'Sarah Johnson', + category: 'Strategy', + content: ` +

Why Scheduling Matters

+

In the fast-paced world of social media, consistency is key. Scheduling your posts ensures that your audience sees your content regularly, keeping your brand top-of-mind. It allows you to plan your content mix strategically, rather than posting reactively.

+

1. Plan Ahead

+

Start by creating a content calendar. Map out your key themes, holidays, and promotional events. This gives you a roadmap to follow and prevents the dreaded "what do I post today?" panic.

+

2. Batch Your Content Creation

+

Dedicate specific blocks of time to create content. Write captions, design graphics, and edit videos in batches. This is far more efficient than task-switching every day.

+

3. Use the Right Tools

+

Tools like SocialBuddy allow you to schedule posts across multiple platforms from a single dashboard. Utilize features like visual calendars and drag-and-drop scheduling to streamline your workflow.

+

Conclusion

+

Mastering scheduling is about working smarter, not harder. By planning ahead and using the right tools, you can maintain a consistent presence while freeing up time to engage with your community.

+ ` + }, + { + id: '2', + slug: 'best-times-to-post-instagram', + featureSlug: 'publish', + title: 'The Best Times to Post on Instagram', + excerpt: 'Data-backed insights on when your audience is most active and likely to engage.', + image: '/images/about/team-meeting.png', + date: 'Dec 12, 2025', + author: 'Mike Chen', + category: 'Guides', + content: ` +

Understanding Instagram's Algorithm

+

The Instagram algorithm favors recency. Posting when your followers are online increases the chances of your content being seen and engaged with early on, which signals to the algorithm that your post is high-quality.

+

General Best Times

+
    +
  • Weekdays: Early morning (6 AM - 9 AM) and evening (5 PM - 8 PM) tend to perform well as people commute or unwind.
    • +
  • Weekends: Engagement can be lower, but late mornings often see a spike.
    • +
+

Finding Your Unique Best Time

+

While general benchmarks are helpful, every audience is different. Use SocialBuddy's analytics to see exactly when your specific followers are active. Look for heatmaps in your insights dashboard.

+

Testing and Iterating

+

Don't set it and forget it. Consumer behaviors change. regularly review your analytics and adjust your posting schedule accordingly to maximize reach.

+ ` + }, + { + id: '3', + slug: 'content-calendar-templates', + featureSlug: 'publish', + title: '5 Content Calendar Templates You Need', + excerpt: 'Downloadable templates to help you organize your social media strategy effectively.', + image: '/images/about/app-dashboard.png', + date: 'Dec 10, 2025', + author: 'Emma Davis', + category: 'Resources', + content: ` +

Organize Your Strategy

+

A content calendar is more than just a schedule; it's a strategic tool. It helps you ensure a balanced mix of content types (educational, entertaining, promotional) and keeps your team aligned.

+

Template 1: Monthly Overview

+

Great for high-level planning. Map out big campaigns, holidays, and key dates.

+

Template 2: Weekly Detailed Grid

+

Drill down into specific copy, assets, and hashtags for each post. Perfect for approval workflows.

+

Template 3: Stories Planner

+

Don't forget Stories! Plan your daily narratives and engagement stickers to keep your audience hooked.

+

How to Use These Templates

+

Customize them to fit your workflow. Add columns for status (Draft, Approved, Scheduled) and platform-specific requirements. Consistent use is the secret to success.

+ ` + }, + + // Analyze (4-6) + { + id: '4', + slug: 'understanding-social-metrics', + featureSlug: 'analyze', + title: 'Understanding Key Social Media Metrics', + excerpt: 'Reach, impressions, engagement rate - what do they really mean for your business?', + image: '/images/about/workspace.png', + date: 'Dec 14, 2025', + author: 'David Wilson', + category: 'Analytics', + content: ` +

Metrics That Matter

+

It's easy to get lost in data. Focusing on the right metrics is crucial for understanding your true performance and ROI.

+

Reach vs. Impressions

+

Reach is the number of unique people who saw your content. Impressions is the total number of times your content was displayed. If impressions are much higher than reach, it means your audience is seeing your content multiple times.

+

Engagement Rate

+

This is often the most important metric. It measures interaction (likes, comments, shares) relative to your follower count or reach. A high engagement rate indicates highly relevant content.

+

Actionable Insights

+

Don't just track numbers; look for trends. Did a specific topic drive higher engagement? Did a certain time of day boost reach? Use these insights to refine your future content strategy.

+ ` + }, + { + id: '5', + slug: 'roi-social-media-marketing', + featureSlug: 'analyze', + title: 'How to Calculate ROI for Social Media', + excerpt: 'Prove the value of your social media efforts with these calculation methods.', + image: '/images/about/team-meeting.png', + date: 'Dec 08, 2025', + author: 'Sarah Johnson', + category: 'Business', + content: ` +

Defining Social ROI

+

Return on Investment (ROI) measures the efficiency of your social media marketing. It answers the question: "What are we getting back for the time and money we put in?"

+

The Formula

+

Basic ROI = (Value derived from social media - Cost of social media marketing) / Cost of social media marketing * 100.

+

Attribution Models

+

Tracking the "value" can be tricky. Use UTM parameters and conversion tracking pixels to attribute website sales or leads directly to your social posts. SocialBuddy's advanced analytics can help visualize this journey.

+

Beyond Monetary ROI

+

Not all value is immediate revenue. Brand awareness, customer loyalty, and sentiment are valuable long-term assets that should also be considered in your overall evaluation.

+ ` + }, + { + id: '6', + slug: 'creating-custom-reports', + featureSlug: 'analyze', + title: 'Creating Reports Clients Actually Read', + excerpt: 'Tips for designing clear, impactful social media reports that showcase your success.', + image: '/images/about/app-dashboard.png', + date: 'Dec 05, 2025', + author: 'Mike Chen', + category: 'Reporting', + content: ` +

The Art of Reporting

+

Data is useless if it's not communicated effectively. Your clients or stakeholders don't have time to wade through spreadsheets. They want the headline news.

+

1. Focus on Goals

+

Align your report with the initial business objectives. If the goal was brand awareness, highlight reach and impressions. If it was sales, focus on clicks and conversions.

+

2. Visualize the Data

+

Use charts and graphs to make trends instantly understandable. A line graph showing follower growth is far more impactful than a table of numbers.

+

3. Add Context

+

Numbers need narrative. Explain why a spike occurred (e.g., "Viral post on Tuesday") and what you're doing to replicate it. This adds expert value to your report.

+ ` + }, + + // Engage (7-9) + { + id: '7', + slug: 'community-management-best-practices', + featureSlug: 'engage', + title: 'Community Management Best Practices', + excerpt: 'How to build a loyal community by engaging authentically with your followers.', + image: '/images/about/workspace.png', + date: 'Dec 13, 2025', + author: 'Emma Davis', + category: 'Community', + content: ` +

Building Relationships

+

Community management is the human face of your brand. It's about two-way conversation, not just broadcasting messages.

+

Be Responsive

+

Speed matters. Acknowledge comments and questions quickly. Even a simple "like" shows that you are listening and value their input.

+

Authenticity Wins

+

Ditch the corporate robot speak. Use a conversational tone that matches your brand personality. People connect with people, not logos.

+

Encourage User-Generated Content (UGC)

+

Celebrate your community by sharing their content. It builds loyalty and provides you with authentic social proof. Always ask for permission and credit the creator!

+ ` + }, + { + id: '8', + slug: 'managing-negative-comments', + featureSlug: 'engage', + title: 'Handling Negative Comments Like a Pro', + excerpt: 'A guide to crisis management and turning unhappy customers into brand advocates.', + image: '/images/about/team-meeting.png', + date: 'Dec 09, 2025', + author: 'David Wilson', + category: 'Crisis Mgmt', + content: ` +

Keep Calm and Carry On

+

Negative feedback is inevitable. How you handle it defines your brand's reputation. Never delete negative comments (unless they are hate speech), as this can escalate the situation.

+

The 3 A's: Acknowledge, Apologize, Act

+
    +
  • Acknowledge: Let them know they've been heard immediately.
    • +
  • Apologize: If you messed up, own it sincerely.
    • +
  • Act: Move the conversation to a private channel (DM or email) to resolve the issue specific details.
    • +
+

Turning It Around

+

A resolved complaint can turn a critic into a fan. Showing that you care enough to fix a problem publicly demonstrates strong customer service to everyone else watching.

+ ` + }, + { + id: '9', + slug: 'social-listening-guide', + featureSlug: 'engage', + title: 'The Ultimate Guide to Social Listening', + excerpt: 'Monitor brand mentions and industry trends to stay ahead of the conversation.', + image: '/images/about/app-dashboard.png', + date: 'Dec 03, 2025', + author: 'Sarah Johnson', + category: 'Listening', + content: ` +

What is Social Listening?

+

Social monitoring looks at what people are saying to you. Social listening looks at what people are saying about you, your competitors, and your industry.

+

Why It's Critical

+

It helps you find un-tagged mentions of your brand (opportunities to surprise and delight), identify gaps in the market that competitors are missing, and spot potential PR crises before they blow up.

+

Tools of the Trade

+

Use SocialBuddy's listening features to track specific keywords and hashtags. Analyze sentiment to gauge how people feel about these topics, not just volume.

+ ` + }, + + // Create (10-12) + { + id: '10', + slug: 'design-tips-non-designers', + featureSlug: 'create', + title: 'Graphic Design Tips for Non-Designers', + excerpt: 'Create professional-looking graphics using simple principles and tools.', + image: '/images/about/workspace.png', + date: 'Dec 11, 2025', + author: 'Mike Chen', + category: 'Design', + content: ` +

Keep It Simple

+

You don't need a degree in art to create stunning visuals. The biggest mistake beginners make is overcrowding their designs.

+

Hierarchy and Contrast

+

Make sure the most important element (usually the headline) stands out. Use size and color contrast to guide the viewer's eye. Dark text on a light background (or vice-versa) ensures readability.

+

Consistency is Key

+

Stick to a defined color palette and 1-2 font families. This creates visual recognition for your brand over time. Use templates to ensure every post feels like "you".

+ ` + }, + { + id: '11', + slug: 'video-content-trends', + featureSlug: 'create', + title: 'Video Content Trends for 2025', + excerpt: 'Short-form video is king. Here is how to leverage Reels and TikToks.', + image: '/images/about/team-meeting.png', + date: 'Dec 07, 2025', + author: 'Emma Davis', + category: 'Video', + content: ` +

The Vertical Revolution

+

9:16 vertical video is now the dominant format across social media. TikTok, Instagram Reels, and YouTube Shorts are prioritizing this content.

+

Authenticity > Production Value

+

Audiences are tired of overly polished, TV-style ads. Raw, behind-the-scenes, and "lo-fi" content often performs better because it feels more genuine and relatable.

+

Short and Snappy

+

Hook your viewer in the first 3 seconds. Keep edits fast-paced. Use trending audio to piggyback on viral momentum, but always add your unique spin.

+ ` + }, + { + id: '12', + slug: 'writing-engaging-captions', + featureSlug: 'create', + title: 'Writing Captions That Drive Action', + excerpt: 'Copywriting formulas to boost engagement and click-through rates.', + image: '/images/about/app-dashboard.png', + date: 'Dec 02, 2025', + author: 'David Wilson', + category: 'Content', + content: ` +

The Hook

+

Captions are often an afterthought, but they are crucial for stopping the scroll. Your first sentence is your headlineβ€”make it intriguing.

+

The AIDA Formula

+
    +
  • Attention: Grab them with a question or bold statement.
    • +
  • Interest: Build curiosity or relate to a pain point.
    • +
  • Desire: Offer a solution or benefit.
    • +
  • Action: Tell them exactly what to do next (CTA).
    • +
+

Format for readability

+

Break up big blocks of text with line breaks and emojis. This makes your caption easier to scan and less intimidating to read.

+ ` + }, + + // Start Page (13-15) + { + id: '13', + slug: 'optimizing-link-in-bio', + featureSlug: 'start-page', + title: 'Optimizing Your Link-in-Bio', + excerpt: 'Make the most of that single link. Strategies to drive traffic where it matters.', + image: '/images/about/workspace.png', + date: 'Dec 14, 2025', + author: 'Sarah Johnson', + category: 'Growth', + content: ` +

One Link to Rule Them All

+

Platforms like Instagram and TikTok give you limited real estate for links. A "Start Page" or "Link in Bio" tool is essential to bridge the gap between social media and your conversion goals.

+

Prioritize Your Links

+

Don't overwhelm visitors with 50 options. Put your most important goal (Buy Now, Sign Up, Latest Blog) at the very top. Use visual cues or animations to highlight priority links.

+

Branding Matters

+

Your Link-in-Bio page should look like an extension of your website. Customize colors, fonts, and backgrounds to maintain a seamless brand experience.

+ ` + }, + { + id: '14', + slug: 'landing-page-conversion', + featureSlug: 'start-page', + title: 'Landing Page Conversion Hacks', + excerpt: 'Simple tweaks to your Start Page that can double your click-through rate.', + image: '/images/about/team-meeting.png', + date: 'Dec 06, 2025', + author: 'Mike Chen', + category: 'Conversion', + content: ` +

Speed Kills (Bounce Rates)

+

If your landing page loads slowly, users will leave. Ensure your Start Page is optimized for mobile speed, as the vast majority of traffic comes from phones.

+

Clear Value Proposition

+

Within seconds, a user should know exactly who you are and what you offer. Use a clear, concise bio description and professional profile picture.

+

Reduce Friction

+

Minimize the number of clicks required to take action. If you want email signups, embed the form directly on your Start Page rather than linking out to another page.

+ ` + }, + { + id: '15', + slug: 'personal-branding-tips', + featureSlug: 'start-page', + title: 'Personal Branding on Social Media', + excerpt: 'How a curated Start Page strengthens your personal brand identity.', + image: '/images/about/app-dashboard.png', + date: 'Dec 01, 2025', + author: 'Emma Davis', + category: 'Branding', + content: ` +

You Are the Brand

+

In the creator economy, your personal brand is your greatest asset. It's the unique combination of your skills, experience, and personality.

+

Curating Your Digital Home

+

Think of your Start Page as your digital business card. It organizes your various "side hustles," content channels, and contact info into one professional hub.

+

Consistency Across Channels

+

Ensure your Start Page aligns with the aesthetic of your social profiles. If your Instagram is minimalist and black/white, don't make your Start Page neon rainbow (unless that's the vibe!). Consistency builds trust.

+ ` + }, + + // AI Assistant (16-18) + { + id: '16', + slug: 'ai-for-content-creation', + featureSlug: 'ai-assistant', + title: 'AI for Content Creation: A Guide', + excerpt: 'How to use AI tools to brainstorm, draft, and refine your social media content.', + image: '/images/about/workspace.png', + date: 'Dec 13, 2025', + author: 'David Wilson', + category: 'AI', + content: ` +

The AI Assistant

+

AI isn't here to replace creativity; it's here to amplify it. It helps overcome the blank page syndrome that plagues every content creator.

+

Ideation and Brainstorming

+

Use AI to generate topic ideas, headlines, or campaign angles. Ask it: "Give me 10 tweet ideas about [Topic]" or "What are common pain points for [Audience]?" to jumpstart your process.

+

Repurposing Content

+

Feed an old blog post into an AI tool and ask it to summarize it into a Linkedin post, a Twitter thread, and an Instagram caption. This multiplies the value of your existing content effortlessly.

+ ` + }, + { + id: '17', + slug: 'future-of-marketing-ai', + featureSlug: 'ai-assistant', + title: 'The Future of Marketing with AI', + excerpt: 'Predictions on how artificial intelligence will shape the marketing landscape.', + image: '/images/about/team-meeting.png', + date: 'Dec 08, 2025', + author: 'Sarah Johnson', + category: 'Trends', + content: ` +

Hyper-Personalization

+

AI will enable marketing at a scale of one. Instead of broad segments, brands will be able to deliver unique messages, images, and offers tailored to individual user behavior in real-time.

+

Predictive Analytics

+

AI will get better at predicting what customers want before they know it themselves. By analyzing vast datasets, it can forecast trends and consumer shifts with uncanny accuracy.

+

Automated Optimization

+

Campaigns will self-correct in real-time. AI will adjust ad spend, creative elements, and targeting parameters 24/7 to maximize ROI, far faster than any human could.

+ ` + }, + { + id: '18', + slug: 'humanizing-ai-content', + featureSlug: 'ai-assistant', + title: 'Humanizing AI-Generated Content', + excerpt: 'Tips to ensure your AI-assisted posts still sound like you.', + image: '/images/about/app-dashboard.png', + date: 'Dec 04, 2025', + author: 'Mike Chen', + category: 'Strategy', + content: ` +

The Uncanny Valley

+

Generic AI copy reads... like AI. It's often flat, repetitive, and lacks nuance. To thrive, you must inject the "human element."

+

Edit ruthlessly

+

Treat AI output as a rough draft, never the final product. Add your own anecdotes, idioms, and unique tone of voice. Verify facts, as AI can "hallucinate" information.

+

Emotional Resonance

+

AI struggles with genuine emotion and empathy. Focus your editing on connecting with the reader's feelings. That specific, relatable detail is what makes content stick.

+ ` + } +]; diff --git a/package-lock.json b/package-lock.json index c2516c8..bfa8306 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "socialbuddy-temp", "version": "0.1.0", "dependencies": { + "lucide-react": "^0.561.0", "next": "16.0.8", "react": "19.2.1", "react-dom": "19.2.1" @@ -4834,6 +4835,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.561.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.561.0.tgz", + "integrity": "sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.21", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", diff --git a/package.json b/package.json index 5dc792d..b7600c4 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "eslint" }, "dependencies": { + "lucide-react": "^0.561.0", "next": "16.0.8", "react": "19.2.1", "react-dom": "19.2.1" diff --git a/public/about-image-2.png b/public/about-image-2.png new file mode 100644 index 0000000..0bc78bf Binary files /dev/null and b/public/about-image-2.png differ diff --git a/public/about-image.png b/public/about-image.png new file mode 100644 index 0000000..f9ab797 Binary files /dev/null and b/public/about-image.png differ diff --git a/public/cta-dashboard.png b/public/cta-dashboard.png new file mode 100644 index 0000000..9c98d50 Binary files /dev/null and b/public/cta-dashboard.png differ diff --git a/public/device-mockup.png b/public/device-mockup.png new file mode 100644 index 0000000..5e66a21 Binary files /dev/null and b/public/device-mockup.png differ diff --git a/public/faq-illustration.png b/public/faq-illustration.png new file mode 100644 index 0000000..7094b1f Binary files /dev/null and b/public/faq-illustration.png differ diff --git a/public/faq-workspace.jpg b/public/faq-workspace.jpg new file mode 100644 index 0000000..2a32040 Binary files /dev/null and b/public/faq-workspace.jpg differ diff --git a/public/features/ai.png b/public/features/ai.png new file mode 100644 index 0000000..2ddf91d Binary files /dev/null and b/public/features/ai.png differ diff --git a/public/features/analytics.png b/public/features/analytics.png new file mode 100644 index 0000000..3bc818d Binary files /dev/null and b/public/features/analytics.png differ diff --git a/public/features/platforms.png b/public/features/platforms.png new file mode 100644 index 0000000..7cc8268 Binary files /dev/null and b/public/features/platforms.png differ diff --git a/public/features/scheduling.png b/public/features/scheduling.png new file mode 100644 index 0000000..3e72c61 Binary files /dev/null and b/public/features/scheduling.png differ diff --git a/public/hero-inner-bg.png b/public/hero-inner-bg.png new file mode 100644 index 0000000..217bd42 Binary files /dev/null and b/public/hero-inner-bg.png differ diff --git a/public/hero-slide-1.png b/public/hero-slide-1.png new file mode 100644 index 0000000..55f4092 Binary files /dev/null and b/public/hero-slide-1.png differ diff --git a/public/hero-slide-2.png b/public/hero-slide-2.png new file mode 100644 index 0000000..98930f6 Binary files /dev/null and b/public/hero-slide-2.png differ diff --git a/public/hero-slide-3.png b/public/hero-slide-3.png new file mode 100644 index 0000000..14cf454 Binary files /dev/null and b/public/hero-slide-3.png differ diff --git a/public/images/about/app-dashboard.png b/public/images/about/app-dashboard.png new file mode 100644 index 0000000..c2555cd Binary files /dev/null and b/public/images/about/app-dashboard.png differ diff --git a/public/images/about/team-meeting.png b/public/images/about/team-meeting.png new file mode 100644 index 0000000..9e982cc Binary files /dev/null and b/public/images/about/team-meeting.png differ diff --git a/public/images/about/workspace.png b/public/images/about/workspace.png new file mode 100644 index 0000000..0143d19 Binary files /dev/null and b/public/images/about/workspace.png differ diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..092bd28 Binary files /dev/null and b/public/logo.png differ diff --git a/public/rocket-logo.png b/public/rocket-logo.png new file mode 100644 index 0000000..6864ad7 Binary files /dev/null and b/public/rocket-logo.png differ