Hero e-commerce A

Hero section for an e-commerce website

Preview

Background Image

Summer sale

New Summer Collection

This is our awesome ecommerce shop page, get 50% off if you buy one product now. Follow us on social media to get more promotions.

Background Image

Summer sale

New Summer Collection

This is our awesome ecommerce shop page, get 50% off if you buy one product now. Follow us on social media to get more promotions.

Background Image

Summer sale

New Summer Collection

This is our awesome ecommerce shop page, get 50% off if you buy one product now. Follow us on social media to get more promotions.

Code

import clsx from "clsx"; import styles from "./hero-ecommerce-a.module.css"; type Props = { className?: string; variant?: "default" | "style-a" | "style-b"; }; export default function HeroEcommerceA({ className, variant = "default", }: Props) { return ( <section className={clsx( className, styles["section"], styles[`variant-${variant}`] )} > <div className={styles["bg-image"]}> <picture> <source media="(min-width:480px)" srcSet="/placeholder/img-ecommerce-3-large.jpg" /> <img className={styles["image"]} src="/placeholder/img-ecommerce-3-mobile.jpg" alt="Background Image" /> </picture> {/* You can also use a video tag */} {/* <video className={styles["image"]} src="..." /> */} </div> <div className= {styles["content-wrapper"]}> <div className={clsx(styles["content"])}> {/* Sample content */} <h4 className={styles["heading-2"]}>Summer sale</h4> <h2 className={styles["heading-1"]}>New Summer Collection</h2> <div className={styles["desc"]}> <p> This is our awesome ecommerce shop page, get 50% off if you buy one product now. Follow us on social media to get more promotions. </p> </div> <div className={styles["btns-group"]}> {/* Sample button based on ButtonA */} <a href="#" className={styles["button"]}> Shop now </a> </div> </div> </div> </section> ); }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • variant ("default" | "style-a" or a customized value): Specifies the color or theme variant of the component. Check out the "Sample CSS customization" below for an example of how to use it.
Sample CSS customization
.variant-style-a.section { align-items: flex-end; justify-content: center; text-align: center; } @media screen and (min-width:1024px) { .variant-style-a.section { --padding-y: 5rem; } } .variant-style-a .heading-1{ font-family: 'Times New Roman', Times, serif; } @media screen and (min-width:1024px) { .variant-style-a .heading-1 { font-size: 4rem; } } .variant-style-a .btns-group { margin-top: 2rem; } .variant-style-a .button{ text-transform: uppercase; min-height: 3.5rem; padding: 0.25em 2em; letter-spacing: 0.05em; } --bg-color: #EBF0FF;