Include a Brands widget
This commit is contained in:
36
src/components/widgets/Brands.astro
Normal file
36
src/components/widgets/Brands.astro
Normal 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>
|
@ -9,6 +9,7 @@ import Features from '~/components/widgets/Features.astro';
|
||||
import Stats from '~/components/widgets/Stats.astro';
|
||||
import Features3 from '~/components/widgets/Features3.astro';
|
||||
import FAQs from '~/components/widgets/FAQs.astro';
|
||||
import Brands from '~/components/widgets/Brands.astro';
|
||||
|
||||
const metadata = {
|
||||
title: 'Startup Landing Page',
|
||||
@ -64,7 +65,8 @@ const metadata = {
|
||||
<!-- Stats Widget ****************** -->
|
||||
|
||||
<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={[
|
||||
{ title: 'Downloads', amount: '182K' },
|
||||
{ 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
|
||||
|
2
src/types.d.ts
vendored
2
src/types.d.ts
vendored
@ -229,7 +229,7 @@ export interface Testimonials extends Headline, Widget {
|
||||
callToAction?: CallToAction;
|
||||
}
|
||||
|
||||
export interface Clients extends Headline, Widget {
|
||||
export interface Brands extends Headline, Widget {
|
||||
icons?: Array<string>;
|
||||
images?: Array<Image>;
|
||||
}
|
||||
|
Reference in New Issue
Block a user