MT Butik Client Website

Overview

MT Butik is a modern client-facing website designed to showcase products and services for a local business. Built with React, Vite, and Tailwind CSS, it provides a fast, responsive, and visually appealing experience for visitors.

Features

• Landing Page: Engaging hero section with business highlights
• Products Gallery: Visual overview of available products
• Services Section: Details about offered services
• Contact Form: Easy way for customers to reach out
• Footer: Business information and social links
• Responsive Design: Optimized for mobile, tablet, and desktop
• Media Integration: Images and videos to showcase offerings

Tech Stack

• React: UI library for building interactive interfaces
• Vite: Fast development server and build tool
• Tailwind CSS: Utility-first CSS framework for rapid styling
• TypeScript: Type safety for scalable development

Project Structure

mt-butik/
├── public/
│   └── images/         # Media assets (images, videos)
├── src/
│   ├── components/     # React components (Header, Hero, Products, etc.)
│   ├── App.tsx         # Main app component
│   ├── index.css       # Global styles
│   └── main.tsx        # Entry point
├── index.html          # HTML template
├── package.json        # Project metadata and scripts
├── tailwind.config.js  # Tailwind CSS configuration
├── vite.config.ts      # Vite configuration
└── README.md           # Project documentation

Getting Started

Prerequisites

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

Installation

1. Clone the repository

   git clone https://github.com/yosephdev/mt-butik.git
   cd mt-butik

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

   The site will be available at http://localhost:5173 (default Vite port).

Build for Production

npm run build
# or
yarn build

The output will be in the dist/ folder.

Preview Production Build

npm run preview
# or
yarn preview

Customization

• Images & Videos: Add or replace media in public/images/
• Content: Update text and sections in src/components/
• Styling: Modify Tailwind classes in components or update tailwind.config.js

Deployment

You can deploy the production build (dist/ folder) to any static hosting service, such as Vercel, Netlify, or GitHub Pages.

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.

License

This project is for client use and is not licensed for public distribution.

Contact

For business inquiries or support, please contact the site owner via the contact information listed in the footer.