TechGear - Modern Tech Gadget Shop Landing Page

A stunning, fully responsive React landing page designed for tech gadget retailers. Built with modern web technologies and featuring a professional design with smooth animations and interactive components.

🚀 Live Demo

View Live Site

📱 LinkedIn Post

Check out the LinkedIn post for more details about this project.

✨ Features

• Responsive Design - Optimized for all devices and screen sizes
• Modern UI/UX - Clean, professional design with smooth animations
• Product Showcase - Interactive product cards with hover effects
• Category Navigation - Organized product categories with visual appeal
• Newsletter Signup - Integrated subscription form with validation
• Performance Optimized - Fast loading with optimized images and code
• Accessibility - Built with accessibility best practices
• SEO Ready - Semantic HTML structure for better search rankings

🛠️ Built With

• React 18 - Modern React with hooks and functional components
• TypeScript - Type-safe development experience
• Tailwind CSS - Utility-first CSS framework for rapid styling
• Vite - Fast build tool and development server
• Lucide React - Beautiful, customizable icons
• Responsive Design - Mobile-first approach

🏗️ Project Structure

TechGear---Modern-Tech-Gadget-Shop-Landing-Page

src/ ├── components/ │ ├── Header.tsx # Navigation header with mobile menu │ ├── Hero.tsx # Hero section with CTA │ ├── FeaturedProducts.tsx # Product showcase grid │ ├── Categories.tsx # Product categories section │ ├── About.tsx # Company information │ ├── Newsletter.tsx # Email subscription │ └── Footer.tsx # Site footer with links ├── App.tsx # Main app component ├── main.tsx # App entry point └── index.css # Global styles

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone [REPOSITORY_URL]
cd techgear-landing-page

Install dependencies

npm install

3.Start the development server

npm run dev

4.Open http://localhost:5173 in your browser

Build for Production

npm run build

📋 Available Scripts

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

🎨 Customization

The project uses Tailwind CSS for styling, making it easy to customize:

Colors: Modify the color scheme in tailwind.config.js

Typography: Update font families and sizes

Components: Each component is modular and easily customizable

Images: Replace stock images with your own product photos

📱 Responsive Breakpoints

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

🌟 Key Sections

Header - Sticky navigation with mobile hamburger menu Hero - Eye-catching banner with call-to-action buttons Featured Products - Showcase of top products with ratings Categories - Visual category navigation About - Company information and statistics Newsletter - Email subscription with form validation Footer - Contact information and site links

🔧 Technologies Used

React 18 UI Framework TypeScript Type Safety Tailwind CSS Styling Vite Build Tool Lucide React Icons ESLint Code Linting

📈 Performance Features

Optimized images with proper sizing Lazy loading for better performance Minimal bundle size with tree shaking Fast development with Vite HMR

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the project

Create your feature branch (git checkout -b feature/AmazingFeature) Commit your changes (git commit -m 'Add some AmazingFeature') Push to the branch (git push origin feature/AmazingFeature) Open a Pull Request

📄 License

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

#👨‍💻 Author Udara Dilshan

🙏 Acknowledgments

Design inspiration from modern e-commerce sites Images from Pexels Icons from Lucide

⭐ Star this repository if you found it helpful!