From d89d090651d9b0cdd97ec79483198cb1c70c1855 Mon Sep 17 00:00:00 2001 From: baou9 <58894833+baou9@users.noreply.github.com> Date: Wed, 22 Oct 2025 00:19:11 +0100 Subject: [PATCH 1/2] Replace binary assets with CSS placeholders --- README.md | 18 +- about.html | 172 +++++++++++++ assets/css/style.css | 592 +++++++++++++++++++++++++++++++++++++++++++ assets/js/main.js | 92 +++++++ book.html | 149 +++++++++++ contact.html | 160 ++++++++++++ index.html | 351 +++++++++++++++++++++++++ 7 files changed, 1532 insertions(+), 2 deletions(-) create mode 100644 about.html create mode 100644 assets/css/style.css create mode 100644 assets/js/main.js create mode 100644 book.html create mode 100644 contact.html create mode 100644 index.html diff --git a/README.md b/README.md index 3be672c..243c85b 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,16 @@ -# Autovalley-web -Autovalley +# Auto Valley Website + +A responsive marketing site for the Auto Valley automotive service center in Casablanca. The project features semantic HTML, modern CSS, and light JavaScript to deliver a fast, conversion-focused experience across desktop, tablet, and mobile. + +## Getting Started +Open `index.html` in your browser or serve the repository locally (e.g., `python -m http.server`) to view the pages. + +## Pages +- `index.html` – Homepage with hero, services, sustainability highlights, testimonials carousel, FAQs, and CTAs. +- `about.html` – Company history, mission, and team highlights. +- `book.html` – Service booking flow with contact form and FAQ support. +- `contact.html` – Location, contact details, and direct inquiry form. + +## Assets +To keep the repository binary-free, imagery is represented by CSS-based placeholders and inline data URIs for the Auto Valley logo. Update the markup or styles if you need to integrate production-ready photography. + diff --git a/about.html b/about.html new file mode 100644 index 0000000..db2f240 --- /dev/null +++ b/about.html @@ -0,0 +1,172 @@ + + + + + + About AUTO VALLEY | Casablanca's Automotive Specialists + + + + +
+
+

Call us: +212 522-000-000 | Visit: 123 Boulevard de l'Automobile, Casablanca

+
+
+ + +
+
+
+

Driven by Excellence Since 2010

+

AUTO VALLEY blends technical mastery with concierge-level service to keep Casablanca's drivers moving confidently.

+
+
+ +
+
+
+

Our Story

+

Innovation, trust, and community at the heart of everything we do.

+
+
+
+

Mission

+

Deliver exceptional automotive care through advanced diagnostics, sustainable practices, and personalized service experiences.

+
+
+

Vision

+

Lead Morocco’s automotive service industry as the benchmark for quality, transparency, and eco-conscious operations.

+
+
+

Values

+

Integrity, innovation, accountability, and respect shape every interaction with our customers and partners.

+
+
+
+
+ +
+
+
+

Leadership Team

+

Experienced professionals committed to delivering world-class automotive solutions.

+
+
+
+ +

Hicham El Mansouri

+

Founder & CEO with 20+ years of dealership and aftermarket experience, leading strategic partnerships across Casablanca.

+
+
+ +

Nadia Benali

+

Technical Director overseeing certified technicians, training programs, and quality control for every service line.

+
+
+ +

Khalid Ait Lahcen

+

Customer Experience Lead ensuring seamless communication, digital updates, and personalized service journeys.

+
+
+
+
+ +
+
+
+

Certifications & Partnerships

+

Global standards and local collaborations strengthen our promise.

+
+
+
+

ISO 9001 & 14001

+

Quality and environmental management certifications validate our continuous improvement.

+
+
+

OEM Authorizations

+

Authorized to service leading brands including BMW, Mercedes-Benz, Toyota, and Renault.

+
+
+

Community Outreach

+

Partnering with local schools to offer internships, skills workshops, and road safety education.

