Migrate from @astrojs/image to Astro Assets and Unpic
This commit is contained in:
@ -40,7 +40,7 @@ const metadata = {
|
||||
<Hero2
|
||||
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }}
|
||||
image={{ src: 'https://images.unsplash.com/photo-1535303311164-664fc9ec6532?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80', alt: 'AstroWind Hero Image' }}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Free template for <span class="hidden lg:inline">create your website <br />with</span>
|
||||
@ -91,7 +91,7 @@ const metadata = {
|
||||
},
|
||||
]}
|
||||
image={{
|
||||
src: import('~/assets/images/colors.jpg'),
|
||||
src: 'https://images.unsplash.com/photo-1521517407911-565264e7d82d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
|
||||
alt: 'Colorful Image',
|
||||
}}
|
||||
/>
|
||||
@ -99,6 +99,7 @@ const metadata = {
|
||||
<!-- Content Widget **************** -->
|
||||
|
||||
<Content
|
||||
isReversed
|
||||
items={[
|
||||
{
|
||||
title: 'High-Quality Designs',
|
||||
@ -128,7 +129,7 @@ const metadata = {
|
||||
},
|
||||
]}
|
||||
image={{
|
||||
src: import('~/assets/images/caos.jpg'),
|
||||
src: 'https://images.unsplash.com/photo-1576153192621-7a3be10b356e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80',
|
||||
alt: 'Colorful Image',
|
||||
}}
|
||||
>
|
||||
@ -140,7 +141,6 @@ const metadata = {
|
||||
<!-- Content Widget **************** -->
|
||||
|
||||
<Content
|
||||
isReversed
|
||||
isAfterContent
|
||||
items={[
|
||||
{
|
||||
@ -171,7 +171,7 @@ const metadata = {
|
||||
},
|
||||
]}
|
||||
image={{
|
||||
src: import('~/assets/images/vintage.jpg'),
|
||||
src: 'https://images.unsplash.com/photo-1453738773917-9c3eff1db985?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
|
||||
alt: 'Vintage Image',
|
||||
}}
|
||||
>
|
||||
@ -202,7 +202,7 @@ const metadata = {
|
||||
name: 'Cary Kennedy',
|
||||
job: 'Film director',
|
||||
image: {
|
||||
src: import('~/assets/images/colors.jpg'),
|
||||
src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
|
||||
alt: 'Cary Kennedy Image',
|
||||
},
|
||||
},
|
||||
@ -212,7 +212,7 @@ const metadata = {
|
||||
name: 'Josh Wilkinson',
|
||||
job: 'Product Manager',
|
||||
image: {
|
||||
src: import('~/assets/images/vintage.jpg'),
|
||||
src: 'https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
|
||||
alt: 'Josh Wilkinson Image',
|
||||
},
|
||||
},
|
||||
@ -222,7 +222,7 @@ const metadata = {
|
||||
name: 'Sidney Hansen',
|
||||
job: 'Decorator',
|
||||
image: {
|
||||
src: import('~/assets/images/caos.jpg'),
|
||||
src: 'https://images.unsplash.com/photo-1512361436605-a484bdb34b5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
|
||||
alt: 'Sidney Hansen Image',
|
||||
},
|
||||
},
|
||||
|
@ -3,6 +3,7 @@ import Layout from '~/layouts/PageLayout.astro';
|
||||
|
||||
import Header from '~/components/widgets/Header.astro';
|
||||
import Hero2 from '~/components/widgets/Hero2.astro';
|
||||
import Features from '~/components/widgets/Features.astro';
|
||||
import Steps2 from '~/components/widgets/Steps2.astro';
|
||||
import Content from '~/components/widgets/Content.astro';
|
||||
import CallToAction from '~/components/widgets/CallToAction.astro';
|
||||
@ -39,7 +40,7 @@ const metadata = {
|
||||
<Hero2
|
||||
callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }}
|
||||
image={{ src: 'https://images.unsplash.com/photo-1580481072645-022f9a6dbf27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', alt: 'AstroWind Hero Image' }}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Free template for <br />
|
||||
@ -56,6 +57,51 @@ const metadata = {
|
||||
</Fragment>
|
||||
</Hero2>
|
||||
|
||||
<!-- Features Widget *************** -->
|
||||
|
||||
<Features
|
||||
id="features"
|
||||
tagline="Features"
|
||||
title="Main features of our templates"
|
||||
subtitle="Possess several key characteristics to effectively cater to the needs of startups and entrepreneurs."
|
||||
columns={3}
|
||||
items={[
|
||||
{
|
||||
title: 'Modern and Professional Design',
|
||||
description:
|
||||
'Have a contemporary design that reflects current design trends and gives a professional impression.',
|
||||
icon: 'tabler:artboard',
|
||||
},
|
||||
{
|
||||
title: 'Responsive and Mobile-Friendly',
|
||||
description: 'Adapt seamlessly to different screen sizes and devices to ensure a consistent experience.',
|
||||
icon: 'tabler:picture-in-picture',
|
||||
},
|
||||
{
|
||||
title: 'Customizability',
|
||||
description:
|
||||
'Easily customizable, allowing users to adapt the design, colors, typography, and content to match their brand identity.',
|
||||
icon: 'tabler:adjustments-horizontal',
|
||||
},
|
||||
{
|
||||
title: 'Fast Loading Times',
|
||||
description: 'Optimized for speed to ensure a smooth user experience and favorable search engine rankings.',
|
||||
icon: 'tabler:rocket',
|
||||
},
|
||||
{
|
||||
title: 'Search Engine Optimization (SEO)',
|
||||
description:
|
||||
'Incorporate SEO best practices in template structure and code to improve visibility in search engine results.',
|
||||
icon: 'tabler:arrows-right-left',
|
||||
},
|
||||
{
|
||||
title: 'Compatibility',
|
||||
description: 'The templates work seamlessly across various content management systems and website builders.',
|
||||
icon: 'tabler:plug-connected',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- Content Widget **************** -->
|
||||
|
||||
<Content
|
||||
@ -78,7 +124,7 @@ const metadata = {
|
||||
},
|
||||
]}
|
||||
image={{
|
||||
src: import('~/assets/images/caos.jpg'),
|
||||
src: 'https://images.unsplash.com/photo-1620558138198-cfb9b4f3c294?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1671&q=80',
|
||||
alt: 'Colorful Image',
|
||||
}}
|
||||
>
|
||||
@ -115,7 +161,7 @@ const metadata = {
|
||||
},
|
||||
]}
|
||||
image={{
|
||||
src: import('~/assets/images/caos.jpg'),
|
||||
src: 'https://images.unsplash.com/photo-1531973486364-5fa64260d75b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1658&q=80',
|
||||
alt: 'Colorful Image',
|
||||
}}
|
||||
>
|
||||
@ -153,7 +199,7 @@ const metadata = {
|
||||
},
|
||||
]}
|
||||
image={{
|
||||
src: import('~/assets/images/caos.jpg'),
|
||||
src: 'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
|
||||
alt: 'Colorful Image',
|
||||
}}
|
||||
>
|
||||
|
@ -43,14 +43,18 @@ const metadata = {
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="image">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/dsTXcSeAZq8"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
style="width:100%"></iframe>
|
||||
<div class="relative h-0 pb-[56.25%]">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/dsTXcSeAZq8"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
|
||||
allowfullscreen
|
||||
class="absolute top-0 left-0 w-full h-full"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</Fragment>
|
||||
</Hero>
|
||||
|
||||
|
Reference in New Issue
Block a user