Skrova Furniture Brochure

A modern, responsive furniture brochure application built with React and Vite. This application showcases modular furniture solutions with a premium, glassmorphism-inspired design.

Project Live Link

https://furniture-brochure.vercel.app/

🛠️ Tech Stack

• Framework: React
• Build Tool: Vite
• Styling: Tailwind CSS
• Routing: React Router DOM
• Icons: FontAwesome 5

✨ Features

Core Experience

• Single Page Application (SPA): Smooth, client-side transitions between pages without reloads.
• Responsive Design: Fully adaptive layouts that work seamlessly on mobile, tablet, and desktop devices.
• Glassmorphism UI: Modern, translucent UI components with blur effects for a premium feel.

Key Functionality

• Interactive Components:
  • Image Carousel: Dynamic image slider on the home page.
  • Modal System: Accessible modal dialogs for viewing detailed certifications.
  • Mobile Navigation: Smooth drawer navigation for mobile devices.
  • Smart Scrolling: Auto-hide/show navigation bar and generic "Scroll to active area" buttons.
• Product Showcase:
  • Categorized product listings (Chairs, Tables, Modular Furniture, etc.).
  • Visual grid layouts with hover effects.

Architecture

• Component-Based: Modular structure with reusable components (Header, Footer, ProductCategory).
• Layout Wrapper: Centralized layout management for consistent site structure.

🚀 Getting Started

1. Install Dependencies:

   npm install

2. Run Development Server:

   npm run dev

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

3. Build for Production:

   npm run build

   The output will be in the dist folder.

📂 Project Structure

├── public/              # Static assets (images, logos)
├── src/
│   ├── components/      # Reusable UI components (Header, Footer, etc.)
│   ├── pages/           # Page components (Home, About, Products)
│   ├── Layout.jsx       # Main layout wrapper
│   ├── App.jsx          # Route definitions
│   ├── main.jsx         # Application entry point
│   └── index.css        # Global styles & Tailwind directives
└── postcss.config.js    # PostCSS configuration
└── tailwind.config.js   # Tailwind configuration

📄 License

© 2024 Skrova. All rights reserved.