Okay, I can help you set up the structure and basic frontend for the 'Leptis Hypermarket' website. Given the environment limitations, we'll focus on creating the static frontend structure (HTML, CSS, basic JS) for the 7 pages, incorporating the specified design elements and color theme. We'll use Vite as a development server. The advanced CMS and admin dashboard features require a backend, which cannot be fully implemented here, but we'll structure the frontend to accommodate data from such a system. { "name": "leptis-hypermarket", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "vite": "^5.2.0" } } import { resolve } from 'path'; import { defineConfig } from 'vite'; export default defineConfig({ root: 'src', // Source files are in the 'src' directory publicDir: '../public', // Static assets are in the 'public' directory build: { outDir: '../dist', // Output build files to 'dist' directory rollupOptions: { input: { main: resolve(__dirname, 'src/index.html'), about: resolve(__dirname, 'src/pages/about.html'), products: resolve(__dirname, 'src/pages/products.html'), offers: resolve(__dirname, 'src/pages/offers.html'), blog: resolve(__dirname, 'src/pages/blog.html'), contact: resolve(__dirname, 'src/pages/contact.html'), faq: resolve(__dirname, 'src/pages/faq.html'), }, }, }, server: { open: '/index.html' // Automatically open the main page } }); Leptis Hypermarket - Home

Leptis

Amazing Deals Every Week!

Discover fresh produce, top electronics, and more.

View Offers

Quality You Can Trust

Shop the best brands at Leptis Hypermarket.

Shop Now

What Our Customers Say

"Great prices and wide selection. My favorite place to shop!"

- Fatima A.

"Excellent customer service and fresh products every time."

- Ahmed K.

Our Locations

Leptis Dubai Mall

Dubai Mall, Financial Center Rd, Dubai

Open Daily: 9 AM - 11 PM

Leptis Marina Walk

Dubai Marina Walk, Dubai

Open Daily: 10 AM - 10 PM

About Us - Leptis Hypermarket

Leptis

About Leptis Hypermarket

Your trusted partner for quality and value in the UAE.

Our History

Founded in [Year], Leptis Hypermarket started with a vision to provide a comprehensive shopping experience under one roof. From humble beginnings, we have grown into a leading retail destination in the UAE, known for our commitment to quality, variety, and customer satisfaction. We continuously strive to innovate and improve our services.

Our Mission & Vision

Mission: To offer the widest range of quality products at competitive prices, ensuring customer satisfaction through exceptional service and a convenient shopping environment. Our goal is to be the preferred hypermarket for families across the UAE.

Vision: To be the most trusted and innovative retailer in the region, setting benchmarks in quality, value, and customer experience.

Our Values

Customer Focus: Putting our customers' needs first.
Integrity: Operating with honesty and transparency.
Quality: Offering the best products and services.
Teamwork: Collaborating to achieve common goals.
Innovation: Embracing change and continuous improvement.

Products - Leptis Hypermarket

Leptis

Our Products

Explore our diverse range of quality items.

Fresh Apples

Crisp and juicy apples, sourced locally.

AED 10.00 / kg

Smart TV 55"

Experience stunning visuals with this 4K Smart TV.

AED 1599.00

Running Shoes

Comfortable and durable running shoes for athletes.

AED 250.00

Organic Milk

Fresh organic milk, 1 Liter.

AED 8.50

Wireless Headphones

Noise-cancelling over-ear headphones.

AED 350.00

Offers - Leptis Hypermarket

Leptis

Special Offers & Promotions

Don't miss out on our exclusive deals!

Current Offers

Weekend Electronics Sale

Up to 30% off on selected TVs, Laptops, and Smartphones. Visit in-store or shop online.

Learn More

Buy 1 Get 1 Free on Bakery Items

Enjoy delicious treats from our bakery. Offer valid on selected items.

See Details

Save on Stationery & School Supplies

Get everything your kids need for school at great prices.

Shop Now

Note: Offers displayed here would be managed and updated through the Admin Dashboard.

Blog - Leptis Hypermarket

Leptis

Leptis Blog

News, tips, recipes, and more from your favorite hypermarket.

News

Leptis Opens New Branch in Abu Dhabi

We are excited to announce the grand opening of our latest store...

November 10, 2024 Read More

Recipes

Easy Weeknight Dinner Ideas

Short on time? Try these delicious and quick recipes using ingredients from Leptis...

