🚀 Modern React Landing Page

Welcome to the Modern React Landing Page! This project showcases a beautiful, responsive landing page built with React, TypeScript, and Tailwind CSS. Featuring modern UI elements, smooth animations, and a component-based architecture, this landing page is designed to impress.

👉 Check it out live demo here: Tailwind Landing Page

A beautiful, responsive landing page built with React, TypeScript, and Tailwind CSS. This project features modern UI elements, smooth animations, and a component-based architecture.

🚀 Features

• Modern, responsive design
• Interactive card carousel
• Dynamic radial gradient effects
• Comprehensive changelog
• TypeScript for type safety
• Tailwind CSS for styling
• Vite for fast development

🛠️ Tech Stack

• React 18.3.1
• TypeScript
• Tailwind CSS 3.4
• Vite 5.3
• React Router DOM 6.25

📦 Installation

1. Clone the repository:

git clone https://github.com/future-fwp/landing-page.git
cd tailwind-landingpage

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The app will be available at http://localhost:5173

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

📁 Project Structure

src/
├── assets/           # Static assets
├── components/       # Reusable UI components
│   └── All/          # Shared components
├── data/             # Centralized data management
│   └── index.ts      # Exports for project-wide data
├── pages/            # Page-level components
│   ├── Home.tsx
│   └── Price.tsx
├── App.tsx           # Main application component
└── main.tsx          # Entry point

🔍 Recent Refactoring

• Data Consolidation: Centralized project data in /src/data/index.ts
• Improved code organization and maintainability
• Simplified data management across components

🎨 Key Components

• RadialCanvas: Creates dynamic gradient effects
• Card Components: Interactive feature showcases
• Custom UI Elements: Styled paragraphs, headings, and containers
• ChangeLog: Version history with visual effects

🔄 Recent Updates

• Added RadialCanvas for improved visual effects
• Implemented smooth card transitions
• Enhanced UI responsiveness
• Added comprehensive changelog
• Improved TypeScript types

🧪 Testing

• Jest for unit testing
• React Testing Library for component tests
• GSAP animation mocking in tests
• TypeScript type safety in test files

Running Tests

npm test

Test Coverage

• Component tests for CardComment
• Mock GSAP animations for consistent testing
• Comprehensive test cases covering rendering and interaction scenarios

🌐 Browser Support

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

Future improvement:

• Build Sign in and Sign up component
• Integration with API for backend development

🔍 Recent Refactoring

• Data Consolidation: Centralized project data in /src/data/index.ts
• Improved code organization and maintainability
• Simplified data management across components