DreamChat Landing Page

A modern, responsive landing page for DreamChat - an AI chatbot platform for business growth. Built with React and styled with CSS, this landing page showcases the product's features, benefits, and pricing in an engaging and visually appealing way.

Features

• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Modern UI/UX: Clean, professional design with smooth animations
• Interactive Elements: Hover effects, floating chat demos, and engaging visuals
• Accessibility: Proper focus states and semantic HTML structure
• Performance: Optimized for fast loading and smooth scrolling

Sections

1. Hero Section: Compelling headline, subtext, and call-to-action
2. Chat Demo: Interactive chat interface demonstrations
3. Companies: Trusted by section with company logos
4. Problem Section: Addresses pain points of poor website engagement
5. Solution Section: Introduces DreamChat and its benefits
6. How It Works: 3-step process explanation
7. Features: Comprehensive feature showcase
8. Handoff Section: AI-to-human handoff explanation
9. Pricing: Three pricing tiers with feature comparison
10. Testimonials: Customer success stories
11. CTA Section: Final call-to-action with demo
12. Footer: Links and company information

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

git clone <repository-url>
cd dream-chat-landing-page

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 to view it in the browser.

Building for Production

To create a production build:

npm run build

This builds the app for production to the build folder.

Project Structure

src/
├── components/          # React components
│   ├── HeroSection.js
│   ├── ChatDemo.js
│   ├── CompaniesSection.js
│   ├── ProblemSection.js
│   ├── SolutionSection.js
│   ├── HowItWorks.js
│   ├── FeaturesSection.js
│   ├── HandoffSection.js
│   ├── PricingSection.js
│   ├── TestimonialsSection.js
│   ├── CTASection.js
│   └── Footer.js
├── App.js              # Main App component
├── App.css             # Global styles
├── index.js            # Entry point
└── index.css           # Base styles

Design System

Colors

• Primary: #111111 (Black)
• Secondary: #2e2b7a (Brand Blue)
• Accent: #d1593f (Orange)
• Text: #5f7495 (Blue Grey)
• Background: #ffffff (White)
• Light Background: #f1f1ff (Light Blue)

Typography

• Font Family: Inter, system fonts
• Headings: 600 weight, various sizes
• Body: 400 weight, 16px base size
• Line Height: 1.4-1.6 for readability

Spacing

• Consistent 8px grid system
• Section padding: 80px (desktop), 60px (tablet), 40px (mobile)
• Component gaps: 16px, 24px, 32px, 40px

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.