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

Replace component CTA with Button with new props

Browse Source
This commit is contained in:
prototypa
2023-09-02 18:02:45 -04:00
parent c1fb20e916
commit 770dee10bd
32 changed files with 234 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/assets/styles/tailwind.css
View File

@ -2,10 +2,6 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.dd *:first-child {
margin-top: 0;
}
@layer utilities { @layer utilities {
.bg-page { .bg-page {
background-color: var(--aw-color-bg-page); background-color: var(--aw-color-bg-page);
@ -13,31 +9,32 @@
.bg-dark { .bg-dark {
background-color: var(--aw-color-bg-page-dark); background-color: var(--aw-color-bg-page-dark);
} }
}
@layer components {
.text-page {
color: var(--aw-color-text-page);
}
.text-muted {
color: var(--aw-color-text-muted);
}
.bg-light { .bg-light {
background-color: var(--aw-color-bg-page); background-color: var(--aw-color-bg-page);
} }
.text-page {
.btn { color: var(--aw-color-text-page);
@apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
} }
.text-muted {
color: var(--aw-color-text-muted);
}
}
.btn-ghost { @layer components {
@apply border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white; .btn {
@apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800 cursor-pointer;
} }
.btn-primary { .btn-primary {
@apply font-semibold bg-primary text-white border-primary hover:bg-secondary hover:border-secondary hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-secondary dark:hover:bg-secondary; @apply btn font-semibold bg-primary text-white border-primary hover:bg-secondary hover:border-secondary hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-secondary dark:hover:bg-secondary;
}
.btn-secondary {
@apply btn;
}
.btn-tertiary {
@apply btn border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
} }
} }
@ -85,3 +82,9 @@
[data-aw-toggle-menu].expanded g > path:last-child { [data-aw-toggle-menu].expanded g > path:last-child {
@apply rotate-45 translate-y-[-8px] translate-x-[14px]; @apply rotate-45 translate-y-[-8px] translate-x-[14px];
} }
/* To deprecated */
.dd *:first-child {
margin-top: 0;
}

26
src/components/blog/Pagination.astro
View File

@ -1,6 +1,7 @@
--- ---
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { getPermalink } from '~/utils/permalinks'; import { getPermalink } from '~/utils/permalinks';
import Button from '~/components/ui/Button.astro';
export interface Props { export interface Props {
prevUrl: string; prevUrl: string;
@ -16,18 +17,19 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
(prevUrl || nextUrl) && ( (prevUrl || nextUrl) && (
<div class="container flex"> <div class="container flex">
<div class="flex flex-row mx-auto container justify-between"> <div class="flex flex-row mx-auto container justify-between">
<a href={getPermalink(prevUrl)} class={`btn btn-ghost md:px-3 px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}> <Button
<div class="flex flex-row align-middle"> variant="tertiary"
<Icon name="tabler:chevron-left" class="w-6 h-6" /> class={`md:px-3 px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}
<p class="ml-2">{prevText}</p> href={getPermalink(prevUrl)}
</div> >
</a> <Icon name="tabler:chevron-left" class="w-6 h-6" />
<a href={getPermalink(nextUrl)} class={`btn btn-ghost md:px-3 px-3 ${!nextUrl ? 'invisible' : ''}`}> <p class="ml-2">{prevText}</p>
<div class="flex flex-row align-middle"> </Button>
<span class="mr-2">{nextText}</span>
<Icon name="tabler:chevron-right" class="w-6 h-6" /> <Button variant="tertiary" class={`md:px-3 px-3 ${!nextUrl ? 'invisible' : ''}`} href={getPermalink(nextUrl)}>
</div> <span class="mr-2">{nextText}</span>
</a> <Icon name="tabler:chevron-right" class="w-6 h-6" />
</Button>
</div> </div>
</div> </div>
) )

17
src/components/blog/ToBlogLink.astro
View File

@ -2,16 +2,19 @@
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { getBlogPermalink } from '~/utils/permalinks'; import { getBlogPermalink } from '~/utils/permalinks';
import { I18N } from '~/utils/config'; import { I18N } from '~/utils/config';
import Button from '~/components/ui/Button.astro';
const { textDirection } = I18N; const { textDirection } = I18N;
--- ---
<div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 md:pt-4 pb-12 md:pb-20"> <div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 md:pt-4 pb-12 md:pb-20">
<a class="btn btn-ghost px-3 md:px-3" href={getBlogPermalink()} <Button variant="tertiary" class="px-3 md:px-3" href={getBlogPermalink()}>
> {
{textDirection === "rtl" ? textDirection === 'rtl' ? (
<Icon name="tabler:chevron-right" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" /> <Icon name="tabler:chevron-right" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
: ) : (
<Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />} Back to Blog</a <Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
> )
} Back to Blog
</Button>
</div> </div>

26
src/components/ui/Button.astro Normal file
View File

@ -0,0 +1,26 @@
---
import { Icon } from 'astro-icon/components';
import { twMerge } from 'tailwind-merge';
import type { CallToAction } from '~/types';
const {
variant = 'secondary',
target,
text = Astro.slots.render("default"),
icon = '',
class: className = '',
...rest
} = Astro.props as CallToAction;
const variants = {
primary: 'btn-primary' ,
secondary: 'btn-secondary',
tertiary: 'btn btn-tertiary',
link: 'hover:text-primary',
};
---
<a class={twMerge(variants[variant] || '', className)} {...target ? { target: target, rel: 'noopener noreferrer' } : {}} {...rest}>
<Fragment set:html={text} />
{icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
</a>

38
src/components/ui/CTA.astro
View File

@ -1,38 +0,0 @@
---
import { Icon } from "astro-icon/components";
import type { CallToAction } from "~/types";
const { callToAction } = Astro.props;
const {
targetBlank,
text = "",
icon = "",
href = "",
} = callToAction as CallToAction;
---
<div class="flex w-auto">
{
targetBlank ? (
<a
class="inline-flex items-center justify-center"
href={href}
target="_blank"
rel="noopener noreferrer"
>
{text}
{icon && (
<Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
)}
</a>
) : (
<a class="inline-flex items-center justify-center" href={href}>
{text}
{icon && (
<Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
)}
</a>
)
}
</div>

5
src/components/ui/Form.astro
View File

@ -1,5 +1,6 @@
--- ---
import type { Form } from '~/types'; import type { Form } from '~/types';
import Button from '~/components/ui/Button.astro';
const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props as Form; const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props as Form;
--- ---
@ -69,9 +70,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
{ {
button && ( button && (
<div class="mt-10 grid"> <div class="mt-10 grid">
<button type="submit" class="btn btn-primary cursor-pointer"> <Button variant="primary" type="submit">{button}</Button>
{button}
</button>
</div> </div>
) )
} }

6
src/components/ui/ItemGrid.astro
View File

@ -1,7 +1,7 @@
--- ---
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
import type { ItemGrid } from '~/types'; import type { ItemGrid } from '~/types';
import CTA from './CTA.astro'; import Button from './Button.astro';
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid; const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid;
@ -54,12 +54,12 @@ const {
{callToAction && ( {callToAction && (
<div <div
class={twMerge( class={twMerge(
`${title || description ? 'mt-3' : ''} text-primary cursor-pointer`, `${title || description ? 'mt-3' : ''}`,
actionClass, actionClass,
itemClasses?.actionClass itemClasses?.actionClass
)} )}
> >
<CTA callToAction={callToAction} /> <Button variant="link" {...callToAction} />
</div> </div>
)} )}
</div> </div>

6
src/components/ui/ItemGrid2.astro
View File

@ -2,7 +2,7 @@
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import type { ItemGrid } from "~/types"; import type { ItemGrid } from "~/types";
import CTA from "./CTA.astro"; import Button from "./Button.astro";
const { const {
items = [], items = [],
@ -82,8 +82,8 @@ const {
/> />
)} )}
{callToAction && ( {callToAction && (
<div class="mt-2 text-primary cursor-pointer"> <div class="mt-2">
<CTA callToAction={callToAction} /> <Button {...callToAction} />
</div> </div>
)} )}
</div> </div>

8
src/components/widgets/BlogLatestPosts.astro
View File

@ -7,6 +7,7 @@ import { getBlogPermalink } from "~/utils/permalinks";
import { findLatestPosts } from "~/utils/blog"; import { findLatestPosts } from "~/utils/blog";
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro"; import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
import type { Widget } from "~/types"; import type { Widget } from "~/types";
import Button from "../ui/Button.astro";
export interface Props extends Widget { export interface Props extends Widget {
title?: string; title?: string;
@ -43,12 +44,7 @@ const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
set:html={title} set:html={title}
/> />
{APP_BLOG.list.isEnabled && linkText && linkUrl && ( {APP_BLOG.list.isEnabled && linkText && linkUrl && (
<a <Button variant="link" href={linkUrl}> {linkText} »</Button>
class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 lg:mb-0"
href={linkUrl}
>
{linkText} »
</a>
)} )}
</div> </div>
)} )}

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

@ -1,8 +1,8 @@
--- ---
import { Icon } from 'astro-icon/components';
import WidgetWrapper from '../ui/WidgetWrapper.astro'; import WidgetWrapper from '../ui/WidgetWrapper.astro';
import type { CallToAction, Widget } from '~/types'; import type { CallToAction, Widget } from '~/types';
import Headline from '../ui/Headline.astro'; import Headline from '~/components/ui/Headline.astro';
import Button from "~/components/ui/Button.astro"
interface Props extends Widget { interface Props extends Widget {
title?: string; title?: string;
@ -43,13 +43,9 @@ const {
<Fragment set:html={callToAction} /> <Fragment set:html={callToAction} />
) : ( ) : (
callToAction && callToAction &&
callToAction.text && callToAction.text && (
callToAction.href && (
<div class="mt-6 max-w-xs mx-auto"> <div class="mt-6 max-w-xs mx-auto">
<a class="btn btn-primary w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener"> <Button variant="primary" {...callToAction} class="w-full sm:w-auto" />
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />}
{callToAction.text}
</a>
</div> </div>
) )
) )

6
src/components/widgets/Content.astro
View File

@ -3,7 +3,7 @@ import type { Content } from '~/types';
import Headline from '../ui/Headline.astro'; import Headline from '../ui/Headline.astro';
import WidgetWrapper from '../ui/WidgetWrapper.astro'; import WidgetWrapper from '../ui/WidgetWrapper.astro';
import Image from '~/components/common/Image.astro'; import Image from '~/components/common/Image.astro';
import CTA from '../ui/CTA.astro'; import Button from '~/components/ui/Button.astro';
import ItemGrid from '../ui/ItemGrid.astro'; import ItemGrid from '../ui/ItemGrid.astro';
const { const {
@ -48,8 +48,8 @@ const {
{ {
callToAction && ( callToAction && (
<div class="mt-[-40px] mb-8 text-primary cursor-pointer"> <div class="mt-[-40px] mb-8 text-primary">
<CTA callToAction={callToAction} /> <Button variant="link" {...callToAction} />
</div> </div>
) )
} }

13
src/components/widgets/Header.astro
View File

@ -3,9 +3,11 @@ import { Icon } from "astro-icon/components";
import Logo from "~/components/Logo.astro"; import Logo from "~/components/Logo.astro";
import ToggleTheme from "~/components/common/ToggleTheme.astro"; import ToggleTheme from "~/components/common/ToggleTheme.astro";
import ToggleMenu from "~/components/common/ToggleMenu.astro"; import ToggleMenu from "~/components/common/ToggleMenu.astro";
import Button from "~/components/ui/Button.astro"
import { getHomePermalink } from "~/utils/permalinks"; import { getHomePermalink } from "~/utils/permalinks";
import { trimSlash, getAsset } from "~/utils/permalinks"; import { trimSlash, getAsset } from "~/utils/permalinks";
import type { CallToAction } from "~/types";
interface Link { interface Link {
text?: string; text?: string;
@ -14,10 +16,7 @@ interface Link {
icon?: string; icon?: string;
} }
interface ActionLink extends Link { interface ActionLink extends CallToAction {}
class?: string;
type?: string;
}
interface MenuLink extends Link { interface MenuLink extends Link {
links?: Array<MenuLink>; links?: Array<MenuLink>;
@ -146,10 +145,8 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
{ {
actions?.length ? ( actions?.length ? (
<span class="ml-4 rtl:ml-0 rtl:mr-4"> <span class="ml-4 rtl:ml-0 rtl:mr-4">
{actions.map(({ text, href, class: className }) => ( {actions.map((btnProps) => (
<a class:list={["btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm", className]} href={href}> <Button {...btnProps} class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto"/>
<Fragment set:html={text} />
</a>
))} ))}
</span> </span>
) : ( ) : (

60
src/components/widgets/Hero.astro
View File

@ -1,19 +1,30 @@
--- ---
import Image from '~/components/common/Image.astro'; import Image from '~/components/common/Image.astro';
import CTA from '../ui/CTA.astro'; import Button from '~/components/ui/Button.astro';
import type { CallToAction } from '~/types';
export interface Props {
id?: string;
title?: string;
subtitle?: string;
tagline?: string;
content?: string;
actions?: string | CallToAction[];
image?: string | any; // TODO: find HTMLElementProps
}
const { const {
id,
title = await Astro.slots.render('title'), title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'), subtitle = await Astro.slots.render('subtitle'),
tagline, tagline,
content = await Astro.slots.render('content'), content = await Astro.slots.render('content'),
callToAction = await Astro.slots.render('callToAction'), actions = await Astro.slots.render('actions'),
callToAction2 = await Astro.slots.render('callToAction2'),
image = await Astro.slots.render('image'), image = await Astro.slots.render('image'),
} = Astro.props; } = Astro.props;
--- ---
<section class="relative md:-mt-[76px] not-prose"> <section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
<div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div> <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6"> <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
<div class="pt-0 md:pt-[76px] pointer-events-none"></div> <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
@ -37,34 +48,21 @@ const {
} }
<div class="max-w-3xl mx-auto"> <div class="max-w-3xl mx-auto">
{subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />} {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" 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"> {
{ actions && (
callToAction && ( <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
<div class="flex w-full sm:w-auto"> {Array.isArray(actions) ? (
{typeof callToAction === 'string' ? ( actions.map((action) => (
<Fragment set:html={callToAction} /> <div class="flex w-full sm:w-auto">
) : ( <Button {...(action || {})} class="w-full sm:mb-0" />
<div class="btn btn-primary sm:mb-0 w-full">
<CTA callToAction={callToAction} />
</div> </div>
)} ))
</div> ) : (
) <Fragment set:html={actions} />
} )}
{ </div>
callToAction2 && ( )
<div class="flex w-full sm:w-auto"> }
{typeof callToAction2 === 'string' ? (
<Fragment set:html={callToAction2} />
) : (
<div class="btn w-full">
<CTA callToAction={callToAction2} />
</div>
)}
</div>
)
}
</div>
</div> </div>
{content && <Fragment set:html={content} />} {content && <Fragment set:html={content} />}
</div> </div>

52
src/components/widgets/Hero2.astro
View File

@ -1,15 +1,14 @@
--- ---
import Image from '~/components/common/Image.astro'; import Image from '~/components/common/Image.astro';
import type { CallToAction } from '~/types'; import type { CallToAction } from '~/types';
import CTA from '../ui/CTA.astro'; import Button from '~/components/ui/Button.astro';
export interface Props { export interface Props {
title?: string; title?: string;
subtitle?: string; subtitle?: string;
tagline?: string; tagline?: string;
content?: string; content?: string;
callToAction?: string | CallToAction; actions?: string | CallToAction[];
callToAction2?: string | CallToAction;
image?: string | any; // TODO: find HTMLElementProps image?: string | any; // TODO: find HTMLElementProps
} }
@ -18,8 +17,7 @@ const {
subtitle = await Astro.slots.render('subtitle'), subtitle = await Astro.slots.render('subtitle'),
tagline, tagline,
content = await Astro.slots.render('content'), content = await Astro.slots.render('content'),
callToAction = await Astro.slots.render('callToAction'), actions = await Astro.slots.render('actions'),
callToAction2 = await Astro.slots.render('callToAction2'),
image = await Astro.slots.render('image'), image = await Astro.slots.render('image'),
} = Astro.props; } = Astro.props;
--- ---
@ -48,36 +46,22 @@ const {
} }
<div class="max-w-3xl mx-auto lg:max-w-none"> <div class="max-w-3xl mx-auto lg:max-w-none">
{subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />} {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" 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 lg:justify-start lg:m-0 lg:max-w-7xl" {
> 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 lg:justify-start lg:m-0 lg:max-w-7xl">
callToAction && ( {Array.isArray(actions) ? (
<div class="flex w-full sm:w-auto"> actions.map((action) => (
{typeof callToAction === 'string' ? ( <div class="flex w-full sm:w-auto">
<Fragment set:html={callToAction} /> <Button {...(action || {})} class="w-full sm:mb-0" />
) : (
<div class="btn btn-primary sm:mb-0 w-full">
<CTA callToAction={callToAction} />
</div> </div>
)} ))
</div> ) : (
) <Fragment set:html={actions} />
} )}
{ </div>
callToAction2 && ( )
<div class="flex w-full sm:w-auto"> }
{typeof callToAction2 === 'string' ? (
<Fragment set:html={callToAction2} />
) : (
<div class="btn w-full">
<CTA callToAction={callToAction2} />
</div>
)}
</div>
)
}
</div>
</div> </div>
{content && <Fragment set:html={content} />} {content && <Fragment set:html={content} />}
</div> </div>

21
src/components/widgets/HeroText.astro
View File

@ -1,5 +1,5 @@
--- ---
import { Icon } from 'astro-icon/components'; import Button from '~/components/ui/Button.astro';
const { const {
title = await Astro.slots.render('title'), title = await Astro.slots.render('title'),
@ -40,14 +40,7 @@ const {
{typeof callToAction === 'string' ? ( {typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} /> <Fragment set:html={callToAction} />
) : ( ) : (
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener"> <Button variant="primary" {...callToAction} />
{callToAction?.icon && (
<>
<Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
</>
)}
{callToAction?.text}
</a>
)} )}
</div> </div>
) )
@ -58,15 +51,7 @@ const {
{typeof callToAction2 === 'string' ? ( {typeof callToAction2 === 'string' ? (
<Fragment set:html={callToAction2} /> <Fragment set:html={callToAction2} />
) : ( ) : (
<a class="btn w-full" href={callToAction2?.href}> <Button {...callToAction2} />
{callToAction2?.icon && (
<>
<Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />
&nbsp;
</>
)}
{callToAction2.text}
</a>
)} )}
</div> </div>
) )

6
src/components/widgets/Pricing.astro
View File

@ -1,6 +1,6 @@
--- ---
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import CTA from '~/components/ui/CTA.astro'; import Button from '~/components/ui/Button.astro';
import Headline from '~/components/ui/Headline.astro'; import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro'; import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import type { Pricing } from '~/types'; import type { Pricing } from '~/types';
@ -64,11 +64,11 @@ const {
)} )}
</div> </div>
{callToAction && ( {callToAction && (
<div class={`flex justify-center btn ${hasRibbon ? 'btn-primary' : ''}`}> <div class={`flex justify-center`}>
{typeof callToAction === 'string' ? ( {typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} /> <Fragment set:html={callToAction} />
) : ( ) : (
callToAction && callToAction.text && callToAction.href && <CTA callToAction={callToAction} /> callToAction && callToAction.text && callToAction.href && <Button {...hasRibbon ? { variant:'primary' } : {}} {...callToAction}/>
)} )}
</div> </div>
)} )}

10
src/components/widgets/Steps2.astro
View File

@ -1,8 +1,9 @@
--- ---
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import Headline from '../ui/Headline.astro'; import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import Headline from '~/components/ui/Headline.astro';
import Button from '~/components/ui/Button.astro';
import type { Steps } from '~/types'; import type { Steps } from '~/types';
import WidgetWrapper from '../ui/WidgetWrapper.astro';
const { const {
title = await Astro.slots.render('title'), title = await Astro.slots.render('title'),
@ -42,10 +43,7 @@ const {
callToAction && callToAction &&
callToAction.text && callToAction.text &&
callToAction.href && ( callToAction.href && (
<a class="btn btn-primary mb-12" href={callToAction.href} target="_blank" rel="noopener"> <Button variant="primary" {...callToAction} class="mb-12 w-auto"/>
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />}
{callToAction.text}
</a>
) )
) )
} }

6
src/components/widgets/Testimonials.astro
View File

@ -1,7 +1,7 @@
--- ---
import Headline from '~/components/ui/Headline.astro'; import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro'; import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import CTA from '~/components/ui/CTA.astro'; import Button from '~/components/ui/Button.astro';
import Image from '~/components/common/Image.astro'; import Image from '~/components/common/Image.astro';
import type { Testimonials } from '~/types'; import type { Testimonials } from '~/types';
@ -68,8 +68,8 @@ const {
</div> </div>
{ {
callToAction && ( callToAction && (
<div class="btn flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium"> <div class="flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
<CTA callToAction={callToAction} /> <Button {...callToAction} />
</div> </div>
) )
} }

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

@ -19,13 +19,16 @@ const metadata = {
<Hero2 <Hero2
tagline="Mobile App Web Demo" tagline="Mobile App Web Demo"
callToAction={{ actions={[
targetBlank: true, {
text: 'Download App', variant:"primary",
href: 'https://github.com/onwidget/astrowind', target: '_blank',
icon: 'tabler:download', text: 'Download App',
}} href: 'https://github.com/onwidget/astrowind',
callToAction2={{ text: 'Learn more', href: '#features' }} icon: 'tabler:download',
},
{ text: 'Learn more', href: '#features' },
]}
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', 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', alt: 'AstroWind Hero Image',
@ -203,7 +206,7 @@ const metadata = {
}, },
]} ]}
callToAction={{ callToAction={{
targetBlank: true, target: '_blank',
text: 'Read more testimonials', text: 'Read more testimonials',
href: 'https://github.com/onwidget/astrowind', href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:chevron-right', icon: 'tabler:chevron-right',

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

@ -25,7 +25,7 @@ const metadata = {
{ text: 'Resume', href: '#resume' }, { text: 'Resume', href: '#resume' },
{ text: 'Porfolio', href: '#porfolio' }, { text: 'Porfolio', href: '#porfolio' },
{ text: 'Blog', href: '#blog' }, { text: 'Blog', href: '#blog' },
{ text: 'Github', href: '#' }, { text: 'Github', href: 'https://github.com/onwidget' },
]} ]}
actions={[ actions={[
{ {
@ -44,7 +44,7 @@ const metadata = {
id="hero" id="hero"
title="Sarah Johnson" title="Sarah Johnson"
tagline="Personal Web Demo" tagline="Personal Web Demo"
callToAction={{ targetBlank: true, text: 'Hire me', href: '/' }} actions={[{ variant: "primary", target: '_blank', text: 'Hire me', href: '/' }]}
> >
<Fragment slot="subtitle"> <Fragment slot="subtitle">
I'm a Graphic Designer passionate about crafting visual stories. <br /> With 5 years of experience and a degree I'm a Graphic Designer passionate about crafting visual stories. <br /> With 5 years of experience and a degree
@ -62,7 +62,7 @@ const metadata = {
{ {
icon: 'tabler:brand-dribbble', icon: 'tabler:brand-dribbble',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Dribbble', text: 'Dribbble',
href: '#', href: '#',
}, },
@ -70,7 +70,7 @@ const metadata = {
{ {
icon: 'tabler:brand-behance', icon: 'tabler:brand-behance',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Behance', text: 'Behance',
href: '#', href: '#',
}, },
@ -78,7 +78,7 @@ const metadata = {
{ {
icon: 'tabler:brand-pinterest', icon: 'tabler:brand-pinterest',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Pinterest', text: 'Pinterest',
href: '#', href: '#',
}, },
@ -220,7 +220,7 @@ const metadata = {
alt: 'Tech Design Image', alt: 'Tech Design Image',
}} }}
callToAction={{ callToAction={{
targetBlank: true, target: '_blank',
text: 'Go to the project', text: 'Go to the project',
icon: 'tabler:chevron-right', icon: 'tabler:chevron-right',
href: '#', href: '#',
@ -258,7 +258,7 @@ const metadata = {
alt: 'Art and Music Poster Image', alt: 'Art and Music Poster Image',
}} }}
callToAction={{ callToAction={{
targetBlank: true, target: '_blank',
text: 'Go to the project', text: 'Go to the project',
icon: 'tabler:chevron-right', icon: 'tabler:chevron-right',
href: '#', href: '#',
@ -295,7 +295,7 @@ const metadata = {
alt: 'Fashion e-commerce Image', alt: 'Fashion e-commerce Image',
}} }}
callToAction={{ callToAction={{
targetBlank: true, target: '_blank',
text: 'Go to the project', text: 'Go to the project',
icon: 'tabler:chevron-right', icon: 'tabler:chevron-right',
href: '#', href: '#',

18
src/pages/homes/saas.astro
View File

@ -13,7 +13,7 @@ import FAQs from '~/components/widgets/FAQs.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro'; import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
const metadata = { const metadata = {
title: 'Saas Landing Page', title: 'SaaS Landing Page',
}; };
--- ---
@ -23,12 +23,12 @@ const metadata = {
{...headerData} {...headerData}
actions={[ actions={[
{ {
type: 'ghost', variant: 'secondary',
text: 'Login', text: 'Login',
href: '#', href: '#',
}, },
{ {
type: 'primary', variant: 'primary',
text: 'Sign Up', text: 'Sign Up',
href: '#', href: '#',
}, },
@ -41,8 +41,10 @@ const metadata = {
<Hero2 <Hero2
tagline="SaaS Web Demo" tagline="SaaS Web Demo"
callToAction={{ targetBlank: true, text: 'Get Started', href: 'https://github.com/onwidget/astrowind' }} actions={[
callToAction2={{ text: 'Learn more', href: '#features' }} { variant: "primary", target: '_blank', text: 'Get Started', href: 'https://github.com/onwidget/astrowind' },
{ text: 'Learn more', href: '#features' },
]}
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', 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', alt: 'AstroWind Hero Image',
@ -240,7 +242,7 @@ const metadata = {
price: '0', price: '0',
period: '/ month', period: '/ month',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Get Started for Free', text: 'Get Started for Free',
href: '#', href: '#',
}, },
@ -251,7 +253,7 @@ const metadata = {
price: 15, price: 15,
period: '/ Month', period: '/ Month',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Upgrade to Pro', text: 'Upgrade to Pro',
href: '#', href: '#',
}, },
@ -264,7 +266,7 @@ const metadata = {
price: 45, price: 45,
period: '/ Month', period: '/ Month',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Unlock Enterprise Features', text: 'Unlock Enterprise Features',
href: '#', href: '#',
}, },

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

@ -21,13 +21,16 @@ const metadata = {
<Hero <Hero
tagline="Startup Web Demo" tagline="Startup Web Demo"
callToAction={{ actions={[
targetBlank: true, {
text: 'Get templates', variant: 'primary',
href: 'https://github.com/onwidget/astrowind', target: '_blank',
icon: 'tabler:download', text: 'Get templates',
}} href: 'https://github.com/onwidget/astrowind',
callToAction2={{ text: 'Learn more', href: '#features' }} icon: 'tabler:download',
},
{ text: 'Learn more', href: '#features' },
]}
> >
<Fragment slot="title"> <Fragment slot="title">
Improve <span class="hidden sm:inline">the online presence of</span> your <span Improve <span class="hidden sm:inline">the online presence of</span> your <span
@ -255,36 +258,40 @@ const metadata = {
title: 'Phone', title: 'Phone',
icon: 'tabler:phone', icon: 'tabler:phone',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Call us', text: 'Call us',
href: '/', href: '/',
variant: 'link',
}, },
}, },
{ {
title: 'Email', title: 'Email',
icon: 'tabler:mail', icon: 'tabler:mail',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Write to us', text: 'Write to us',
href: '/', href: '/',
variant: 'link',
}, },
}, },
{ {
title: 'Chat with sales', title: 'Chat with sales',
icon: 'tabler:message-circle', icon: 'tabler:message-circle',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Start chatting', text: 'Start chatting',
href: '/', href: '/',
variant: 'link',
}, },
}, },
{ {
title: 'Chat with support', title: 'Chat with support',
icon: 'tabler:message-circle', icon: 'tabler:message-circle',
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Start chatting', text: 'Start chatting',
href: '/', href: '/',
variant: 'link',
}, },
}, },
]} ]}
@ -294,7 +301,7 @@ const metadata = {
<CallToAction <CallToAction
callToAction={{ callToAction={{
targetBlank: true, target: '_blank',
text: 'Get templates', text: 'Get templates',
href: 'https://github.com/onwidget/astrowind', href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download', icon: 'tabler:download',

17
src/pages/index.astro
View File

@ -22,13 +22,16 @@ const metadata = {
<!-- Hero Widget ******************* --> <!-- Hero Widget ******************* -->
<Hero <Hero
callToAction={{ actions={[
targetBlank: true, {
text: 'Get template', variant: 'primary',
href: 'https://github.com/onwidget/astrowind', target: '_blank',
icon: 'tabler:download', text: 'Get template',
}} href: 'https://github.com/onwidget/astrowind',
callToAction2={{ text: 'Learn more', href: '#features' }} icon: 'tabler:download',
},
{ text: 'Learn more', href: '#features' },
]}
image={{ src: '~/assets/images/hero.png', alt: 'AstroWind Hero Image' }} image={{ src: '~/assets/images/hero.png', alt: 'AstroWind Hero Image' }}
> >
<Fragment slot="title"> <Fragment slot="title">

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

@ -16,8 +16,7 @@ const metadata = {
tagline="Click-through Demo" tagline="Click-through Demo"
title="Click-through Landing Page: The Perfect Bridge to Conversion!" 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." subtitle="Learn how to design a Click-Through Landing Page that seamlessly guides visitors to your main offer."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }} actions={[{ variant:"primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }, { text: 'Learn more', href: '#' }]}
callToAction2={{ text: 'Learn more', href: '#' }}
image={{ 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', 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', alt: 'Click-through Landing Page Hero Image',

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

@ -16,8 +16,7 @@ const metadata = {
tagline="Lead Generation Landing Demo" tagline="Lead Generation Landing Demo"
title="Effective Lead Generation Landing Page: Unlock the Secrets" title="Effective Lead Generation Landing Page: Unlock the Secrets"
subtitle="Discover the secrets to creating a Landing Page that turns curious visitors into eager leads. (Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience.)" subtitle="Discover the secrets to creating a Landing Page that turns curious visitors into eager leads. (Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience.)"
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }} actions={[{ variant:"primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }, { text: 'Learn more', href: '#' }]}
callToAction2={{ text: 'Learn more', href: '#' }}
image={{ image={{
src: 'https://images.unsplash.com/photo-1597423498219-04418210827d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80', src: 'https://images.unsplash.com/photo-1597423498219-04418210827d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80',
alt: 'Magnet attracting screws. Lead generation landing page demo', alt: 'Magnet attracting screws. Lead generation landing page demo',

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

@ -16,8 +16,10 @@ const metadata = {
tagline="Pre-launch Demo" tagline="Pre-launch Demo"
title="Pre-launch Landing Page: Build the Hype Before the Big Reveal!" title="Pre-launch Landing Page: Build the Hype Before the Big Reveal!"
subtitle="Craft a tantalizing Coming Soon or Pre-Launch Landing Page that leaves visitors eagerly awaiting your launch." subtitle="Craft a tantalizing Coming Soon or Pre-Launch Landing Page that leaves visitors eagerly awaiting your launch."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }} actions={[
callToAction2={{ text: 'Learn more', href: '#' }} { variant: 'primary', text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' },
{ text: 'Learn more', href: '#' },
]}
image={{ image={{
src: 'https://images.unsplash.com/photo-1558803116-c1b4ac867b31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80', src: 'https://images.unsplash.com/photo-1558803116-c1b4ac867b31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
alt: 'Store with a Coming Soon sign. Pre-launch Landing Page', alt: 'Store with a Coming Soon sign. Pre-launch Landing Page',

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

@ -16,8 +16,10 @@ const metadata = {
tagline="Product Details Demo" tagline="Product Details Demo"
title="Product Landing Page: Showcase with Precision and Passion!" title="Product Landing Page: Showcase with Precision and Passion!"
subtitle="Step-by-step guide to designing a Landing Page that highlights every facet of your product or service." subtitle="Step-by-step guide to designing a Landing Page that highlights every facet of your product or service."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }} actions={[
callToAction2={{ text: 'Learn more', href: '#' }} { variant: 'primary', text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' },
{ text: 'Learn more', href: '#' },
]}
image={{ image={{
src: 'https://images.unsplash.com/photo-1473188588951-666fce8e7c68?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2174&q=80', src: 'https://images.unsplash.com/photo-1473188588951-666fce8e7c68?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2174&q=80',
alt: 'A spotlight on a product. Product Details Landing Page Demo', alt: 'A spotlight on a product. Product Details Landing Page Demo',

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

@ -16,8 +16,7 @@ const metadata = {
tagline="Long-form Sales Demo" tagline="Long-form Sales Demo"
title="Long-form Sales: Sell with a Story: The Long-form Way!" title="Long-form Sales: Sell with a Story: The Long-form Way!"
subtitle="Dive deep into crafting a Landing Page that narrates, persuades, and converts." subtitle="Dive deep into crafting a Landing Page that narrates, persuades, and converts."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }} actions={[{ variant: "primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }, { text: 'Learn more', href: '#' }]}
callToAction2={{ text: 'Learn more', href: '#' }}
image={{ image={{
src: 'https://images.unsplash.com/photo-1621452773781-0f992fd1f5cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1626&q=80', src: 'https://images.unsplash.com/photo-1621452773781-0f992fd1f5cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1626&q=80',
alt: 'Children telling a story. Long-form Sales Landing Page demo', alt: 'Children telling a story. Long-form Sales Landing Page demo',

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

@ -16,8 +16,7 @@ const metadata = {
tagline="Subscription Landing Demo" tagline="Subscription Landing Demo"
title="Subscription Landing Page: Turn Casual Browsers into Loyal Subscribers!" title="Subscription Landing Page: Turn Casual Browsers into Loyal Subscribers!"
subtitle="Unlock the formula for a Subscription Landing Page that keeps your audience coming back for more." subtitle="Unlock the formula for a Subscription Landing Page that keeps your audience coming back for more."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }} actions={[{ variant: "primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' },{ text: 'Learn more', href: '#' } ]}
callToAction2={{ text: 'Learn more', href: '#' }}
image={{ image={{
src: 'https://images.unsplash.com/photo-1593510987046-1f8fcfc512a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', src: 'https://images.unsplash.com/photo-1593510987046-1f8fcfc512a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Ironic image associated with canceling a subscription. Subscription Landing Page Demo', alt: 'Ironic image associated with canceling a subscription. Subscription Landing Page Demo',

6
src/pages/pricing.astro
View File

@ -47,7 +47,7 @@ const metadata = {
}, },
], ],
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Get started', text: 'Get started',
href: '#', href: '#',
}, },
@ -75,7 +75,7 @@ const metadata = {
}, },
], ],
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Get started', text: 'Get started',
href: '#', href: '#',
}, },
@ -102,7 +102,7 @@ const metadata = {
}, },
], ],
callToAction: { callToAction: {
targetBlank: true, target: '_blank',
text: 'Get started', text: 'Get started',
href: '#', href: '#',
}, },

4
src/pages/services.astro
View File

@ -18,7 +18,7 @@ const metadata = {
tagline="Services" tagline="Services"
title="Elevate your projects with our stunning templates" title="Elevate your projects with our stunning templates"
subtitle="Explore our meticulously crafted templates tailored to various industries and purposes. From captivating presentations to functional website designs, we offer the tools you need to succeed." subtitle="Explore our meticulously crafted templates tailored to various industries and purposes. From captivating presentations to functional website designs, we offer the tools you need to succeed."
callToAction={{ targetBlank: true, text: 'Start exploring', href: '/' }} actions={[{ variant:"primary", target: '_blank', text: 'Start exploring', href: '/' }]}
image={{ image={{
src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80', src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
alt: 'AstroWind Hero Image', alt: 'AstroWind Hero Image',
@ -201,7 +201,7 @@ const metadata = {
}, },
]} ]}
callToAction={{ callToAction={{
targetBlank: true, target: '_blank',
text: 'More testimonials...', text: 'More testimonials...',
href: 'https://github.com/onwidget/astrowind', href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:chevron-right', icon: 'tabler:chevron-right',

6
src/types.d.ts vendored
View File

@ -1,4 +1,5 @@
import type { AstroComponentFactory } from 'astro/runtime/server/index.js'; import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
import type { HTMLAttributes } from 'astro/types';
export interface Post { export interface Post {
/** A unique ID number that identifies a post. */ /** A unique ID number that identifies a post. */
@ -174,11 +175,10 @@ export interface Disclaimer {
} }
// COMPONENTS // COMPONENTS
export interface CallToAction { export interface CallToAction extends HTMLAttributes<a> {
targetBlank?: boolean; variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
text?: string; text?: string;
icon?: string; icon?: string;
href?: string;
classes?: Record<string, string>; classes?: Record<string, string>;
} }