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 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
2
src/types.d.ts
vendored
@ -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>;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user