House of MarkTech Landing Page

A modern, responsive landing page built with React and Tailwind CSS, featuring smooth animations and a dark theme.

Features

• 🎨 Modern dark theme design
• ⚡ Smooth scroll animations
• 📱 Fully responsive layout
• 🎭 Interactive hover effects
• 🚀 Optimized performance
• 🎯 SEO friendly

Tech Stack

• React.js
• Tailwind CSS
• Axios (for API calls)
• Lodash (for debouncing)

Getting Started

Prerequisites

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

Installation

1. Clone the repository:

git clone https://github.com/yourusername/house-of-marktech.git

2. Navigate to the project directory:

cd house-of-marktech

3. Install dependencies:

npm install
# or
yarn install

4. Start the development server:

npm run dev
# or
yarn dev

5. Open your browser and visit http://localhost:5173

Project Structure

src/
├── components/
│   ├── HeroSection.jsx    # Hero section with CTA
│   ├── ServiceCards.jsx   # Services showcase
│   ├── PricingTable.jsx   # Pricing plans
│   ├── ContactForm.jsx    # Contact form
│   ├── UserList.jsx       # User list with search
│   └── SearchBar.jsx      # Search component
├── App.jsx                # Main application component
└── main.jsx              # Application entry point

Components

HeroSection

• Full-screen hero section with background image
• Animated content reveal
• Smooth scroll to services section

ServiceCards

• Grid layout of service offerings
• Hover animations
• Staggered reveal animations

PricingTable

• Three-tier pricing structure
• Featured plan highlighting
• Interactive hover effects

ContactForm

• Form validation
• Smooth animations
• Responsive design

UserList

• Dynamic user data loading
• Search functionality
• Loading state handling

Custom Animations

The project includes custom animations defined in tailwind.config.js:

• fade-in: Simple opacity transition
• fade-in-up: Combined opacity and upward movement
• slide-up: Larger upward movement with opacity

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

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

Acknowledgments

• Unsplash for the hero background image
• Tailwind CSS for the styling framework
• React for the UI library