Skip to content

Commit 4110c7a

Browse files
gioboagioboa
committed
add Banners example
1 parent c8af4be commit 4110c7a

File tree

4 files changed

+304
-0
lines changed

4 files changed

+304
-0
lines changed

‎apps/qwik-demo-app/src/routes/Banners/DisplayHorizontal/index.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { SfButton } from 'qwik-storefront-ui';
3+
4+
const displayDetails = [
5+
{
6+
image: '/images/display.png',
7+
title: 'Sunny Days Ahead',
8+
subtitle: 'Be inspired',
9+
description: 'Step out in style with our sunglasses collection',
10+
buttonText: 'Discover now',
11+
reverse: false,
12+
backgroundColor: 'bg-negative-200',
13+
titleClass: 'md:typography-headline-2',
14+
subtitleClass: 'md:typography-headline-6',
15+
descriptionClass: 'md:typography-text-lg',
16+
},
17+
{
18+
image: '/images/display-2.png',
19+
title: 'Pack it Up',
20+
subtitle: 'Be active',
21+
description: 'Explore the great outdoors with our backpacks',
22+
buttonText: 'Discover now',
23+
reverse: true,
24+
backgroundColor: 'bg-warning-200',
25+
},
26+
{
27+
image: '/images/display-3.png',
28+
title: 'Fresh and Bold',
29+
subtitle: 'New collection',
30+
description: 'Add a pop up color to your outfit',
31+
buttonText: 'Discover now',
32+
reverse: false,
33+
backgroundColor: 'bg-secondary-200',
34+
},
35+
];
36+
37+
export default component$(() => {
38+
return (
39+
<div class="flex flex-col md:flex-row flex-wrap gap-6 max-w-[1540px]">
40+
{displayDetails.map(
41+
({
42+
image,
43+
title,
44+
subtitle,
45+
description,
46+
buttonText,
47+
backgroundColor,
48+
reverse,
49+
titleClass,
50+
subtitleClass,
51+
}) => (
52+
<div
53+
key={title}
54+
class={{
55+
'relative flex md:max-w-[1536px] md:[&:not(:first-of-type)]:flex-1 md:first-of-type:w-full':
56+
backgroundColor,
57+
}}
58+
>
59+
<a
60+
class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
61+
aria-label={title}
62+
href="/"
63+
/>
64+
<div
65+
class={{
66+
'flex justify-between overflow-hidden grow': true,
67+
'flex-row-reverse': reverse,
68+
}}
69+
>
70+
<div class="flex flex-col justify-center items-start p-6 lg:p-10 max-w-1/2">
71+
<p
72+
class={{
73+
'uppercase typography-text-xs block font-bold tracking-widest':
74+
subtitleClass,
75+
}}
76+
>
77+
{subtitle}
78+
</p>
79+
<h2
80+
class={{
81+
'mb-4 mt-2 font-bold typography-headline-3': titleClass,
82+
}}
83+
>
84+
{title}
85+
</h2>
86+
<p class="typography-text-base block mb-4">{description}</p>
87+
<SfButton class="!bg-black">{buttonText}</SfButton>
88+
</div>
89+
<img
90+
src={image}
91+
alt={title}
92+
class="w-1/2 self-end object-contain"
93+
/>
94+
</div>
95+
</div>
96+
)
97+
)}
98+
</div>
99+
);
100+
});

‎apps/qwik-demo-app/src/routes/Banners/DisplayVertical/index.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { SfButton } from 'qwik-storefront-ui';
3+
4+
const displayDetails = [
5+
{
6+
title: 'Pack it Up',
7+
subtitle: 'Be active',
8+
description: 'Explore the great outdoors with our backpacks',
9+
callToAction: 'Discover now',
10+
image: '/images/display-2.png',
11+
backgroundColor: 'bg-warning-200',
12+
reverse: false,
13+
},
14+
{
15+
title: 'Sunny Days Ahead',
16+
subtitle: 'Be inspired',
17+
description: 'Step out in style with our sunglasses collection',
18+
callToAction: 'Discover now',
19+
image: '/images/display.png',
20+
backgroundColor: 'bg-negative-200',
21+
reverse: true,
22+
},
23+
];
24+
export default component$(() => {
25+
return (
26+
<div class="flex flex-col gap-6 md:flex-row">
27+
{displayDetails.map(
28+
({
29+
title,
30+
subtitle,
31+
description,
32+
callToAction,
33+
image,
34+
backgroundColor,
35+
reverse,
36+
}) => (
37+
<div
38+
key={title}
39+
class={`relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor} ${
40+
reverse ? 'flex-col-reverse' : ''
41+
}`}
42+
>
43+
<a
44+
class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
45+
aria-label={title}
46+
href="/"
47+
/>
48+
<div class="flex flex-col items-center p-4 text-center md:p-10">
49+
<p class="mb-2 font-bold tracking-widest uppercase typography-headline-6">
50+
{subtitle}
51+
</p>
52+
<p class="mb-4 font-bold typography-headline-2">{title}</p>
53+
<p class="mb-4 typography-text-lg">{description}</p>
54+
<SfButton class="font-semibold !bg-neutral-900">
55+
{callToAction}
56+
</SfButton>
57+
</div>
58+
<div class="flex items-center w-full">
59+
<img src={image} alt={title} width="100%" height="auto" />
60+
</div>
61+
</div>
62+
)
63+
)}
64+
</div>
65+
);
66+
});

