Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stephenombuya/landing-page
Welcome to the Landing Page repository for Hail Global. This project is designed to serve as an engaging and responsive front page that showcases the company’s brand, products, or services effectively.
https://github.com/stephenombuya/landing-page
javascript responsive-web-design ui-design
Last synced: about 10 hours ago
JSON representation
Welcome to the Landing Page repository for Hail Global. This project is designed to serve as an engaging and responsive front page that showcases the company’s brand, products, or services effectively.
- Host: GitHub
- URL: https://github.com/stephenombuya/landing-page
- Owner: stephenombuya
- License: apache-2.0
- Created: 2024-11-24T17:18:47.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-12T11:00:09.000Z (about 2 months ago)
- Last Synced: 2024-12-12T11:36:49.667Z (about 2 months ago)
- Topics: javascript, responsive-web-design, ui-design
- Language: HTML
- Homepage: https://hailglobal.netlify.app/
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hail Global Website
A modern, responsive corporate website built with React, TypeScript, and Tailwind CSS.
## 🚀 Features
- Responsive design that works on all devices
- Modern UI with smooth animations and transitions
- Interactive image gallery with filtering capabilities
- Contact form with validation
- Mobile-friendly navigation
- Performance optimized
- SEO friendly
## 🛠️ Technologies Used
- React 18
- TypeScript
- Tailwind CSS
- Vite
- Lucide Icons
## 📁 Project Structure
```
src/
├── components/
│ ├── Header/
│ ├── Hero/
│ ├── Services/
│ ├── Gallery/
│ │ ├── Gallery.tsx
│ │ ├── GalleryImage.tsx
│ │ ├── ImageModal.tsx
│ │ ├── galleryData.ts
│ │ ├── useGalleryFilter.ts
│ │ └── index.ts
│ ├── Testimonials/
│ ├── Contact/
│ └── Footer/
├── App.tsx
├── main.tsx
└── index.css
```
## 🚀 Getting Started
### Prerequisites
- Node.js (v14 or higher)
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/hail-global.git
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Build for production:
```bash
npm run build
```
## 🎨 Component Documentation
### Header
- Responsive navigation menu
- Mobile hamburger menu
- Smooth scroll navigation
- Fixed positioning with backdrop blur
### Hero
- Full-screen hero section
- Background image with overlay
- Call-to-action buttons
- Responsive text sizing
### Services
- Grid layout for service cards
- Icon integration with Lucide
- Hover animations
- Responsive grid system
### Gallery
- Filterable image gallery
- Modal image viewer
- Lazy loading images
- Category filtering
- Hover effects
### Testimonials
- Client testimonials with ratings
- Responsive grid layout
- Star rating system
- Clean, modern design
### Contact
- Form validation
- Success message handling
- Responsive design
- Accessible form fields
### Footer
- Multi-column layout
- Social media links
- Quick navigation links
- Copyright information
## 🔧 Configuration
### Tailwind Configuration
The project uses a custom Tailwind configuration for:
- Custom colors
- Extended theme options
- Responsive breakpoints
- Custom animations
### TypeScript Configuration
- Strict mode enabled
- Path aliases configured
- React 18 types included
## 📱 Responsive Design
The website is fully responsive with breakpoints at:
- Mobile: 0-640px
- Tablet: 641-1024px
- Desktop: 1025px+
## 🔍 SEO Optimization
- Semantic HTML structure
- Meta tags optimization
- Responsive images
- Performance optimization
## 🚀 Deployment
The website is deployed on Netlify with automatic deployments from the main branch.
Live URL: https://hailglobal.netlify.app/
## 📄 License
This project is licensed under the Apache 2.0 License - see the `LICENSE` file for details.
## 👥 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
## 📞 Support
For support, email [email protected] or create an issue in the repository.