Template
Landing Page
A professional, high-performance landing page designed for a dual-purpose automotive business (parts retail and mechanical servicing). The site features a clean, "Inter" font-driven aesthetic with a bold red-and-dark-grey color palette.
Core Features
- Bilingual Support (RO/EN): Full site translation between Romanian and English using a data-attribute-driven JavaScript system.
- Smart Language Detection: Automatically detects the user’s browser language on first visit and remembers preferences via localStorage.
- Optimized Mobile Experience: Fully responsive grid system that collapses into a single-column stack for mobile devices.
- Conversion-Focused UI:
- Prominent Hero CTA buttons.
- Custom-built Phone Selection Modal to direct users to specific service lines.
- "Tap-to-call" and "Tap-to-email" integration for mobile users.
- Dynamic Elements: Auto-updating copyright year and smooth "fade-in" transitions for translated text to prevent "Flash of Unstyled Content" (FOUC).
Technical Stack
- HTML5/CSS3: Utilizes CSS Variables for easy branding updates and a CSS Grid/Flexbox layout.
- JavaScript (Vanilla): Lightweight script handles the modal logic and the translation engine without external dependencies.
- Google Fonts: Integrated "Inter" typeface with multiple weights (400, 700, 900).
File Structure
- index.html: The semantic structure containing both English and Romanian strings in data- attributes.
- style.css: Modern styling including a "glassmorphism" modal overlay and responsive media queries.
- assets/: Recommended directory for the company logo and favicon.
Setup & Customization
- Map Integration: Update the iframe src attributes in the contact-info section with your specific Google Maps embed codes.
- Contact Details: Replace the phone numbers and email address in both the contact-details and modal-overlay sections.
- Images: The hero background is currently linked to a high-quality Unsplash image; this can be swapped in style.css under the .hero class.