Build me a full html template for my website homepage, the mobile version.
The website sells tech items, electronics and gadgets. Here is how I want the homepage to look like.
The homepage is made of sections. But it starts with the global website header. The website uses minimalist black, white, grey and their shades and only uses a premium shade of blue sparingly. The header is white background with black text and icons. The header elements are Menu toggle to the left followed by Logo name (name it just "Digital") still at the left. Then to the right theres search icon, wishlist icon with counter bubble, account icon and cart icon with counter bubble.
But not just any attention!
Clicking the search icon toggles a nice search bar with smooth transition below the header and a blur overlay on the beneath items. Clicking the menu icon toggles the mobile menu panel from the left.
Clicking the cart icon toggles a mini-cart drawer from <b>right</b>.
The minicart drawer has the mini-cart header that shows "You cart (x items).
Then the mini-cart body with rows of the added items.
Each row starts with the product image to the left, then details beside it then a subtle "x" at the top right for removing the product. The details should be the product title (2 lines max with "..." if long) then any attributes below it (1 line max, scrollable horizontally if overflows) then the price below that (including del price if on offer) and then the quantity stepper to the far right of the row with price.
See here:
- Nothing
- But
- Prayers
- Always
The items( individual product card rows) on the mini-cart are scrollable vertically if they're many. Then the mini-cart footer has the subtotal and actions below it (checkout/view full cart) where view full cart is the primary button.
Frontpage
The frontpage starts with the hero section right below the header. The hero section contains sliders (six sliders) with dots somewhere below the bottom showing the sliders as they autoplay. The hero section should have a reasonable height. Not too tall not too short. Each slider must have an image, bold title text, body text and a CTA button. You could use "Shop Now" or "See More" or anything for the CTA. I would prefer using different designs for each slider so that I can see how it could be implemented. For example you could use one with text left image right, you could use one with image background text overlay, and many others. Ensure there are six sliders. They should be related to the content of the website which is tech and electronics.
Below the slider is the categories scroll. This one is a section of categories, scrollable horizontally, with circular category image/icon and category name below it.
Below that now starts the actual product sections. Each section should show two product cards and a third one almost peeping at the right edge to show that it is scrollable horizontally. Each section starts with the section header which includes label to the left (e.g "Smartphones") and a small "see more→" to the right. Then the product cards below that. Each card has the product image, then the product title below it (two lines max) then the product price below it.
Each section should have 10 product cards. Again scrollable horizontally. The first product card shouldn't start of right at the left margin but have proper breathing room. The right margin should have a white-ish fade since it indicates that there are more items to be scrolled.
The first section should be Featured, then Smartphones, then Laptops, then Computers, then Televisions, then Speakers, then Home Appliances then Office equipment then Recently added.
Now for the recently added section, instead of the products being scrollable horizontally they'll just form a two columns grid on mobile. That means the Recently added section product cards don't scroll horizontally but instead are in a two columns grid display. Below that is a "View More" button. Clicking the view more button will take you to the shop page (for now it should just show a toast notification).
Then after that comes the website footer section. Now I want the footer to be minimal. Black or grey background. The footer could just have three to four rows. The first with three feature icons like "Secure", "Genuine" & "Payment" icon. Then below it could be five links: Terms, Policy, Help, About, Contact. Then below that could be the subtle social icons, light greyish in color (Facebook, Twitter, Instagram, TikTok, YouTube). (On desktop these three rows would be spread out into one row three columns). Then a thin line separator. Then below that could be the Copyright row with "Digital to the left, www.digital.com centered and the actual Copyright to the right).
The mobile menu panel should have the menu panel header, with logo and close icon. Then the menu panel body with menu items, also scrollable horizontally. Then the menu panel footer with dark mode toggle. Each menu item should have an icon to the left then the menu label/link beside it.
All icons on the website should be feather light, svg and modern.
Create, name it Digital_1a.html.
Do it in parts then combine. Start with the html part 1 that has head and styles, then html part 2, then js, then combine. Be fast and efficient enough.