November 5, 2024 Read More

Shopping Tips

How to Save Money on Groceries

Learn smart shopping strategies to make the most of your budget at Leptis...

October 28, 2024 Read More

Note: Blog posts displayed here would be managed (created, edited, deleted) through the Admin Dashboard.

Leptis

Get In Touch

We'd love to hear from you. Contact us with your questions or feedback.

Contact Information

Address: Leptis Hypermarket, [Your Full Address], Dubai, UAE

Phone: +971 4 123 4567

Email: info@leptis.ae

Working Hours: Sunday - Saturday: 9:00 AM - 11:00 PM

Send Us a Message

Find Us Here

Google Map showing Leptis Hypermarket location would be embedded here.

FAQ - Leptis Hypermarket

Leptis

Frequently Asked Questions

Find answers to common questions about shopping at Leptis.

What are Leptis Hypermarket's opening hours?

Our standard opening hours are from 9:00 AM to 11:00 PM, seven days a week. However, hours may vary slightly by location and during public holidays. Please check the specific store location page or contact us for the most accurate information.

Do you offer online shopping and delivery?

Yes, we offer online shopping through our website/app (details would be provided here). We provide home delivery services within specified areas in the UAE. Delivery charges and times may vary based on your location and order size. Check our delivery information page for more details.

What is your return policy?

We have a customer-friendly return policy. Most items can be returned within 14 days of purchase with the original receipt, provided they are in unused condition and original packaging. Some exclusions apply (e.g., perishable goods, personal care items). Please visit our customer service desk or check our detailed return policy online.

How can I find out about current promotions and offers?

You can find all our latest promotions and special offers on the Offers page of our website. You can also subscribe to our newsletter or follow us on social media to stay updated.

Do you have a loyalty program?

Yes, we have the Leptis Rewards program! You can sign up in-store or online to earn points on your purchases and enjoy exclusive member benefits and discounts. Ask our staff for more details or visit the loyalty program section on our website.

