Banners

import { component$ } from '@builder.io/qwik';
import { SfButton } from 'qwik-storefront-ui';

const displayDetails = [
  {
    image: '/images/display.png',
    title: 'Sunny Days Ahead',
    subtitle: 'Be inspired',
    description: 'Step out in style with our sunglasses collection',
    buttonText: 'Discover now',
    reverse: false,
    backgroundColor: 'bg-negative-200',
    titleClass: 'md:typography-headline-2',
    subtitleClass: 'md:typography-headline-6',
    descriptionClass: 'md:typography-text-lg',
  },
  {
    image: '/images/display-2.png',
    title: 'Pack it Up',
    subtitle: 'Be active',
    description: 'Explore the great outdoors with our backpacks',
    buttonText: 'Discover now',
    reverse: true,
    backgroundColor: 'bg-warning-200',
  },
  {
    image: '/images/display-3.png',
    title: 'Fresh and Bold',
    subtitle: 'New collection',
    description: 'Add a pop up color to your outfit',
    buttonText: 'Discover now',
    reverse: false,
    backgroundColor: 'bg-secondary-200',
  },
];

export default component$(() => {
  return (
    <div class="flex flex-col md:flex-row flex-wrap gap-6 max-w-[1540px]">
      {displayDetails.map(
        ({
          image,
          title,
          subtitle,
          description,
          buttonText,
          backgroundColor,
          reverse,
          titleClass,
          subtitleClass,
        }) => (
          <div
            key={title}
            class={{
              'relative flex md:max-w-[1536px] md:[&:not(:first-of-type)]:flex-1 md:first-of-type:w-full':
                backgroundColor,
            }}
          >
            <a
              class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
              aria-label={title}
              href="/"
            />
            <div
              class={{
                'flex justify-between overflow-hidden grow': true,
                'flex-row-reverse': reverse,
              }}
            >
              <div class="flex flex-col justify-center items-start p-6 lg:p-10 max-w-1/2">
                <p
                  class={{
                    'uppercase typography-text-xs block font-bold tracking-widest':
                      subtitleClass,
                  }}
                >
                  {subtitle}
                </p>
                <h2
                  class={{
                    'mb-4 mt-2 font-bold typography-headline-3': titleClass,
                  }}
                >
                  {title}
                </h2>
                <p class="typography-text-base block mb-4">{description}</p>
                <SfButton class="!bg-black">{buttonText}</SfButton>
              </div>
              <img
                src={image}
                alt={title}
                class="w-1/2 self-end object-contain"
              />
            </div>
          </div>
        )
      )}
    </div>
  );
});

import { component$ } from '@builder.io/qwik';
import { SfButton } from 'qwik-storefront-ui';

const displayDetails = [
  {
    title: 'Pack it Up',
    subtitle: 'Be active',
    description: 'Explore the great outdoors with our backpacks',
    callToAction: 'Discover now',
    image: '/images/display-2.png',
    backgroundColor: 'bg-warning-200',
    reverse: false,
  },
  {
    title: 'Sunny Days Ahead',
    subtitle: 'Be inspired',
    description: 'Step out in style with our sunglasses collection',
    callToAction: 'Discover now',
    image: '/images/display.png',
    backgroundColor: 'bg-negative-200',
    reverse: true,
  },
];
export default component$(() => {
  return (
    <div class="flex flex-col gap-6 md:flex-row">
      {displayDetails.map(
        ({
          title,
          subtitle,
          description,
          callToAction,
          image,
          backgroundColor,
          reverse,
        }) => (
          <div
            key={title}
            class={`relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor} ${
              reverse ? 'flex-col-reverse' : ''
            }`}
          >
            <a
              class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
              aria-label={title}
              href="/"
            />
            <div class="flex flex-col items-center p-4 text-center md:p-10">
              <p class="mb-2 font-bold tracking-widest uppercase typography-headline-6">
                {subtitle}
              </p>
              <p class="mb-4 font-bold typography-headline-2">{title}</p>
              <p class="mb-4 typography-text-lg">{description}</p>
              <SfButton class="font-semibold !bg-neutral-900">
                {callToAction}
              </SfButton>
            </div>
            <div class="flex items-center w-full">
              <img src={image} alt={title} />
            </div>
          </div>
        )
      )}
    </div>
  );
});

