Getting Started
Relevant source files
The following files were used as context for generating this wiki page:This document provides a technical overview of the "ai-saas-landing" project, a minimal setup for a React application using Vite. The project serves as a landing page for a fictional AI SaaS product named "OptiFlow AI". It is built with modern web technologies, including React 19, Vite, and Tailwind CSS, and features a component-based architecture for its user interface.
The application is a single-page marketing website composed of various sections, such as a hero section, features, solutions, a cost calculator, and testimonials. It is designed with a dark theme and utilizes framer-motion for animations and lucide-react for iconography. This guide covers the project's structure, dependencies, build process, and styling configuration.
Sources: README.md, package.json, src/App.jsx, index.html
Project Setup and Dependencies
The project is configured as a standard Vite-powered React application. The setup process involves installing dependencies and running development scripts.
Sources: package.json, README.md
Core Technologies
The project relies on the following primary technologies:
- Vite: A modern frontend build tool that provides a faster and leaner development experience.
- React: A JavaScript library for building user interfaces, used here in version 19.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- Framer Motion: A production-ready motion library for React.
Sources: package.json:12-17, README.md:3
Dependencies
The project's dependencies are managed in package.json and are split into production and development categories.
Production Dependencies
These packages are required for the application to run in a production environment.
| Package | Version | Description |
|---|---|---|
cobe | ^0.6.5 | A library for creating interactive WebGL globes. Used in the Solutions component. |
framer-motion | ^12.23.24 | An animation library for React. |
lucide-react | ^0.554.0 | A library providing a set of SVG icons. |
react | ^19.2.0 | The core React library. |
react-dom | ^19.2.0 | Serves as the entry point to the DOM and server renderers for React. |
Sources: package.json:12-17, src/components/Solutions.jsx:3
Development Dependencies
These packages are used during the development process, for tasks like building, linting, and local serving.
| Package | Version | Description |
|---|---|---|
@vitejs/plugin-react | ^5.1.1 | The official Vite plugin for React. |
autoprefixer | ^10.4.22 | A PostCSS plugin to parse CSS and add vendor prefixes. |
eslint | ^9.39.1 | A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. |
postcss | ^8.5.6 | A tool for transforming CSS with JavaScript. |
tailwindcss | ^3.4.17 | The Tailwind CSS framework. |
vite | ^7.2.4 | The build tool and development server. |
Sources: package.json:18-29
Application Structure
The application is a single-page website composed of multiple React components. The main entry point is src/App.jsx, which assembles the page layout.
Component Hierarchy
The App component renders the main layout, including a Navbar, a main content area with multiple sections, and a Footer.
This diagram shows the high-level component structure of the application.
Sources: src/App.jsx:3-29
Build and Development
The project uses npm scripts defined in package.json to manage the development and build lifecycle.
Available Scripts
| Script | Command | Description |
|---|---|---|
dev | vite | Starts the Vite development server with Hot Module Replacement (HMR). |
build | vite build | Compiles and bundles the application for production. |
lint | eslint . | Runs the ESLint linter to check for code quality issues. |
preview | vite preview | Serves the production build locally to preview it. |
Sources: package.json:6-10
Development Workflow
The typical development process is initiated by installing dependencies and starting the development server.
This diagram illustrates the local development workflow.
Sources: package.json:6-10
Styling and Theming
The project uses Tailwind CSS for utility-based styling, supplemented by custom global styles and CSS variables for theming.
Tailwind CSS Configuration
The tailwind.config.js file configures Tailwind to process all .js, .ts, .jsx, and .tsx files within the src directory, as well as index.html. It extends the default theme with custom color variables.
Sources: tailwind.config.js:3-7
Global Styles and Fonts
Global styles and CSS variables are defined in src/index.css. The application uses a dark theme by default, defined by variables in the :root selector.
The primary fonts used are "Inter" and "Outfit", which are loaded from Google Fonts in index.html.
| Variable | Default Value | Description |
|---|---|---|
--bg-primary | #050505 | Primary background color. |
--bg-secondary | #0A0A0A | Secondary background color. |
--text-primary | #FFFFFF | Primary text color. |
--text-secondary | #A1A1AA | Secondary text color. |
--accent-primary | #3B82F6 | Primary accent color. |
--border-subtle | rgba(255, 255, 255, 0.08) | Subtle border color. |
Sources: src/index.css:7-20, index.html:8-10
The body element is styled with the primary background and text colors, ensuring a consistent look and feel across the application.
/* src/index.css:48-54 */
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
Sources: src/index.css:48-54