Skip to content

[agentfarm] Improve the landing page #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
QDaed opened this issue Feb 19, 2025 · 2 comments · May be fixed by #91
Open

[agentfarm] Improve the landing page #90

QDaed opened this issue Feb 19, 2025 · 2 comments · May be fixed by #91

Comments

@QDaed
Copy link
Collaborator

QDaed commented Feb 19, 2025

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
  1. 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
  1. 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
  1. AI Models Section:
  • Grid of AI capabilities
  • Each model card with:
    • Icon representation
    • Title and description
    • Performance metrics
    • Interactive hover states
  1. 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
Copy link
Contributor

theskcd commented Feb 19, 2025

ACK, on it!

@theskcd
Copy link
Contributor

theskcd commented Feb 19, 2025

🎨 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. 👀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants