A modern, responsive contact page built with React, Vite, and Tailwind CSS. This project features a beautiful UI with dark mode support, form validation, and multiple contact methods.
- Dark/Light Mode Toggle - Persistent theme preference with smooth transitions
- Responsive Design - Optimized for all device sizes
- Modern Animations - Smooth transitions and micro-interactions
- Professional Layout - Clean, organized component structure
- Multiple Contact Methods - Support Chat, Phone Call, and Email Form
- Real-time Validation - Comprehensive form validation with error messages
- Auto-fill Functionality - Smart subject line suggestions based on contact method
- Loading States - Visual feedback during form submission
- Success Animation - Celebratory confetti animation on successful submission
- Modular Architecture - Separated components for better maintainability
- Custom Hooks - Reusable dark mode hook with localStorage persistence
- Form Validation - Comprehensive validation utility with regex patterns
- Accessibility - ARIA labels, keyboard navigation, and screen reader support
- Performance - Optimized animations and efficient state management
- Company Details - Address, phone, email, and business hours
- Social Media Links - Facebook, Twitter, LinkedIn, Instagram
- Feature Highlights - 24/7 support, security, fast response, expert team
- FAQ Section - Quick help access
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository
git clone <repository-url> cd content-page
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
npm run buildsrc/
├── components/
│ ├── ContactForm.jsx # Main contact form with validation
│ ├── ContactInfo.jsx # Company information and social links
│ ├── DarkModeToggle.jsx # Theme toggle component
│ ├── Header.jsx # Page header with features
│ └── SuccessMessage.jsx # Success page with animations
├── hooks/
│ └── useDarkMode.js # Custom dark mode hook
├── utils/
│ └── validation.js # Form validation utilities
├── App.jsx # Main application component
├── main.jsx # Application entry point
└── index.css # Global styles and animations
- Contact Method Selection - Choose between chat, call, or email
- Form Validation - Real-time validation with error messages
- Auto-fill Features - Smart subject line suggestions
- Loading States - Visual feedback during submission
- Company Information - Address, phone, email, hours
- Social Media Links - Interactive social media buttons
- Feature Highlights - Why choose us section
- FAQ Access - Quick help button
- Celebration Animation - Confetti and success feedback
- Response Information - Expected response time
- Action Buttons - Send another message or go home
- Quick Contact - Direct phone and email links
The project uses Tailwind CSS with a blue color scheme. You can customize colors by modifying the Tailwind config or updating the component classes.
Update the contact details in ContactInfo.jsx:
const contactDetails = [
{
icon: "fas fa-phone",
title: "Phone Number",
content: "+1 (555) 123-4567",
action: "tel:+15551234567",
},
// ... more details
];Customize validation rules in utils/validation.js:
export const validateForm = (data) => {
// Add your custom validation logic
};- React 19 - Modern React with hooks
- Vite - Fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- Font Awesome - Icon library
- Local Storage - Theme persistence
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Font Awesome for the beautiful icons
- Tailwind CSS for the utility-first styling
- React team for the amazing framework
- Vite team for the fast build tool
Happy Coding! 🚀