Include a Brands widget

This commit is contained in:
widgeter
2023-08-24 21:49:27 +02:00
parent 9c40184240
commit 2840bfffb3
3 changed files with 87 additions and 2 deletions

View File

@ -0,0 +1,36 @@
---
import { Icon } from 'astro-icon/components';
import type { Brands } from '~/types';
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
const {
title = '',
subtitle = '',
tagline = '',
icons = [],
images = [],
id,
isDark = false,
classes = {},
bg = await Astro.slots.render('bg'),
} = Astro.props as Brands;
---
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
<Headline title={title} subtitle={subtitle} tagline={tagline} />
<div class="flex flex-wrap justify-center gap-x-6 sm:gap-x-12 lg:gap-x-24">
{icons && icons.map((icon) => <Icon name={icon} class="py-3 lg:py-5 w-12 h-auto mx-auto sm:mx-0 text-gray-500" />)}
{
images &&
images.map(
(image) =>
image.src && (
<div class="flex justify-center col-span-1 my-2 lg:my-4 py-1 px-3 rounded-md dark:bg-gray-200">
<img src={image.src} alt={image.alt || ''} class="max-h-12" />
</div>
)
)
}
</div>
</WidgetWrapper>

View File

@ -9,6 +9,7 @@ import Features from '~/components/widgets/Features.astro';
import Stats from '~/components/widgets/Stats.astro'; import Stats from '~/components/widgets/Stats.astro';
import Features3 from '~/components/widgets/Features3.astro'; import Features3 from '~/components/widgets/Features3.astro';
import FAQs from '~/components/widgets/FAQs.astro'; import FAQs from '~/components/widgets/FAQs.astro';
import Brands from '~/components/widgets/Brands.astro';
const metadata = { const metadata = {
title: 'Startup Landing Page', title: 'Startup Landing Page',
@ -64,7 +65,8 @@ const metadata = {
<!-- Stats Widget ****************** --> <!-- Stats Widget ****************** -->
<Stats <Stats
title="Our impressive statistics" title="Discover the impressive impact of Astrowind"
subtitle="The numbers below reflect the trust our users have placed in us and the remarkable outcomes we've helped them achieve."
stats={[ stats={[
{ title: 'Downloads', amount: '182K' }, { title: 'Downloads', amount: '182K' },
{ title: 'Websites Launched', amount: '87' }, { title: 'Websites Launched', amount: '87' },
@ -73,6 +75,53 @@ const metadata = {
]} ]}
/> />
<!-- Brands Widget ****************** -->
<Brands
title="Partnerships & Collaborations"
subtitle="At Astrowind, we believe in the power of collaboration to drive innovation and create exceptional experiences."
icons={[]}
images={[
{
src: 'https://cdn.pixabay.com/photo/2015/05/26/09/37/paypal-784404_1280.png',
alt: 'Paypal',
},
{
src: 'https://cdn.pixabay.com/photo/2021/12/06/13/48/visa-6850402_1280.png',
alt: 'Visa',
},
{
src: 'https://cdn.pixabay.com/photo/2013/10/01/10/29/ebay-189064_1280.png',
alt: 'Ebay',
},
{
src: 'https://cdn.pixabay.com/photo/2015/04/13/17/45/icon-720944_1280.png',
alt: 'Youtube',
},
{
src: 'https://cdn.pixabay.com/photo/2013/02/12/09/07/microsoft-80658_1280.png',
alt: 'Microsoft',
},
{
src: 'https://cdn.pixabay.com/photo/2015/04/23/17/41/node-js-736399_1280.png',
alt: 'Node JS',
},
{
src: 'https://cdn.pixabay.com/photo/2015/10/31/12/54/google-1015751_1280.png',
alt: 'Google',
},
{
src: 'https://cdn.pixabay.com/photo/2021/12/06/13/45/meta-6850393_1280.png',
alt: 'Meta',
},
{
src: 'https://cdn.pixabay.com/photo/2013/01/29/22/53/yahoo-76684_1280.png',
alt: 'Yahoo',
},
]}
/>
<!-- Features2 Widget ************** --> <!-- Features2 Widget ************** -->
<Features2 <Features2

2
src/types.d.ts vendored
View File

@ -229,7 +229,7 @@ export interface Testimonials extends Headline, Widget {
callToAction?: CallToAction; callToAction?: CallToAction;
} }
export interface Clients extends Headline, Widget { export interface Brands extends Headline, Widget {
icons?: Array<string>; icons?: Array<string>;
images?: Array<Image>; images?: Array<Image>;
} }