‎apps/qwik-demo-app/src/routes/Banners/DisplayVerticalMultiple/index.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { SfButton } from 'qwik-storefront-ui';
3+
4+
const displayDetails = [
5+
{
6+
title: 'Pack it Up',
7+
subtitle: 'Be active',
8+
description: 'Explore the great outdoors with our backpacks',
9+
callToAction: 'Discover now',
10+
image: '/images/display-2.png',
11+
backgroundColor: 'bg-warning-200',
12+
reverse: false,
13+
},
14+
{
15+
title: 'Sunny Days Ahead',
16+
subtitle: 'Be inspired',
17+
description: 'Step out in style with our sunglasses collection',
18+
callToAction: 'Discover now',
19+
image: '/images/display.png',
20+
backgroundColor: 'bg-negative-200',
21+
reverse: true,
22+
},
23+
24+
{
25+
title: 'Pack it Up',
26+
subtitle: 'Be active',
27+
description: 'Explore the great outdoors with our backpacks',
28+
callToAction: 'Discover now',
29+
image: '/images/display-2.png',
30+
backgroundColor: 'bg-warning-200',
31+
reverse: true,
32+
},
33+
{
34+
title: 'Sunny Days Ahead',
35+
subtitle: 'Be inspired',
36+
description: 'Step out in style with our sunglasses collection',
37+
callToAction: 'Discover now',
38+
image: '/images/display.png',
39+
backgroundColor: 'bg-negative-200',
40+
reverse: false,
41+
},
42+
];
43+
44+
export default component$(() => {
45+
return (
46+
<div class="flex flex-col gap-6 md:flex-row">
47+
<div class="flex flex-col gap-6 md:flex-row">
48+
{displayDetails.map(
49+
(
50+
{
51+
title,
52+
subtitle,
53+
description,
54+
callToAction,
55+
image,
56+
backgroundColor,
57+
reverse,
58+
},
59+
index
60+
) => (
61+
<div
62+
key={`${title}-${index}`}
63+
class={`relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor} ${
64+
reverse ? 'flex-col-reverse' : ''
65+
}`}
66+
>
67+
<a
68+
class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
69+
aria-label={title}
70+
href="/"
71+
/>
72+
<div class="flex flex-col items-center p-4 text-center md:p-10">
73+
<p class="mb-2 font-bold tracking-widest uppercase typography-headline-6">
74+
{subtitle}
75+
</p>
76+
<p class="mb-4 font-bold typography-headline-2">{title}</p>
77+
<p class="mb-4 typography-text-lg">{description}</p>
78+
<SfButton class="font-semibold !bg-neutral-900">
79+
{callToAction}
80+
</SfButton>
81+
</div>
82+
<div class="flex items-center w-full">
83+
<img src={image} alt={title} width="100%" height="auto" />
84+
</div>
85+
</div>
86+
)
87+
)}
88+
</div>
89+
</div>
90+
);
91+
});

‎apps/qwik-demo-app/src/routes/Banners/Hero/index.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { SfButton } from 'qwik-storefront-ui';
3+
4+
const headphones = '/images/hero-headphones.png';
5+
const desktopBackground = '/images/hero-bg.png';
6+
const mobileBackground = '/images/hero-bg-mobile.png';
7+
8+
export default component$(() => {
9+
return (
10+
<div class="relative min-h-[600px]">
11+
<picture>
12+
<source srcSet={desktopBackground} media="(min-width: 768px)" />
13+
<img
14+
src={mobileBackground}
15+
class="absolute w-full h-full z-[-1] md:object-cover"
16+
/>
17+
</picture>
18+
<div class="md:flex md:flex-row-reverse md:justify-center min-h-[600px] max-w-[1536px] mx-auto">
19+
<div class="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
20+
<img
21+
src={headphones}
22+
alt="Headphones"
23+
class="h-full object-cover object-left"
24+
/>
25+
</div>
26+
<div class="p-4 md:p-10 md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
27+
<p class="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-500 uppercase">
28+
Feel the music
29+
</p>
30+
<h1 class="typography-headline-2 md:typography-headline-1 md:leading-[67.5px] font-bold mt-2 mb-4">
31+
New Wireless Pro
32+
</h1>
33+
<p class="typography-text-base md:typography-text-lg">
34+
Spatial audio. Adjustable ear cups. On-device controls. All-day
35+
battery.
36+
</p>
37+
<div class="flex flex-col md:flex-row gap-4 mt-6">
38+
<SfButton size="lg"> Order now </SfButton>
39+
<SfButton size="lg" class="bg-white" variant="secondary">
40+
Show more
41+
</SfButton>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
);
47+
});

0 commit comments

Comments
 (0)