frosty-ecommerce

bysebbar marwane

Create a complete, modern, responsive, and visually appealing e-commerce website for a Moroccan mobile phone store called "Smart phone adam". The design should reflect the premium style of the Instagram page @adam.store__, with a clean, trustworthy, and promotional feel. ⚠️ Important: The ordering system must be WhatsApp-only. No shopping cart, no checkout page. 🆕 New Feature: When the user clicks on any iPhone product card (or clicks "Acheter" / "Commander"), a modal popup should appear allowing the user to select: · Storage / Gigabyte (options: 64GB, 128GB, 256GB, 512GB, 1TB — depending on the model, but for simplicity offer relevant options: for older models 64/128/256, for newer 128/256/512/1TB) After selection, a WhatsApp message is generated containing: Model name + Color + Storage + Price, and sent to +212 781935318. The modal should have a confirm button "Envoyer via WhatsApp" that triggers the chat. Brand Identity: · Store name:Smart phone adam · Slogan: BoutiQ le iPhone — Promotion / Garantie / Confiance · Free delivery throughout Morocco 🇲🇦 · Contact number: +212 781935318 · Include prominent WhatsApp CTA buttons (floating and in hero section). Website Sections: 1. Header / Hero Section · Navigation: Home, iPhones, Contact (smooth scrolling) · Promo banner: "Livraison Gratuite Tout Maroc 🇲🇦" with gold background · Brief intro: "Trusted iPhone seller in Morocco — Quality guaranteed." · Hero CTA: "Commander via WhatsApp" button that opens WhatsApp chat with store number. 2. iPhone Products Grid · Display all iPhones in a clean grid (3–4 columns on desktop, 2 on mobile). · Each product card must show: · A realistic placeholder image of the iPhone model (use high-quality iPhone images, distinct for each model) · Model name (e.g., iPhone 11) · Price in Moroccan Dirhams (DH) · A button: "Acheter" or "Commander" · When the user clicks the "Acheter" button (or clicks anywhere on the card if preferred), a modal opens with color and storage selection. · Use these exact models and prices (in DH): Iphone x : 700DH Iphone xr : 750DH iPhone 11: 900 DH iPhone 11 Pro: 1400 DH iPhone 11 Pro Max: 1700 DH iPhone 12: 1400 DH iPhone 12 Pro: 1750 DH iPhone 12 Pro Max: 1900 DH iPhone 13: 1900 DH iPhone 13 Pro: 2400 DH iPhone 13 Pro Max: 3100 DH iPhone 14: 3700 DH iPhone 14 Pro: 3900 DH iPhone 14 Pro Max: 4300 DH iPhone 15: 4100 DH iPhone 15 Pro: 4800 DH iPhone 15 Pro Max: 5400 DH iPhone 16: 5200 DH iPhone 16 Pro: 4900 DH iPhone 16 Pro Max: 7000 DH iPhone 17: 6800 DH iPhone 17 Pro: 8000 DH iPhone 17 Pro Max: 8900DH 3. Modal Popup Details: · Title: "Personnaliser votre iPhone" · Display the selected model name and base price. · Color selection: radio buttons or stylish color circles with names (Noir, Blanc, Or, Bleu Nuit, Vert Alpin, etc.) · Storage selection: dropdown or buttons (64GB, 128GB, 256GB, 512GB, 1TB). Adjust options logically per model (iPhone 11: 64/128/256; iPhone 15 Pro and above: 128/256/512/1TB) · Final price may remain the same (no price change based on storage for simplicity, but you can keep base price) · WhatsApp message format: "Bonjour, je souhaite commander [Modèle] - [Couleur] - [Stockage] au prix de [Prix] DH. Livraison gratuite. Merci." · Modal buttons: "Annuler" and "Envoyer via WhatsApp" 4. Footer · Contact number: +212 781935318 · Free delivery notice · Instagram handle: @adam.store__(with link to Instagram) · Copyright notice Visual & Functional Requirements: · Use modern fonts (Poppins or Inter). · Color scheme: dark/premium feel with gold, black, and white accents. Optional green accents for trust. · Fully responsive: works perfectly on mobile, tablet, and desktop. · Hover effects on product cards (scale, shadow, gold border). · Language: French (interface in French, prices in DH). · Floating WhatsApp button that stays on screen and opens chat with store number. · Product images: Use realistic, high-quality placeholder images for each iPhone model. Each model should have a distinct image (use placeholders with model name or Apple-style images). I will replace them later. · The store logo can be text-based with gold styling. · Ensure the product grid displays all 23 iPhones exactly as listed. · Modal should be accessible, close when clicking outside, and have smooth animation. Deliver a single, self-contained HTML/CSS/JS file with inline styles or internal stylesheet. Make it fully functional and visually aligned with @adam.store__ Instagram style (premium, clean, trustworthy). All JavaScript must handle the modal logic and WhatsApp link generation.أريد أن تزيد في الرسالة التي ترسل عبر الواتساب Avance 50% obligé.I want to add the shopping cart and the store location:lazaret oujda