Skip to content

LANDING_PAGE_TASKS.md

Latest commit

 

History

History
594 lines (468 loc) · 14.7 KB

LANDING_PAGE_TASKS.md

File metadata and controls

594 lines (468 loc) · 14.7 KB
Raw

Landing Page & Website Structure - Implementation Tasks

Priority: HIGH
Estimated Time: 8-10 hours
Status: ✅ Phase 1-6 Complete (Core Implementation Done)

🎯 Objective

Build a modern, conversion-optimized landing page with professional navbar (2 dropdowns), footer, and supporting pages for AtlanticProxy.

📋 Tasks Breakdown

Phase 1: Project Setup (30 min)

1.1 Create Landing Page Structure

Directory: atlantic-dashboard/app/(marketing)/

  • Create marketing layout: (marketing)/layout.tsx
  • Create landing page: (marketing)/page.tsx
  • Create pricing page: (marketing)/pricing/page.tsx
  • Create features page: (marketing)/features/page.tsx
  • Create use-cases page: (marketing)/use-cases/page.tsx
  • Create about page: (marketing)/about/page.tsx
  • Create contact page: (marketing)/contact/page.tsx

1.2 Install Dependencies

npm install phosphor-react
npm install framer-motion
npm install react-intersection-observer

Phase 2: Navbar Component (2 hours)

2.1 Create Modern Navbar

File: atlantic-dashboard/components/marketing/Navbar.tsx

Features:

  • Sticky navbar with blur effect on scroll
  • Logo + Home button (left)
  • 2 Dropdown menus (Features, Resources)
  • CTA buttons (Login, Start Trial)
  • Mobile hamburger menu
  • Phosphor icons throughout
  • Smooth animations

Dropdown 1 - Features:

  • 🌍 Residential IPs
  • 🎯 Geo-Targeting
  • 🔄 IP Rotation
  • 🛡️ Security
  • 🚫 Ad-Blocking
  • 🔐 Protocols

Dropdown 2 - Resources:

  • 📚 Documentation
  • 🎓 Use Cases
  • 💰 Pricing
  • 📊 API Reference
  • 📝 Blog
  • 💬 Support

Structure:

<nav className="sticky top-0 z-50 backdrop-blur-lg bg-white/80 border-b">
  <div className="max-w-7xl mx-auto px-4">
    <div className="flex items-center justify-between h-16">
      {/* Left: Logo + Home */}
      {/* Center: Dropdowns */}
      {/* Right: Login + CTA */}
    </div>
  </div>
</nav>

2.2 Dropdown Component

File: atlantic-dashboard/components/marketing/Dropdown.tsx

  • Hover-triggered dropdown
  • Smooth fade-in animation
  • Icon + title + description per item
  • Click outside to close
  • Keyboard navigation (Tab, Escape)

Phase 3: Footer Component (1 hour)

3.1 Create Footer

File: atlantic-dashboard/components/marketing/Footer.tsx

Sections:

  • 4-column layout (responsive)
  • Company info + logo
  • Social media links (Phosphor icons)
  • Newsletter signup
  • Copyright + legal links

Columns:

  1. Product

    • Features
    • Pricing
    • Use Cases
    • Roadmap
    • Changelog

  2. Resources

    • Documentation
    • API Reference
    • Quick Start
    • Blog
    • Status Page

  3. Company

    • About Us
    • Contact
    • Careers
    • Press Kit
    • Partners

  4. Legal

    • Terms of Service
    • Privacy Policy
    • Acceptable Use
    • Refund Policy
    • Cookie Policy

Social Icons (Phosphor):

  • TwitterLogo
  • GithubLogo
  • DiscordLogo
  • LinkedinLogo
  • EnvelopeSimple

Phase 4: Landing Page Sections (4 hours)

4.1 Hero Section

File: atlantic-dashboard/components/marketing/sections/Hero.tsx

  • Headline: "Premium Residential Proxies That Protect Your Accounts"
  • Subheadline with key stats
  • Dual CTA buttons (Start Trial, View Pricing)
  • Trust badges (99.9% uptime, 195 countries, 72M+ IPs)
  • Animated globe/network visualization OR hero image
  • Gradient background with subtle animation

