first commit
This commit is contained in:
Alaguraj0361
parent
3d3ba5c774
commit
25f0dc624f
95
COLOR_SCHEME_UPDATE.md
Normal file
95
COLOR_SCHEME_UPDATE.md
Normal file
@ -0,0 +1,95 @@
|
||||
# Color Scheme Update - Pink & Blue Theme
|
||||
|
||||
## Overview
|
||||
The entire website theme has been updated to use **Pink as Primary** and **Blue as Secondary** colors, replacing the previous purple-pink scheme.
|
||||
|
||||
## New Color Palette
|
||||
|
||||
### Primary Colors (Pink)
|
||||
- **Primary**: `#ec4899` (Hot Pink)
|
||||
- **Primary Dark**: `#db2777` (Deep Pink)
|
||||
- **Primary Light**: `#f472b6` (Light Pink)
|
||||
|
||||
### Secondary Colors (Blue)
|
||||
- **Secondary**: `#3b82f6` (Bright Blue)
|
||||
- **Secondary Dark**: `#2563eb` (Deep Blue)
|
||||
- **Secondary Light**: `#60a5fa` (Light Blue)
|
||||
|
||||
### Accent Colors (Unchanged)
|
||||
- **Accent**: `#14b8a6` (Teal)
|
||||
- **Accent Dark**: `#0d9488` (Dark Teal)
|
||||
|
||||
## Updated Gradients
|
||||
|
||||
All gradients now flow from **Pink → Blue**:
|
||||
|
||||
1. **Primary Gradient**: `linear-gradient(135deg, #ec4899 0%, #3b82f6 100%)`
|
||||
2. **Secondary Gradient**: `linear-gradient(135deg, #f472b6 0%, #60a5fa 100%)`
|
||||
3. **Accent Gradient**: `linear-gradient(135deg, #db2777 0%, #2563eb 100%)`
|
||||
4. **Hero Gradient**: `linear-gradient(135deg, #ec4899 0%, #db2777 30%, #3b82f6 70%, #2563eb 100%)`
|
||||
|
||||
## Files Updated
|
||||
|
||||
### Core Design System
|
||||
- ✅ `app/globals.css` - Root CSS variables and color definitions
|
||||
|
||||
### Component Styles
|
||||
- ✅ `components/Hero.module.css` - Hero section background, orbs, and button shadows
|
||||
- ✅ `components/Pricing.module.css` - Popular card gradient
|
||||
- ✅ `components/CTA.module.css` - CTA card shadow
|
||||
- ✅ `components/Testimonials.module.css` - Badge gradients
|
||||
- ✅ `components/HowItWorks.module.css` - Badge and step content gradients
|
||||
- ✅ `components/FAQ.module.css` - Badge, hover effects, and CTA box gradients
|
||||
|
||||
### Page Styles
|
||||
- ✅ `app/contact/contact.module.css` - Hero, social icons, focus states, quick links
|
||||
- ✅ `app/about/about.module.css` - Hero, values section, timeline, CTA section
|
||||
|
||||
## Visual Changes
|
||||
|
||||
### Hero Section
|
||||
- Background gradient now flows from pink to blue
|
||||
- Gradient orbs updated: Orb 1 (pink), Orb 2 (blue)
|
||||
- Primary CTA button shadow uses pink glow
|
||||
- Badge pulse animation uses pink shadow
|
||||
|
||||
### Components
|
||||
- All section badges now use pink-to-blue gradient backgrounds
|
||||
- Card hover effects use pink shadows instead of purple
|
||||
- Popular pricing card has subtle pink-to-blue gradient background
|
||||
- CTA sections feature the new pink-to-blue gradient theme
|
||||
|
||||
### Interactive Elements
|
||||
- Focus states on form inputs use pink glow
|
||||
- Button hover effects use pink shadows
|
||||
- Gradient text elements flow from pink to blue
|
||||
|
||||
## Color Usage Guidelines
|
||||
|
||||
### When to Use Pink (Primary)
|
||||
- Primary CTA buttons
|
||||
- Important highlights and accents
|
||||
- Active states
|
||||
- Primary icons and badges
|
||||
- Main brand elements
|
||||
|
||||
### When to Use Blue (Secondary)
|
||||
- Secondary buttons
|
||||
- Supporting elements
|
||||
- Complementary accents
|
||||
- Gradient endpoints
|
||||
- Alternative highlights
|
||||
|
||||
### Gradient Direction
|
||||
All gradients should flow from **Pink (left/top) → Blue (right/bottom)** at 135deg angle for consistency.
|
||||
|
||||
## Browser Compatibility
|
||||
All color updates use standard CSS properties and are compatible with modern browsers. The gradients use standard `linear-gradient` and `radial-gradient` functions.
|
||||
|
||||
## Dark Mode
|
||||
The color scheme works seamlessly with the existing dark mode implementation. The CSS variables ensure consistent theming across light and dark modes.
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: December 11, 2025
|
||||
**Theme Version**: 2.0 - Pink & Blue
|
||||
230
QUICK_REFERENCE.md
Normal file
230
QUICK_REFERENCE.md
Normal file
@ -0,0 +1,230 @@
|
||||
# 🚀 SocialBuddy Marketing Site - Quick Reference
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
```
|
||||
Socialbuddy Marketing/
|
||||
├── app/
|
||||
│ ├── page.tsx # Home page (7 sections)
|
||||
│ ├── globals.css # Global styles
|
||||
│ ├── layout.tsx # Root layout
|
||||
│ ├── features/
|
||||
│ │ ├── page.tsx # Features page
|
||||
│ │ └── features.module.css
|
||||
│ ├── pricing/
|
||||
│ │ ├── page.tsx # Pricing page
|
||||
│ │ └── pricing.module.css
|
||||
│ ├── about/ # ✨ NEW
|
||||
│ │ ├── page.tsx # About Us page
|
||||
│ │ └── about.module.css
|
||||
│ ├── docs/
|
||||
│ │ ├── page.tsx # Documentation hub
|
||||
│ │ └── docs.module.css
|
||||
│ ├── blog/
|
||||
│ │ ├── page.tsx # Blog listing
|
||||
│ │ └── blog.module.css
|
||||
│ └── contact/ # ✨ NEW
|
||||
│ ├── page.tsx # Contact page
|
||||
│ └── contact.module.css
|
||||
│
|
||||
├── components/
|
||||
│ ├── Navbar.tsx # Navigation (updated)
|
||||
│ ├── Navbar.module.css
|
||||
│ ├── Footer.tsx
|
||||
│ ├── Footer.module.css
|
||||
│ ├── Hero.tsx
|
||||
│ ├── Hero.module.css
|
||||
│ ├── Features.tsx
|
||||
│ ├── Features.module.css
|
||||
│ ├── HowItWorks.tsx # ✨ NEW
|
||||
│ ├── HowItWorks.module.css # ✨ NEW
|
||||
│ ├── Testimonials.tsx # ✨ NEW
|
||||
│ ├── Testimonials.module.css # ✨ NEW
|
||||
│ ├── Pricing.tsx
|
||||
│ ├── Pricing.module.css
|
||||
│ ├── FAQ.tsx # ✨ NEW
|
||||
│ ├── FAQ.module.css # ✨ NEW
|
||||
│ ├── CTA.tsx # ✨ NEW
|
||||
│ └── CTA.module.css # ✨ NEW
|
||||
│
|
||||
└── public/
|
||||
└── (assets)
|
||||
```
|
||||
|
||||
## 🎯 Home Page Sections (in order)
|
||||
|
||||
1. **Hero** - Animated background, main CTA
|
||||
2. **Features** - 6 feature cards
|
||||
3. **How It Works** - 4-step process ✨ NEW
|
||||
4. **Testimonials** - Customer reviews carousel ✨ NEW
|
||||
5. **Pricing** - 3 pricing tiers
|
||||
6. **FAQ** - Accordion Q&A ✨ NEW
|
||||
7. **CTA** - Final conversion section ✨ NEW
|
||||
|
||||
## 🔗 Navigation Links
|
||||
|
||||
```
|
||||
Home → /
|
||||
Features → /features
|
||||
Pricing → /pricing
|
||||
About → /about ✨ NEW
|
||||
Docs → /docs
|
||||
Blog → /blog
|
||||
Contact → /contact ✨ NEW
|
||||
```
|
||||
|
||||
## 🎨 Key Components
|
||||
|
||||
### Interactive Components
|
||||
- **Testimonials**: Auto-rotating every 5 seconds
|
||||
- **FAQ**: Click to expand/collapse
|
||||
- **Navbar**: Sticky with scroll effect
|
||||
- **Mobile Menu**: Hamburger toggle
|
||||
|
||||
### Animated Elements
|
||||
- Hero particle background (canvas)
|
||||
- Floating gradient circles (CTA)
|
||||
- Twinkling stars (testimonials)
|
||||
- Hover effects (all cards)
|
||||
- Scroll animations (How It Works)
|
||||
|
||||
## 🚀 Running the Project
|
||||
|
||||
```bash
|
||||
# Development server
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Start production server
|
||||
npm start
|
||||
```
|
||||
|
||||
## 📝 Quick Edits
|
||||
|
||||
### Change Colors
|
||||
Edit `app/globals.css`:
|
||||
```css
|
||||
--primary: #667eea;
|
||||
--secondary: #ec4899;
|
||||
```
|
||||
|
||||
### Update Navigation
|
||||
Edit `components/Navbar.tsx`:
|
||||
```tsx
|
||||
const navLinks = [
|
||||
{ href: '/', label: 'Home' },
|
||||
// Add more links here
|
||||
];
|
||||
```
|
||||
|
||||
### Add New Section to Home
|
||||
Edit `app/page.tsx`:
|
||||
```tsx
|
||||
import NewSection from '@/components/NewSection';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
{/* existing sections */}
|
||||
<NewSection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 Page Breakdown
|
||||
|
||||
| Page | Sections | Components Used |
|
||||
|------|----------|----------------|
|
||||
| Home | 7 | Hero, Features, HowItWorks, Testimonials, Pricing, FAQ, CTA |
|
||||
| Features | 3 | Hero, Feature Grid, CTA |
|
||||
| Pricing | 2 | Pricing Cards, FAQ |
|
||||
| About | 6 | Hero, Story, Values, Timeline, Team, CTA |
|
||||
| Docs | 3 | Hero, Doc Categories, Help |
|
||||
| Blog | 4 | Hero, Categories, Blog Grid, Newsletter |
|
||||
| Contact | 4 | Hero, Contact Cards, Form, Quick Links |
|
||||
|
||||
## 🎯 CTAs Throughout Site
|
||||
|
||||
1. **Primary CTA**: "Start Free Trial" / "Get Started"
|
||||
2. **Secondary CTA**: "Watch Demo" / "View Pricing" / "Contact Us"
|
||||
3. **Tertiary CTA**: "Learn More" / "View Documentation"
|
||||
|
||||
## 💡 Best Practices Implemented
|
||||
|
||||
✅ Responsive design (mobile-first)
|
||||
✅ SEO optimization (meta tags, semantic HTML)
|
||||
✅ Accessibility (ARIA labels, keyboard navigation)
|
||||
✅ Performance (CSS modules, optimized animations)
|
||||
✅ Modern design (gradients, glassmorphism, micro-animations)
|
||||
✅ User experience (clear CTAs, smooth transitions)
|
||||
✅ Consistent branding (colors, typography, spacing)
|
||||
|
||||
## 🔧 Customization Tips
|
||||
|
||||
### Add New Page
|
||||
1. Create folder in `app/`: `app/new-page/`
|
||||
2. Add `page.tsx` and `new-page.module.css`
|
||||
3. Update navigation in `components/Navbar.tsx`
|
||||
|
||||
### Add New Component
|
||||
1. Create in `components/`: `NewComponent.tsx`
|
||||
2. Create styles: `NewComponent.module.css`
|
||||
3. Import and use in desired page
|
||||
|
||||
### Modify Existing Section
|
||||
1. Find component in `components/`
|
||||
2. Edit content in `.tsx` file
|
||||
3. Adjust styles in `.module.css` file
|
||||
|
||||
## 📱 Responsive Breakpoints
|
||||
|
||||
```css
|
||||
/* Mobile */
|
||||
@media (max-width: 639px) { }
|
||||
|
||||
/* Tablet */
|
||||
@media (min-width: 640px) and (max-width: 1023px) { }
|
||||
|
||||
/* Desktop */
|
||||
@media (min-width: 1024px) { }
|
||||
```
|
||||
|
||||
## 🎨 Common CSS Variables
|
||||
|
||||
```css
|
||||
var(--primary) /* Main brand color */
|
||||
var(--secondary) /* Accent color */
|
||||
var(--text-primary) /* Main text */
|
||||
var(--text-secondary) /* Secondary text */
|
||||
var(--bg-primary) /* Background */
|
||||
var(--card-bg) /* Card background */
|
||||
var(--border-color) /* Borders */
|
||||
```
|
||||
|
||||
## ✨ Special Features
|
||||
|
||||
- **Particle Animation**: Hero section background
|
||||
- **Carousel**: Auto-rotating testimonials
|
||||
- **Accordion**: Expandable FAQ items
|
||||
- **Timeline**: Visual milestone display
|
||||
- **Form Validation**: Contact form
|
||||
- **Gradient Effects**: Throughout site
|
||||
- **Hover Animations**: All interactive elements
|
||||
|
||||
## 🚀 Deployment Ready
|
||||
|
||||
The site is ready to deploy to:
|
||||
- Vercel (recommended for Next.js)
|
||||
- Netlify
|
||||
- AWS Amplify
|
||||
- Any Node.js hosting
|
||||
|
||||
Just run `npm run build` and deploy the `.next` folder!
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** December 10, 2025
|
||||
**Status:** ✅ Production Ready
|
||||
180
README.md
180
README.md
@ -1,36 +1,174 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# SocialBuddy Marketing Website
|
||||
|
||||
## Getting Started
|
||||
A fully responsive, SEO-optimized marketing website for SocialBuddy - a social media management platform.
|
||||
|
||||
First, run the development server:
|
||||
## 🚀 Features
|
||||
|
||||
- **Modern Next.js 14** with App Router and TypeScript
|
||||
- **Fully Responsive Design** - Mobile-first approach
|
||||
- **SEO Optimized** - Complete meta tags, Open Graph, and Twitter Cards
|
||||
- **Premium UI/UX** - Vibrant gradients, glassmorphism, smooth animations
|
||||
- **Multiple Pages**:
|
||||
- Home (Hero, Features, Pricing)
|
||||
- Features (Detailed feature showcase)
|
||||
- Pricing (Free, Pro, Premium plans with FAQ)
|
||||
- Documentation (Comprehensive guides)
|
||||
- Blog (Latest news and tutorials)
|
||||
- **Reusable Components** - Navbar, Footer, Hero, Features, Pricing
|
||||
- **Performance Optimized** - Fast loading times
|
||||
- **Deploy Ready** - Configured for Vercel, Netlify, or any hosting platform
|
||||
|
||||
## 📦 Tech Stack
|
||||
|
||||
- **Framework**: Next.js 14
|
||||
- **Language**: TypeScript
|
||||
- **Styling**: CSS Modules + Tailwind CSS
|
||||
- **Fonts**: Inter & Outfit (Google Fonts)
|
||||
- **Animations**: Custom CSS animations
|
||||
|
||||
## 🛠️ Installation
|
||||
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
git clone <repository-url>
|
||||
cd "Socialbuddy Marketing"
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
3. Run the development server:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
|
||||
|
||||
## Learn More
|
||||
## 📁 Project Structure
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
```
|
||||
├── app/
|
||||
│ ├── layout.tsx # Root layout with Navbar & Footer
|
||||
│ ├── page.tsx # Homepage
|
||||
│ ├── globals.css # Global styles & design system
|
||||
│ ├── features/ # Features page
|
||||
│ ├── pricing/ # Pricing page
|
||||
│ ├── docs/ # Documentation page
|
||||
│ └── blog/ # Blog page
|
||||
├── components/
|
||||
│ ├── Navbar.tsx # Navigation component
|
||||
│ ├── Footer.tsx # Footer component
|
||||
│ ├── Hero.tsx # Hero section
|
||||
│ ├── Features.tsx # Features section
|
||||
│ └── Pricing.tsx # Pricing section
|
||||
└── public/ # Static assets
|
||||
```
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
## 🎨 Design System
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
The site uses a comprehensive design system with:
|
||||
- **Color Palette**: Primary (Indigo), Secondary (Pink), Accent (Teal)
|
||||
- **Gradients**: Multiple vibrant gradients
|
||||
- **Spacing**: Consistent spacing scale
|
||||
- **Typography**: Responsive font sizes with clamp()
|
||||
- **Shadows**: Multiple shadow levels
|
||||
- **Animations**: Fade, slide, scale, float effects
|
||||
|
||||
## Deploy on Vercel
|
||||
## 🚀 Deployment
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
### Vercel (Recommended)
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
1. Push your code to GitHub
|
||||
2. Import project in Vercel
|
||||
3. Deploy automatically
|
||||
|
||||
Or use Vercel CLI:
|
||||
```bash
|
||||
npm install -g vercel
|
||||
vercel
|
||||
```
|
||||
|
||||
### Netlify
|
||||
|
||||
1. Build the project:
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
2. Deploy the `.next` folder to Netlify
|
||||
|
||||
### Other Platforms
|
||||
|
||||
Build command:
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Output directory: `.next`
|
||||
|
||||
## 📝 Environment Variables
|
||||
|
||||
No environment variables required for the marketing site.
|
||||
|
||||
## 🔧 Customization
|
||||
|
||||
### Update Brand Colors
|
||||
|
||||
Edit `app/globals.css`:
|
||||
```css
|
||||
:root {
|
||||
--primary: #6366f1;
|
||||
--secondary: #ec4899;
|
||||
--accent: #14b8a6;
|
||||
}
|
||||
```
|
||||
|
||||
### Update Content
|
||||
|
||||
- **Homepage**: Edit `app/page.tsx`
|
||||
- **Features**: Edit `components/Features.tsx`
|
||||
- **Pricing**: Edit `components/Pricing.tsx`
|
||||
- **Navigation**: Edit `components/Navbar.tsx`
|
||||
- **Footer**: Edit `components/Footer.tsx`
|
||||
|
||||
## 📄 Pages
|
||||
|
||||
- `/` - Homepage with Hero, Features, and Pricing
|
||||
- `/features` - Detailed features showcase
|
||||
- `/pricing` - Pricing plans with FAQ
|
||||
- `/docs` - Documentation hub
|
||||
- `/blog` - Blog listing page
|
||||
|
||||
## 🎯 SEO Features
|
||||
|
||||
- Comprehensive meta tags
|
||||
- Open Graph tags for social sharing
|
||||
- Twitter Card support
|
||||
- Semantic HTML structure
|
||||
- Optimized heading hierarchy
|
||||
- Fast page load times
|
||||
- Mobile-friendly design
|
||||
|
||||
## 📱 Responsive Breakpoints
|
||||
|
||||
- Mobile: < 768px
|
||||
- Tablet: 768px - 1024px
|
||||
- Desktop: > 1024px
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
Contributions are welcome! Please feel free to submit a Pull Request.
|
||||
|
||||
## 📧 Support
|
||||
|
||||
For support, email support@socialbuddy.com or visit our documentation.
|
||||
|
||||
## 📜 License
|
||||
|
||||
Copyright © 2025 SocialBuddy. All rights reserved.
|
||||
|
||||
---
|
||||
|
||||
Built with ❤️ by the SocialBuddy Team
|
||||
|
||||
173
SOCIAL_CONNECT_DOCS.md
Normal file
173
SOCIAL_CONNECT_DOCS.md
Normal file
@ -0,0 +1,173 @@
|
||||
# Social Connect Section - Documentation
|
||||
|
||||
## Overview
|
||||
A highly creative and interactive section showcasing social media platform integration with advanced animations and user interactions.
|
||||
|
||||
## Features
|
||||
|
||||
### 🎨 Visual Design
|
||||
- **Pink-to-Blue Gradient Theme**: Consistent with the new brand colors
|
||||
- **Floating Animated Orbs**: Three gradient orbs floating in the background
|
||||
- **Glassmorphism Effects**: Modern card design with blur effects
|
||||
- **Connection Line Animations**: Animated SVG paths showing connectivity
|
||||
|
||||
### ✨ Animations & Effects
|
||||
|
||||
#### Card Animations
|
||||
1. **Reveal Animation**: Cards appear with staggered timing (0-1s delays)
|
||||
2. **Hover Effects**:
|
||||
- Lift up 10px with scale 1.05
|
||||
- Pink border highlight
|
||||
- Gradient background reveal
|
||||
- Icon rotation and scale
|
||||
3. **Selection State**:
|
||||
- Pink-to-blue gradient background
|
||||
- Checkmark badge with pop animation
|
||||
- Glowing border effect with pulse
|
||||
- Persistent scale increase
|
||||
|
||||
#### Background Animations
|
||||
- **Floating Orbs**: Three orbs moving in infinite loops (20s duration)
|
||||
- **Badge Shine**: Shimmer effect across the badge (3s loop)
|
||||
- **Rotating Icon**: Connection icon rotates continuously
|
||||
- **Shimmer Effect**: Stats bar has a moving shine effect
|
||||
|
||||
#### Interactive Elements
|
||||
- **Ripple Effect**: Click creates expanding ripple
|
||||
- **Glow Pulse**: Selected cards have pulsing glow
|
||||
- **Stats Counter**: Real-time update when platforms are selected
|
||||
|
||||
### 🔧 Technical Implementation
|
||||
|
||||
#### Component Structure
|
||||
```
|
||||
SocialConnect/
|
||||
├── Header (Badge, Title, Subtitle)
|
||||
├── Platforms Container
|
||||
│ ├── Connect Text
|
||||
│ └── Platform Grid (11 cards)
|
||||
├── Stats Bar (3 stats)
|
||||
└── CTA Section
|
||||
```
|
||||
|
||||
#### State Management
|
||||
- `hoveredIndex`: Tracks which card is being hovered
|
||||
- `selectedPlatforms`: Array of selected platform indices
|
||||
- Click handler toggles selection state
|
||||
|
||||
#### Platform Data
|
||||
11 social platforms supported:
|
||||
- Bluesky, Facebook, Google Business
|
||||
- Instagram, LinkedIn, Mastodon
|
||||
- Pinterest, Threads, TikTok
|
||||
- X (Twitter), YouTube
|
||||
|
||||
### 🎯 Interactive Features
|
||||
|
||||
#### Click to Select
|
||||
- Click any platform card to select/deselect
|
||||
- Selected cards show gradient background
|
||||
- Checkmark appears in top-right corner
|
||||
- Stats counter updates in real-time
|
||||
|
||||
#### Hover States
|
||||
- Cards lift and scale on hover
|
||||
- Border changes to primary pink
|
||||
- Icon scales and rotates slightly
|
||||
- Gradient background fades in
|
||||
|
||||
#### Real-time Stats
|
||||
- **Platforms Supported**: Shows 11+
|
||||
- **Selected Networks**: Updates dynamically based on user selection
|
||||
- **Easy Integration**: Shows "1-Click"
|
||||
|
||||
### 📱 Responsive Design
|
||||
|
||||
#### Desktop (>768px)
|
||||
- 5 columns grid layout
|
||||
- Full animations enabled
|
||||
- Horizontal stats bar
|
||||
- Side-by-side CTA layout
|
||||
|
||||
#### Mobile (<768px)
|
||||
- 3 columns grid layout
|
||||
- Reduced padding
|
||||
- Vertical stats bar
|
||||
- Stacked CTA buttons
|
||||
|
||||
### 🎨 Color Scheme
|
||||
|
||||
#### Gradients Used
|
||||
1. **Primary**: `#ec4899 → #3b82f6` (Pink to Blue)
|
||||
2. **Background Orbs**: Radial gradients with pink, blue, purple
|
||||
3. **Card Selection**: Linear gradient pink to blue
|
||||
4. **Stats Numbers**: Gradient text effect
|
||||
|
||||
#### Hover Colors
|
||||
- Border: `var(--primary)` (#ec4899)
|
||||
- Shadow: `rgba(236, 72, 153, 0.2)`
|
||||
- Glow: Pink-blue gradient with blur
|
||||
|
||||
### 🚀 Performance Optimizations
|
||||
|
||||
1. **CSS Animations**: Hardware-accelerated transforms
|
||||
2. **Staggered Reveals**: Prevents layout shift
|
||||
3. **Conditional Rendering**: Checkmarks only when selected
|
||||
4. **Optimized SVG**: Minimal path complexity
|
||||
|
||||
### 📊 User Engagement Features
|
||||
|
||||
1. **Visual Feedback**: Immediate response to all interactions
|
||||
2. **Progress Tracking**: Stats show selection count
|
||||
3. **Clear CTAs**: Prominent action buttons
|
||||
4. **Social Proof**: Platform count badge
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import SocialConnect from '@/components/SocialConnect';
|
||||
|
||||
// In your page
|
||||
<SocialConnect />
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
### Adding New Platforms
|
||||
Edit the `socialPlatforms` array in `SocialConnect.tsx`:
|
||||
|
||||
```tsx
|
||||
{
|
||||
name: 'Platform Name',
|
||||
icon: '🎯',
|
||||
color: '#hexcolor',
|
||||
delay: 1.1
|
||||
}
|
||||
```
|
||||
|
||||
### Adjusting Animations
|
||||
Modify animation durations in `SocialConnect.module.css`:
|
||||
- `floatOrb`: 20s (background orbs)
|
||||
- `cardReveal`: 0.6s (card appearance)
|
||||
- `glowPulse`: 2s (selection glow)
|
||||
|
||||
### Changing Colors
|
||||
Update CSS variables in the component or use theme colors:
|
||||
- `--primary`: Main pink color
|
||||
- `--secondary`: Main blue color
|
||||
- `--platform-color`: Individual platform colors
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
✅ Chrome/Edge (latest)
|
||||
✅ Firefox (latest)
|
||||
✅ Safari (latest)
|
||||
✅ Mobile browsers
|
||||
|
||||
**Note**: Uses modern CSS features like `backdrop-filter`, CSS Grid, and CSS animations.
|
||||
|
||||
---
|
||||
|
||||
**Created**: December 11, 2025
|
||||
**Version**: 1.0
|
||||
**Theme**: Pink & Blue Gradient
|
||||
322
WEBSITE_OVERVIEW.md
Normal file
322
WEBSITE_OVERVIEW.md
Normal file
@ -0,0 +1,322 @@
|
||||
# SocialBuddy Marketing Website - Complete Overview
|
||||
|
||||
## 🎉 Project Summary
|
||||
|
||||
Your SocialBuddy marketing website is now a **comprehensive, multi-page, fully-featured marketing site** with all essential sections and pages!
|
||||
|
||||
---
|
||||
|
||||
## 📄 Pages Available
|
||||
|
||||
### 1. **Home Page** (`/`)
|
||||
The main landing page with 7 complete sections:
|
||||
|
||||
#### Sections:
|
||||
1. **Hero Section**
|
||||
- Animated particle background
|
||||
- Compelling headline with gradient text
|
||||
- CTA buttons (Start Free Trial, Watch Demo)
|
||||
- Statistics showcase (10K+ Users, 1M+ Posts, 99.9% Uptime)
|
||||
- Dashboard preview mockup
|
||||
|
||||
2. **Features Section**
|
||||
- 6 feature cards with icons
|
||||
- Smart Scheduling, Advanced Analytics, AI Content Assistant
|
||||
- Team Collaboration, Multi-Platform Support, Real-Time Notifications
|
||||
- Hover animations and gradient effects
|
||||
|
||||
3. **How It Works Section** ✨ NEW
|
||||
- 4-step process visualization
|
||||
- Connect Accounts → Create & Schedule → Engage → Analyze
|
||||
- Animated entrance effects
|
||||
- CTA box with gradient background
|
||||
|
||||
4. **Testimonials Section** ✨ NEW
|
||||
- Auto-rotating carousel with 6 customer testimonials
|
||||
- 5-star ratings with twinkling animation
|
||||
- Manual navigation dots
|
||||
- Customer statistics (4.9/5 rating, 10K+ customers, 98% satisfaction)
|
||||
|
||||
5. **Pricing Section**
|
||||
- 3 pricing tiers (Free, Pro, Premium)
|
||||
- Feature comparison
|
||||
- Highlighted recommended plan
|
||||
- 14-day free trial messaging
|
||||
|
||||
6. **FAQ Section** ✨ NEW
|
||||
- 8 frequently asked questions
|
||||
- Accordion-style with smooth animations
|
||||
- Support CTA with contact link
|
||||
- Covers trials, security, features, billing
|
||||
|
||||
7. **CTA Section** ✨ NEW
|
||||
- Gradient background with floating circles
|
||||
- Feature checkmarks (14-day trial, no credit card, cancel anytime)
|
||||
- Trust badges (Secure, 4.9/5 Rating, 10K+ Users)
|
||||
- Dual CTAs (Start Free Trial, View Pricing)
|
||||
|
||||
---
|
||||
|
||||
### 2. **Features Page** (`/features`)
|
||||
Detailed feature breakdown:
|
||||
- Hero section
|
||||
- 4 feature categories:
|
||||
- Content Management (Visual Calendar, Bulk Upload, Content Library)
|
||||
- Analytics & Insights (Real-Time Analytics, Competitor Analysis, Custom Reports)
|
||||
- Engagement Tools (Unified Inbox, Auto-Responses, Sentiment Analysis)
|
||||
- Team Collaboration (Role-Based Access, Approval Workflows, Activity Log)
|
||||
- CTA section
|
||||
|
||||
---
|
||||
|
||||
### 3. **Pricing Page** (`/pricing`)
|
||||
Comprehensive pricing information:
|
||||
- Full pricing component
|
||||
- FAQ section with 6 common pricing questions
|
||||
- Payment methods, trial info, cancellation policy
|
||||
- Nonprofit discounts, data retention
|
||||
|
||||
---
|
||||
|
||||
### 4. **About Page** (`/about`) ✨ NEW
|
||||
Company information and story:
|
||||
- Hero section
|
||||
- Company story (founded 2020, 10K+ users)
|
||||
- Core values (Customer First, Innovation, Collaboration, Simplicity)
|
||||
- Timeline of milestones (2020-2025)
|
||||
- Team section (4 team members)
|
||||
- CTA section
|
||||
|
||||
---
|
||||
|
||||
### 5. **Documentation Page** (`/docs`)
|
||||
Help and documentation hub:
|
||||
- Hero with search box
|
||||
- 6 documentation categories:
|
||||
- Getting Started
|
||||
- Content Management
|
||||
- Analytics
|
||||
- Team Collaboration
|
||||
- API & Integrations
|
||||
- Account & Billing
|
||||
- Help section with support CTA
|
||||
|
||||
---
|
||||
|
||||
### 6. **Blog Page** (`/blog`)
|
||||
Content marketing hub:
|
||||
- Hero section
|
||||
- Category filters (All, Trends, Strategy, Tutorial, Analytics, Technology, Branding)
|
||||
- 6 blog post cards with:
|
||||
- Category tags
|
||||
- Publication dates
|
||||
- Read time estimates
|
||||
- Excerpts
|
||||
- Newsletter subscription section
|
||||
|
||||
---
|
||||
|
||||
### 7. **Contact Page** (`/contact`) ✨ NEW
|
||||
Complete contact solution:
|
||||
- Hero section
|
||||
- 4 contact method cards:
|
||||
- Email: support@socialbuddy.com
|
||||
- Live Chat: Available 24/7
|
||||
- Phone: +1 (555) 123-4567
|
||||
- Office: San Francisco, CA
|
||||
- Contact form with fields:
|
||||
- Name, Email, Company
|
||||
- Subject dropdown (General, Support, Sales, Partnership, Feedback)
|
||||
- Message textarea
|
||||
- Social media links
|
||||
- Quick links to Docs, Pricing, Blog, Features
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design Features
|
||||
|
||||
### Visual Excellence
|
||||
- ✅ **Gradient text effects** throughout
|
||||
- ✅ **Glassmorphism** on CTA sections
|
||||
- ✅ **Animated backgrounds** (particles, floating circles)
|
||||
- ✅ **Smooth transitions** and hover effects
|
||||
- ✅ **Micro-animations** (twinkling stars, rotating gradients)
|
||||
- ✅ **Modern color palette** (primary: #667eea, secondary: #ec4899)
|
||||
|
||||
### Responsive Design
|
||||
- ✅ Mobile-first approach
|
||||
- ✅ Tablet breakpoints
|
||||
- ✅ Desktop optimization
|
||||
- ✅ Flexible grid layouts
|
||||
- ✅ Mobile menu with hamburger icon
|
||||
|
||||
### User Experience
|
||||
- ✅ Smooth scrolling
|
||||
- ✅ Sticky navigation with scroll effects
|
||||
- ✅ Interactive components (accordion, carousel)
|
||||
- ✅ Clear CTAs throughout
|
||||
- ✅ Consistent branding
|
||||
|
||||
---
|
||||
|
||||
## 🧭 Navigation Structure
|
||||
|
||||
### Main Navigation
|
||||
```
|
||||
Home | Features | Pricing | About | Docs | Blog | Contact
|
||||
```
|
||||
|
||||
### CTA Buttons
|
||||
- **Login** (secondary)
|
||||
- **Get Started** (primary)
|
||||
|
||||
### Mobile Navigation
|
||||
- Hamburger menu
|
||||
- Full-screen overlay
|
||||
- All navigation links
|
||||
- CTA buttons
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Key Features Implemented
|
||||
|
||||
### Components Created
|
||||
1. ✅ Hero (with canvas animation)
|
||||
2. ✅ Features (6 feature cards)
|
||||
3. ✅ HowItWorks (4-step process) - NEW
|
||||
4. ✅ Testimonials (carousel) - NEW
|
||||
5. ✅ Pricing (3 tiers)
|
||||
6. ✅ FAQ (accordion) - NEW
|
||||
7. ✅ CTA (gradient section) - NEW
|
||||
8. ✅ Navbar (responsive)
|
||||
9. ✅ Footer (complete)
|
||||
|
||||
### Pages Created
|
||||
1. ✅ Home (`/`)
|
||||
2. ✅ Features (`/features`)
|
||||
3. ✅ Pricing (`/pricing`)
|
||||
4. ✅ About (`/about`) - NEW
|
||||
5. ✅ Docs (`/docs`)
|
||||
6. ✅ Blog (`/blog`)
|
||||
7. ✅ Contact (`/contact`) - NEW
|
||||
|
||||
---
|
||||
|
||||
## 📊 SEO Optimization
|
||||
|
||||
All pages include:
|
||||
- ✅ Proper title tags
|
||||
- ✅ Meta descriptions
|
||||
- ✅ Semantic HTML5 elements
|
||||
- ✅ Heading hierarchy (single H1 per page)
|
||||
- ✅ Descriptive link text
|
||||
- ✅ Alt text ready (for when images are added)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Call-to-Actions
|
||||
|
||||
Multiple CTAs strategically placed:
|
||||
1. Hero section - "Start Free Trial" + "Watch Demo"
|
||||
2. How It Works - "Get Started Free"
|
||||
3. Features page - "Start Your Free Trial"
|
||||
4. Pricing - Individual plan CTAs
|
||||
5. FAQ - "Contact Support" + "View Documentation"
|
||||
6. Main CTA section - "Start Free Trial" + "View Pricing"
|
||||
7. About page - "Start Free Trial" + "Contact Us"
|
||||
8. Contact page - Form submission
|
||||
|
||||
---
|
||||
|
||||
## 💡 Next Steps (Optional Enhancements)
|
||||
|
||||
### Potential Improvements:
|
||||
1. **Add Real Images**: Replace emoji placeholders with actual photos/graphics
|
||||
2. **Blog Post Pages**: Create individual blog post pages
|
||||
3. **Documentation Pages**: Build out individual doc pages
|
||||
4. **Login/Signup Pages**: Create authentication pages
|
||||
5. **Demo Video**: Add actual product demo video
|
||||
6. **Analytics Integration**: Add Google Analytics or similar
|
||||
7. **Form Backend**: Connect contact form to email service
|
||||
8. **Newsletter Integration**: Connect to email marketing platform
|
||||
9. **Dark Mode Toggle**: Add theme switcher
|
||||
10. **Animations**: Add more advanced scroll-triggered animations
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Live Development Server
|
||||
|
||||
Your site is currently running at:
|
||||
**http://localhost:3000**
|
||||
|
||||
### Available Routes:
|
||||
- `/` - Home
|
||||
- `/features` - Features
|
||||
- `/pricing` - Pricing
|
||||
- `/about` - About Us
|
||||
- `/docs` - Documentation
|
||||
- `/blog` - Blog
|
||||
- `/contact` - Contact
|
||||
|
||||
---
|
||||
|
||||
## 📱 Responsive Breakpoints
|
||||
|
||||
```css
|
||||
Mobile: < 640px
|
||||
Tablet: 640px - 1024px
|
||||
Desktop: > 1024px
|
||||
```
|
||||
|
||||
All components are fully responsive across all breakpoints.
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Color Scheme
|
||||
|
||||
```css
|
||||
Primary: #667eea (Purple-Blue)
|
||||
Secondary: #ec4899 (Pink)
|
||||
Accent Colors:
|
||||
- Teal: #14b8a6
|
||||
- Orange: #f59e0b
|
||||
- Purple: #8b5cf6
|
||||
- Red: #ef4444
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✨ Special Features
|
||||
|
||||
1. **Animated Particle Background** - Hero section
|
||||
2. **Auto-Rotating Testimonials** - 5-second intervals
|
||||
3. **Accordion FAQ** - Smooth expand/collapse
|
||||
4. **Floating Gradient Circles** - CTA sections
|
||||
5. **Twinkling Star Ratings** - Testimonials
|
||||
6. **Hover Effects** - All interactive elements
|
||||
7. **Gradient Text** - Strategic highlights
|
||||
8. **Glassmorphism** - Modern UI effects
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Summary
|
||||
|
||||
You now have a **complete, professional, multi-page marketing website** with:
|
||||
- ✅ 7 fully functional pages
|
||||
- ✅ 8 reusable components
|
||||
- ✅ Responsive design
|
||||
- ✅ Modern aesthetics
|
||||
- ✅ SEO optimization
|
||||
- ✅ Multiple CTAs
|
||||
- ✅ Interactive elements
|
||||
- ✅ Smooth animations
|
||||
- ✅ Professional copy
|
||||
- ✅ Complete navigation
|
||||
|
||||
The site is **production-ready** and can be deployed immediately!
|
||||
|
||||
---
|
||||
|
||||
**Created:** December 10, 2025
|
||||
**Status:** ✅ Complete and Running
|
||||
**Technology:** Next.js 15, React, TypeScript, CSS Modules
|
||||
337
app/about/about.module.css
Normal file
337
app/about/about.module.css
Normal file
@ -0,0 +1,337 @@
|
||||
.aboutPage {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 8rem 0 4rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05));
|
||||
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%);
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.storyGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.storyGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.storyImage {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
@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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.ctaButtons {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
203
app/about/page.tsx
Normal file
203
app/about/page.tsx
Normal file
@ -0,0 +1,203 @@
|
||||
import type { Metadata } from 'next';
|
||||
import styles from './about.module.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'About Us - SocialBuddy',
|
||||
description: 'Learn about SocialBuddy\'s mission to empower businesses and creators with powerful social media management tools.',
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className={styles.aboutPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
About <span className="gradient-text">SocialBuddy</span>
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
We're on a mission to empower businesses and creators to build meaningful connections
|
||||
through social media—without the complexity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Story Section */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.storyGrid}>
|
||||
<div className={styles.storyImage}>
|
||||
<div className={styles.imagePlaceholder}>
|
||||
<span className={styles.placeholderIcon}>📖</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.storyContent}>
|
||||
<h2 className={styles.sectionTitle}>Our Story</h2>
|
||||
<p className={styles.storyText}>
|
||||
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.
|
||||
</p>
|
||||
<p className={styles.storyText}>
|
||||
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.
|
||||
</p>
|
||||
<p className={styles.storyText}>
|
||||
Today, SocialBuddy serves over 10,000 businesses and creators worldwide, helping them
|
||||
save time, increase engagement, and grow their online presence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Values Section */}
|
||||
<section className={`section ${styles.valuesSection}`}>
|
||||
<div className="container">
|
||||
<div className={styles.sectionHeader}>
|
||||
<h2 className={styles.sectionTitle}>Our Values</h2>
|
||||
<p className={styles.sectionSubtitle}>
|
||||
The principles that guide everything we do
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.valuesGrid}>
|
||||
{values.map((value, index) => (
|
||||
<div key={index} className={styles.valueCard}>
|
||||
<div className={styles.valueIcon}>{value.icon}</div>
|
||||
<h3 className={styles.valueTitle}>{value.title}</h3>
|
||||
<p className={styles.valueDescription}>{value.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Timeline Section */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.sectionHeader}>
|
||||
<h2 className={styles.sectionTitle}>Our Journey</h2>
|
||||
<p className={styles.sectionSubtitle}>
|
||||
Key milestones in our growth story
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.timeline}>
|
||||
{milestones.map((milestone, index) => (
|
||||
<div key={index} className={styles.timelineItem}>
|
||||
<div className={styles.timelineIcon}>{milestone.icon}</div>
|
||||
<div className={styles.timelineContent}>
|
||||
<div className={styles.timelineYear}>{milestone.year}</div>
|
||||
<div className={styles.timelineEvent}>{milestone.event}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Section */}
|
||||
<section className={`section ${styles.teamSection}`}>
|
||||
<div className="container">
|
||||
<div className={styles.sectionHeader}>
|
||||
<h2 className={styles.sectionTitle}>Meet Our Team</h2>
|
||||
<p className={styles.sectionSubtitle}>
|
||||
The passionate people behind SocialBuddy
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.teamGrid}>
|
||||
{team.map((member, index) => (
|
||||
<div key={index} className={styles.teamCard}>
|
||||
<div className={styles.memberImage}>{member.image}</div>
|
||||
<h3 className={styles.memberName}>{member.name}</h3>
|
||||
<div className={styles.memberRole}>{member.role}</div>
|
||||
<p className={styles.memberBio}>{member.bio}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className={styles.ctaSection}>
|
||||
<div className="container">
|
||||
<div className={styles.ctaContent}>
|
||||
<h2 className={styles.ctaTitle}>Join Us on Our Journey</h2>
|
||||
<p className={styles.ctaSubtitle}>
|
||||
Be part of the future of social media management
|
||||
</p>
|
||||
<div className={styles.ctaButtons}>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary btn-large">
|
||||
Start Free Trial
|
||||
</a>
|
||||
<a href="/contact" className="btn btn-secondary btn-large">
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
222
app/blog/blog.module.css
Normal file
222
app/blog/blog.module.css
Normal file
@ -0,0 +1,222 @@
|
||||
.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;
|
||||
}
|
||||
153
app/blog/page.tsx
Normal file
153
app/blog/page.tsx
Normal file
@ -0,0 +1,153 @@
|
||||
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 (
|
||||
<div className={styles.blogPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
SocialBuddy <span className="gradient-text">Blog</span>
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Insights, tips, and strategies to help you succeed in social media marketing
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Categories */}
|
||||
<section className={styles.categoriesSection}>
|
||||
<div className="container">
|
||||
<div className={styles.categories}>
|
||||
{categories.map((category, idx) => (
|
||||
<button key={idx} className={`${styles.categoryBtn} ${idx === 0 ? styles.active : ''}`}>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Blog Grid */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.blogGrid}>
|
||||
{blogPosts.map((post, idx) => (
|
||||
<article key={idx} className={styles.blogCard}>
|
||||
<div className={styles.cardImage}>
|
||||
<span className={styles.imageIcon}>{post.image}</span>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<div className={styles.cardMeta}>
|
||||
<span className={styles.category}>{post.category}</span>
|
||||
<span className={styles.date}>{post.date}</span>
|
||||
</div>
|
||||
<h2 className={styles.cardTitle}>
|
||||
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
|
||||
</h2>
|
||||
<p className={styles.cardExcerpt}>{post.excerpt}</p>
|
||||
<div className={styles.cardFooter}>
|
||||
<span className={styles.readTime}>⏱️ {post.readTime}</span>
|
||||
<Link href={`/blog/${post.slug}`} className={styles.readMore}>
|
||||
Read More →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Newsletter Section */}
|
||||
<section className={styles.newsletter}>
|
||||
<div className="container">
|
||||
<div className={styles.newsletterContent}>
|
||||
<h2 className={styles.newsletterTitle}>Stay Updated</h2>
|
||||
<p className={styles.newsletterSubtitle}>
|
||||
Get the latest social media tips and SocialBuddy updates delivered to your inbox
|
||||
</p>
|
||||
<form className={styles.newsletterForm}>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className={styles.newsletterInput}
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
294
app/contact/contact.module.css
Normal file
294
app/contact/contact.module.css
Normal file
@ -0,0 +1,294 @@
|
||||
.contactPage {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 8rem 0 4rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05));
|
||||
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%);
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.contactGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.contactCard {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contactCard:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.cardIcon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cardValue {
|
||||
font-size: 1rem;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.formSection {
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.formContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.formContainer {
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
}
|
||||
}
|
||||
|
||||
.formInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.formTitle {
|
||||
font-size: clamp(2rem, 4vw, 2.5rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.formDescription {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.benefits {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.benefit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.checkIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.socialTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.socialIcons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.socialIcon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.socialIcon:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 10px 20px rgba(236, 72, 153, 0.2);
|
||||
}
|
||||
|
||||
.form {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 24px;
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.formGroup {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select,
|
||||
.textarea {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: all 0.3s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.select:focus,
|
||||
.textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 0.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button:hover .arrow {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.quickLinks {
|
||||
padding: 4rem 0;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.03), rgba(59, 130, 246, 0.03));
|
||||
}
|
||||
|
||||
.quickLinksTitle {
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.linksGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.linkCard {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.linkCard:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.linkIcon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.linkText {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.form {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
245
app/contact/page.tsx
Normal file
245
app/contact/page.tsx
Normal file
@ -0,0 +1,245 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import styles from './contact.module.css';
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
company: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
});
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission
|
||||
console.log('Form submitted:', formData);
|
||||
alert('Thank you for your message! We\'ll get back to you soon.');
|
||||
};
|
||||
|
||||
const contactInfo = [
|
||||
{
|
||||
icon: '📧',
|
||||
title: 'Email',
|
||||
value: 'support@socialbuddy.com',
|
||||
link: 'mailto:support@socialbuddy.com',
|
||||
},
|
||||
{
|
||||
icon: '💬',
|
||||
title: 'Live Chat',
|
||||
value: 'Available 24/7',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
icon: '📞',
|
||||
title: 'Phone',
|
||||
value: '+1 (555) 123-4567',
|
||||
link: 'tel:+15551234567',
|
||||
},
|
||||
{
|
||||
icon: '📍',
|
||||
title: 'Office',
|
||||
value: 'San Francisco, CA',
|
||||
link: '#',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.contactPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
Get in <span className="gradient-text">Touch</span>
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Have a question or need help? We're here for you 24/7.
|
||||
Reach out and let's start a conversation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Info Cards */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.contactGrid}>
|
||||
{contactInfo.map((info, index) => (
|
||||
<a key={index} href={info.link} className={styles.contactCard}>
|
||||
<div className={styles.cardIcon}>{info.icon}</div>
|
||||
<h3 className={styles.cardTitle}>{info.title}</h3>
|
||||
<p className={styles.cardValue}>{info.value}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Form Section */}
|
||||
<section className={`section ${styles.formSection}`}>
|
||||
<div className="container">
|
||||
<div className={styles.formContainer}>
|
||||
<div className={styles.formInfo}>
|
||||
<h2 className={styles.formTitle}>Send Us a Message</h2>
|
||||
<p className={styles.formDescription}>
|
||||
Fill out the form and our team will get back to you within 24 hours.
|
||||
</p>
|
||||
|
||||
<div className={styles.benefits}>
|
||||
<div className={styles.benefit}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>Quick response time</span>
|
||||
</div>
|
||||
<div className={styles.benefit}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>Expert support team</span>
|
||||
</div>
|
||||
<div className={styles.benefit}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>Personalized solutions</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.socialLinks}>
|
||||
<h3 className={styles.socialTitle}>Follow Us</h3>
|
||||
<div className={styles.socialIcons}>
|
||||
<a href="#" className={styles.socialIcon}>🐦</a>
|
||||
<a href="#" className={styles.socialIcon}>📘</a>
|
||||
<a href="#" className={styles.socialIcon}>📷</a>
|
||||
<a href="#" className={styles.socialIcon}>💼</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className={styles.form} onSubmit={handleSubmit}>
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="name" className={styles.label}>
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
placeholder="John Doe"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="email" className={styles.label}>
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
placeholder="john@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="company" className={styles.label}>
|
||||
Company
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
placeholder="Your Company"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="subject" className={styles.label}>
|
||||
Subject *
|
||||
</label>
|
||||
<select
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
className={styles.select}
|
||||
required
|
||||
>
|
||||
<option value="">Select a subject</option>
|
||||
<option value="general">General Inquiry</option>
|
||||
<option value="support">Technical Support</option>
|
||||
<option value="sales">Sales Question</option>
|
||||
<option value="partnership">Partnership</option>
|
||||
<option value="feedback">Feedback</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="message" className={styles.label}>
|
||||
Message *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className={styles.textarea}
|
||||
placeholder="Tell us how we can help you..."
|
||||
rows={6}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary btn-large">
|
||||
Send Message
|
||||
<span className={styles.arrow}>→</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Quick Links */}
|
||||
<section className={styles.quickLinks}>
|
||||
<div className="container">
|
||||
<h2 className={styles.quickLinksTitle}>Looking for something specific?</h2>
|
||||
<div className={styles.linksGrid}>
|
||||
<a href="/docs" className={styles.linkCard}>
|
||||
<span className={styles.linkIcon}>📚</span>
|
||||
<span className={styles.linkText}>Documentation</span>
|
||||
</a>
|
||||
<a href="/pricing" className={styles.linkCard}>
|
||||
<span className={styles.linkIcon}>💰</span>
|
||||
<span className={styles.linkText}>Pricing</span>
|
||||
</a>
|
||||
<a href="/blog" className={styles.linkCard}>
|
||||
<span className={styles.linkIcon}>📝</span>
|
||||
<span className={styles.linkText}>Blog</span>
|
||||
</a>
|
||||
<a href="/features" className={styles.linkCard}>
|
||||
<span className={styles.linkIcon}>✨</span>
|
||||
<span className={styles.linkText}>Features</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
176
app/docs/docs.module.css
Normal file
176
app/docs/docs.module.css
Normal file
@ -0,0 +1,176 @@
|
||||
.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;
|
||||
}
|
||||
144
app/docs/page.tsx
Normal file
144
app/docs/page.tsx
Normal file
@ -0,0 +1,144 @@
|
||||
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 (
|
||||
<div className={styles.docsPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
<span className="gradient-text">Documentation</span> & Guides
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Everything you need to know about using SocialBuddy effectively
|
||||
</p>
|
||||
<div className={styles.searchBox}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search documentation..."
|
||||
className={styles.searchInput}
|
||||
/>
|
||||
<button className={styles.searchButton}>🔍</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Documentation Grid */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.docsGrid}>
|
||||
{docCategories.map((category, idx) => (
|
||||
<div key={idx} className={styles.docCategory}>
|
||||
<div className={styles.categoryHeader}>
|
||||
<span className={styles.categoryIcon}>{category.icon}</span>
|
||||
<h2 className={styles.categoryTitle}>{category.title}</h2>
|
||||
</div>
|
||||
<div className={styles.docsList}>
|
||||
{category.docs.map((doc, index) => (
|
||||
<Link key={index} href={doc.href} className={styles.docLink}>
|
||||
<span className={styles.docIcon}>📄</span>
|
||||
<span>{doc.title}</span>
|
||||
<span className={styles.arrow}>→</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Help Section */}
|
||||
<section className={styles.helpSection}>
|
||||
<div className="container">
|
||||
<div className={styles.helpContent}>
|
||||
<h2 className={styles.helpTitle}>Need More Help?</h2>
|
||||
<p className={styles.helpSubtitle}>
|
||||
Can't find what you're looking for? Our support team is here to help.
|
||||
</p>
|
||||
<div className={styles.helpButtons}>
|
||||
<a href="/contact" className="btn btn-primary">
|
||||
Contact Support
|
||||
</a>
|
||||
<a href="/community" className="btn btn-secondary">
|
||||
Join Community
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
120
app/features/features.module.css
Normal file
120
app/features/features.module.css
Normal file
@ -0,0 +1,120 @@
|
||||
.featuresPage {
|
||||
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);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.categorySection {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.categoryHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--background-secondary);
|
||||
}
|
||||
|
||||
.categoryIcon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.categoryTitle {
|
||||
font-size: 2rem;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.featuresGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.featuresGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.featureCard {
|
||||
background: var(--background);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.featureCard:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.featureIcon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.featureTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.featureDescription {
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ctaSection {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 5rem 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.ctaContent {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ctaSubtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
150
app/features/page.tsx
Normal file
150
app/features/page.tsx
Normal file
@ -0,0 +1,150 @@
|
||||
import type { Metadata } from 'next';
|
||||
import styles from './features.module.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Features - SocialBuddy',
|
||||
description: 'Discover all the powerful features that make SocialBuddy the best social media management platform for businesses and creators.',
|
||||
};
|
||||
|
||||
export default function FeaturesPage() {
|
||||
const detailedFeatures = [
|
||||
{
|
||||
category: 'Content Management',
|
||||
icon: '📝',
|
||||
features: [
|
||||
{
|
||||
title: 'Visual Content Calendar',
|
||||
description: 'Plan and organize your content with an intuitive drag-and-drop calendar interface.',
|
||||
icon: '📅',
|
||||
},
|
||||
{
|
||||
title: 'Bulk Upload & Scheduling',
|
||||
description: 'Upload and schedule hundreds of posts at once with CSV import functionality.',
|
||||
icon: '⬆️',
|
||||
},
|
||||
{
|
||||
title: 'Content Library',
|
||||
description: 'Store and organize your media assets in a centralized, searchable library.',
|
||||
icon: '📚',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Analytics & Insights',
|
||||
icon: '📊',
|
||||
features: [
|
||||
{
|
||||
title: 'Real-Time Analytics',
|
||||
description: 'Monitor your performance with live data updates and comprehensive metrics.',
|
||||
icon: '📈',
|
||||
},
|
||||
{
|
||||
title: 'Competitor Analysis',
|
||||
description: 'Track and compare your performance against competitors in your industry.',
|
||||
icon: '🎯',
|
||||
},
|
||||
{
|
||||
title: 'Custom Reports',
|
||||
description: 'Generate beautiful, white-labeled reports for clients and stakeholders.',
|
||||
icon: '📄',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Engagement Tools',
|
||||
icon: '💬',
|
||||
features: [
|
||||
{
|
||||
title: 'Unified Inbox',
|
||||
description: 'Manage all your messages, comments, and mentions from one centralized inbox.',
|
||||
icon: '📥',
|
||||
},
|
||||
{
|
||||
title: 'Auto-Responses',
|
||||
description: 'Set up automated responses for common questions and inquiries.',
|
||||
icon: '🤖',
|
||||
},
|
||||
{
|
||||
title: 'Sentiment Analysis',
|
||||
description: 'Understand audience sentiment with AI-powered emotion detection.',
|
||||
icon: '😊',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Team Collaboration',
|
||||
icon: '👥',
|
||||
features: [
|
||||
{
|
||||
title: 'Role-Based Access',
|
||||
description: 'Control permissions with customizable roles for team members.',
|
||||
icon: '🔐',
|
||||
},
|
||||
{
|
||||
title: 'Approval Workflows',
|
||||
description: 'Set up multi-level approval processes for content review.',
|
||||
icon: '✅',
|
||||
},
|
||||
{
|
||||
title: 'Team Activity Log',
|
||||
description: 'Track all team actions with a comprehensive audit trail.',
|
||||
icon: '📋',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.featuresPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
Powerful Features for <span className="gradient-text">Modern Teams</span>
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Everything you need to manage, analyze, and grow your social media presence—all in one platform.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Grid */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
{detailedFeatures.map((category, idx) => (
|
||||
<div key={idx} className={styles.categorySection}>
|
||||
<div className={styles.categoryHeader}>
|
||||
<span className={styles.categoryIcon}>{category.icon}</span>
|
||||
<h2 className={styles.categoryTitle}>{category.category}</h2>
|
||||
</div>
|
||||
<div className={styles.featuresGrid}>
|
||||
{category.features.map((feature, index) => (
|
||||
<div key={index} className={styles.featureCard}>
|
||||
<div className={styles.featureIcon}>{feature.icon}</div>
|
||||
<h3 className={styles.featureTitle}>{feature.title}</h3>
|
||||
<p className={styles.featureDescription}>{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className={styles.ctaSection}>
|
||||
<div className="container">
|
||||
<div className={styles.ctaContent}>
|
||||
<h2 className={styles.ctaTitle}>Ready to Get Started?</h2>
|
||||
<p className={styles.ctaSubtitle}>Join thousands of businesses already using SocialBuddy</p>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary btn-large">
|
||||
Start Your Free Trial
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
383
app/globals.css
383
app/globals.css
@ -1,26 +1,385 @@
|
||||
@import "tailwindcss";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
|
||||
/* @import "tailwindcss"; */
|
||||
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
/* Color Palette - Pink Primary, Blue Secondary */
|
||||
--primary: #ec4899;
|
||||
--primary-dark: #db2777;
|
||||
--primary-light: #f472b6;
|
||||
--secondary: #3b82f6;
|
||||
--secondary-dark: #2563eb;
|
||||
--secondary-light: #60a5fa;
|
||||
--accent: #14b8a6;
|
||||
--accent-dark: #0d9488;
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
/* Backgrounds */
|
||||
--background: #ffffff;
|
||||
--background-secondary: #f8fafc;
|
||||
--bg-primary: #ffffff;
|
||||
--card-bg: #ffffff;
|
||||
--foreground: #0f172a;
|
||||
--foreground-secondary: #475569;
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
|
||||
/* 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%);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--shadow-glow: 0 0 40px rgba(236, 72, 153, 0.3);
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
|
||||
/* Typography */
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--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;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-left {
|
||||
animation: slideInLeft 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-right {
|
||||
animation: slideInRight 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale {
|
||||
animation: scaleIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
background: var(--background);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.gradient-border::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2px;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
/* Alternating Section Backgrounds */
|
||||
section:nth-child(odd) {
|
||||
background: linear-gradient(180deg,
|
||||
var(--background) 0%,
|
||||
rgba(236, 72, 153, 0.02) 50%,
|
||||
var(--background) 100%);
|
||||
}
|
||||
|
||||
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%);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.section {
|
||||
padding: 6rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-xl), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
border: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
background: var(--background);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.card-glass {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Responsive Typography */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--foreground-secondary);
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
@ -1,20 +1,37 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "SocialBuddy - Manage All Your Social Media in One Place",
|
||||
description: "Empowering businesses and creators to schedule posts, analyze performance, engage with audiences, and grow their social presence with powerful tools and analytics.",
|
||||
keywords: ["social media management", "social media scheduler", "social media analytics", "content calendar", "social media tools"],
|
||||
authors: [{ name: "SocialBuddy Team" }],
|
||||
openGraph: {
|
||||
title: "SocialBuddy - Social Media Management Platform",
|
||||
description: "Manage all your social media accounts from one powerful dashboard. Schedule posts, analyze performance, and grow your audience.",
|
||||
type: "website",
|
||||
url: "https://socialbuddy.com",
|
||||
images: [
|
||||
{
|
||||
url: "/og-image.jpg",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "SocialBuddy Platform",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "SocialBuddy - Social Media Management Platform",
|
||||
description: "Manage all your social media accounts from one powerful dashboard.",
|
||||
images: ["/og-image.jpg"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@ -23,11 +40,14 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<head>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
76
app/page.tsx
76
app/page.tsx
@ -1,65 +1,23 @@
|
||||
import Image from "next/image";
|
||||
import Hero from '@/components/Hero';
|
||||
import Features from '@/components/Features';
|
||||
import SocialConnect from '@/components/SocialConnect';
|
||||
import HowItWorks from '@/components/HowItWorks';
|
||||
import Testimonials from '@/components/Testimonials';
|
||||
import Pricing from '@/components/Pricing';
|
||||
import FAQ from '@/components/FAQ';
|
||||
import CTA from '@/components/CTA';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
<main>
|
||||
<Hero />
|
||||
<Features />
|
||||
<SocialConnect />
|
||||
<HowItWorks />
|
||||
<Testimonials />
|
||||
<Pricing />
|
||||
<FAQ />
|
||||
<CTA />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
63
app/pricing/page.tsx
Normal file
63
app/pricing/page.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
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() {
|
||||
return (
|
||||
<div className={styles.pricingPage}>
|
||||
<Pricing />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.faqHeader}>
|
||||
<h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
|
||||
</div>
|
||||
<div className={styles.faqGrid}>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>Can I change plans later?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>What payment methods do you accept?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>Is there a free trial?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Yes! All paid plans come with a 14-day free trial. No credit card required to start.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>Can I cancel anytime?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Absolutely. You can cancel your subscription at any time with no cancellation fees. Your access continues until the end of your billing period.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>Do you offer discounts for nonprofits?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Yes! We offer special pricing for nonprofits and educational institutions. Contact our sales team for details.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>What happens to my data if I cancel?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Your data is safely stored for 30 days after cancellation. You can export all your data at any time before deletion.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
app/pricing/pricing.module.css
Normal file
53
app/pricing/pricing.module.css
Normal file
@ -0,0 +1,53 @@
|
||||
.pricingPage {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.faqHeader {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.faqTitle {
|
||||
font-size: 2.5rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.faqItem {
|
||||
background: var(--background);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faqItem:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.faqQuestion {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.faqAnswer {
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
238
components/CTA.module.css
Normal file
238
components/CTA.module.css
Normal file
@ -0,0 +1,238 @@
|
||||
.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 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.circle1,
|
||||
.circle2,
|
||||
.circle3 {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: -50px;
|
||||
left: 10%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.circle3 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 50%;
|
||||
left: -50px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-30px) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
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);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 0.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.primaryBtn: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;
|
||||
}
|
||||
}
|
||||
78
components/CTA.tsx
Normal file
78
components/CTA.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import Link from 'next/link';
|
||||
import styles from './CTA.module.css';
|
||||
|
||||
export default function CTA() {
|
||||
return (
|
||||
<section className={styles.ctaSection}>
|
||||
<div className="container">
|
||||
<div className={styles.ctaCard}>
|
||||
<div className={styles.background}>
|
||||
<div className={styles.circle1}></div>
|
||||
<div className={styles.circle2}></div>
|
||||
<div className={styles.circle3}></div>
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
<div className={styles.badge}>
|
||||
<span>🚀</span>
|
||||
<span>Get Started Today</span>
|
||||
</div>
|
||||
|
||||
<h2 className={styles.title}>
|
||||
Ready to Transform Your <span className={styles.highlight}>Social Media</span> Strategy?
|
||||
</h2>
|
||||
|
||||
<p className={styles.subtitle}>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<div className={styles.features}>
|
||||
<div className={styles.feature}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>14-day free trial</span>
|
||||
</div>
|
||||
<div className={styles.feature}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>No credit card required</span>
|
||||
</div>
|
||||
<div className={styles.feature}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>Cancel anytime</span>
|
||||
</div>
|
||||
<div className={styles.feature}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>24/7 customer support</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.buttons}>
|
||||
<a href="https://app.socialbuddy.co/signup" className={`btn btn-primary btn-large ${styles.primaryBtn}`}>
|
||||
Start Free Trial
|
||||
<span className={styles.arrow}>→</span>
|
||||
</a>
|
||||
<Link href="/pricing" className={`btn btn-secondary btn-large ${styles.secondaryBtn}`}>
|
||||
View Pricing
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className={styles.trustBadges}>
|
||||
<div className={styles.trustBadge}>
|
||||
<span className={styles.badgeIcon}>🔒</span>
|
||||
<span>Secure & Encrypted</span>
|
||||
</div>
|
||||
<div className={styles.trustBadge}>
|
||||
<span className={styles.badgeIcon}>⭐</span>
|
||||
<span>4.9/5 Rating</span>
|
||||
</div>
|
||||
<div className={styles.trustBadge}>
|
||||
<span className={styles.badgeIcon}>👥</span>
|
||||
<span>10,000+ Users</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
203
components/FAQ.module.css
Normal file
203
components/FAQ.module.css
Normal file
@ -0,0 +1,203 @@
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.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: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faqItem:hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 4px 20px rgba(236, 72, 153, 0.1);
|
||||
}
|
||||
|
||||
.faqItem.open {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.faqQuestion {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faqQuestion:hover {
|
||||
background: rgba(236, 72, 153, 0.05);
|
||||
}
|
||||
|
||||
.questionText {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--primary);
|
||||
transition: transform 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ctaText {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ctaButtons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.ctaButtons {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.ctaBox {
|
||||
padding: 4rem 3rem;
|
||||
}
|
||||
|
||||
.questionText {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.answerContent p {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
}
|
||||
118
components/FAQ.tsx
Normal file
118
components/FAQ.tsx
Normal file
@ -0,0 +1,118 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import styles from './FAQ.module.css';
|
||||
|
||||
export default function FAQ() {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
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.',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
];
|
||||
|
||||
const toggleFAQ = (index: number) => {
|
||||
setOpenIndex(openIndex === index ? null : index);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="section" id="faq">
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>❓</span>
|
||||
<span>FAQ</span>
|
||||
</div>
|
||||
<h2 className={styles.title}>
|
||||
Frequently Asked <span className="gradient-text">Questions</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Everything you need to know about SocialBuddy. Can't find the answer you're looking for?
|
||||
<a href="/contact" className={styles.contactLink}> Contact our support team</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.faqContainer}>
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className={`${styles.faqItem} ${openIndex === index ? styles.open : ''}`}>
|
||||
<button
|
||||
className={styles.faqQuestion}
|
||||
onClick={() => toggleFAQ(index)}
|
||||
aria-expanded={openIndex === index}
|
||||
>
|
||||
<span className={styles.questionText}>{faq.question}</span>
|
||||
<span className={styles.icon}>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 9L12 15L18 9"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className={styles.faqAnswer}>
|
||||
<div className={styles.answerContent}>
|
||||
<p>{faq.answer}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.ctaBox}>
|
||||
<h3 className={styles.ctaTitle}>Still have questions?</h3>
|
||||
<p className={styles.ctaText}>
|
||||
Our friendly support team is here to help you 24/7
|
||||
</p>
|
||||
<div className={styles.ctaButtons}>
|
||||
<a href="/contact" className="btn btn-primary">
|
||||
Contact Support
|
||||
</a>
|
||||
<a href="/docs" className="btn btn-secondary">
|
||||
View Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
124
components/Features.module.css
Normal file
124
components/Features.module.css
Normal file
@ -0,0 +1,124 @@
|
||||
.header {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--background-secondary);
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.featuresGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@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);
|
||||
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 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.learnMore:hover .arrow {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
82
components/Features.tsx
Normal file
82
components/Features.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import styles from './Features.module.css';
|
||||
|
||||
export default function Features() {
|
||||
const features = [
|
||||
{
|
||||
icon: '📅',
|
||||
title: 'Smart Scheduling',
|
||||
description: 'Schedule posts across all platforms with AI-powered optimal timing suggestions.',
|
||||
color: '#667eea',
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: 'Advanced Analytics',
|
||||
description: 'Track performance metrics, engagement rates, and audience insights in real-time.',
|
||||
color: '#ec4899',
|
||||
},
|
||||
{
|
||||
icon: '🤖',
|
||||
title: 'AI Content Assistant',
|
||||
description: 'Generate engaging captions and hashtags with our AI-powered content tools.',
|
||||
color: '#14b8a6',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: 'Team Collaboration',
|
||||
description: 'Work seamlessly with your team with role-based access and approval workflows.',
|
||||
color: '#f59e0b',
|
||||
},
|
||||
{
|
||||
icon: '📱',
|
||||
title: 'Multi-Platform Support',
|
||||
description: 'Manage Facebook, Instagram, Twitter, LinkedIn, and more from one dashboard.',
|
||||
color: '#8b5cf6',
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
title: 'Real-Time Notifications',
|
||||
description: 'Stay updated with instant alerts for mentions, comments, and engagement.',
|
||||
color: '#ef4444',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="section" id="features">
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>✨</span>
|
||||
<span>Features</span>
|
||||
</div>
|
||||
<h2 className={styles.title}>
|
||||
Everything You Need to <span className="gradient-text">Succeed</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Powerful tools designed to streamline your social media management and boost your online presence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.featuresGrid}>
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={styles.featureCard}
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<div className={styles.iconWrapper} style={{ background: `${feature.color}20` }}>
|
||||
<span className={styles.icon} style={{ filter: `drop-shadow(0 0 10px ${feature.color})` }}>
|
||||
{feature.icon}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className={styles.featureTitle}>{feature.title}</h3>
|
||||
<p className={styles.featureDescription}>{feature.description}</p>
|
||||
<div className={styles.learnMore}>
|
||||
Learn more <span className={styles.arrow}>→</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
164
components/Footer.module.css
Normal file
164
components/Footer.module.css
Normal file
@ -0,0 +1,164 @@
|
||||
.footer {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 4rem 0 2rem;
|
||||
margin-top: 6rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom, transparent, var(--background));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.footerContent {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footerContent {
|
||||
grid-template-columns: 1.5fr 2fr;
|
||||
}
|
||||
}
|
||||
|
||||
.brandSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.logoIcon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.brandDescription {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.6;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.socialLink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.socialLink:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.linksGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.linksGrid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.linkColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.columnTitle {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.footerLink {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s ease;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.footerLink:hover {
|
||||
color: white;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.bottomBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bottomBar {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 0.85rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
125
components/Footer.tsx
Normal file
125
components/Footer.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
import Link from 'next/link';
|
||||
import styles from './Footer.module.css';
|
||||
|
||||
export default function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const footerLinks = {
|
||||
product: [
|
||||
{ label: 'Features', href: '/features' },
|
||||
{ label: 'Pricing', href: '/pricing' },
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API', href: '/docs/api' },
|
||||
],
|
||||
company: [
|
||||
{ label: 'About Us', href: '/about' },
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
{ label: 'Careers', href: '/careers' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
],
|
||||
resources: [
|
||||
{ label: 'Help Center', href: '/help' },
|
||||
{ label: 'Community', href: '/community' },
|
||||
{ label: 'Tutorials', href: '/tutorials' },
|
||||
{ label: 'Status', href: '/status' },
|
||||
],
|
||||
legal: [
|
||||
{ label: 'Privacy Policy', href: '/privacy' },
|
||||
{ label: 'Terms of Service', href: '/terms' },
|
||||
{ label: 'Cookie Policy', href: '/cookies' },
|
||||
{ label: 'GDPR', href: '/gdpr' },
|
||||
],
|
||||
};
|
||||
|
||||
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' },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<div className="container">
|
||||
<div className={styles.footerContent}>
|
||||
{/* Brand Section */}
|
||||
<div className={styles.brandSection}>
|
||||
<Link href="/" className={styles.logo}>
|
||||
<span className={styles.logoIcon}>🚀</span>
|
||||
<span className={styles.logoText}>Social<span className="gradient-text">Buddy</span></span>
|
||||
</Link>
|
||||
<p className={styles.brandDescription}>
|
||||
Empowering businesses to manage their social media presence with powerful tools and analytics.
|
||||
</p>
|
||||
<div className={styles.socialLinks}>
|
||||
{socialLinks.map((social) => (
|
||||
<a
|
||||
key={social.label}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={styles.socialLink}
|
||||
aria-label={social.label}
|
||||
>
|
||||
{social.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links Sections */}
|
||||
<div className={styles.linksGrid}>
|
||||
<div className={styles.linkColumn}>
|
||||
<h4 className={styles.columnTitle}>Product</h4>
|
||||
{footerLinks.product.map((link) => (
|
||||
<Link key={link.label} href={link.href} className={styles.footerLink}>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.linkColumn}>
|
||||
<h4 className={styles.columnTitle}>Company</h4>
|
||||
{footerLinks.company.map((link) => (
|
||||
<Link key={link.label} href={link.href} className={styles.footerLink}>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.linkColumn}>
|
||||
<h4 className={styles.columnTitle}>Resources</h4>
|
||||
{footerLinks.resources.map((link) => (
|
||||
<Link key={link.label} href={link.href} className={styles.footerLink}>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.linkColumn}>
|
||||
<h4 className={styles.columnTitle}>Legal</h4>
|
||||
{footerLinks.legal.map((link) => (
|
||||
<Link key={link.label} href={link.href} className={styles.footerLink}>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className={styles.bottomBar}>
|
||||
<p className={styles.copyright}>
|
||||
© {currentYear} SocialBuddy. All rights reserved.
|
||||
</p>
|
||||
<div className={styles.badges}>
|
||||
<span className={styles.badge}>🔒 Secure</span>
|
||||
<span className={styles.badge}>⚡ Fast</span>
|
||||
<span className={styles.badge}>🌍 Global</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
651
components/Hero.module.css
Normal file
651
components/Hero.module.css
Normal file
@ -0,0 +1,651 @@
|
||||
.hero {
|
||||
position: relative;
|
||||
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: '';
|
||||
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%);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
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%;
|
||||
left: -10%;
|
||||
animation: floatOrb 25s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.gradientOrb2 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%);
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
animation: floatOrb 20s ease-in-out infinite alternate-reverse;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@keyframes floatOrb {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(30px, -30px);
|
||||
}
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
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 {
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.textContent {
|
||||
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);
|
||||
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);
|
||||
}
|
||||
|
||||
.badgePulse {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);
|
||||
animation: pulseShadow 2s infinite;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(3rem, 5vw, 4.5rem);
|
||||
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;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 1em;
|
||||
background-color: #3b82f6;
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.subtitle {
|
||||
font-size: clamp(1.125rem, 2vw, 1.25rem);
|
||||
line-height: 1.6;
|
||||
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;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboardPreview:hover {
|
||||
transform: rotateY(-4deg) rotateX(2deg) scale(1.02);
|
||||
}
|
||||
|
||||
@keyframes floatCard {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotateY(-8deg) rotateX(4deg) translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotateY(-8deg) rotateX(4deg) translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Floating icons - clearer */
|
||||
.floatingIcon {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 16px;
|
||||
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;
|
||||
}
|
||||
|
||||
.icon2 {
|
||||
top: 30%;
|
||||
right: -30px;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.icon3 {
|
||||
bottom: -15px;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes floatIcon {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--progress, 0%);
|
||||
background: linear-gradient(90deg, #ec4899, #8b5cf6);
|
||||
border-radius: 4px;
|
||||
animation: fillBar 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.chartBar:nth-child(1) {
|
||||
--progress: 75%;
|
||||
}
|
||||
|
||||
.chartBar:nth-child(2) {
|
||||
--progress: 45%;
|
||||
}
|
||||
|
||||
.chartBar:nth-child(3) {
|
||||
--progress: 90%;
|
||||
}
|
||||
|
||||
.scheduleItem {
|
||||
height: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes fillBar {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
width: var(--progress);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Scroll indicator - minimalist */
|
||||
.scrollIndicator {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 50%;
|
||||
filter: blur(100px);
|
||||
opacity: 0.15;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.morphingShape1 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: #3b82f6;
|
||||
top: -10%;
|
||||
right: -10%;
|
||||
animation: morph 20s infinite alternate;
|
||||
}
|
||||
|
||||
.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 */
|
||||
@media (max-width: 1024px) {
|
||||
.hero {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
263
components/Hero.tsx
Normal file
263
components/Hero.tsx
Normal file
@ -0,0 +1,263 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import styles from './Hero.module.css';
|
||||
|
||||
export default function Hero() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const heroRef = useRef<HTMLDivElement>(null);
|
||||
const [typedText, setTypedText] = useState('');
|
||||
const [cursorTrail, setCursorTrail] = useState<Array<{ x: number; y: number; id: number }>>([]);
|
||||
const [stats, setStats] = useState({ users: 0, posts: 0, rating: 0 });
|
||||
|
||||
const fullText = 'Manage All Your Social Media in One Place';
|
||||
|
||||
// Typing animation
|
||||
useEffect(() => {
|
||||
let index = 0;
|
||||
const timer = setInterval(() => {
|
||||
if (index <= fullText.length) {
|
||||
setTypedText(fullText.slice(0, index));
|
||||
index++;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 50);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
// Stats counter animation
|
||||
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);
|
||||
|
||||
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);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className={styles.hero} ref={heroRef}>
|
||||
<canvas ref={canvasRef} className={styles.canvas} />
|
||||
|
||||
{/* Floating gradient orbs */}
|
||||
<div className={styles.gradientOrb1} />
|
||||
<div className={styles.gradientOrb2} />
|
||||
<div className={styles.gradientOrb3} />
|
||||
|
||||
{/* Morphing shapes */}
|
||||
<div className={styles.morphingShape1}></div>
|
||||
<div className={styles.morphingShape2}></div>
|
||||
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<div className={styles.textContent}>
|
||||
<div className={styles.badge}>
|
||||
<span className={styles.badgeIcon}>✨</span>
|
||||
<span>Scale your Social Media Presence</span>
|
||||
<span className={styles.badgePulse}></span>
|
||||
</div>
|
||||
|
||||
<h1 className={styles.title}>
|
||||
<span className={styles.typingText}>
|
||||
{typedText}
|
||||
<span className={styles.cursor}>|</span>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className={`${styles.subtitle} animate-fade-in`}>
|
||||
Empower your brand with intelligent scheduling, deep analytics, and real-time engagement tools.
|
||||
</p>
|
||||
|
||||
<div className={`${styles.ctaButtons} animate-fade-in`}>
|
||||
<a href="https://app.socialbuddy.co/signup" className={styles.primaryCta}>
|
||||
<span>Start Free Trial</span>
|
||||
<span className={styles.arrow}>→</span>
|
||||
<span className={styles.buttonGlow}></span>
|
||||
</a>
|
||||
<Link href="/demo" className={styles.secondaryCta}>
|
||||
<span className={styles.playIcon}>▶</span>
|
||||
<span>Watch Demo</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className={styles.trustBadges}>
|
||||
<div className={styles.trustBadge}>
|
||||
<div className={styles.trustValue}>{stats.rating.toFixed(1)}/5</div>
|
||||
<div className={styles.trustLabel}>Rating</div>
|
||||
</div>
|
||||
<div className={styles.trustBadge}>
|
||||
<div className={styles.trustValue}>{(stats.users / 1000).toFixed(0)}K+</div>
|
||||
<div className={styles.trustLabel}>Active Users</div>
|
||||
</div>
|
||||
<div className={styles.trustBadge}>
|
||||
<div className={styles.trustValue}>{(stats.posts / 1000000).toFixed(1)}M+</div>
|
||||
<div className={styles.trustLabel}>Posts Scheduled</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.imageContent}>
|
||||
<div className={styles.dashboardPreview}>
|
||||
{/* Floating social media icons */}
|
||||
<div className={`${styles.floatingIcon} ${styles.icon1}`}>
|
||||
<span>📱</span>
|
||||
</div>
|
||||
<div className={`${styles.floatingIcon} ${styles.icon2}`}>
|
||||
<span>📊</span>
|
||||
</div>
|
||||
<div className={`${styles.floatingIcon} ${styles.icon3}`}>
|
||||
<span>💬</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.previewHeader}>
|
||||
<div className={styles.previewDots}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div className={styles.previewTitle}>SocialBuddy Dashboard</div>
|
||||
</div>
|
||||
<div className={styles.previewBody}>
|
||||
<div className={`${styles.previewCard} ${styles.analyticsCard}`}>
|
||||
<div className={styles.cardHeader}>
|
||||
<span>📊</span>
|
||||
<span>Analytics Overview</span>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<div className={styles.chartBar}></div>
|
||||
<div className={styles.chartBar}></div>
|
||||
<div className={styles.chartBar}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${styles.previewCard} ${styles.scheduleCard}`}>
|
||||
<div className={styles.cardHeader}>
|
||||
<span>📅</span>
|
||||
<span>Upcoming Posts</span>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<div className={styles.scheduleItem}></div>
|
||||
<div className={styles.scheduleItem}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced scroll indicator */}
|
||||
<div className={styles.scrollIndicator}>
|
||||
<div className={styles.mouse}>
|
||||
<div className={styles.mouseWheel}></div>
|
||||
</div>
|
||||
<span>Scroll</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
233
components/HowItWorks.module.css
Normal file
233
components/HowItWorks.module.css
Normal file
@ -0,0 +1,233 @@
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.stepsContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@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 {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
border-radius: 12px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.stepContent {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
padding: 2rem 1.5rem;
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stepTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stepDescription {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.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;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.ctaText {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 0.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ctaBox a:hover .arrow {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
111
components/HowItWorks.tsx
Normal file
111
components/HowItWorks.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import styles from './HowItWorks.module.css';
|
||||
|
||||
export default function HowItWorks() {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add(styles.visible);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
const steps = sectionRef.current?.querySelectorAll(`.${styles.step}`);
|
||||
steps?.forEach((step) => observer.observe(step));
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
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',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Engage Your Audience',
|
||||
description: 'Respond to comments, messages, and mentions from a unified inbox across all platforms.',
|
||||
icon: '💬',
|
||||
color: '#14b8a6',
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'Analyze & Optimize',
|
||||
description: 'Track performance metrics and get actionable insights to improve your social media strategy.',
|
||||
icon: '📈',
|
||||
color: '#f59e0b',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="section" id="how-it-works" ref={sectionRef}>
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>🚀</span>
|
||||
<span>How It Works</span>
|
||||
</div>
|
||||
<h2 className={styles.title}>
|
||||
Get Started in <span className="gradient-text">4 Simple Steps</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
From setup to success, we've made it incredibly easy to manage your social media presence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.stepsContainer}>
|
||||
{steps.map((step, index) => (
|
||||
<div key={index} className={styles.step}>
|
||||
<div className={styles.stepNumber} style={{ background: `${step.color}20`, color: step.color }}>
|
||||
{step.number}
|
||||
</div>
|
||||
<div className={styles.stepContent}>
|
||||
<div className={styles.stepIcon} style={{ background: `${step.color}15` }}>
|
||||
<span style={{ filter: `drop-shadow(0 0 10px ${step.color})` }}>{step.icon}</span>
|
||||
</div>
|
||||
<h3 className={styles.stepTitle}>{step.title}</h3>
|
||||
<p className={styles.stepDescription}>{step.description}</p>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div className={styles.connector}>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.ctaBox}>
|
||||
<div className={styles.ctaContent}>
|
||||
<h3 className={styles.ctaTitle}>Ready to streamline your social media?</h3>
|
||||
<p className={styles.ctaText}>Start your 14-day free trial today. No credit card required.</p>
|
||||
</div>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary btn-large">
|
||||
Get Started Free
|
||||
<span className={styles.arrow}>→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
211
components/Navbar.module.css
Normal file
211
components/Navbar.module.css
Normal file
@ -0,0 +1,211 @@
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.navbar.scrolled {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.navContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.logoIcon {
|
||||
font-size: 2rem;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.navLinks {
|
||||
display: none;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navLinks {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.navLink {
|
||||
color: var(--foreground-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navLink::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--gradient-primary);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.navLink:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.navLink:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navActions {
|
||||
display: none;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navActions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.loginBtn {
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.loginBtn:hover {
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.mobileMenuBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.mobileMenuBtn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--foreground);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hamburger::before,
|
||||
.hamburger::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--foreground);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hamburger::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.hamburger::after {
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
.hamburger.open {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hamburger.open::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.hamburger.open::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.mobileMenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 2rem 0;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.mobileMenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobileNavLink {
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.75rem 0;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid var(--background-secondary);
|
||||
}
|
||||
|
||||
.mobileNavLink:hover {
|
||||
color: var(--primary);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.mobileActions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
95
components/Navbar.tsx
Normal file
95
components/Navbar.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
|
||||
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' },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''}`}>
|
||||
<div className="container">
|
||||
<div className={styles.navContent}>
|
||||
{/* Logo */}
|
||||
<Link href="/" className={styles.logo}>
|
||||
<span className={styles.logoIcon}>🚀</span>
|
||||
<span className={styles.logoText}>Social<span className="gradient-text">Buddy</span></span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className={styles.navLinks}>
|
||||
{navLinks.map((link) => (
|
||||
<Link key={link.href} href={link.href} className={styles.navLink}>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className={styles.navActions}>
|
||||
<a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
|
||||
Login
|
||||
</a>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className={styles.mobileMenuBtn}
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span className={`${styles.hamburger} ${isMobileMenuOpen ? styles.open : ''}`}></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className={styles.mobileMenu}>
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={styles.mobileNavLink}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className={styles.mobileActions}>
|
||||
<a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
|
||||
Login
|
||||
</a>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
234
components/Pricing.module.css
Normal file
234
components/Pricing.module.css
Normal file
@ -0,0 +1,234 @@
|
||||
.header {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--background-secondary);
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--foreground-secondary);
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background: var(--background-secondary);
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.toggleSlider {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--gradient-primary);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.toggleSlider.annual {
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.active {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.saveBadge {
|
||||
display: inline-block;
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pricingGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.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);
|
||||
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;
|
||||
}
|
||||
|
||||
.pricingCard:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.pricingCard.popular {
|
||||
border-color: var(--primary);
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
|
||||
}
|
||||
|
||||
.pricingCard.popular:hover {
|
||||
box-shadow: var(--shadow-xl), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.popularBadge {
|
||||
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);
|
||||
}
|
||||
|
||||
.planHeader {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.planName {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.planDescription {
|
||||
color: var(--foreground-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
color: var(--foreground-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.checkIcon {
|
||||
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;
|
||||
}
|
||||
|
||||
.guarantee {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: var(--background-secondary);
|
||||
border-radius: var(--radius-xl);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.guarantee strong {
|
||||
color: var(--primary);
|
||||
}
|
||||
148
components/Pricing.tsx
Normal file
148
components/Pricing.tsx
Normal file
@ -0,0 +1,148 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from './Pricing.module.css';
|
||||
|
||||
export default function Pricing() {
|
||||
const [isAnnual, setIsAnnual] = useState(false);
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: 'Free',
|
||||
description: 'Perfect for individuals getting started',
|
||||
price: { monthly: 0, annual: 0 },
|
||||
features: [
|
||||
'1 social media account',
|
||||
'10 scheduled posts per month',
|
||||
'Basic analytics',
|
||||
'Email support',
|
||||
'Mobile app access',
|
||||
],
|
||||
cta: 'Get Started',
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: 'Pro',
|
||||
description: 'Ideal for growing businesses',
|
||||
price: { monthly: 29, annual: 290 },
|
||||
features: [
|
||||
'5 social media accounts',
|
||||
'Unlimited scheduled posts',
|
||||
'Advanced analytics & reports',
|
||||
'Priority email support',
|
||||
'Team collaboration (3 members)',
|
||||
'AI content assistant',
|
||||
'Custom branding',
|
||||
],
|
||||
cta: 'Start Free Trial',
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: 'Premium',
|
||||
description: 'For agencies and enterprises',
|
||||
price: { monthly: 99, annual: 990 },
|
||||
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',
|
||||
],
|
||||
cta: 'Contact Sales',
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="section" id="pricing">
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>💎</span>
|
||||
<span>Pricing</span>
|
||||
</div>
|
||||
<h2 className={styles.title}>
|
||||
Simple, <span className="gradient-text">Transparent</span> Pricing
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Choose the perfect plan for your needs. All plans include a 14-day free trial.
|
||||
</p>
|
||||
|
||||
<div className={styles.toggle}>
|
||||
<span className={isAnnual ? '' : styles.active}>Monthly</span>
|
||||
<button
|
||||
className={styles.toggleButton}
|
||||
onClick={() => setIsAnnual(!isAnnual)}
|
||||
aria-label="Toggle pricing"
|
||||
>
|
||||
<span className={`${styles.toggleSlider} ${isAnnual ? styles.annual : ''}`}></span>
|
||||
</button>
|
||||
<span className={isAnnual ? styles.active : ''}>
|
||||
Annual
|
||||
<span className={styles.saveBadge}>Save 17%</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.pricingGrid}>
|
||||
{plans.map((plan, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles.pricingCard} ${plan.popular ? styles.popular : ''}`}
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
{plan.popular && <div className={styles.popularBadge}>Most Popular</div>}
|
||||
|
||||
<div className={styles.planHeader}>
|
||||
<h3 className={styles.planName}>{plan.name}</h3>
|
||||
<p className={styles.planDescription}>{plan.description}</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.priceSection}>
|
||||
<div className={styles.price}>
|
||||
<span className={styles.currency}>$</span>
|
||||
<span className={styles.amount}>
|
||||
{isAnnual ? Math.floor(plan.price.annual / 12) : plan.price.monthly}
|
||||
</span>
|
||||
<span className={styles.period}>/mo</span>
|
||||
</div>
|
||||
{isAnnual && plan.price.annual > 0 && (
|
||||
<p className={styles.billedAnnually}>
|
||||
Billed ${plan.price.annual} annually
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.features}>
|
||||
{plan.features.map((feature, idx) => (
|
||||
<div key={idx} className={styles.feature}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://app.socialbuddy.co/signup"
|
||||
className={`btn ${plan.popular ? 'btn-primary' : 'btn-secondary'} ${styles.ctaButton}`}
|
||||
>
|
||||
{plan.cta}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.guarantee}>
|
||||
<p>
|
||||
<strong>💯 30-Day Money-Back Guarantee</strong> - Try risk-free. Cancel anytime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
1081
components/SocialConnect.module.css
Normal file
1081
components/SocialConnect.module.css
Normal file
File diff suppressed because it is too large
Load Diff
335
components/SocialConnect.tsx
Normal file
335
components/SocialConnect.tsx
Normal file
@ -0,0 +1,335 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import styles from './SocialConnect.module.css';
|
||||
|
||||
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' },
|
||||
];
|
||||
|
||||
interface Particle {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
life: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function SocialConnect() {
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
||||
const [selectedPlatforms, setSelectedPlatforms] = useState<number[]>([]);
|
||||
const [particles, setParticles] = useState<Particle[]>([]);
|
||||
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
|
||||
// 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);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [particles]);
|
||||
|
||||
// Magnetic cursor effect
|
||||
const handleContainerMouseMove = (e: React.MouseEvent) => {
|
||||
setMousePos({ x: e.clientX, y: e.clientY });
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={styles.connectSection} onMouseMove={handleContainerMouseMove}>
|
||||
<div className="container">
|
||||
{/* Animated Background Elements */}
|
||||
<div className={styles.backgroundAnimation}>
|
||||
<div className={styles.floatingOrb1}></div>
|
||||
<div className={styles.floatingOrb2}></div>
|
||||
<div className={styles.floatingOrb3}></div>
|
||||
<div className={styles.gridPattern}></div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className={styles.header}>
|
||||
<span className={styles.badge}>
|
||||
<span className={styles.badgeIcon}>🔗</span>
|
||||
<span>One Platform, All Networks</span>
|
||||
<span className={styles.badgePulse}></span>
|
||||
</span>
|
||||
<h2 className={styles.title}>
|
||||
Connect Your <span className={styles.highlight}>Favorite Accounts</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Seamlessly integrate all your social media platforms in one place.
|
||||
Manage, schedule, and analyze everything from a single dashboard.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Interactive Platform Grid */}
|
||||
<div className={styles.platformsContainer} ref={containerRef}>
|
||||
<div className={styles.connectText}>
|
||||
<div className={styles.connectIconWrapper}>
|
||||
<div className={styles.connectIcon}>🌐</div>
|
||||
<div className={styles.iconRings}>
|
||||
<div className={styles.ring}></div>
|
||||
<div className={styles.ring}></div>
|
||||
<div className={styles.ring}></div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Connect your<br /><span className={styles.gradientText}>favorite accounts</span></h3>
|
||||
<p className={styles.connectSubtext}>Click to select platforms</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.platformsGrid}>
|
||||
{socialPlatforms.map((platform, index) => (
|
||||
<div
|
||||
key={platform.name}
|
||||
ref={el => { 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)}
|
||||
>
|
||||
{/* 3D Card Inner */}
|
||||
<div className={styles.cardInner}>
|
||||
<div className={styles.cardFront}>
|
||||
<div className={styles.platformIcon}>
|
||||
<span className={styles.iconEmoji} style={{ color: platform.color }}>
|
||||
{platform.icon}
|
||||
</span>
|
||||
<div className={styles.platformName}>{platform.name}</div>
|
||||
{selectedPlatforms.includes(index) && (
|
||||
<div className={styles.checkmark}>
|
||||
<span>✓</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Animated border */}
|
||||
<div className={styles.animatedBorder}></div>
|
||||
|
||||
{/* Shine effect */}
|
||||
<div className={styles.shineEffect}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.platformRipple}></div>
|
||||
<div className={styles.platformGlow}></div>
|
||||
|
||||
{/* Connection dots */}
|
||||
{selectedPlatforms.includes(index) && (
|
||||
<div className={styles.connectionDots}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Particle System */}
|
||||
<div className={styles.particleContainer}>
|
||||
{particles.map((particle, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={styles.particle}
|
||||
style={{
|
||||
left: `${particle.x}px`,
|
||||
top: `${particle.y}px`,
|
||||
backgroundColor: particle.color,
|
||||
opacity: particle.life,
|
||||
transform: `scale(${particle.life})`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Stats Bar */}
|
||||
<div className={styles.statsBar}>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}>
|
||||
<div className={styles.statIcon}>🎯</div>
|
||||
<div className={styles.statIconGlow}></div>
|
||||
</div>
|
||||
<div className={styles.statContent}>
|
||||
<div className={styles.statNumber}>11+</div>
|
||||
<div className={styles.statLabel}>Platforms Supported</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statDivider}></div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}>
|
||||
<div className={styles.statIcon}>⚡</div>
|
||||
<div className={styles.statIconGlow}></div>
|
||||
</div>
|
||||
<div className={styles.statContent}>
|
||||
<div className={`${styles.statNumber} ${styles.animated}`}>
|
||||
{selectedPlatforms.length > 0 ? selectedPlatforms.length : '0'}
|
||||
</div>
|
||||
<div className={styles.statLabel}>Selected Networks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statDivider}></div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}>
|
||||
<div className={styles.statIcon}>🚀</div>
|
||||
<div className={styles.statIconGlow}></div>
|
||||
</div>
|
||||
<div className={styles.statContent}>
|
||||
<div className={styles.statNumber}>1-Click</div>
|
||||
<div className={styles.statLabel}>Easy Integration</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced CTA Section */}
|
||||
<div className={styles.ctaSection}>
|
||||
<div className={styles.ctaBackground}>
|
||||
<div className={styles.ctaOrb1}></div>
|
||||
<div className={styles.ctaOrb2}></div>
|
||||
</div>
|
||||
<div className={styles.ctaContent}>
|
||||
<h3 className={styles.ctaTitle}>Ready to streamline your social media?</h3>
|
||||
<p className={styles.ctaText}>
|
||||
Connect all your accounts now and start managing them from one powerful dashboard.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.ctaButtons}>
|
||||
<button className="btn btn-primary btn-large">
|
||||
Get Started Free
|
||||
<span className={styles.arrow}>→</span>
|
||||
</button>
|
||||
<button className="btn btn-secondary btn-large">
|
||||
View All Features
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Connection Lines Animation */}
|
||||
<svg className={styles.connectionLines} viewBox="0 0 1200 400" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#ec4899" stopOpacity="0.6" />
|
||||
<stop offset="50%" stopColor="#a855f7" stopOpacity="0.6" />
|
||||
<stop offset="100%" stopColor="#3b82f6" stopOpacity="0.6" />
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
className={styles.animatedPath}
|
||||
d="M 0 200 Q 300 100 600 200 T 1200 200"
|
||||
stroke="url(#lineGradient)"
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
filter="url(#glow)"
|
||||
/>
|
||||
<path
|
||||
className={styles.animatedPath}
|
||||
d="M 0 250 Q 300 350 600 250 T 1200 250"
|
||||
stroke="url(#lineGradient)"
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
filter="url(#glow)"
|
||||
style={{ animationDelay: '1s' }}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
224
components/Testimonials.module.css
Normal file
224
components/Testimonials.module.css
Normal file
@ -0,0 +1,224 @@
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
|
||||
.authorImage {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.authorInfo {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.authorName {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.authorRole {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--border-color);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dot:hover {
|
||||
background: var(--primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.activeDot {
|
||||
background: var(--primary);
|
||||
width: 32px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 4rem;
|
||||
padding-top: 3rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.statItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.testimonialCard {
|
||||
padding: 4rem 3rem;
|
||||
}
|
||||
|
||||
.testimonialText {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.testimonialCard {
|
||||
padding: 5rem 6rem;
|
||||
}
|
||||
}
|
||||
140
components/Testimonials.tsx
Normal file
140
components/Testimonials.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import styles from './Testimonials.module.css';
|
||||
|
||||
export default function Testimonials() {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
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!',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
{
|
||||
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!',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
{
|
||||
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!',
|
||||
},
|
||||
{
|
||||
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!',
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveIndex((current) => (current + 1) % testimonials.length);
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [testimonials.length]);
|
||||
|
||||
const handleDotClick = (index: number) => {
|
||||
setActiveIndex(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="section" id="testimonials">
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>⭐</span>
|
||||
<span>Testimonials</span>
|
||||
</div>
|
||||
<h2 className={styles.title}>
|
||||
Loved by <span className="gradient-text">Thousands</span> of Users
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Don't just take our word for it. See what our customers have to say about SocialBuddy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.testimonialSlider}>
|
||||
<div className={styles.testimonialTrack} style={{ transform: `translateX(-${activeIndex * 100}%)` }}>
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div key={index} className={styles.testimonialCard}>
|
||||
<div className={styles.stars}>
|
||||
{[...Array(testimonial.rating)].map((_, i) => (
|
||||
<span key={i} className={styles.star}>⭐</span>
|
||||
))}
|
||||
</div>
|
||||
<p className={styles.testimonialText}>"{testimonial.text}"</p>
|
||||
<div className={styles.author}>
|
||||
<div className={styles.authorImage}>{testimonial.image}</div>
|
||||
<div className={styles.authorInfo}>
|
||||
<div className={styles.authorName}>{testimonial.name}</div>
|
||||
<div className={styles.authorRole}>
|
||||
{testimonial.role} at {testimonial.company}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.dots}>
|
||||
{testimonials.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`${styles.dot} ${index === activeIndex ? styles.activeDot : ''}`}
|
||||
onClick={() => handleDotClick(index)}
|
||||
aria-label={`Go to testimonial ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.stats}>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statNumber}>4.9/5</div>
|
||||
<div className={styles.statLabel}>Average Rating</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statNumber}>10,000+</div>
|
||||
<div className={styles.statLabel}>Happy Customers</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statNumber}>98%</div>
|
||||
<div className={styles.statLabel}>Satisfaction Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
BIN
public/hero-bg-v2.png
Normal file
BIN
public/hero-bg-v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 490 KiB |
BIN
public/hero-bg.png
Normal file
BIN
public/hero-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 478 KiB |
BIN
public/hero-custom.png
Normal file
BIN
public/hero-custom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
Loading…
x
Reference in New Issue
Block a user