Migrate widgets to use by props and slots
This commit is contained in:
prototypa
@ -1,29 +1,54 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon';
|
||||
|
||||
interface CallToAction {
|
||||
text: string;
|
||||
href: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
callToAction?: string | CallToAction;
|
||||
}
|
||||
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
callToAction = await Astro.slots.render('callToAction'),
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-12 md:py-20">
|
||||
<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
|
||||
<h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||
<span>Astro</span> + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-slate-400">
|
||||
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
|
||||
waste more time! :P
|
||||
</p>
|
||||
|
||||
<div class="mt-6">
|
||||
<a
|
||||
class="btn btn-primary mb-4 sm:mb-0"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
|
||||
</a>
|
||||
</div>
|
||||
{
|
||||
title && (
|
||||
<h2
|
||||
class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
|
||||
set:html={title}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{subtitle && <p class="text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
|
||||
{
|
||||
typeof callToAction === 'string' ? (
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
callToAction &&
|
||||
callToAction.text &&
|
||||
callToAction.href && (
|
||||
<div class="mt-6">
|
||||
<a class="btn btn-primary mb-4 sm:mb-0" href={callToAction.href} target="_blank" rel="noopener">
|
||||
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
|
||||
{callToAction.text}
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,7 @@ const {
|
||||
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
||||
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
<div class="max-w-xl mb-10 md:mx-auto text-center lg:max-w-2xl md:mb-12">
|
||||
{
|
||||
title && (
|
||||
<h2
|
||||
|
||||
@ -24,23 +24,28 @@ const {
|
||||
|
||||
<section class="scroll-mt-16" id="features">
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
|
||||
<div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
|
||||
{highlight && <p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase" set:html={highlight} />}
|
||||
{
|
||||
title && (
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
|
||||
set:html={title}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
(title || subtitle || highlight) && (
|
||||
<div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
|
||||
{highlight && (
|
||||
<p
|
||||
class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase"
|
||||
set:html={highlight}
|
||||
/>
|
||||
)}
|
||||
{title && (
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
|
||||
set:html={title}
|
||||
/>
|
||||
)}
|
||||
|
||||
{
|
||||
subtitle && (
|
||||
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{subtitle && (
|
||||
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
|
||||
{
|
||||
items.map((subitems) => (
|
||||
|
||||
@ -1,69 +1,64 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon';
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: 'Headers',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:home',
|
||||
},
|
||||
{
|
||||
title: 'Footers',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:faq',
|
||||
},
|
||||
{
|
||||
title: 'Features',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:video-projector',
|
||||
},
|
||||
{
|
||||
title: 'Call-to-Action',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:video-projector',
|
||||
},
|
||||
{
|
||||
title: 'Pricing',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:calculator',
|
||||
},
|
||||
{
|
||||
title: 'Testimonial',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:voice-presentation',
|
||||
},
|
||||
];
|
||||
interface Item {
|
||||
title: string;
|
||||
description: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
highlight?: string;
|
||||
items: Array<Item>;
|
||||
}
|
||||
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
highlight,
|
||||
items = [],
|
||||
responsiveGrid = { xs: 1, sm: 1, md: 2, lg: 4 }
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
|
||||
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
||||
<div class="mb-8 text-center">
|
||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Components</p>
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||
Most used widgets
|
||||
</h2>
|
||||
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
|
||||
Provides frequently used components for building websites using Tailwind CSS
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
|
||||
{
|
||||
(title || subtitle || highlight) && (
|
||||
<div class="mb-8 md:mx-auto text-center max-w-3xl">
|
||||
{highlight && (
|
||||
<p
|
||||
class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase"
|
||||
set:html={highlight}
|
||||
/>
|
||||
)}
|
||||
{title && (
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
|
||||
set:html={title}
|
||||
/>
|
||||
)}
|
||||
|
||||
{subtitle && (
|
||||
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div class={`grid gap-6 grid-cols-${responsiveGrid?.xs || 1} sm:grid-cols-${responsiveGrid?.sm || 1} md:grid-cols-${responsiveGrid?.md || 2} lg:grid-cols-${responsiveGrid?.lg || 4} items-start my-12 dark:text-white`}>
|
||||
{
|
||||
items.map(({ title, description, icon }) => (
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800">
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-lg hover:shadow-md transition dark:border dark:border-slate-800">
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name={icon} class="w-12 h-12" />
|
||||
<Icon name={icon} class="w-10 h-10" />
|
||||
|
||||
<div class="ml-4 text-xl font-bold">{title}</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md" set:html={description} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ interface CallToAction {
|
||||
export interface Props {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
callToAction1?: string | CallToAction;
|
||||
callToAction?: string | CallToAction;
|
||||
callToAction2?: string | CallToAction;
|
||||
image?: string | any; // TODO: find HTMLElementProps
|
||||
}
|
||||
@ -19,7 +19,7 @@ export interface Props {
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
callToAction1 = await Astro.slots.render('callToAction1'),
|
||||
callToAction = await Astro.slots.render('callToAction'),
|
||||
callToAction2 = await Astro.slots.render('callToAction2'),
|
||||
image = await Astro.slots.render('image'),
|
||||
} = Astro.props;
|
||||
@ -41,14 +41,14 @@ const {
|
||||
{subtitle && <p class="text-xl text-gray-600 mb-8 dark:text-slate-400" set:html={subtitle} />}
|
||||
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
|
||||
{
|
||||
callToAction1 && (
|
||||
callToAction && (
|
||||
<div class="flex w-full sm:w-auto">
|
||||
{typeof callToAction1 === 'string' ? (
|
||||
<Fragment set:html={callToAction1} />
|
||||
{typeof callToAction === 'string' ? (
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction1?.href} target="_blank" rel="noopener">
|
||||
{callToAction1?.icon && <><Icon name={callToAction1.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}</>}
|
||||
{callToAction1?.text}
|
||||
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
|
||||
{callToAction?.icon && <><Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}</>}
|
||||
{callToAction?.text}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -1,25 +1,55 @@
|
||||
---
|
||||
interface Item {
|
||||
name: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
highlight?: string;
|
||||
items?: Array<Item>;
|
||||
}
|
||||
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
highlight,
|
||||
items = [],
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
|
||||
{
|
||||
(title || subtitle || highlight) && (
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
{highlight && (
|
||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">
|
||||
{highlight}
|
||||
</p>
|
||||
)}
|
||||
{title && (
|
||||
<h2
|
||||
class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading"
|
||||
set:html={title}
|
||||
/>
|
||||
)}
|
||||
{subtitle && (
|
||||
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">132K</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Downloads
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">24.8K</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Stars</p>
|
||||
</div>
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 font-heading">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500">10.3K</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Forks</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">48.4K</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Users</p>
|
||||
</div>
|
||||
{
|
||||
items.map(({ name, value }) => (
|
||||
<div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-10 md:mb-0">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">{value}</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
{name}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,91 +1,72 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon';
|
||||
import { Picture } from '@astrojs/image/components';
|
||||
|
||||
interface Item {
|
||||
title: string;
|
||||
description?: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
items: Array<Item>;
|
||||
image?: string | any; // TODO: find HTMLElementProps
|
||||
}
|
||||
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
items = [],
|
||||
image = await Astro.slots.render('image'),
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
|
||||
<div class="grid gap-6 row-gap-10 md:grid-cols-2">
|
||||
<div class="md:pb-6 md:pr-16">
|
||||
<h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading">
|
||||
Sed ac magna sit amet risus tristique interdum. hac.
|
||||
</h2>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
|
||||
{title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
|
||||
{
|
||||
items &&
|
||||
items.length &&
|
||||
items.map(({ title, description, icon }, index) => (
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
{index !== items.length - 1 ? (
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
||||
{icon && <Icon name={icon} class="w-6 h-6 text-primary-600 dark:text-slate-200" />}
|
||||
</div>
|
||||
) : (
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600">
|
||||
<Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
|
||||
</div>
|
||||
<div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
|
||||
{title && <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300" set:html={title} />}
|
||||
{description && <p class="text-gray-600 dark:text-slate-400" set:html={description} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
|
||||
<p class="text-gray-600 dark:text-slate-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
|
||||
sit amet dui tellus.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
|
||||
<p class="text-gray-600 dark:text-slate-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla, sed porttitor est nibh at nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
|
||||
<p class="text-gray-600 dark:text-slate-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla, sed porttitor est nibh at nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600"
|
||||
>
|
||||
<Icon name="tabler:check" class="w-6 h-6 text-white dark:text-slate-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-1">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
|
||||
<p class="text-gray-600 dark:text-slate-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class="relative">
|
||||
<Picture
|
||||
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
|
||||
src={import('~/assets/images/astronaut.jpg')}
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 768px) 100vw, 432px"
|
||||
alt="Astronaut"
|
||||
aspectRatio="432:768"
|
||||
/>
|
||||
{
|
||||
image &&
|
||||
(typeof image === 'string' ? (
|
||||
<Fragment set:html={image} />
|
||||
) : (
|
||||
<Picture
|
||||
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 768px) 100vw, 432px"
|
||||
aspectRatio="432:768"
|
||||
{...image}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -32,7 +32,7 @@ import { Icon } from 'astro-icon';
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/2 px-0 sm:px-8">
|
||||
<ul class="space-y-12">
|
||||
<ul class="space-y-10">
|
||||
<li class="flex md:-mx-4">
|
||||
<div class="pr-4 sm:pl-4">
|
||||
<span
|
||||
Reference in New Issue
Block a user