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

Merge branch 'main' of https://github.com/widgeter/astrowind

Browse Source
This commit is contained in:
widgeter
2023-08-16 16:57:01 +02:00
parent f591623d73 b61e82aa31
commit 54fe0de2f5
23 changed files with 334 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/Timeline.astro
View File

@ -49,7 +49,7 @@ const {
)} )}
</div> </div>
<div <div
class={`max-w-md pt-1 ${ class={`pt-1 ${
index !== items.length - 1 ? "pb-8" : "" index !== items.length - 1 ? "pb-8" : ""
}`} }`}
> >

3
src/components/widgets/Features.astro
View File

@ -11,6 +11,8 @@ const {
items = [], items = [],
columns = 2, columns = 2,
defaultIcon,
id, id,
isDark = false, isDark = false,
classes = {}, classes = {},
@ -33,6 +35,7 @@ const {
<ItemGrid <ItemGrid
items={items} items={items}
columns={columns} columns={columns}
defaultIcon={defaultIcon}
classes={{ classes={{
container: "", container: "",
title: "md:text-[1.3rem]", title: "md:text-[1.3rem]",

2
src/components/widgets/Features2.astro
View File

@ -10,6 +10,7 @@ const {
tagline = await Astro.slots.render("tagline"), tagline = await Astro.slots.render("tagline"),
items = [], items = [],
columns = 3, columns = 3,
defaultIcon,
id, id,
isDark = false, isDark = false,
@ -33,6 +34,7 @@ const {
<ItemGrid2 <ItemGrid2
items={items} items={items}
columns={columns} columns={columns}
defaultIcon={defaultIcon}
classes={{ classes={{
container: "gap-4 md:gap-6", container: "gap-4 md:gap-6",
panel: panel:

2
src/components/widgets/Features3.astro
View File

@ -12,6 +12,7 @@ const {
image, image,
items = [], items = [],
columns, columns,
defaultIcon,
isBeforeContent, isBeforeContent,
isAfterContent, isAfterContent,
@ -56,6 +57,7 @@ const {
<ItemGrid <ItemGrid
items={items} items={items}
columns={columns} columns={columns}
defaultIcon={defaultIcon}
classes={{ classes={{
container: 'mt-12', container: 'mt-12',
panel: 'max-w-full sm:max-w-md', panel: 'max-w-full sm:max-w-md',

80
src/components/widgets/HeroText.astro Normal file
View File

@ -0,0 +1,80 @@
---
import { Icon } from 'astro-icon/components';
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
tagline,
content = await Astro.slots.render('content'),
callToAction = await Astro.slots.render('callToAction'),
callToAction2 = await Astro.slots.render('callToAction2'),
} = Astro.props;
---
<section class="relative md:-mt-[76px] not-prose">
<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="pt-0 md:pt-[76px] pointer-events-none"></div>
<div class="py-12 md:py-20 pb-8 md:pb-8">
<div class="text-center max-w-screen-lg mx-auto">
{tagline && (
<p
class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
set:html={tagline}
/>
)}
{
title && (
<h1
class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
set:html={title}
/>
)
}
<div class="max-w-3xl mx-auto">
{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">
{
callToAction && (
<div class="flex w-full sm:w-auto">
{typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />
) : (
<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 rtl:-mr-1.5 rtl:ml-1" />
</>
)}
{callToAction?.text}
</a>
)}
</div>
)
}
{
callToAction2 && (
<div class="flex w-full sm:w-auto">
{typeof callToAction2 === 'string' ? (
<Fragment set:html={callToAction2} />
) : (
<a class="btn w-full" href={callToAction2?.href}>
{callToAction2?.icon && (
<>
<Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />
&nbsp;
</>
)}
{callToAction2.text}
</a>
)}
</div>
)
}
</div>
</div>
{content && <Fragment set:html={content} />}
</div>
</div>
</div>
</section>

67
src/components/widgets/Steps.astro
View File

@ -1,54 +1,59 @@
--- ---
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro"; import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import Timeline from "~/components/ui/Timeline.astro"; import Timeline from '~/components/ui/Timeline.astro';
import Headline from "~/components/ui/Headline.astro"; import Headline from '~/components/ui/Headline.astro';
import Image from '~/components/common/Image.astro'; import Image from '~/components/common/Image.astro';
import type { Steps } from "~/types"; import type { Steps } from '~/types';
const { const {
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 = await Astro.slots.render("tagline"), tagline = await Astro.slots.render('tagline'),
items = [], items = [],
image = await Astro.slots.render("image"), image = await Astro.slots.render('image'),
isReversed = false, isReversed = false,
id, id,
isDark = false, isDark = false,
classes = {}, classes = {},
bg = await Astro.slots.render("bg"), bg = await Astro.slots.render('bg'),
} = Astro.props as Steps; } = Astro.props as Steps;
--- ---
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ""}`} bg={bg}> <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ''}`} bg={bg}>
<div class:list={["flex flex-col gap-8 md:gap-12 md:flex-row", { "md:flex-row-reverse": isReversed }]}> <div class:list={['flex flex-col gap-8 md:gap-12', { 'md:flex-row-reverse': isReversed }, { 'md:flex-row': image}]}>
<div class="md:py-4 md:basis-1/2 md:self-center"> <div class:list={["md:py-4 md:self-center", { 'md:basis-1/2': image }, { "w-full": !image}]}>
<Headline <Headline
title={title} title={title}
subtitle={subtitle} subtitle={subtitle}
tagline={tagline} tagline={tagline}
classes={{ container: "text-left rtl:text-right", title: "text-3xl lg:text-4xl", ...((classes?.headline as {}) ?? {}) }} classes={{
container: 'text-left rtl:text-right',
title: 'text-3xl lg:text-4xl',
...((classes?.headline as {}) ?? {}),
}}
/> />
<Timeline items={items} classes={classes?.items as {}} /> <Timeline items={items} classes={classes?.items as {}} />
</div> </div>
<div class="relative md:basis-1/2"> {
{ image && (
image && <div class="relative md:basis-1/2">
(typeof image === 'string' ? ( {(typeof image === 'string' ? (
<Fragment set:html={image} /> <Fragment set:html={image} />
) : ( ) : (
<Image <Image
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" 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]} widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px" sizes="(max-width: 768px) 100vw, 432px"
width={432} width={432}
height={768} height={768}
layout="cover" layout="cover"
src={image?.src} src={image?.src}
alt={image?.alt || ""} alt={image?.alt || ''}
/> />
)) ))}
} </div>
</div> )
}
</div> </div>
</WidgetWrapper> </WidgetWrapper>

10
src/navigation.js
View File

@ -14,7 +14,7 @@ export const headerData = {
href: getPermalink('/homes/startup'), href: getPermalink('/homes/startup'),
}, },
{ {
text: 'App Download', text: 'Mobile App',
href: getPermalink('/homes/mobile-app'), href: getPermalink('/homes/mobile-app'),
}, },
{ {
@ -71,10 +71,6 @@ export const headerData = {
text: 'Click-Through', text: 'Click-Through',
href: getPermalink('/landing/click-through'), href: getPermalink('/landing/click-through'),
}, },
{
text: 'Squeeze',
href: getPermalink('/landing/squeeze'),
},
{ {
text: 'Product Details (or Services)', text: 'Product Details (or Services)',
href: getPermalink('/landing/product'), href: getPermalink('/landing/product'),
@ -83,6 +79,10 @@ export const headerData = {
text: 'Coming Soon or Pre-Launch', text: 'Coming Soon or Pre-Launch',
href: getPermalink('/landing/pre-launch'), href: getPermalink('/landing/pre-launch'),
}, },
{
text: 'Subscription',
href: getPermalink('/landing/subscription'),
},
], ],
}, },
{ {

1
src/pages/about.astro
View File

@ -15,6 +15,7 @@ const metadata = {
<!-- Hero Widget ******************* --> <!-- Hero Widget ******************* -->
<Hero <Hero
tagline="About us"
image={{ image={{
src: 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', src: 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Caos Image', alt: 'Caos Image',

46
src/pages/contact.astro
View File

@ -1,7 +1,7 @@
--- ---
import Layout from '~/layouts/PageLayout.astro'; import Layout from '~/layouts/PageLayout.astro';
import HeroText from '~/components/widgets/HeroText.astro';
import ContactUs from '~/components/widgets/Contact.astro'; import ContactUs from '~/components/widgets/Contact.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Features2 from '~/components/widgets/Features2.astro'; import Features2 from '~/components/widgets/Features2.astro';
const metadata = { const metadata = {
@ -10,6 +10,13 @@ const metadata = {
--- ---
<Layout metadata={metadata}> <Layout metadata={metadata}>
<!-- HeroText Widget ******************* -->
<HeroText
tagline="Contact"
title="Let's Connect!"
/>
<ContactUs <ContactUs
title="Drop us a message today!" title="Drop us a message today!"
subtitle="For quicker answers, explore our FAQs section. You may find the solution you're looking for right there! If not, our support team is delighted to help you." subtitle="For quicker answers, explore our FAQs section. You may find the solution you're looking for right there! If not, our support team is delighted to help you."
@ -71,41 +78,4 @@ const metadata = {
}, },
]} ]}
/> />
<!-- FAQs Widget ******************* -->
<FAQs
title="Frequently Asked Questions"
items={[
{
title: 'Do you provide instructions on how to use and edit the templates?',
description:
'Absolutely! We understand the importance of providing clear guidance. Each template comes with comprehensive instructions on how to use and customize it effectively.',
},
{
title: 'How can I download the templates after purchasing?',
description:
"Downloading your purchased templates is a simple process. Once you've completed the purchase, you'll receive an email containing a link to your personal download area.",
},
{
title: 'Are updates included with the templates?',
description:
'Yes, we are committed to continually improving and enhancing our templates to ensure they meet the latest design standards and technological advancements.',
},
{
title: 'How often do you release new templates?',
description:
'The exact frequency of releases may vary, our team works diligently to introduce new templates every quarter, depending on design trends, industry developments, and customer demand.',
},
{
title: 'Can I request custom templates to be developed?',
description: `Absolutely, we offer a custom template development service to cater to your specific needs. If you have a particular design idea, concept, or functionality in mind, we'd be more than happy to discuss creating a custom template for you.`,
},
{
title: 'What payment methods do you accept?',
description:
'Currently, we accept major credit and debit cards, including Visa, MasterCard, American Express, and Discover. Additionally, we facilitate payments through trusted online payment platforms such as PayPal and Apple Pay.',
},
]}
/>
</Layout> </Layout>

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

@ -18,6 +18,7 @@ const metadata = {
<!-- Hero2 Widget ******************* --> <!-- Hero2 Widget ******************* -->
<Hero2 <Hero2
tagline="Mobile App Web Demo"
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
callToAction2={{ text: 'Learn more', href: '#features' }} callToAction2={{ text: 'Learn more', href: '#features' }}
image={{ image={{

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

@ -16,6 +16,7 @@ const metadata = {
--- ---
<Layout metadata={metadata}> <Layout metadata={metadata}>
<Fragment slot="announcement"></Fragment>
<Fragment slot="header"> <Fragment slot="header">
<Header <Header
links={[ links={[
@ -28,23 +29,18 @@ const metadata = {
]} ]}
actions={[ actions={[
{ {
type: 'ghost', text: 'Hire me',
text: 'Login',
href: '#',
},
{
type: 'primary',
text: 'Sign Up',
href: '#', href: '#',
}, },
]} ]}
isSticky isSticky
showToggleTheme
/> />
</Fragment> </Fragment>
<!-- Hero2 Widget ******************* --> <!-- Hero2 Widget ******************* -->
<Hero id="hero" title="Sarah Johnson" callToAction={{ text: 'Hire me', href: '/' }}> <Hero id="hero" title="Sarah Johnson" tagline="Personal Web Demo" callToAction={{ 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
from New York University's School of Design. I infuse vitality into brands and designs, transforming concepts into from New York University's School of Design. I infuse vitality into brands and designs, transforming concepts into
@ -100,7 +96,6 @@ const metadata = {
<Steps <Steps
id="resume" id="resume"
title="Work experience" title="Work experience"
isReversed={true}
items={[ items={[
{ {
title: title:
@ -115,10 +110,7 @@ const metadata = {
icon: 'tabler:briefcase', icon: 'tabler:briefcase',
}, },
]} ]}
image={{ classes={{ container: 'max-w-3xl' }}
src: 'https://images.unsplash.com/photo-1557672172-298e090bd0f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Steps image',
}}
/> />
<!-- Steps Widget ****************** --> <!-- Steps Widget ****************** -->
@ -136,10 +128,7 @@ const metadata = {
icon: 'tabler:school', icon: 'tabler:school',
}, },
]} ]}
image={{ classes={{ container: 'max-w-3xl' }}
src: 'https://images.unsplash.com/photo-1557672172-298e090bd0f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Steps image',
}}
/> />
<!-- Features3 Widget ************** --> <!-- Features3 Widget ************** -->
@ -148,51 +137,43 @@ const metadata = {
title="Skills" title="Skills"
subtitle="Discover the proficiencies that allow me to bring imagination to life through design." subtitle="Discover the proficiencies that allow me to bring imagination to life through design."
columns={3} columns={3}
defaultIcon="tabler:point-filled"
items={[ items={[
{ {
title: 'Graphic design', title: 'Graphic design',
description: 'Proficient in crafting visually appealing designs that convey messages effectively.', description: 'Proficient in crafting visually appealing designs that convey messages effectively.',
icon: 'tabler:point-filled',
}, },
{ {
title: 'Branding and identity', title: 'Branding and identity',
description: 'Skilled at developing cohesive brand identities, including logos and brand guidelines.', description: 'Skilled at developing cohesive brand identities, including logos and brand guidelines.',
icon: 'tabler:point-filled',
}, },
{ {
title: 'User-centered design', title: 'User-centered design',
description: 'Experienced in creating user-friendly interfaces and optimizing user experiences.', description: 'Experienced in creating user-friendly interfaces and optimizing user experiences.',
icon: 'tabler:point-filled',
}, },
{ {
title: 'Adobe Creative Suite', title: 'Adobe Creative Suite',
description: 'Skilled in using Photoshop, Illustrator, and InDesign to create and edit visual elements.', description: 'Skilled in using Photoshop, Illustrator, and InDesign to create and edit visual elements.',
icon: 'tabler:point-filled',
}, },
{ {
title: 'Typography', title: 'Typography',
description: 'Adept in selecting and manipulating typefaces to enhance design aesthetics.', description: 'Adept in selecting and manipulating typefaces to enhance design aesthetics.',
icon: 'tabler:point-filled',
}, },
{ {
title: 'Color theory', title: 'Color theory',
description: 'Proficient in using color to evoke emotions and enhance visual harmony.', description: 'Proficient in using color to evoke emotions and enhance visual harmony.',
icon: 'tabler:point-filled',
}, },
{ {
title: 'Print and digital design', title: 'Print and digital design',
description: 'Knowledgeable in designing for both print materials and digital platforms.', description: 'Knowledgeable in designing for both print materials and digital platforms.',
icon: 'tabler:point-filled',
}, },
{ {
title: 'Attention to detail', title: 'Attention to detail',
description: 'Diligent in maintaining precision and quality in all design work.', description: 'Diligent in maintaining precision and quality in all design work.',
icon: 'tabler:point-filled',
}, },
{ {
title: 'Adaptability', title: 'Adaptability',
description: 'Quick to adapt to new design trends, technologies, and client preferences.', description: 'Quick to adapt to new design trends, technologies, and client preferences.',
icon: 'tabler:point-filled',
}, },
]} ]}
/> />
@ -380,4 +361,11 @@ const metadata = {
href: '/', href: '/',
}} }}
/> />
<!-- BlogLatestPost Widget **************** -->
<BlogLatestPosts id="blog" title="My blog">
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</BlogLatestPosts>
</Layout> </Layout>

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

@ -38,6 +38,7 @@ const metadata = {
<!-- Hero2 Widget ******************* --> <!-- Hero2 Widget ******************* -->
<Hero2 <Hero2
tagline="SaaS Web Demo"
callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
callToAction2={{ text: 'Learn more', href: '#features' }} callToAction2={{ text: 'Learn more', href: '#features' }}
image={{ image={{

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

@ -19,6 +19,7 @@ const metadata = {
<!-- Hero Widget ******************* --> <!-- Hero Widget ******************* -->
<Hero <Hero
tagline="Startup Web Demo"
callToAction={{ text: 'Get templates', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction={{ text: 'Get templates', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
callToAction2={{ text: 'Learn more', href: '#features' }} callToAction2={{ text: 'Learn more', href: '#features' }}
> >

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

@ -2,6 +2,7 @@
import Layout from '~/layouts/LandingLayout.astro'; import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro'; import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from "~/components/widgets/CallToAction.astro"
const metadata = { const metadata = {
title: 'Click-through Landing Page Demo', title: 'Click-through Landing Page Demo',
@ -12,14 +13,24 @@ const metadata = {
<!-- Hero2 Widget ******************* --> <!-- Hero2 Widget ******************* -->
<Hero2 <Hero2
tagline="Click-through Landing Demo" tagline="Click-through Demo"
title="Unlock the Secrets to an Effective Lead Generation Landing" title="Click-through Landing Page: The Perfect Bridge to Conversion!"
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience." subtitle="Learn how to design a Click-Through Landing Page that seamlessly guides visitors to your main offer."
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ text: 'Learn more', href: '#features' }} 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: 'AstroWind Hero Image', alt: 'Click-through Landing Page Hero Image',
}}
/>
<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',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}} }}
/> />
</Layout> </Layout>

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

@ -1,7 +1,8 @@
--- ---
import Layout from '~/layouts/LandingLayout.astro'; import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro'; import Hero from '~/components/widgets/Hero.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = { const metadata = {
title: 'Lead Generation Landing Page Demo', title: 'Lead Generation Landing Page Demo',
@ -11,15 +12,25 @@ const metadata = {
<Layout metadata={metadata}> <Layout metadata={metadata}>
<!-- Hero2 Widget ******************* --> <!-- Hero2 Widget ******************* -->
<Hero2 <Hero
tagline="Lead Generation Landing Demo" tagline="Lead Generation Landing Demo"
title="Unlock the Secrets to an Effective Lead Generation Landing" title="Effective Lead Generation Landing Page: Unlock the Secrets"
subtitle="Where every click is a potential lead waiting to happen. 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: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ text: 'Learn more', href: '#features' }} 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-1597423498219-04418210827d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80',
alt: 'AstroWind Hero Image', alt: 'Magnet attracting screws. Lead generation landing page demo',
}}
/>
<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',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}} }}
/> />
</Layout> </Layout>

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

@ -2,9 +2,10 @@
import Layout from '~/layouts/LandingLayout.astro'; import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro'; import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = { const metadata = {
title: 'Coming Soon Landing Page', title: 'Pre-Launch Landing Page',
}; };
--- ---
@ -12,14 +13,24 @@ const metadata = {
<!-- Hero2 Widget ******************* --> <!-- Hero2 Widget ******************* -->
<Hero2 <Hero2
tagline="Coming Soon Landing Demo" tagline="Pre-launch Demo"
title="Unlock the Secrets to an Effective Lead Generation Landing" title="Pre-launch Landing Page: Build the Hype Before the Big Reveal!"
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience." subtitle="Craft a tantalizing Coming Soon or Pre-Launch Landing Page that leaves visitors eagerly awaiting your launch."
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ text: 'Learn more', href: '#features' }} 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-1558803116-c1b4ac867b31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
alt: 'AstroWind Hero Image', alt: 'Store with a Coming Soon sign. Pre-launch Landing Page',
}}
/>
<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',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}} }}
/> />
</Layout> </Layout>

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

@ -1,7 +1,8 @@
--- ---
import Layout from '~/layouts/LandingLayout.astro'; import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro'; import Hero from '~/components/widgets/Hero.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = { const metadata = {
title: 'Product Details Landing Page Demo', title: 'Product Details Landing Page Demo',
@ -11,15 +12,25 @@ const metadata = {
<Layout metadata={metadata}> <Layout metadata={metadata}>
<!-- Hero2 Widget ******************* --> <!-- Hero2 Widget ******************* -->
<Hero2 <Hero
tagline="Product Details Landing Demo" tagline="Product Details Demo"
title="Unlock the Secrets to an Effective Lead Generation Landing" title="Product Landing Page: Showcase with Precision and Passion!"
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience." subtitle="Step-by-step guide to designing a Landing Page that highlights every facet of your product or service."
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ text: 'Learn more', href: '#features' }} 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-1473188588951-666fce8e7c68?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2174&q=80',
alt: 'AstroWind Hero Image', alt: 'A spotlight on a product. Product Details Landing Page Demo',
}}
/>
<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',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}} }}
/> />
</Layout> </Layout>

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

@ -2,6 +2,7 @@
import Layout from '~/layouts/LandingLayout.astro'; import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro'; import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = { const metadata = {
title: 'Sales Landing Page Demo', title: 'Sales Landing Page Demo',
@ -12,14 +13,24 @@ const metadata = {
<!-- Hero2 Widget ******************* --> <!-- Hero2 Widget ******************* -->
<Hero2 <Hero2
tagline="Sales Landing Demo" tagline="Long-form Sales Demo"
title="Unlock the Secrets to an Effective Lead Generation Landing" title="Long-form Sales: Sell with a Story: The Long-form Way!"
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience." subtitle="Dive deep into crafting a Landing Page that narrates, persuades, and converts."
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
callToAction2={{ text: 'Learn more', href: '#features' }} 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-1621452773781-0f992fd1f5cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1626&q=80',
alt: 'AstroWind Hero Image', alt: 'Children telling a story. Long-form Sales Landing Page demo',
}}
/>
<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',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}} }}
/> />
</Layout> </Layout>

25
src/pages/landing/squeeze.astro
View File

@ -1,25 +0,0 @@
---
import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
const metadata = {
title: 'Squeeze Landing Page Demo',
};
---
<Layout metadata={metadata}>
<!-- Hero2 Widget ******************* -->
<Hero2
tagline="Squeeze Landing Demo"
title="Unlock the Secrets to an Effective Lead Generation Landing"
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
callToAction2={{ text: 'Learn more', href: '#features' }}
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: 'AstroWind Hero Image',
}}
/>
</Layout>

36
src/pages/landing/subscription.astro Normal file
View File

@ -0,0 +1,36 @@
---
import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = {
title: 'Subscription Landing Page Demo',
};
---
<Layout metadata={metadata}>
<!-- Hero2 Widget ******************* -->
<Hero2
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: '#' }}
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',
}}
/>
<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',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
}}
/>
</Layout>

86
src/pages/pricing.astro
View File

@ -1,5 +1,6 @@
--- ---
import Layout from '~/layouts/PageLayout.astro'; import Layout from '~/layouts/PageLayout.astro';
import HeroText from '~/components/widgets/HeroText.astro';
import Prices from '~/components/widgets/Pricing.astro'; import Prices from '~/components/widgets/Pricing.astro';
import FAQs from '~/components/widgets/FAQs.astro'; import FAQs from '~/components/widgets/FAQs.astro';
import Steps from '~/components/widgets/Steps.astro'; import Steps from '~/components/widgets/Steps.astro';
@ -12,6 +13,14 @@ const metadata = {
--- ---
<Layout metadata={metadata}> <Layout metadata={metadata}>
<!-- HeroText Widget ******************* -->
<HeroText
tagline="Pricing"
title="Stellar Pricing for Every Journey"
subtitle="Choose the perfect plan that aligns with your cosmic goals."
/>
<!-- Pricing Widget ******************* --> <!-- Pricing Widget ******************* -->
<Prices <Prices
@ -101,45 +110,46 @@ const metadata = {
]} ]}
/> />
<!-- Features3 Widget ************** --> <!-- Features3 Widget ************** -->
<Features3 <Features3
title="Price-related features" title="Price-related features"
subtitle="Discover the advantages of choosing our plans" subtitle="Discover the advantages of choosing our plans"
columns={3} columns={2}
items={[ items={[
{ {
title: 'Tiered Pricing Plans', title: 'Tiered Pricing Plans',
description: 'Choose from a range of pricing plans designed to accommodate different budgets and requirements.', description: 'Choose from a range of pricing plans designed to accommodate different budgets and requirements.',
icon: 'tabler:stairs', icon: 'tabler:stairs',
}, },
{ {
title: 'Transparent Pricing', title: 'Transparent Pricing',
description: 'Clearly displayed pricing details for each plan, with no hidden costs or unexpected charges.', description: 'Clearly displayed pricing details for each plan, with no hidden costs or unexpected charges.',
icon: 'tabler:flip-vertical', icon: 'tabler:flip-vertical',
}, },
{ {
title: 'Secure Payment Methods', title: 'Secure Payment Methods',
description: 'Secure payment gateways to protect your financial information during transactions.', description: 'Secure payment gateways to protect your financial information during transactions.',
icon: 'tabler:shield-lock', icon: 'tabler:shield-lock',
}, },
{ {
title: 'Instant Access', title: 'Instant Access',
description: `Immediate access to your chosen plan's features and templates upon subscription.`, description: `Immediate access to your chosen plan's features and templates upon subscription.`,
icon: 'tabler:accessible', icon: 'tabler:accessible',
}, },
{ {
title: 'Upgrade Value', title: 'Upgrade Value',
description: 'Upgrade to higher-tier plans to unlock more features and benefits for an enhanced experience.', description: 'Upgrade to higher-tier plans to unlock more features and benefits for an enhanced experience.',
icon: 'tabler:chevrons-up', icon: 'tabler:chevrons-up',
}, },
{ {
title: '24H support', title: '24H support',
description: 'Questions answered via live chat, email or phone, every calendar day.', description: 'Questions answered via live chat, email or phone, every calendar day.',
icon: 'tabler:headset', icon: 'tabler:headset',
}, },
]} ]}
/> classes={{ container: "max-w-5xl"}}
/>
<!-- Steps Widget ****************** --> <!-- Steps Widget ****************** -->

1
src/pages/services.astro
View File

@ -15,6 +15,7 @@ const metadata = {
<!-- Hero Widget ******************* --> <!-- Hero Widget ******************* -->
<Hero <Hero
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={{ text: 'Start exploring', href: '/' }} callToAction={{ text: 'Start exploring', href: '/' }}

1
src/types.d.ts vendored
View File

@ -239,6 +239,7 @@ export interface Features extends Headline, Widget {
video?: Video; video?: Video;
items: Array<Item>; items: Array<Item>;
columns: number; columns: number;
defaultIcon?: string;
callToAction1?: CallToAction; callToAction1?: CallToAction;
callToAction2?: CallToAction; callToAction2?: CallToAction;
isReversed?: boolean; isReversed?: boolean;