Replace component CTA with Button with new props

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

View File

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

View File

@@ -25,7 +25,7 @@ const metadata = {
{ text: 'Resume', href: '#resume' },
{ text: 'Porfolio', href: '#porfolio' },
{ text: 'Blog', href: '#blog' },
{ text: 'Github', href: '#' },
{ text: 'Github', href: 'https://github.com/onwidget' },
]}
actions={[
{
@@ -44,7 +44,7 @@ const metadata = {
id="hero"
title="Sarah Johnson"
tagline="Personal Web Demo"
callToAction={{ targetBlank: true, text: 'Hire me', href: '/' }}
actions={[{ variant: "primary", target: '_blank', text: 'Hire me', href: '/' }]}
>
<Fragment slot="subtitle">
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',
callToAction: {
targetBlank: true,
target: '_blank',
text: 'Dribbble',
href: '#',
},
@@ -70,7 +70,7 @@ const metadata = {
{
icon: 'tabler:brand-behance',
callToAction: {
targetBlank: true,
target: '_blank',
text: 'Behance',
href: '#',
},
@@ -78,7 +78,7 @@ const metadata = {
{
icon: 'tabler:brand-pinterest',
callToAction: {
targetBlank: true,
target: '_blank',
text: 'Pinterest',
href: '#',
},
@@ -220,7 +220,7 @@ const metadata = {
alt: 'Tech Design Image',
}}
callToAction={{
targetBlank: true,
target: '_blank',
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
@@ -258,7 +258,7 @@ const metadata = {
alt: 'Art and Music Poster Image',
}}
callToAction={{
targetBlank: true,
target: '_blank',
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
@@ -295,7 +295,7 @@ const metadata = {
alt: 'Fashion e-commerce Image',
}}
callToAction={{
targetBlank: true,
target: '_blank',
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',

View File

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

View File

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

View File

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

View File

@@ -16,8 +16,7 @@ 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."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ 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',

View File

@@ -16,8 +16,7 @@ const metadata = {
tagline="Lead Generation Landing Demo"
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.)"
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ 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-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',

View File

@@ -16,8 +16,10 @@ const metadata = {
tagline="Pre-launch Demo"
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."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ 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-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',

View File

@@ -16,8 +16,10 @@ const metadata = {
tagline="Product Details Demo"
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."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ 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-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',

View File

@@ -16,8 +16,7 @@ const metadata = {
tagline="Long-form Sales Demo"
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."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ 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-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',

View File

@@ -16,8 +16,7 @@ const metadata = {
tagline="Subscription Landing Demo"
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."
callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ 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-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',

View File

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

View File

@@ -18,7 +18,7 @@ const metadata = {
tagline="Services"
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."
callToAction={{ targetBlank: true, text: 'Start exploring', href: '/' }}
actions={[{ variant:"primary", target: '_blank', text: 'Start exploring', href: '/' }]}
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',
alt: 'AstroWind Hero Image',
@@ -201,7 +201,7 @@ const metadata = {
},
]}
callToAction={{
targetBlank: true,
target: '_blank',
text: 'More testimonials...',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:chevron-right',