Merit Farm Website

A modern, fully responsive multi-page website for Merit Farm - a premium fresh chicken farm business in Malaysia. This website showcases the farm's products, halal certification, and commitment to quality with a clean, professional design.

Features

• Fully Responsive Design: Optimized for desktop, tablet (iPad), and mobile phones
• Mobile Menu: Slide-in navigation menu from the right with smooth animations
• SVG Graphics: Pixel-perfect design using SVG assets from Figma
• Smooth Animations: 0.6s transitions for mobile menu and interactive elements
• Fixed Backgrounds: Parallax effect on background images
• Multi-Page Website: 5 complete pages with consistent navigation
• Contact Form: Functional contact form with validation
• Modern Design: Clean, professional design with brand colors (Merit Green #8BC34A, Merit Yellow #FFD93D, Merit Cream #FFF8E1)

Pages

1. index.html (Home Page)

   • Hero section with title graphic
   • About preview section with "Explore More" button
   • Chickens photo section
   • Sunburst background pattern

2. about.html (About Us)

   • Our Story section with illustration
   • Location map with benefits overlay (desktop)
   • Separate layout for mobile
   • Why Merit Chicken benefits (8 benefit cards)
   • From Farm to Table section

3. halal.html (Halal Chicken)

   • Halal certification content
   • From Farm to Table section
   • Custom background

4. products.html (Our Products)

   • Products title
   • 8 product cards in responsive grid (2 columns mobile, 4 columns desktop)
   • From Farm to Table section
   • Products background

5. contact.html (Contact Us)

   • Contact illustration
   • Contact form with rounded inputs and yellow submit button
   • Responsive layout (form first on mobile, illustration first on desktop)

Technologies Used

• HTML5: Semantic markup
• Tailwind CSS: Utility-first CSS framework (via CDN)
• Vanilla JavaScript: Mobile menu, form handling, scroll animations
• Google Fonts: Poppins font family (400, 500, 600, 700, 800 weights)

Setup Instructions

Simple Setup (No Installation Required)

1. Download or clone this repository
2. Open index.html in your web browser
3. That's it! The site uses Tailwind CSS CDN - no build process needed.

Using a Local Server (Recommended for Development)

Using Python (if installed):

cd merit-farm-website
python -m http.server 8000

Then open: http://localhost:8000

Using Node.js (if installed):

npm install -g http-server
cd merit-farm-website
http-server

Then open: http://localhost:8080

Using VS Code:

• Install "Live Server" extension
• Right-click on index.html
• Select "Open with Live Server"

Project Structure

merit-farm-website/
├── index.html              # Home page
├── about.html              # About Us page
├── halal.html              # Halal Chicken page
├── products.html           # Our Products page
├── contact.html            # Contact Us page
├── js/
│   └── script.js           # JavaScript for mobile menu, forms, animations
├── images/                 # All SVG and image assets
│   ├── header-banner.svg   # Header with logo (all pages)
│   ├── footer.svg          # Footer (all pages)
│   ├── from-farm-to-table-text.svg  # Shared across pages
│   ├── index-hero-section.svg
│   ├── index-about-section.svg
│   ├── index-chickens-photo.png
│   ├── index-bg.png        # Sunburst background
│   ├── our-story-title.svg
│   ├── our-story-text.svg
│   ├── about-illustration.svg
│   ├── location-map.svg
│   ├── benefits-section.svg
│   ├── why-merit-chicken-title.svg
│   ├── about-benefit-1-natural-diet.svg
│   ├── about-benefit-2-no-antibiotics.svg
│   ├── about-benefit-3-halal-processing.svg
│   ├── about-benefit-4-quality-control.svg
│   ├── about-benefit-5-frozen-freshness.svg
│   ├── about-benefit-6-raised-malaysia.svg
│   ├── about-benefit-7-juiciness.svg
│   ├── about-benefit-8-delivery-365.svg
│   ├── about-us-bg.png
│   ├── halal-content.svg
│   ├── halal-bg.png
│   ├── products-title.svg
│   ├── product-1.svg to product-8.svg
│   ├── products-bg.png
│   └── contact-illustration.svg
└── README.md               # This file

Responsive Breakpoints

• Mobile: < 768px (default)
• Tablet: >= 768px (md)
• Desktop: >= 1024px (lg)

Mobile Optimizations

• Header margin: 12px (mobile) → 20px (tablet) → 100px (desktop)
• Menu text: text-sm (mobile) → text-xl (desktop)
• Content width: 100% (mobile) → 90% (tablet) → 80% (desktop)
• Grid columns adapt: 1-2 columns (mobile) → 4 columns (desktop)
• Mobile menu: Slide-in from right with 80% width
• Body scroll disabled when mobile menu is open

Mobile Menu Features

• Slide Animation: 0.6s smooth transition from right
• Backdrop Overlay: Dark overlay on left 20% of screen
• High Z-Index: 2147483647 (maximum) to stay on top
• Click Outside to Close: Tap backdrop to close menu
• No Scrolling: Page scroll disabled when menu is open
• Green Background: Merit green with 98% opacity

Customization

Colors

Tailwind configuration in each HTML file:

tailwind.config = {
    theme: {
        extend: {
            colors: {
                'merit-green': '#8BC34A',
                'merit-yellow': '#FFD93D',
                'merit-cream': '#FFF8E1',
            }
        }
    }
}

Contact Form Setup

The contact form validates inputs and shows an alert on submission. To connect to a backend:

1. Modify form handler in js/script.js (line 88-123)
2. Add your API endpoint or email service:
   • Formspree (https://formspree.io/)
   • EmailJS (https://www.emailjs.com/)
   • Your own backend server

Example using Formspree:

contactForm.action = "https://formspree.io/f/YOUR_FORM_ID";
contactForm.method = "POST";

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile, Samsung Internet)

Performance Tips

Image Optimization

• All SVGs are optimized from Figma
• Compress PNG backgrounds for faster loading
• Consider converting PNGs to WebP format

Production Deployment

1. Minify JavaScript in js/script.js
2. Enable server-side caching
3. Use a CDN for Tailwind CSS (already implemented)
4. Compress images further if needed

Deployment Options

GitHub Pages

1. Create a GitHub repository
2. Push your code
3. Go to Settings > Pages
4. Select main branch and root folder
5. Site will be live at https://username.github.io/repo-name

Netlify (Recommended)

1. Create account at netlify.com
2. Drag and drop your merit-farm-website folder
3. Site deploys automatically with HTTPS

Other Options

• Vercel
• Firebase Hosting
• Traditional web hosting (FTP upload)

Features Implemented

✅ Responsive design for all screen sizes ✅ Mobile navigation menu with smooth animations ✅ SVG-based graphics for crisp display ✅ Fixed parallax backgrounds ✅ Contact form with validation ✅ Hover effects on buttons and links ✅ Optimized image loading ✅ Cross-browser compatibility ✅ Clean, organized file structure ✅ Descriptive image naming convention

Future Enhancement Ideas

• Backend integration for contact form
• Product catalog with filtering
• Customer testimonials carousel
• Blog section for updates
• Multi-language support (English/Malay)
• Online ordering system
• Google Maps integration
• Newsletter subscription
• Social media feed integration
• Image gallery with lightbox

Credits

• Design: Based on Merit Farm Figma design
• Development: Built with Tailwind CSS and vanilla JavaScript
• Fonts: Google Fonts (Poppins)
• Assets: SVG graphics exported from Figma

License

This project is created for Merit Farm. All rights reserved.

Support & Contact

For questions or support:

• Email: gary@merit.farm
• Phone: +6018-448 4844
• Website: merit.farm

---

Merit Farm - Fresh & Daily Delivery • 100% Raised in Malaysia • Halal Certified