mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace props in CallToAction widget: 'callToAction' to 'actions'

Browse Source
This commit is contained in:
prototypa
2023-09-02 20:39:46 -04:00
parent 47ab6f02a5
commit 4c917f5133
12 changed files with 137 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/widgets/CallToAction.astro
View File

@ -9,13 +9,14 @@ interface Props extends Widget {
subtitle?: string;
tagline?: string;
callToAction?: CallToAction;
actions?: string | CallToAction[];
}
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
tagline = await Astro.slots.render('tagline'),
callToAction = await Astro.slots.render('callToAction'),
actions = await Astro.slots.render('actions'),
id,
isDark = false,
@ -39,15 +40,18 @@ const {
}}
/>
{
typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />
) : (
callToAction &&
callToAction.text && (
<div class="mt-6 max-w-xs mx-auto">
<Button variant="primary" {...callToAction} class="w-full sm:w-auto" />
actions && (
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 mt-6">
{Array.isArray(actions) ? (
actions.map((action) => (
<div class="flex w-full sm:w-auto">
<Button {...(action || {})} class="w-full sm:mb-0" />
</div>
))
) : (
<Fragment set:html={actions} />
)}
</div>
)
)
}
</div>

76
src/pages/homes/mobile-app.astro
View File

@ -1,6 +1,8 @@
---
import Layout from '~/layouts/PageLayout.astro';
import Header from '~/components/widgets/Header.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Features3 from '~/components/widgets/Features3.astro';
@ -9,34 +11,54 @@ import Testimonials from '~/components/widgets/Testimonials.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro';
import Button from '~/components/ui/Button.astro';
import Image from '~/components/common/Image.astro';
import appStoreImg from '~/assets/images/app-store.png';
import googlePlayImg from '~/assets/images/google-play.png';
const appStoreDownloadLink = 'https://github.com/onwidget/astrowind';
const googlePlayDownloadLink = 'https://github.com/onwidget/astrowind';
const metadata = {
title: 'Mobile App Homepage',
};
---
<Layout metadata={metadata}>
<Fragment slot="announcement"></Fragment>
<Fragment slot="header">
<Header
position="left"
links={[
{ text: 'Services', href: '#' },
{ text: 'Features', href: '#' },
{ text: 'About', href: '#' },
]}
actions={[
{
text: 'Download',
href: '#download',
},
]}
isSticky
showToggleTheme
/>
</Fragment>
<!-- Hero2 Widget ******************* -->
<Hero2
tagline="Mobile App Web Demo"
actions={[
{
variant:"primary",
target: '_blank',
text: 'Download App',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
},
{ text: 'Learn more', href: '#features' },
]}
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">
AstroWind <span class="text-accent dark:text-white highlight">App</span>: <br /> building professional websites
made easy
<span class="text-accent dark:text-white highlight">AstroWind App</span>: <br /> professional websites <span
class="hidden xl:inline">made easy</span
>
</Fragment>
<Fragment slot="subtitle">
@ -45,6 +67,16 @@ const metadata = {
</span>
Download now and embark on a journey to elevate your projects like never before.
</Fragment>
<div slot="actions" class="flex max-w-sm gap-4">
<Button variant="link" href={appStoreDownloadLink}>
<Image src={appStoreImg} alt="App Store Image" width={200} />
</Button>
<Button variant="link" href={googlePlayDownloadLink}>
<Image src={googlePlayImg} alt="Google Play Image" width={200} />
</Button>
</div>
</Hero2>
<!-- Features3 Widget ************** -->
@ -248,12 +280,18 @@ const metadata = {
<!-- CallToAction Widget *********** -->
<CallToAction
title="Instant access to beautiful templates"
id="download"
title="Download our app now!"
subtitle="Access a variety of stunning templates, simplify your creative process, and elevate your online presence."
callToAction={{
text: 'Download App',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
/>
>
<div slot="actions" class="flex max-w-sm gap-4">
<Button variant="link" href={appStoreDownloadLink}>
<Image src={appStoreImg} alt="App Store Image" width={200} />
</Button>
<Button variant="link" href={googlePlayDownloadLink}>
<Image src={googlePlayImg} alt="Google Play Image" width={200} />
</Button>
</div>
</CallToAction>
</Layout>

4
src/pages/homes/personal.astro
View File

@ -380,10 +380,10 @@ const metadata = {
<CallToAction
title="Let's create together"
subtitle="Ready to transform your vision into captivating designs?"
callToAction={{
actions={[{
text: 'Hire me',
href: '/',
}}
}]}
/>
<!-- BlogLatestPost Widget **************** -->

4
src/pages/homes/startup.astro
View File

@ -300,12 +300,12 @@ const metadata = {
<!-- CallToAction Widget *********** -->
<CallToAction
callToAction={{
actions={[{
target: '_blank',
text: 'Get templates',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
}]}
>
<Fragment slot="title">Be a part of our vision</Fragment>

4
src/pages/index.astro
View File

@ -377,11 +377,11 @@ const metadata = {
<!-- CallToAction Widget *********** -->
<CallToAction
callToAction={{
actions={[{
text: 'Get template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
}]}
>
<Fragment slot="title">
Astro&nbsp;+&nbsp;<br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>

16
src/pages/landing/click-through.astro
View File

@ -2,7 +2,7 @@
import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from "~/components/widgets/CallToAction.astro"
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = {
title: 'Click-through Landing Page Demo',
@ -16,7 +16,10 @@ const metadata = {
tagline="Click-through Demo"
title="Click-through Landing Page: The Perfect Bridge to Conversion!"
subtitle="Learn how to design a Click-Through Landing Page that seamlessly guides visitors to your main offer."
actions={[{ variant:"primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }, { text: 'Learn more', href: '#' }]}
actions={[
{ variant: 'primary', text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' },
{ text: 'Learn more', href: '#' },
]}
image={{
src: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Click-through Landing Page Hero Image',
@ -26,10 +29,13 @@ const metadata = {
<CallToAction
title="Coming soon"
subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
callToAction={{
text: 'Get template',
actions={[
{
variant: 'primary',
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
},
]}
/>
</Layout>

9
src/pages/landing/lead-generation.astro
View File

@ -26,10 +26,11 @@ const metadata = {
<CallToAction
title="Coming soon"
subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
callToAction={{
text: 'Get template',
actions={[{
variant: "primary",
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
/>
}]}
/>
</Layout>

9
src/pages/landing/pre-launch.astro
View File

@ -29,10 +29,11 @@ const metadata = {
<CallToAction
title="Coming soon"
subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
callToAction={{
text: 'Get template',
actions={[{
variant: "primary",
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
/>
}]}
/>
</Layout>

9
src/pages/landing/product.astro
View File

@ -29,10 +29,11 @@ const metadata = {
<CallToAction
title="Coming soon"
subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
callToAction={{
text: 'Get template',
actions={[{
variant: "primary",
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
/>
}]}
/>
</Layout>

9
src/pages/landing/sales.astro
View File

@ -26,10 +26,11 @@ const metadata = {
<CallToAction
title="Coming soon"
subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
callToAction={{
text: 'Get template',
actions={[{
variant: "primary",
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
/>
}]}
/>
</Layout>

9
src/pages/landing/subscription.astro
View File

@ -26,10 +26,11 @@ const metadata = {
<CallToAction
title="Coming soon"
subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
callToAction={{
text: 'Get template',
actions={[{
variant: "primary",
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
/>
}]}
/>
</Layout>

4
src/pages/services.astro
View File

@ -211,10 +211,10 @@ const metadata = {
<!-- CallToAction Widget *********** -->
<CallToAction
callToAction={{
actions={[{
text: 'Start exploring',
href: '/',
}}
}]}
title="Dive into our template collection"
subtitle="Whether you're in business, design, or education, our templates are here to elevate your projects."
/>