Now I have all the context I need. Let me create a professional, modern landing page for Cahaya Berkat Automotive with a "Garage-Premium" aesthetic using Deep Charcoal/Black, Metallic Silver, and Electric Blue as the accent color. I'll update the globals.css for the theme, layout.tsx for SEO, and create the landing page components.
Now let me update the globals.css to add the font families and remove the dark mode since we're using a dark theme by default:
Now let me create the main components for the landing page. I'll start by generating a hero image and then create all the components:
Now let me create the main page that brings all the components together:
I've created a complete, professional landing page for Cahaya Berkat Automotive with the following features:
Design & Branding:
- "Garage-Premium" aesthetic with deep charcoal background, metallic accents, and electric blue as the primary accent color
- Modern typography using Inter for body text and Oswald for display headings
- Responsive, mobile-first design optimized for customers browsing on the go
Key Sections:
- Hero - Full-screen hero with generated automotive workshop image, 5.0-star rating badge prominently displayed, main headline in Indonesian, and dual CTAs (WhatsApp + Directions)
- Services - Grid layout showcasing Audio Systems, Interior Upgrades, Lighting, Window Tinting, and General Accessories with icons
- Location - Embedded Google Maps with address, operating hours (Tue-Sun 08:30-17:30), and a prominent "Closed on Monday" warning
- Footer - Contact info and service list
Technical Features:
- SEO-optimized metadata with Indonesian keywords
- WhatsApp floating action button (FAB) for easy contact from any section
- Smooth scroll header with transparent-to-solid transition
- All CTAs link to WhatsApp (0812-2472-0600) and Google Maps directions