Readme update and separation

2026-08-06 15:36:08 +03:00
parent 9ad5e873c3
commit 529034368b
4 changed files with 243 additions and 125 deletions
@@ -0,0 +1,32 @@
+# 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.