/* --- Global Styles & Variables --- */ :root { --dark-blue: #0a2342; /* Primary Dark Blue */ --red: #d7263d; /* Primary Red */ --white: #ffffff; /* Primary White */ --light-gray: #f8f9fa; /* Light background */ --medium-gray: #e9ecef; /* Borders, dividers */ --dark-gray: #495057; /* Body text */ --text-light: var(--white); --text-dark: var(--dark-blue); --text-body: var(--dark-gray); --accent-color: var(--red); --font-primary: 'Arial', sans-serif; /* Example font */ --header-height: 70px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); color: var(--text-body); line-height: 1.6; background-color: var(--white); /* Default background */ } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease; } a:hover { color: darken(var(--accent-color), 10%); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { color: var(--text-dark); margin-bottom: 0.8em; line-height: 1.3; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } p { margin-bottom: 1em; } ul { list-style: none; } .section { padding: 60px 0; } .text-center { text-align: center; } .highlight-red { color: var(--red); font-weight: bold; } .admin-note { background-color: var(--medium-gray); color: var(--dark-gray); padding: 10px; border-left: 4px solid var(--dark-blue); margin-top: 20px; font-size: 0.9em; font-style: italic; } /* --- Buttons --- */ .cta-button, .cta-button-outline, .add-to-cart-button { display: inline-block; padding: 12px 25px; border-radius: 5px; font-size: 1rem; font-weight: bold; text-align: center; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid transparent; } .cta-button { background-color: var(--red); color: var(--white); border-color: var(--red); } .cta-button:hover { background-color: darken(var(--red), 10%); border-color: darken(var(--red), 10%); color: var(--white); text-decoration: none; } .cta-button-outline { background-color: transparent; color: var(--red); border-color: var(--red); } .cta-button-outline:hover { background-color: var(--red); color: var(--white); text-decoration: none; } .add-to-cart-button { background-color: var(--dark-blue); color: var(--white); border-color: var(--dark-blue); width: 100%; /* Make button full width within card */ margin-top: auto; /* Push to bottom */ } .add-to-cart-button:hover { background-color: lighten(var(--dark-blue), 10%); border-color: lighten(var(--dark-blue), 10%); color: var(--white); text-decoration: none; } /* --- Header / Navigation --- */ .sticky-nav { position: sticky; top: 0; left: 0; width: 100%; background-color: var(--red); color: var(--white); z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); height: var(--header-height); } .nav-container { display: flex; justify-content: space-between; align-items: center; height: 100%; } .logo { display: flex; align-items: center; color: var(--white); font-size: 1.5rem; font-weight: bold; text-decoration: none; } .logo:hover { text-decoration: none; } .logo img { height: 40px; margin-right: 10px; filter: brightness(0) invert(1); /* Make logo white */ } .sticky-nav nav ul { display: flex; gap: 25px; } .sticky-nav nav a { color: var(--white); text-decoration: none; font-weight: bold; padding: 5px 0; position: relative; } .sticky-nav nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--white); transition: width 0.3s ease; } .sticky-nav nav a:hover::after, .sticky-nav nav a.active::after { width: 100%; } .menu-toggle { display: none; /* Hidden by default */ background: none; border: none; color: var(--white); font-size: 1.8rem; cursor: pointer; } /* --- Footer --- */ footer { background-color: var(--dark-blue); color: var(--text-light); padding: 40px 0 20px; margin-top: auto; /* Push footer to bottom */ } .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin-bottom: 30px; } .footer-section { flex: 1; min-width: 200px; } .footer-section h4 { color: var(--white); margin-bottom: 15px; border-bottom: 1px solid var(--red); padding-bottom: 5px; display: inline-block; } .footer-section ul li { margin-bottom: 8px; } .footer-section a { color: var(--medium-gray); } .footer-section a:hover { color: var(--white); text-decoration: underline; } .newsletter-form { display: flex; margin-top: 10px; } .newsletter-form input { flex-grow: 1; padding: 8px; border: 1px solid var(--medium-gray); border-radius: 3px 0 0 3px; background-color: var(--white); color: var(--dark-gray); } .newsletter-form button { padding: 8px 15px; background-color: var(--red); color: var(--white); border: 1px solid var(--red); border-radius: 0 3px 3px 0; cursor: pointer; transition: background-color 0.3s ease; } .newsletter-form button:hover { background-color: darken(var(--red), 10%); } .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid var(--medium-gray); font-size: 0.9em; color: var(--medium-gray); } /* --- Homepage Specific --- */ .hero { position: relative; height: calc(100vh - var(--header-height)); min-height: 500px; background-color: var(--dark-blue); /* Base background */ color: var(--white); overflow: hidden; /* Ensure slides stay within bounds */ } .slider { position: relative; width: 100%; height: 100%; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; } .slide.active { opacity: 1; z-index: 2; } .slide::before { /* Dark overlay for text readability */ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 35, 66, 0.6); /* Dark Blue overlay */ } .hero-content { position: relative; /* Ensure content is above overlay */ z-index: 3; max-width: 800px; } .hero h1 { font-size: 3.5rem; margin-bottom: 0.5em; color: var(--white); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .hero p { font-size: 1.2rem; margin-bottom: 1.5em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .slider-controls { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 15px; } .slider-controls button { background-color: rgba(215, 38, 61, 0.7); /* Semi-transparent Red */ color: var(--white); border: none; padding: 10px 15px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; transition: background-color 0.3s ease; } .slider-controls button:hover { background-color: var(--red); } .featured-products, .store-locations { background-color: var(--white); /* White background for these sections */ } .customer-reviews { background-color: var(--light-gray); /* Light gray for reviews */ text-align: center; } .product-grid, .review-grid, .location-grid, .offer-grid, .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 30px; } .product-card { border: 1px solid var(--medium-gray); border-radius: 8px; overflow: hidden; text-align: center; padding: 20px; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .product-card img { max-height: 200px; object-fit: contain; margin: 0 auto 15px; } .product-card h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--dark-blue); transition: color 0.3s ease; } .product-card:hover h3 { color: var(--red); /* Red hover effect for product name */ } .product-card .price { font-weight: bold; color: var(--dark-blue); margin-bottom: 15px; font-size: 1.1rem; } .review-card, .location-card { background-color: var(--white); padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .review-card span { display: block; margin-top: 10px; font-style: italic; color: var(--dark-blue); } .location-card h3 { color: var(--red); } /* --- About Us Page --- */ .about-hero { background-color: var(--dark-blue); color: var(--white); text-align: center; padding: 40px 0; } .about-hero h1 { color: var(--white); } .about-content { background-color: var(--white); } .about-section { display: flex; align-items: center; gap: 40px; margin-bottom: 40px; } .about-section.reverse { flex-direction: row-reverse; } .about-image { flex: 1; max-width: 45%; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .about-text { flex: 1; } .about-text h2 { color: var(--dark-blue); margin-bottom: 15px; } .about-text ul { list-style: disc; padding-left: 20px; } .about-text ul li { margin-bottom: 8px; } /* --- Products Page --- */ .products-page { background-color: var(--dark-blue); /* Dark blue background */ } .products-hero { background-color: var(--red); /* Red hero section */ color: var(--white); text-align: center; padding: 40px 0; } .products-hero h1 { color: var(--white); } .products-list { background-color: var(--dark-blue); padding-top: 30px; padding-bottom: 60px; } .products-list .product-card { background-color: var(--white); /* White cards on dark background */ border: none; } .products-list .product-card h3 { color: var(--dark-blue); } .products-list .product-card:hover h3 { color: var(--red); } .products-list .product-card .description { font-size: 0.9em; color: var(--text-body); margin-bottom: 10px; flex-grow: 1; /* Allow description to take space */ } .products-list .product-card .price { color: var(--dark-blue); } .products-list .add-to-cart-button { background-color: var(--red); /* Red add to cart button */ border-color: var(--red); } .products-list .add-to-cart-button:hover { background-color: darken(var(--red), 10%); border-color: darken(var(--red), 10%); } .category-filters { margin-bottom: 30px; text-align: center; } .filter-btn { background: none; border: 1px solid var(--white); color: var(--white); padding: 8px 15px; margin: 0 5px; border-radius: 20px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .filter-btn:hover, .filter-btn.active { background-color: var(--red); border-color: var(--red); color: var(--white); } /* --- Offers Page --- */ .offers-hero { background-color: var(--dark-blue); color: var(--white); text-align: center; padding: 40px 0; } .offers-hero h1 { color: var(--white); } .offers-list { background-color: var(--white); /* White background */ } .offers-list h2 { color: var(--dark-blue); text-align: center; } .offer-card { border: 1px solid var(--medium-gray); border-radius: 8px; overflow: hidden; background-color: var(--light-gray); position: relative; display: flex; flex-direction: column; } .offer-banner { background-color: var(--red); color: var(--white); padding: 8px 15px; font-weight: bold; text-align: center; font-size: 0.9em; } .offer-banner .expiry { display: block; font-size: 0.8em; font-weight: normal; opacity: 0.9; } .offer-card img { width: 100%; height: 200px; /* Fixed height for consistency */ object-fit: cover; } .offer-details { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; } .offer-details h3 { color: var(--dark-blue); } .offer-details p { flex-grow: 1; margin-bottom: 15px; } .offer-details .cta-button-outline { border-color: var(--dark-blue); color: var(--dark-blue); align-self: flex-start; /* Align button to the left */ } .offer-details .cta-button-outline:hover { background-color: var(--dark-blue); color: var(--white); } /* --- Blog Page --- */ .blog-hero { background-color: var(--red); color: var(--white); text-align: center; padding: 40px 0; } .blog-hero h1 { color: var(--white); } .blog-list { background-color: var(--white); /* White background */ } .blog-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; } .blog-search, .blog-filter { padding: 10px; border: 1px solid var(--medium-gray); border-radius: 5px; font-size: 1rem; } .blog-search { flex-grow: 1; max-width: 400px;} .blog-filter { min-width: 180px; } .blog-card { border: 1px solid var(--medium-gray); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background-color: var(--white); } .blog-card img { width: 100%; height: 200px; object-fit: cover; } .blog-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; } .blog-category { font-size: 0.8em; font-weight: bold; margin-bottom: 5px; display: inline-block; } .blog-card h2 { font-size: 1.3rem; margin-bottom: 10px; color: var(--dark-blue); } .blog-card h2 a { color: inherit; } .blog-card h2 a:hover { color: var(--red); text-decoration: none; } .blog-excerpt { font-size: 0.95rem; margin-bottom: 15px; flex-grow: 1; } .blog-date { font-size: 0.85rem; color: var(--dark-gray); margin-bottom: 15px; } .read-more { color: var(--red); font-weight: bold; align-self: flex-start; } .read-more:hover { text-decoration: underline; } /* --- Contact Us Page --- */ .contact-hero { background-color: var(--dark-blue); color: var(--white); text-align: center; padding: 40px 0; } .contact-hero h1 { color: var(--white); } .contact-details { display: flex; flex-wrap: wrap; gap: 40px; background-color: var(--white); } .contact-info, .contact-form-container { flex: 1; min-width: 300px; } .contact-info h2, .contact-form-container h2 { color: var(--dark-blue); margin-bottom: 20px; } .contact-info p { margin-bottom: 10px; } .contact-info strong { color: var(--dark-blue); } .social-links { margin-top: 20px; } .social-links a { display: inline-block; margin-right: 10px; /* Add styles for social icons */ font-size: 1.5rem; color: var(--dark-blue); } .social-links a:hover { color: var(--red); text-decoration: none;} .contact-form .form-group { margin-bottom: 20px; } .contact-form label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--dark-blue); } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 12px; border: 1px solid var(--dark-blue); /* Dark blue border */ border-radius: 5px; font-size: 1rem; background-color: var(--white); color: var(--dark-gray); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 5px rgba(215, 38, 61, 0.3); /* Red focus glow */ } .contact-form textarea { resize: vertical; } .contact-form button[type="submit"] { background-color: var(--red); /* Red submit button */ color: var(--white); border-color: var(--red); padding: 12px 30px; } .contact-form button[type="submit"]:hover { background-color: darken(var(--red), 10%); border-color: darken(var(--red), 10%); } #form-status { margin-top: 15px; font-weight: bold; } .map-section { background-color: var(--light-gray); text-align: center; } .map-section h2 { color: var(--dark-blue); } .map-container { height: 400px; width: 100%; margin-top: 20px; background-color: var(--medium-gray); /* Placeholder background */ display: flex; align-items: center; justify-content: center; border: 1px solid var(--dark-gray); } .map-container p { color: var(--dark-gray); } /* --- FAQ Page --- */ .faq-hero { background-color: var(--red); color: var(--white); text-align: center; padding: 40px 0; } .faq-hero h1 { color: var(--white); } .faq-list { background-color: var(--white); /* White background */ max-width: 900px; /* Limit width for readability */ } .faq-items { margin-top: 30px; } .faq-item { border-bottom: 1px solid var(--medium-gray); margin-bottom: 15px; } .faq-item:last-child { border-bottom: none; } .faq-question { padding: 15px 0; cursor: pointer; font-weight: bold; font-size: 1.1rem; color: var(--dark-blue); /* Dark blue headings */ position: relative; list-style: none; /* Remove default marker */ transition: color 0.3s ease; } .faq-question::-webkit-details-marker { display: none; } /* Hide default arrow */ .faq-question::after { /* Custom arrow */ content: '+'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--red); /* Red accent */ transition: transform 0.3s ease; } .faq-item[open] .faq-question::after { content: '−'; transform: translateY(-50%); } .faq-question:hover { color: var(--red); } .faq-answer { padding: 0 10px 20px 10px; color: var(--text-body); background-color: var(--light-gray); /* Slight background for answer */ border-left: 3px solid var(--red); /* Red accent line */ margin-left: 5px; /* Indent answer slightly */ margin-bottom: 15px; } .faq-answer p { margin-bottom: 0.5em; } .faq-answer p:last-child { margin-bottom: 0; } /* --- Admin Dashboard Notes (Conceptual) --- */ /* These styles are conceptual placeholders for how the admin might look */ .admin-dashboard { background-color: var(--dark-blue); color: var(--white); } .admin-panel { background-color: var(--white); color: var(--dark-blue); padding: 20px; border-radius: 5px; margin-bottom: 20px; } .admin-panel h3 { color: var(--dark-blue); } .admin-button { background-color: var(--red); color: var(--white); /* Red CTAs */ } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { border: 1px solid var(--medium-gray); padding: 8px; text-align: left; } .admin-table th { background-color: var(--light-gray); color: var(--dark-blue); } .out-of-stock-highlight { color: var(--red); font-weight: bold; /* Red highlight */ } .seo-panel { background-color: var(--dark-blue); color: var(--white); padding: 15px; border-radius: 5px; } .seo-panel button { background-color: var(--red); /* Red buttons */ } .analytics-graph { border: 1px solid var(--red); /* Red accents for graphs */ } /* --- Responsive Design --- */ @import url('responsive.css'); /* --- Responsive Styles --- */ /* Medium Devices (Tablets, smaller desktops) - up to 992px */ @media (max-width: 992px) { :root { --header-height: 60px; } h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.4rem; } .container { width: 95%; } .hero { height: auto; /* Adjust height */ min-height: 450px; padding: 80px 0; /* Add padding for content */ } .hero h1 { font-size: 2.8rem; } .hero p { font-size: 1.1rem; } .product-grid, .review-grid, .location-grid, .offer-grid, .blog-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .about-section { flex-direction: column; text-align: center; } .about-section.reverse { flex-direction: column; /* Keep column layout */ } .about-image { max-width: 70%; margin-bottom: 20px; } .contact-details { flex-direction: column; } .footer-content { gap: 20px; } .footer-section { min-width: calc(50% - 20px); /* Two columns on tablets */ } } /* Small Devices (Landscape Phones, large portrait phones) - up to 768px */ @media (max-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; } .section { padding: 40px 0; } /* Mobile Navigation */ .sticky-nav nav { position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: var(--red); flex-direction: column; align-items: center; padding: 20px 0; max-height: 0; /* Start hidden */ overflow: hidden; transition: max-height 0.5s ease-out; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .sticky-nav nav.active { max-height: 500px; /* Adjust as needed */ } .sticky-nav nav ul { flex-direction: column; gap: 15px; width: 100%; text-align: center; } .sticky-nav nav ul li { width: 100%; } .sticky-nav nav a { display: block; padding: 10px 0; width: 100%; } .sticky-nav nav a::after { display: none; /* Hide underline effect on mobile nav */ } .sticky-nav nav a.active { background-color: rgba(255, 255, 255, 0.1); /* Slight highlight for active */ } .menu-toggle { display: block; /* Show hamburger menu */ } .hero { min-height: 400px; padding: 60px 0; } .hero h1 { font-size: 2.2rem; } .hero p { font-size: 1rem; } .slider-controls { bottom: 20px; } .slider-controls button { padding: 8px 12px; font-size: 1.2rem; } .product-grid, .review-grid, .location-grid, .offer-grid, .blog-grid { grid-template-columns: 1fr; /* Single column */ gap: 25px; } .product-card img { max-height: 180px; } .blog-controls { flex-direction: column; align-items: stretch; } .blog-search { max-width: none; } .footer-section { min-width: 100%; /* Single column on small screens */ text-align: center; } .newsletter-form { justify-content: center; } .about-image { max-width: 80%; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { padding: 10px; } } /* Extra Small Devices (Portrait Phones) - up to 576px */ @media (max-width: 576px) { :root { --header-height: 55px; } h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; } .container { width: 95%; padding: 0 10px; } .cta-button, .cta-button-outline, .add-to-cart-button { padding: 10px 20px; font-size: 0.9rem; } .hero { min-height: 350px; padding: 40px 0; } .hero h1 { font-size: 1.9rem; } .hero p { font-size: 0.9rem; } .logo span { display: none; /* Hide text logo on very small screens */ } .logo img { height: 35px; } .faq-question { font-size: 1rem; } .faq-question::after { font-size: 1.3rem; right: 5px;} .faq-answer { padding: 0 5px 15px 5px; } } // --- Mobile Navigation Toggle --- const menuToggle = document.querySelector('.menu-toggle'); const nav = document.querySelector('.sticky-nav nav'); if (menuToggle && nav) { menuToggle.addEventListener('click', () => { nav.classList.toggle('active'); // Optional: Change toggle icon if (nav.classList.contains('active')) { menuToggle.innerHTML = '×'; // Close icon menuToggle.setAttribute('aria-label', 'Close navigation'); } else { menuToggle.innerHTML = '☰'; // Hamburger icon menuToggle.setAttribute('aria-label', 'Toggle navigation'); } }); // Close nav when a link is clicked (optional) nav.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { if (nav.classList.contains('active')) { nav.classList.remove('active'); menuToggle.innerHTML = '☰'; menuToggle.setAttribute('aria-label', 'Toggle navigation'); } }); }); } // --- Add other global JS functionalities here --- console.log("Leptis Hypermarket site JS loaded."); // --- Sticky Header Background Change (Optional) --- // const header = document.querySelector('.sticky-nav'); // window.addEventListener('scroll', () => { // if (window.scrollY > 50) { // Add background after scrolling 50px // header.style.backgroundColor = 'rgba(215, 38, 61, 0.95)'; // Slightly transparent red // } else { // header.style.backgroundColor = 'var(--red)'; // Back to solid red // } // }); // --- Homepage Hero Slider --- const slides = document.querySelectorAll('.hero .slide'); const prevButton = document.querySelector('.hero .prev'); const nextButton = document.querySelector('.hero .next'); let currentSlide = 0; let slideInterval; function showSlide(index) { slides.forEach((slide, i) => { slide.classList.remove('active'); if (i === index) { slide.classList.add('active'); } }); } function nextSlide() { currentSlide = (currentSlide + 1) % slides.length; showSlide(currentSlide); } function prevSlide() { currentSlide = (currentSlide - 1 + slides.length) % slides.length; showSlide(currentSlide); } function startSlideShow() { // Ensure interval doesn't run multiple times if called again clearInterval(slideInterval); // Change slide every 5 seconds (5000 milliseconds) slideInterval = setInterval(nextSlide, 5000); } function stopSlideShow() { clearInterval(slideInterval); } if (slides.length > 0 && prevButton && nextButton) { // Initial setup showSlide(currentSlide); startSlideShow(); // Start automatic sliding // Button controls nextButton.addEventListener('click', () => { nextSlide(); stopSlideShow(); // Optional: Stop auto-slide on manual interaction startSlideShow(); // Optional: Restart auto-slide timer }); prevButton.addEventListener('click', () => { prevSlide(); stopSlideShow(); // Optional: Stop auto-slide on manual interaction startSlideShow(); // Optional: Restart auto-slide timer }); // Optional: Pause on hover const sliderElement = document.querySelector('.hero .slider'); if (sliderElement) { sliderElement.addEventListener('mouseenter', stopSlideShow); sliderElement.addEventListener('mouseleave', startSlideShow); } } else { // Hide controls if only one or no slides if(prevButton) prevButton.style.display = 'none'; if(nextButton) nextButton.style.display = 'none'; } ## Leptis Hypermarket Website Frontend This project sets up the frontend structure for the Leptis Hypermarket website using HTML, CSS, and basic JavaScript, served by Vite. **Note on Admin Dashboard & Dynamic Content:** The requested Admin Dashboard features (CMS, Blog Management, Offer Management, SEO tools, Analytics, User Management) require a **backend server and database**. These cannot be fully implemented within the current browser-based WebContainer environment. - The frontend is structured to *display* dynamic content (like products, offers, blog posts). - Placeholder content and images are used. - Comments in the code (`admin-note` class, JS comments) indicate where integration with a backend/CMS would occur. - A real implementation would involve: - A backend framework (e.g., Node.js/Express, Python/Django, PHP/Laravel). - A database (e.g., PostgreSQL, MongoDB). - An API for the frontend to fetch and send data. - A separate Admin Dashboard interface (likely a web application) interacting with the backend API. **Running the Frontend:** 1. **Install Dependencies:** bash npm install 2. **Run Development Server:** ```bash npm run dev ``` This will start the Vite development server. You can view the site in the preview window. Changes to files in the `src` directory will trigger hot module replacement (HMR). 3. **Build for Production:** ```bash npm run build ``` This command creates a `dist` folder with optimized static assets ready for deployment. **Project Structure:** - `public/`: Static assets (images, favicon) that are copied directly to the build output. - `src/`: Source files. - `css/`: CSS stylesheets. - `js/`: JavaScript modules. - `pages/`: HTML files for subpages. - `index.html`: Main homepage HTML file. - `package.json`: Project configuration and dependencies. - `vite.config.js`: Vite configuration file. - `dist/`: (Generated after `npm run build`) Production build output. This sets up the basic file structure, HTML for all 7 pages with placeholder content reflecting your requirements, CSS with the Dark Blue/Red/White theme, and basic JavaScript for the mobile navigation and homepage slider. Placeholder images are included in the `public/images` directory structure. To run this: 1. Install dependencies: `npm install` 2. Start the dev server: `npm run dev` The preview will show the homepage. You can navigate to other pages using the links (e.g., `/pages/about.html`). Remember, the dynamic content loading and the entire admin dashboard functionality require a backend, which is outlined conceptually in the CSS and README but not implemented due to environment constraints.

Amazing Deals Every Week!

Quality You Can Trust