SaaS Landing Page

A modern, responsive SaaS landing page built with Next.js 14, TypeScript, and Tailwind CSS. Features a beautiful glassmorphism design with smooth animations and interactive components.

✨ Features

• Modern Glassmorphism Design - Beautiful blurred glass effects throughout the UI
• Fully Responsive - Optimized for all devices and screen sizes
• Smooth Animations - Framer Motion powered animations and transitions
• Interactive Components - Hover effects, smooth scrolling, and mobile navigation
• Performance Optimized - Built with Next.js 14 for optimal performance
• TypeScript - Full type safety and better development experience
• Accessible - WCAG compliant with proper semantic HTML

🛠️ Tech Stack

• Framework: Next.js 14 - React framework with App Router
• Language: TypeScript - Type-safe JavaScript
• Styling: Tailwind CSS - Utility-first CSS framework
• Animations: Framer Motion - Production-ready motion library
• Icons: Custom SVG icons and assets
• Deployment: Ready for Vercel, Netlify, or any static hosting

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository

   git clone https://github.com/yourusername/sass-landing-page.git
   cd sass-landing-page

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser Navigate to http://localhost:3000 to see the result.

📁 Project Structure

sass-landing-page/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── globals.css      # Global styles
│   │   ├── layout.tsx       # Root layout
│   │   └── page.tsx         # Home page
│   ├── assets/              # Images, icons, and static assets
│   ├── components/          # Reusable UI components
│   ├── sections/            # Page sections
│   │   ├── Header.tsx       # Navigation header
│   │   ├── Hero.tsx         # Hero section
│   │   ├── ProductShowcase.tsx
│   │   ├── Pricing.tsx      # Pricing plans
│   │   ├── Testimonials.tsx # Customer testimonials
│   │   ├── CallToAction.tsx # CTA section
│   │   ├── Footer.tsx       # Footer
│   │   └── LogoTicker.tsx   # Logo carousel
│   └── lib/                 # Utility functions and data
├── public/                  # Static files
├── tailwind.config.ts       # Tailwind configuration
└── package.json

🎨 Key Components

Header

• Sticky navigation with glassmorphism effect
• Mobile-responsive hamburger menu
• Smooth scroll to CTA section
• Dynamic navigation links

Hero Section

• Compelling headline and description
• Call-to-action buttons
• Background animations

Product Showcase

• Feature highlights with icons
• Interactive hover effects
• Responsive grid layout

Pricing

• Multiple pricing tiers
• Feature comparisons
• Hover animations

Testimonials

• Customer reviews with avatars
• Carousel/slider functionality
• Star ratings

🎯 Customization

Colors

Update the color scheme in tailwind.config.ts:

theme: {
  extend: {
    colors: {
      primary: '#your-color',
      secondary: '#your-color',
    }
  }
}

Content

• Update text content in individual component files
• Replace images in src/assets/
• Modify navigation links in src/lib/data.ts

Styling

• Modify Tailwind classes in component files
• Update global styles in src/app/globals.css
• Customize animations in Framer Motion components

📱 Responsive Design

The landing page is fully responsive with breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically on every push

Netlify

1. Build the project: npm run build
2. Deploy the out folder to Netlify

Other Platforms

The project can be deployed to any static hosting service that supports Next.js.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js for the amazing framework
• Tailwind CSS for the utility-first styling
• Framer Motion for smooth animations
• Heroicons for beautiful icons