Template
32 lines
2.1 KiB
Markdown
32 lines
2.1 KiB
Markdown
# 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](index.html): The semantic structure containing both English and Romanian strings in data- attributes.
|
||
* [style.css](style.css): Modern styling including a "glassmorphism" modal overlay and responsive media queries.
|
||
* [assets/](assets/): Recommended directory for the company logo and favicon.
|
||
|
||
## Setup & Customization
|
||
|
||
1. Map Integration: Update the iframe src attributes in the contact-info section with your specific Google Maps embed codes.
|
||
2. Contact Details: Replace the phone numbers and email address in both the contact-details and modal-overlay sections.
|
||
3. Images: The hero background is currently linked to a high-quality Unsplash image; this can be swapped in style.css under the .hero class. |