+
+
+
+
+ +
+
+
+

Tour Our Facility

+

Schedule a guided visit to experience our technology, lounge, and sustainable operations.

+
+ Plan Your Visit +
+
+
+ + + + + diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..ce2a8e0 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,592 @@ +:root { + --brand-red: #b90504; + --dark-grey: #333333; + --light-grey: #f5f5f5; + --white: #ffffff; + --accent-grey: #666666; + --max-width: 1200px; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; + color: var(--dark-grey); + background-color: var(--white); + line-height: 1.6; +} + +a { + color: inherit; + text-decoration: none; +} + +a:hover, +a:focus { + color: var(--brand-red); +} + +img { + max-width: 100%; + display: block; + border-radius: 12px; +} + +.media-placeholder, +.map-placeholder { + position: relative; + display: block; + width: 100%; + aspect-ratio: 16 / 10; + border-radius: 16px; + background: linear-gradient(135deg, rgba(185, 5, 4, 0.2), rgba(51, 51, 51, 0.15)); + border: 1px solid rgba(51, 51, 51, 0.08); + overflow: hidden; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); +} + +.media-placeholder::before, +.map-placeholder::before { + content: ""; + position: absolute; + inset: 0; + background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px); + background-size: 18px 18px; + opacity: 0.4; +} + +.media-placeholder::after, +.map-placeholder::after { + content: attr(data-label); + position: absolute; + inset-inline: 0; + bottom: 1.1rem; + text-align: center; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.95); + text-shadow: 0 6px 16px rgba(51, 51, 51, 0.35); + font-size: 0.85rem; + pointer-events: none; +} + +.hero-media .media-placeholder { + aspect-ratio: 4 / 3; +} + +.service-card .media-placeholder { + aspect-ratio: 4 / 3; + margin-bottom: 1rem; +} + +.map-placeholder { + aspect-ratio: 4 / 3; + background: linear-gradient(135deg, rgba(51, 51, 51, 0.2), rgba(185, 5, 4, 0.25)); + margin-top: 1.5rem; + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); +} + +.container { + width: min(92%, var(--max-width)); + margin-inline: auto; +} + +h1, h2, h3 { + font-weight: 700; + color: var(--dark-grey); + line-height: 1.25; +} + +h1 { font-size: clamp(2.25rem, 4vw, 3rem); } +h2 { font-size: clamp(2rem, 3vw, 2.5rem); margin-bottom: 0.5rem; } +h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin-bottom: 0.5rem; } + +p { + margin-bottom: 1rem; + color: var(--accent-grey); +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--brand-red); + color: var(--white); + padding: 0.75rem 1.5rem; + border-radius: 999px; + border: 2px solid transparent; + font-weight: 700; + transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; + cursor: pointer; +} + +.btn:hover, +.btn:focus { + background-color: #a00403; + box-shadow: 0 10px 30px rgba(185, 5, 4, 0.3); + transform: translateY(-2px); +} + +.btn-outline { + background-color: transparent; + border-color: var(--brand-red); + color: var(--brand-red); +} + +.btn-outline:hover, +.btn-outline:focus { + background-color: var(--brand-red); + color: var(--white); +} + +.top-bar { + background: var(--dark-grey); + color: var(--white); + font-size: 0.875rem; + padding: 0.5rem 0; +} + +.top-bar a { + color: var(--white); +} + +.site-header { + position: sticky; + top: 0; + z-index: 999; + background-color: rgba(255, 255, 255, 0.97); + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + transition: box-shadow 0.3s ease, background-color 0.3s ease; +} + +.site-header.sticky { + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 0; + gap: 1rem; +} + +.logo { + display: inline-flex; + align-items: center; + text-decoration: none; +} + +.logo img { + display: block; + height: 48px; + width: auto; +} + +.main-nav ul, +.mobile-nav ul, +.footer-grid ul, +.social-links { + list-style: none; + padding: 0; + margin: 0; +} + +.main-nav ul { + display: none; + align-items: center; + gap: 1.5rem; +} + +.main-nav a { + font-weight: 600; +} + +.nav-toggle { + font-size: 1.5rem; + background: none; + border: none; + cursor: pointer; + color: var(--dark-grey); +} + +.mobile-nav { + display: none; + background-color: var(--white); + border-top: 1px solid rgba(0, 0, 0, 0.05); +} + +.mobile-nav.open { + display: block; +} + +.mobile-nav ul { + display: grid; + gap: 1rem; + padding: 1rem; +} + +.hero { + padding: clamp(4rem, 10vw, 7rem) 0 3rem; + background: linear-gradient(135deg, rgba(185, 5, 4, 0.05), rgba(51, 51, 51, 0.05)); +} + +.hero-content { + display: grid; + gap: 2.5rem; +} + +.hero-text p { + font-size: 1.05rem; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin: 1.5rem 0; +} + +.trust-badges { + list-style: none; + padding: 0; + margin: 0; + display: grid; + gap: 0.5rem; + color: var(--dark-grey); + font-weight: 600; +} + +.section-heading { + text-align: center; + margin-bottom: 2.5rem; +} + +.welcome { + padding: 4rem 0; +} + +.welcome-grid, +.services-grid, +.process-steps, +.sustainability-grid, +.faq-grid, +.contact-grid, +.footer-grid { + display: grid; + gap: 1.5rem; +} + +.welcome-grid article, +.service-card, +.process-steps article, +.sustainability-grid article, +.testimonial-card, +.faq-grid article, +.contact-form { + background-color: var(--white); + border-radius: 16px; + padding: 1.5rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); +} + +.services { + background-color: var(--light-grey); + padding: 4rem 0; +} + +.service-card h3 { + margin-top: 1rem; +} + +.cta-banner { + margin-top: 3rem; + background: var(--dark-grey); + color: var(--white); + border-radius: 16px; + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1rem; + align-items: flex-start; +} + +.booking-info .cta-banner { + margin-top: 0; +} + +.cta-banner .btn { + align-self: flex-start; +} + +.process { + padding: 4rem 0; +} + +.process-steps { + gap: 2rem; +} + +.process-steps article { + text-align: center; +} + +.step-number { + width: 48px; + height: 48px; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--brand-red); + color: var(--white); + font-weight: 700; + margin-bottom: 1rem; +} + +.sustainability { + background-color: var(--light-grey); + padding: 4rem 0; +} + +.testimonials { + padding: 4rem 0; +} + +.testimonial-carousel { + position: relative; + display: flex; + align-items: center; + gap: 1rem; +} + +.testimonial-track { + overflow: hidden; + display: flex; + gap: 1rem; + scroll-behavior: smooth; +} + +.testimonial-card { + min-width: min(320px, 100%); +} + +.carousel-control { + background: var(--brand-red); + color: var(--white); + border: none; + width: 40px; + height: 40px; + border-radius: 50%; + display: grid; + place-items: center; + cursor: pointer; + transition: background 0.2s ease; +} + +.carousel-control:hover, +.carousel-control:focus { + background: #a00403; +} + +.faq { + padding: 4rem 0; +} + +.cta { + background: linear-gradient(135deg, rgba(185, 5, 4, 0.9), rgba(51, 51, 51, 0.9)); + color: var(--white); + padding: 4rem 0; +} + +.cta .container { + display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: flex-start; +} + +.contact { + padding: 4rem 0; + background-color: var(--light-grey); +} + +.contact-grid { + gap: 2rem; +} + +.contact-details { + list-style: none; + padding: 0; + margin: 0; + display: grid; + gap: 0.75rem; +} + +.contact-form input, +.contact-form textarea, +.contact-form select, +.newsletter input { + width: 100%; + padding: 0.75rem 1rem; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; + margin-bottom: 1rem; + font-size: 1rem; + font-family: inherit; +} + +.contact-form select { + appearance: none; + padding-right: 2.5rem; + background-image: linear-gradient(45deg, transparent 50%, var(--dark-grey) 50%), + linear-gradient(135deg, var(--dark-grey) 50%, transparent 50%); + background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px); + background-size: 5px 5px, 5px 5px; + background-repeat: no-repeat; +} + +.contact-form select:focus { + outline: 2px solid rgba(185, 5, 4, 0.4); + outline-offset: 2px; +} + +.contact-form button, +.newsletter button { + width: fit-content; +} + +.page-hero { + padding: clamp(3rem, 8vw, 5rem) 0; + background: linear-gradient(135deg, rgba(185, 5, 4, 0.1), rgba(51, 51, 51, 0.05)); + text-align: left; +} + +.page-hero h1 { + margin-bottom: 0.75rem; +} + +.booking-info { + display: grid; + gap: 1.5rem; +} + +.site-footer { + background-color: var(--dark-grey); + color: var(--white); + padding: 3rem 0 1.5rem; +} + +.site-footer .logo img { + height: 56px; +} + +.site-footer a { + color: var(--white); +} + +.site-footer a:hover, +.site-footer a:focus { + color: var(--brand-red); +} + +.footer-grid { + margin-bottom: 2rem; +} + +.footer-bottom { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + justify-content: space-between; + text-align: center; + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: 1.5rem; +} + +.social-links { + display: flex; + gap: 1rem; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +@media (min-width: 640px) { + .main-nav ul { + display: flex; + } + + .nav-toggle, + .mobile-nav { + display: none; + } + + .hero-content { + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: center; + } + + .welcome-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .services-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .process-steps { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .sustainability-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .faq-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cta .container { + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + .contact-grid { + grid-template-columns: 1fr 1fr; + align-items: start; + } + + .footer-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (min-width: 1024px) { + .services-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .testimonial-track { + gap: 1.5rem; + } + + .testimonial-card { + min-width: 360px; + } +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..db07b79 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,92 @@ +const header = document.getElementById('site-header'); +const navToggle = document.querySelector('.nav-toggle'); +const mobileMenu = document.getElementById('mobile-menu'); +const yearEl = document.getElementById('year'); + +const updateStickyHeader = () => { + const offset = window.scrollY; + if (offset > 20) { + header.classList.add('sticky'); + } else { + header.classList.remove('sticky'); + } +}; + +window.addEventListener('scroll', updateStickyHeader); +updateStickyHeader(); + +if (navToggle && mobileMenu) { + navToggle.addEventListener('click', () => { + const isOpen = mobileMenu.classList.toggle('open'); + navToggle.setAttribute('aria-expanded', isOpen); + }); + + mobileMenu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + mobileMenu.classList.remove('open'); + navToggle.setAttribute('aria-expanded', 'false'); + }); + }); +} + +if (yearEl) { + yearEl.textContent = new Date().getFullYear(); +} + +// Testimonials carousel +const track = document.querySelector('.testimonial-track'); +const cards = Array.from(document.querySelectorAll('.testimonial-card')); +const prevBtn = document.querySelector('.carousel-control.prev'); +const nextBtn = document.querySelector('.carousel-control.next'); +let currentIndex = 0; +let autoSlideInterval; + +const updateCarousel = (behavior = 'smooth') => { + const cardWidth = cards[0]?.offsetWidth || 0; + const styles = window.getComputedStyle(track); + const gap = parseFloat(styles.gap || styles.columnGap || 0); + track.scrollTo({ + left: currentIndex * (cardWidth + gap), + behavior + }); +}; + +const goToNext = () => { + currentIndex = (currentIndex + 1) % cards.length; + updateCarousel(); +}; + +const goToPrev = () => { + currentIndex = (currentIndex - 1 + cards.length) % cards.length; + updateCarousel(); +}; + +const startAutoSlide = () => { + autoSlideInterval = setInterval(goToNext, 6000); +}; + +const stopAutoSlide = () => { + clearInterval(autoSlideInterval); +}; + +if (track && cards.length > 0) { + nextBtn?.addEventListener('click', () => { + stopAutoSlide(); + goToNext(); + startAutoSlide(); + }); + + prevBtn?.addEventListener('click', () => { + stopAutoSlide(); + goToPrev(); + startAutoSlide(); + }); + + track.addEventListener('mouseenter', stopAutoSlide); + track.addEventListener('mouseleave', startAutoSlide); + + updateCarousel('auto'); + startAutoSlide(); + + window.addEventListener('resize', () => updateCarousel('auto')); +} diff --git a/book.html b/book.html new file mode 100644 index 0000000..92af7de --- /dev/null +++ b/book.html @@ -0,0 +1,149 @@ + + + + + + Book a Service | AUTO VALLEY Casablanca + + + + +
+
+

Call us: +212 522-000-000 | Visit: 123 Boulevard de l'Automobile, Casablanca

+
+
+ + +
+
+
+

Book Your Service

+

Choose the service you need, share your vehicle details, and confirm a time that works for you.

+
+
+ +
+
+
+
+

Schedule Appointment

+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Why Book with AUTO VALLEY?

+
    +
  • ✔ Instant confirmation & reminders
    • +
  • ✔ Flexible rescheduling
    • +
  • ✔ Complimentary health check
    • +
  • ✔ Genuine parts & warranties
    • +
+
+
+

Need urgent help?

+

Call our emergency line anytime for breakdown assistance across Casablanca.

+
+ Call Now +
+
+
+
+
+
+ + + + + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..040f955 --- /dev/null +++ b/contact.html @@ -0,0 +1,160 @@ + + + + + + Contact AUTO VALLEY | Automotive Support in Casablanca + + + + +
+
+

Call us: +212 522-000-000 | Visit: 123 Boulevard de l'Automobile, Casablanca

+
+
+ + +
+
+
+

Let's Talk Automotive Care

+

Connect with our service advisors, partnership team, or roadside support any time.

+
+
+ +
+
+
+
+

Contact Details

+

We respond to inquiries within the hour during business days.

+ + +
+
+

Send Us a Message

+ + + + + + + + + + + + + + + + +
+
+
+
+ +
+
+
+

Visit Information

+

Plan your visit for a seamless experience.

+
+
+
+

Parking & Access

+

Secure parking and EV charging stations are available on-site for all appointments.

+
+
+

Customer Lounge

+

Enjoy complimentary Wi-Fi, refreshments, and private work pods while we service your vehicle.

+
+
+

Languages

+

Our advisors speak Arabic, French, and English to support our diverse community.

+
+
+

Accessibility

+

Wheelchair-accessible entrances, restrooms, and service counters ensure an inclusive visit.

+
+
+
+
+
+ + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..981a714 --- /dev/null +++ b/index.html @@ -0,0 +1,351 @@ + + + + + + + AUTO VALLEY | Premium Automotive Services in Casablanca + + + + + + + + +
+
+

Call us: +212 522-000-000 | Visit: 123 Boulevard de l'Automobile, Casablanca

+
+
+ + +
+
+
+
+

Premium Automotive Care in Casablanca

+

From diagnostics to detailing, AUTO VALLEY keeps your vehicle performing at its best with certified technicians, advanced equipment, and transparent pricing.

+
+ Book a Service + Discover Our Expertise +
+
    +
  • ✓ ISO Certified Workshop
    • +
  • ✓ Genuine Parts Guarantee
    • +
  • ✓ 24/7 Emergency Support
    • +
+
+
+ +
+
+
+ +
+
+
+

Welcome to AUTO VALLEY

+

Casablanca's trusted destination for holistic vehicle care.

+
+
+
+

Certified Experts

+

Our master technicians undergo continuous training on European, American, and Asian models to provide precise diagnostics and repairs.

+
+
+

Transparent Communication

+

Receive digital inspection reports, maintenance recommendations, and upfront quotes before any work begins.

+
+
+

Customer-Centric Experience

+

Relax in our lounge with Wi-Fi, or request complimentary pick-up and delivery around Casablanca.

+
+
+
+
+ +
+
+
+

Comprehensive Services

+

End-to-end automotive solutions designed for performance, safety, and longevity.

+
+
+
+ +

Preventive Maintenance

+

Oil changes, fluid checks, filter replacements, and seasonal inspections with service reminders tailored to your driving habits.

+
+
+ +

Advanced Diagnostics

+

Computerized fault detection for engine, transmission, hybrid systems, ADAS calibration, and more.

+
+
+ +

Body & Paint Restoration

+

Precision bodywork, paintless dent repair, and showroom-quality finishes using eco-friendly materials.

+
+
+ +

Premium Detailing

+

Interior and exterior detailing packages, ceramic coating, and odor neutralization for a spotless ride.

+
+
+ +

Tire & Alignment

+

Wheel alignment, balancing, and tire replacements from leading brands to enhance safety and efficiency.

+
+
+ +

Fleet Programs

+

Customized maintenance plans, priority scheduling, and detailed reporting for corporate fleets.

+
+
+
+
+

Need urgent assistance?

+

Our emergency response team is on call 24/7 across Casablanca.

+
+ Call Emergency Line +
+
+
+ +
+
+
+

Our Proven Process

+

Efficient, transparent, and built around your schedule.

+
+
+
+ 1 +

Book

+

Reserve online or call us—choose onsite service, workshop visit, or vehicle pick-up.

+
+
+ 2 +

Diagnose

+

We perform multi-point inspections and share real-time updates with photo evidence.

+
+
+ 3 +

Approve

+

Approve recommended services digitally with flexible payment options.

+
+
+ 4 +

Deliver

+

Enjoy a fully serviced vehicle, detailed and ready for the road.

+
+
+
+
+ +
+
+
+

Committed to Sustainable Mobility

+

We reduce environmental impact through innovation and accountability.

+
+
+
+

Eco-Friendly Products

+

Using biodegradable cleaners and low-VOC paints without compromising results.

+
+
+

Energy-Efficient Facility

+

Solar-powered equipment and water recycling systems power our workshop.

+
+
+

Hybrid & EV Expertise

+

Certified to service the latest electric and hybrid vehicles with manufacturer-grade tools.

+
+
+
+
+ +
+
+
+

What Drivers Say

+

Trusted by individuals, families, and fleet managers across Casablanca.

+
+
+ +
+
+

“AUTO VALLEY handled my SUV’s transmission issue with incredible professionalism. Transparent pricing and constant updates!”

+

Amine B.

+ Business Owner +
+
+

“Their detailing package made my car look brand new. Loved the pick-up and drop-off service—super convenient.”

+

Salma K.

+ Marketing Director +
+
+

“As a fleet manager, I rely on AUTO VALLEY for consistent maintenance. Their reporting keeps my team on schedule.”

+

Youssef R.

+ Fleet Manager +
+
+ +
+
+
+ +
+
+
+

Frequently Asked Questions

+

Find quick answers or reach out to our service advisors.

+
+
+
+

Do you offer manufacturer warranty-approved services?

+

Yes. Our procedures comply with OEM standards and maintain your vehicle warranty.

+
+
+

Can I track progress remotely?

+

We send SMS and email updates with photos and service notes for full transparency.

+
+
+

What payment methods do you accept?

+

We accept major cards, bank transfers, and corporate invoicing for fleet partners.

+
+
+

Do you service electric vehicles?

+

Yes. Our EV-certified technicians are trained on high-voltage systems and safety protocols.

+
+
+
+
+ +
+
+
+

Ready to elevate your driving experience?

+

Schedule your next service in seconds and receive confirmation instantly.

+
+ Book Your Service +
+
+ +
+
+
+
+

Visit or Contact Us

+

We are located in the heart of Casablanca with easy parking and comfortable amenities.

+ +
+
+

Request a Callback

+ + + + + + + + + + +
+
+
+
+
+ + + + + + From c9e3fd45c534e4a0f544a4097e2b0cd0a450b5a6 Mon Sep 17 00:00:00 2001 From: baou9 <58894833+baou9@users.noreply.github.com> Date: Wed, 22 Oct 2025 00:30:27 +0100 Subject: [PATCH 2/2] Add Node build script for static deployment --- .gitignore | 5 +++++ README.md | 11 +++++++++++ package-lock.json | 15 +++++++++++++++ package.json | 12 ++++++++++++ scripts/build.js | 48 +++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 91 insertions(+) create mode 100644 .gitignore create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 scripts/build.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4c3fce2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +dist/ +node_modules/ + +# macOS artifacts +.DS_Store diff --git a/README.md b/README.md index 243c85b..262d581 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,17 @@ A responsive marketing site for the Auto Valley automotive service center in Cas ## Getting Started Open `index.html` in your browser or serve the repository locally (e.g., `python -m http.server`) to view the pages. +### Optional Node workflow + +Some hosting providers expect a Node-based build step. Run the lightweight build script to copy the static assets into a `dist/` folder: + +```bash +npm install # no dependencies, but initializes the lockfile +npm run build +``` + +The `build` command does not require `nodenv`; any Node.js runtime `>=16` will work. The generated `dist/` directory can be uploaded directly to your hosting provider. If your platform allows you to configure the build command, set it to `npm run build` and the publish directory to `dist`. + ## Pages - `index.html` – Homepage with hero, services, sustainability highlights, testimonials carousel, FAQs, and CTAs. - `about.html` – Company history, mission, and team highlights. diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0abe772 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,15 @@ +{ + "name": "auto-valley-site", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "auto-valley-site", + "version": "1.0.0", + "engines": { + "node": ">=16.0.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..5cbd762 --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "auto-valley-site", + "version": "1.0.0", + "private": true, + "description": "Static marketing site for Auto Valley automotive services.", + "scripts": { + "build": "node scripts/build.js" + }, + "engines": { + "node": ">=16.0.0" + } +} diff --git a/scripts/build.js b/scripts/build.js new file mode 100644 index 0000000..f3d7541 --- /dev/null +++ b/scripts/build.js @@ -0,0 +1,48 @@ +#!/usr/bin/env node +const fs = require('fs'); +const path = require('path'); + +const projectRoot = path.resolve(__dirname, '..'); +const distDir = path.join(projectRoot, 'dist'); +const entriesToCopy = [ + 'index.html', + 'about.html', + 'book.html', + 'contact.html', + 'assets' +]; + +function copyRecursive(src, dest) { + const stats = fs.statSync(src); + if (stats.isDirectory()) { + fs.mkdirSync(dest, { recursive: true }); + for (const item of fs.readdirSync(src)) { + copyRecursive(path.join(src, item), path.join(dest, item)); + } + } else { + fs.copyFileSync(src, dest); + } +} + +function cleanDist() { + if (fs.existsSync(distDir)) { + fs.rmSync(distDir, { recursive: true, force: true }); + } +} + +function build() { + cleanDist(); + fs.mkdirSync(distDir, { recursive: true }); + for (const entry of entriesToCopy) { + const srcPath = path.join(projectRoot, entry); + if (!fs.existsSync(srcPath)) { + console.warn(`Skipping missing entry: ${entry}`); + continue; + } + const destPath = path.join(distDir, entry); + copyRecursive(srcPath, destPath); + } + console.log('Static site copied to dist/.'); +} + +build();