[agentfarm] Improve the landing page

[QDaed]

Do not create any more component only edit the exist component to improve the landing page

1. Header:

• Logo with company name
• Navigation links (Features, Models, Contact)
• Mobile-responsive hamburger menu
• Semi-transparent background (bg-slate-900/50)
• Backdrop blur effect

2. Hero Section:

• Floating badge with sparkle icon showing "AI-Powered Development"
• Large headline "Take Control" (text-8xl on desktop)
• Subheadline "Ship Your Vision" in indigo-400
• Descriptive paragraph with max-width-2xl
• Two CTAs:
  • Primary: "Schedule a Demo" button with arrow animation
  • Secondary: Uptime indicator with pulse animation
• Trust indicators with Shield and Zap icons

3. Features Section:
   Desktop Features (3D Cards):

• 3D tilt effect using custom PinContainer
• Three columns grid layout
• Each card contains:
  • Icon in gradient background
  • Title in text-2xl
  • Description
  • Bullet points with indigo separator
  • "Learn more" link with arrow

Mobile Features:

• Single column layout
• Simplified cards without 3D effect
• Maintained visual hierarchy
• Optimized spacing for mobile

4. AI Models Section:

• Grid of AI capabilities
• Each model card with:
  • Icon representation
  • Title and description
  • Performance metrics
  • Interactive hover states

5. Particle Background:

• Implement using react-particles
• Subtle movement
• Low opacity
• Responsive to cursor movement

Styling:
Colors:

• Primary: slate-950 (background)
• Accent: indigo-400/500
• Text: white, slate-400, slate-300
• Borders: slate-800/50

Typography:

• Headlines: font-bold, tracking-tight
• Body: text-base/text-lg, leading-relaxed
• CTAs: text-sm/text-base

Spacing:

• Consistent padding: px-4 sm:px-6
• Section spacing: py-16 sm:py-20
• Component gaps: gap-4 sm:gap-6

Responsive Design:

• Mobile-first approach
• Breakpoints:
  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px
• Fluid typography scaling
• Adaptive layouts

Animations:

• Subtle hover transitions (duration-200/300)
• Button hover effects
• Floating badge animation
• Pulse effects on status indicators
• Smooth scroll behavior

Additional Requirements:

• TypeScript interfaces for all components
• Proper component composition
• Consistent file structure
• Error boundaries
• Loading states
• SEO optimization with meta tags
• Performance optimized
• Modern design practices
• Beautiful UI/UX

[theskcd]

ACK, on it!

[theskcd]

🎨 Landing Page Enhancement: Modernized the website's landing page with advanced UI/UX elements and responsive design patterns

• Added: Floating badge with animation, 3D tilt cards for features section, and interactive AI models showcase
• Updated: Hero section with improved typography, dynamic CTAs, and particle background effects
• Improved: Header with semi-transparent backdrop and streamlined navigation

Ready for review! The changes focus on creating a more engaging and professional user experience while maintaining performance. 👀