Visual Options:

  • Option A: Animated SVG globe with connection lines
  • Option B: Abstract network pattern background
  • Option C: Dashboard screenshot with glow effect

4.2 Problem/Solution Section

File: atlantic-dashboard/components/marketing/sections/ProblemSolution.tsx

  • Split layout (Problem | Solution)
  • Icons for each point
  • Comparison table
  • Animated on scroll

Content:

  • ❌ Cheap proxies → Banned accounts
  • ✅ Premium residential IPs → 99.9% success
  • ❌ Country-level only → Limited targeting
  • ✅ Town/city + ISP → Precise control

4.3 Features Grid

File: atlantic-dashboard/components/marketing/sections/Features.tsx

  • 6-card grid (3x2 on desktop, 1x6 on mobile)
  • Phosphor icons (large, colored)
  • Hover effects (lift + glow)
  • Animated on scroll

Cards:

  1. 🌍 72M+ Residential IPs - Real ISP addresses, not datacenter
  2. 🎯 Town-Level Targeting - 195 countries, 500+ cities
  3. 🛡️ Kill Switch - Firewall-level protection (<500ms)
  4. 🔄 Smart Rotation - 4 modes (per-request, sticky)
  5. 🚫 Ad-Blocking - DNS + HTTP filtering (>95%)
  6. 🔐 Multi-Protocol - HTTP/HTTPS, SOCKS5, Shadowsocks

Phosphor Icons:

  • Globe
  • MapPin
  • ShieldCheck
  • ArrowsClockwise
  • ProhibitInset
  • LockKey

4.4 Comparison Table

File: atlantic-dashboard/components/marketing/sections/Comparison.tsx

  • 3-column comparison (Cheap Proxies | VPNs | AtlanticProxy)
  • Checkmarks/X marks (Phosphor: Check, X)
  • Highlight AtlanticProxy column
  • Mobile: Tabs instead of columns

4.5 Use Cases Section

File: atlantic-dashboard/components/marketing/sections/UseCases.tsx

  • 6 icon cards in 2 rows
  • Hover to reveal description
  • Link to detailed use case pages

Cards:

  • 🔒 Privacy Browsing
  • 🕷️ Web Scraping
  • 📊 Ad Verification
  • 🛒 Price Comparison
  • 🎬 Content Access
  • 🔐 Security Testing

4.6 Social Proof Section

File: atlantic-dashboard/components/marketing/sections/Testimonials.tsx

  • 3 testimonial cards
  • Avatar + name + role
  • Star rating (Phosphor: Star)
  • Carousel on mobile

Testimonials:

  1. "Switched from cheap proxies - haven't lost an account since" - @webdev
  2. "Town-level targeting is a game changer for local SEO" - @seoagency
  3. "Finally, a proxy that doesn't leak my real IP" - @privacyfirst

4.7 Pricing Preview

File: atlantic-dashboard/components/marketing/sections/PricingPreview.tsx

  • 3 pricing cards (Starter, Personal, Team)
  • Highlight "Most Popular"
  • Feature list per tier
  • CTA: "See Full Pricing"

4.8 Stats Section

File: atlantic-dashboard/components/marketing/sections/Stats.tsx

  • 4 animated counters
  • Count up on scroll into view

Stats:

  • 72M+ Residential IPs
  • 195 Countries
  • 99.9% Success Rate
  • <50ms Latency

4.9 Final CTA Section

File: atlantic-dashboard/components/marketing/sections/FinalCTA.tsx

  • Full-width gradient background
  • Large headline
  • Dual CTAs
  • Money-back guarantee badge

Phase 5: Visual Assets (1.5 hours)

5.1 Generate/Create Icons & Images