import { component$ } from '@builder.io/qwik';
import { SfButton } from 'qwik-storefront-ui';

const displayDetails = [
  {
    title: 'Pack it Up',
    subtitle: 'Be active',
    description: 'Explore the great outdoors with our backpacks',
    callToAction: 'Discover now',
    image: '/images/display-2.png',
    backgroundColor: 'bg-warning-200',
    reverse: false,
  },
  {
    title: 'Sunny Days Ahead',
    subtitle: 'Be inspired',
    description: 'Step out in style with our sunglasses collection',
    callToAction: 'Discover now',
    image: '/images/display.png',
    backgroundColor: 'bg-negative-200',
    reverse: true,
  },

  {
    title: 'Pack it Up',
    subtitle: 'Be active',
    description: 'Explore the great outdoors with our backpacks',
    callToAction: 'Discover now',
    image: '/images/display-2.png',
    backgroundColor: 'bg-warning-200',
    reverse: true,
  },
  {
    title: 'Sunny Days Ahead',
    subtitle: 'Be inspired',
    description: 'Step out in style with our sunglasses collection',
    callToAction: 'Discover now',
    image: '/images/display.png',
    backgroundColor: 'bg-negative-200',
    reverse: false,
  },
];

export default component$(() => {
  return (
    <div class="flex flex-col gap-6 md:flex-row">
      <div class="flex flex-col gap-6 md:flex-row">
        {displayDetails.map(
          (
            {
              title,
              subtitle,
              description,
              callToAction,
              image,
              backgroundColor,
              reverse,
            },
            index
          ) => (
            <div
              key={`${title}-${index}`}
              class={`relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor} ${
                reverse ? 'flex-col-reverse' : ''
              }`}
            >
              <a
                class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
                aria-label={title}
                href="/"
              />
              <div class="flex flex-col items-center p-4 text-center md:p-10">
                <p class="mb-2 font-bold tracking-widest uppercase typography-headline-6">
                  {subtitle}
                </p>
                <p class="mb-4 font-bold typography-headline-2">{title}</p>
                <p class="mb-4 typography-text-lg">{description}</p>
                <SfButton class="font-semibold !bg-neutral-900">
                  {callToAction}
                </SfButton>
              </div>
              <div class="flex items-center w-full">
                <img src={image} alt={title} />
              </div>
            </div>
          )
        )}
      </div>
    </div>
  );
});

import { component$ } from '@builder.io/qwik';
import { SfButton } from 'qwik-storefront-ui';

const headphones = '/images/hero-headphones.png';
const desktopBackground = '/images/hero-bg.png';
const mobileBackground = '/images/hero-bg-mobile.png';

export default component$(() => {
  return (
    <div class="relative min-h-[600px]">
      <picture>
        <source srcSet={desktopBackground} media="(min-width: 768px)" />
        <img
          src={mobileBackground}
          class="absolute w-full h-full z-[-1] md:object-cover"
        />
      </picture>
      <div class="md:flex md:flex-row-reverse md:justify-center min-h-[600px] max-w-[1536px] mx-auto">
        <div class="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
          <img
            src={headphones}
            alt="Headphones"
            class="h-full object-cover object-left"
          />
        </div>
        <div class="p-4 md:p-10 md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
          <p class="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-500 uppercase">
            Feel the music
          </p>
          <h1 class="typography-headline-2 md:typography-headline-1 md:leading-[67.5px] font-bold mt-2 mb-4">
            New Wireless Pro
          </h1>
          <p class="typography-text-base md:typography-text-lg">
            Spatial audio. Adjustable ear cups. On-device controls. All-day
            battery.
          </p>
          <div class="flex flex-col md:flex-row gap-4 mt-6">
            <SfButton size="lg"> Order now </SfButton>
            <SfButton size="lg" class="bg-white" variant="secondary">
              Show more
            </SfButton>
          </div>
        </div>
      </div>
    </div>
  );
});