Develop a dark-themed homepage for an AI platform, similar to bith.ai, using React and Tailwind CSS. The homepage should feature a modern layout with animations and include the following sections:
-
Hero Section:
- A prominent title and a concise subtitle.
- A clear call-to-action (CTA) button.
-
Tools Section:
- Display cards for the following AI tools:
- Text to Video
- Text to Speech
- AI Image Generator
- Video Enhancer
- Background Remover
- Subtitle Translator
- Display cards for the following AI tools:
-
Pricing Section:
- Present pricing tiers for Free, Pro, and Enterprise plans.
-
Footer:
- Include quick links for navigation.
- Provide contact information.
Ensure the design is visually appealing, responsive, and incorporates animations to enhance user experience. The color scheme should be dark-themed to match the platform's aesthetic.
Dark-Themed AI Platform Homepage
I'll create a modern, dark-themed homepage for an AI platform with animations using Next.js and Tailwind CSS. Based on your requirements and the reference image, here's a complete implementation:
Key Features Implemented
Dark Theme Design
- Used a dark color palette with rich blacks and grays
- Added purple and blue gradient accents for visual interest
Responsive Layout
- Implemented mobile-friendly design with responsive grid layouts
- Created a collapsible mobile menu for better navigation on small screens
Animations
- Added fade-in and slide-up animations for section elements
- Implemented floating particle effects in the hero section
- Used hover animations on cards and buttons for interactive feedback
Modern UI Components
- Created custom card components for tools and pricing plans
- Used gradient buttons and text for visual emphasis
- Implemented a sticky navbar that changes on scroll
Complete Sections
- Hero Section: Eye-catching headline with gradient text and CTA button
- Tools Section: Grid of tool cards with icons and descriptions
- Pricing Section: Three-tier pricing plan with feature lists
- Footer: Comprehensive footer with navigation, social links, and contact info
Implementation Details
The homepage is built using Next.js with the App Router and Tailwind CSS for styling. I've used shadcn/ui components for the UI elements and Lucide React for the icons. The animations are implemented using both CSS animations and Framer Motion for more complex animations.
The design follows a dark theme with a purple and blue gradient accent that's consistent throughout the page. The layout is fully responsive, adapting to different screen sizes with appropriate spacing and component arrangements.
For the best user experience, I've added subtle animations that trigger as the user scrolls down the page, bringing attention to each section as it comes into view.