Option A: Use Phosphor Icons (Recommended)

  • All icons from Phosphor React library
  • Consistent size (32px, 48px, 64px)
  • Color scheme: Blue (#3B82F6), Green (#10B981)

Option B: Generate Banner Images

  • Hero background (abstract network pattern)
  • Feature section backgrounds
  • Use tools: Figma, Canva, or AI (Midjourney/DALL-E)

Option C: Server/Network Illustrations

  • SVG illustrations of servers
  • Network connection animations
  • Globe with connection lines

Decision Matrix:

Asset Type Phosphor Icons Banner Images SVG Illustrations
Load Time ✅ Fast ⚠️ Slower ✅ Fast
Consistency ✅ Perfect ⚠️ Varies ✅ Good
Customization ⚠️ Limited ✅ Full ✅ Full
Maintenance ✅ Easy ⚠️ Manual ⚠️ Manual

Recommendation: Start with Phosphor icons + subtle gradient backgrounds, add custom illustrations later.

5.2 Create Logo Variations

File: atlantic-dashboard/public/logo/

  • Logo (full color)
  • Logo (white for dark backgrounds)
  • Logo (icon only)
  • Favicon (16x16, 32x32, 64x64)

Temporary Solution:

  • Use text logo with Phosphor icon (Waves or Globe)
  • Example: <Waves size={32} /> AtlanticProxy

5.3 Background Patterns

File: atlantic-dashboard/components/marketing/BackgroundPattern.tsx

  • Subtle grid pattern
  • Gradient mesh
  • Animated dots/particles (optional)

Phase 6: Supporting Pages (2 hours)

6.1 Pricing Page

File: atlantic-dashboard/app/(marketing)/pricing/page.tsx

  • All 5 pricing tiers
  • Feature comparison matrix
  • FAQ accordion
  • Interactive calculator
  • Trust badges

6.2 Features Page

File: atlantic-dashboard/app/(marketing)/features/page.tsx

  • Detailed feature sections
  • Technical specs table
  • Code examples
  • Screenshots/demos

6.3 Use Cases Page

File: atlantic-dashboard/app/(marketing)/use-cases/page.tsx

  • 6 detailed use case sections
  • Problem → Solution → CTA format
  • Real-world examples

6.4 About Page

File: atlantic-dashboard/app/(marketing)/about/page.tsx

  • Mission statement
  • Company values
  • Team section (optional)
  • Contact info

6.5 Contact Page

File: atlantic-dashboard/app/(marketing)/contact/page.tsx

  • Contact form
  • Email/Discord links
  • FAQ section
  • Response time expectations

Phase 7: Animations & Interactions (1 hour)

7.1 Scroll Animations

File: atlantic-dashboard/hooks/useScrollAnimation.ts

  • Fade in on scroll
  • Slide up on scroll
  • Stagger animations for lists
  • Use Intersection Observer

7.2 Hover Effects

  • Card lift on hover
  • Button glow on hover
  • Icon scale on hover
  • Smooth transitions (200-300ms)

7.3 Loading States

  • Skeleton loaders
  • Smooth page transitions
  • Progressive image loading

Phase 8: SEO & Performance (1 hour)

8.1 SEO Optimization

File: atlantic-dashboard/app/(marketing)/layout.tsx

  • Meta tags (title, description, OG)
  • Structured data (JSON-LD)
  • Sitemap generation
  • Robots.txt

8.2 Performance

  • Image optimization (next/image)
  • Code splitting
  • Lazy loading
  • Font optimization

8.3 Analytics

  • Google Analytics setup
  • Conversion tracking
  • Heatmap (Hotjar/Microsoft Clarity)

🎨 Design System

Colors

const colors = {
  primary: '#3B82F6',      // Blue
  secondary: '#10B981',    // Green
  accent: '#8B5CF6',       // Purple
  dark: '#1F2937',         // Dark gray
  light: '#F9FAFB',        // Light gray
  danger: '#EF4444',       // Red
}

Typography

const fonts = {
  heading: 'font-bold text-4xl md:text-5xl lg:text-6xl',
  subheading: 'font-semibold text-2xl md:text-3xl',
  body: 'text-base md:text-lg',
  small: 'text-sm',
}

Spacing

const spacing = {
  section: 'py-16 md:py-24',
  container: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
  card: 'p-6 md:p-8',
}

📁 File Structure

atlantic-dashboard/
├── app/
│   ├── (marketing)/
│   │   ├── layout.tsx              # Marketing layout with navbar/footer
│   │   ├── page.tsx                # Landing page
│   │   ├── pricing/
│   │   │   └── page.tsx
│   │   ├── features/
│   │   │   └── page.tsx
│   │   ├── use-cases/
│   │   │   └── page.tsx
│   │   ├── about/
│   │   │   └── page.tsx
│   │   └── contact/
│   │       └── page.tsx
│   └── (dashboard)/                # Existing dashboard
│       └── ...
├── components/
│   └── marketing/
│       ├── Navbar.tsx              # Main navbar
│       ├── Dropdown.tsx            # Dropdown menu
│       ├── Footer.tsx              # Footer
│       ├── BackgroundPattern.tsx   # Background effects
│       └── sections/
│           ├── Hero.tsx
│           ├── ProblemSolution.tsx
│           ├── Features.tsx
│           ├── Comparison.tsx
│           ├── UseCases.tsx
│           ├── Testimonials.tsx
│           ├── PricingPreview.tsx
│           ├── Stats.tsx
│           └── FinalCTA.tsx
├── hooks/
│   └── useScrollAnimation.ts       # Scroll animations
└── public/
    ├── logo/                       # Logo variations
    └── images/                     # Marketing images

🚀 Implementation Order

Day 1 (4 hours) ✅ COMPLETE

  1. ✅ Setup project structure
  2. ✅ Create Navbar with dropdowns (2 dropdowns: Features, Resources)
  3. ✅ Create Footer (4-column layout with social links)
  4. ✅ Test navigation flow

Day 2 (4 hours) ✅ COMPLETE

  1. ✅ Build Hero section (with trust badges)
  2. ✅ Build Features grid (6 cards with Phosphor icons)
  3. ✅ Build Comparison table (3-column)
  4. ✅ Build Pricing preview (3 main tiers)
  5. ✅ Build Final CTA section

Day 3 (2 hours) ✅ COMPLETE

  1. ✅ Create supporting pages (Pricing, Features, Use Cases, About, Contact)
  2. ⏳ Add scroll animations (optional enhancement)
  3. ⏳ SEO optimization (optional enhancement)
  4. ⏳ Final testing & polish

🧪 Testing Checklist

Navbar

  • Dropdowns open on hover
  • Dropdowns close on click outside
  • Mobile menu works
  • All links navigate correctly
  • Sticky behavior works on scroll

Footer

  • All links work
  • Social icons link correctly
  • Newsletter signup works
  • Responsive on all devices

Landing Page

  • All sections load
  • Animations trigger on scroll
  • CTAs link to correct pages
  • Images load properly
  • Mobile responsive

Performance

  • Lighthouse score >90
  • First Contentful Paint <1.5s
  • Time to Interactive <3s
  • No layout shifts

📊 Success Metrics

Technical

  • Lighthouse Performance: >90
  • Lighthouse Accessibility: >95
  • Lighthouse SEO: >95
  • Mobile-friendly: Yes

Business

  • Bounce rate: <50%
  • Time on page: >2 min
  • CTA click rate: >5%
  • Trial signup rate: >2%

🎯 Quick Start

1. Install Dependencies

cd atlantic-dashboard
npm install phosphor-react framer-motion react-intersection-observer

2. Create Marketing Layout

mkdir -p app/\(marketing\)
touch app/\(marketing\)/layout.tsx
touch app/\(marketing\)/page.tsx

3. Create Components

mkdir -p components/marketing/sections
touch components/marketing/Navbar.tsx
touch components/marketing/Footer.tsx
touch components/marketing/Dropdown.tsx

4. Run Dev Server

npm run dev
# Visit http://localhost:3456

📝 Notes

  • Use Phosphor icons for consistency
  • Start with simple gradients, add custom graphics later
  • Focus on conversion optimization (clear CTAs)
  • Mobile-first approach
  • Test on real devices

Next Steps: Start with Navbar → Footer → Hero section, then iterate on remaining sections.