365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first update

Browse Source
This commit is contained in:
becarta
2025-02-04 01:19:24 +01:00
parent 3f13d16732
commit db790f0457
28 changed files with 926 additions and 2161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/NexthinkAdministrator.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
src/assets/images/NexthinkAssociate.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
src/assets/images/logoIcon.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/assets/images/microsoft-certified-associate-badge.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
src/assets/images/richardbergsma.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 516 KiB

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

@@ -90,3 +90,5 @@
.dd *:first-child {
margin-top: 0;
}

7
src/components/CustomStyles.astro
View File

@@ -60,4 +60,11 @@ import '@fontsource-variable/inter';
color: snow;
}
}
.bg-hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../assets/images/richardbergsma.png');
background-size: cover;
background-position: center;
}
</style>

2
src/components/Logo.astro
View File

@@ -5,5 +5,5 @@ import { SITE } from 'astrowind:config';
<span
class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
>
🚀 {SITE?.name}
{SITE?.name}
</span>

79
src/components/widgets/Footer.astro
View File

@@ -31,74 +31,51 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
<div
class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300 intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
>
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
<div class="col-span-12 lg:col-span-4">
<div class="mb-2">
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>{SITE?.name}</a>
</div>
<div class="text-sm text-muted flex gap-1">
<!-- ✅ Combined Footer Section -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between py-6 md:py-8space-y-4 md:space-y-0">
<!-- Site Title with Terms & Privacy Links -->
<div class="flex flex-col items-start space-y-2">
<!-- Site Title -->
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>
{SITE?.name}
</a>
<!-- Terms & Privacy Policy Links -->
<div class="flex items-center space-x-4 text-sm text-muted">
{
secondaryLinks.map(({ text, href }, index) => (
<>
{index !== 0 ? ' · ' : ''}
<a
class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href={href}
set:html={text}
/>
</>
<a
key={index}
class="hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href={href}
>
{text}
</a>
))
}
</div>
</div>
<!-- Social Icons -->
{
links.map(({ title, links }) => (
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="dark:text-gray-300 font-medium mb-2">{title}</div>
{links && Array.isArray(links) && links.length > 0 && (
<ul class="text-sm">
{links.map(({ text, href, ariaLabel }) => (
<li class="mb-2">
<a
class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
href={href}
aria-label={ariaLabel}
>
<Fragment set:html={text} />
</a>
</li>
))}
</ul>
)}
</div>
))
}
</div>
<div class="md:flex md:items-center md:justify-between py-6 md:py-8">
{
socialLinks?.length ? (
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0 rtl:ml-0 rtl:-mr-2 rtl:md:ml-0 rtl:md:mr-4">
{socialLinks.map(({ ariaLabel, href, text, icon }) => (
<li>
socialLinks?.length && (
<ul class="flex space-x-4">
{socialLinks.map(({ ariaLabel, href, icon }, index) => (
<li key={index}>
<a
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-2 inline-flex items-center"
aria-label={ariaLabel}
href={href}
>
{icon && <Icon name={icon} class="w-5 h-5" />}
<Fragment set:html={text} />
</a>
</li>
))}
</ul>
) : (
''
)
}
<div class="text-sm mr-4 dark:text-muted">
<Fragment set:html={footNote} />
</div>
</div>
</div>
</footer>
</footer>

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

@@ -18,7 +18,7 @@ const {
} = Astro.props;
---
<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
<section class="relative md:-mt-[76px] not-prose bg-hero" {...id ? { id } : {}}>
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<slot name="bg">
{bg ? <Fragment set:html={bg} /> : null}

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

@@ -22,49 +22,43 @@ const {
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
<Headline title={title} subtitle={subtitle} tagline={tagline} />
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr justify-center">
{
testimonials &&
testimonials.map(({ title, testimonial, name, job, image }) => (
<div class="flex h-auto intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
<div class="flex flex-col p-4 md:p-6 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-600">
{title && <h2 class="text-lg font-medium leading-6 pb-4">{title}</h2>}
{testimonial && (
<blockquote class="flex-auto">
<p class="text-muted">" {testimonial} "</p>
</blockquote>
)}
<hr class="border-slate-200 dark:border-slate-600 my-4" />
<div class="flex items-center">
{image && (
<div class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600">
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Image
class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600 min-w-full min-h-full"
width={40}
height={40}
widths={[400, 768]}
layout="fixed"
{...image}
/>
)}
</div>
testimonials.map(({ title, linkUrl, name, description, image }) => (
<a href={linkUrl} target="_blank" rel="noopener noreferrer" class="flex flex-col justify-start items-center p-2 md:p-4 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-600 w-[300px] mx-auto sm:mx-0">
{title && <h2 class="text-lg font-medium leading-6 pb-4 text-center">{title}</h2>}
{image && (
<div class="h-[160px] w-[160px] border-slate-200 dark:border-slate-600 mx-auto">
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Image
class="h-full w-full object-cover"
width={160}
height={160}
widths={[400, 768]}
layout="fixed"
{...image}
/>
)}
<div class="grow ml-3 rtl:ml-0 rtl:mr-3">
{name && <p class="text-base font-semibold">{name}</p>}
{job && <p class="text-xs text-muted">{job}</p>}
</div>
</div>
)}
{/* Horizontal line directly under the image */}
<hr class="border-slate-200 dark:border-slate-600 my-4" />
{/* Text content takes up the remaining space */}
<div class="flex flex-col flex-grow items-center">
{name && <p class="text-base font-semibold text-center">{name}</p>}
{description && <p class="text-xs text-muted text-center">{description}</p>}
</div>
</div>
</a>
))
}
</div>
{
callToAction && (
<div class="flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
@@ -73,3 +67,14 @@ const {
)
}
</WidgetWrapper>
<style>
@media (max-width: 640px) {
.grid {
justify-content: center;
}
.grid > a {
margin: 0 auto;
}
}
</style>

2
src/config.yaml
View File

@@ -1,5 +1,5 @@
site:
name: AstroWind
name: 365DevNet
site: 'https://astrowind.vercel.app'
base: '/'
trailingSlash: false

51
src/navigation.ts
View File

@@ -119,52 +119,7 @@ export const headerData = {
};
export const footerData = {
links: [
{
title: 'Product',
links: [
{ text: 'Features', href: '#' },
{ text: 'Security', href: '#' },
{ text: 'Team', href: '#' },
{ text: 'Enterprise', href: '#' },
{ text: 'Customer stories', href: '#' },
{ text: 'Pricing', href: '#' },
{ text: 'Resources', href: '#' },
],
},
{
title: 'Platform',
links: [
{ text: 'Developer API', href: '#' },
{ text: 'Partners', href: '#' },
{ text: 'Atom', href: '#' },
{ text: 'Electron', href: '#' },
{ text: 'AstroWind Desktop', href: '#' },
],
},
{
title: 'Support',
links: [
{ text: 'Docs', href: '#' },
{ text: 'Community Forum', href: '#' },
{ text: 'Professional Services', href: '#' },
{ text: 'Skills', href: '#' },
{ text: 'Status', href: '#' },
],
},
{
title: 'Company',
links: [
{ text: 'About', href: '#' },
{ text: 'Blog', href: '#' },
{ text: 'Careers', href: '#' },
{ text: 'Press', href: '#' },
{ text: 'Inclusion', href: '#' },
{ text: 'Social Impact', href: '#' },
{ text: 'Shop', href: '#' },
],
},
],
secondaryLinks: [
{ text: 'Terms', href: getPermalink('/terms') },
{ text: 'Privacy Policy', href: getPermalink('/privacy') },
@@ -176,8 +131,4 @@ export const footerData = {
{ ariaLabel: 'RSS', icon: 'tabler:rss', href: getAsset('/rss.xml') },
{ ariaLabel: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/onwidget/astrowind' },
],
footNote: `
<img class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 rtl:mr-0 rtl:ml-1.5 float-left rtl:float-right rounded-sm" src="https://onwidget.com/favicon/favicon-32x32.png" alt="onWidget logo" loading="lazy"></img>
Made by <a class="text-blue-600 underline dark:text-muted" href="https://onwidget.com/"> onWidget</a> · All rights reserved.
`,
};

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

@@ -1,297 +0,0 @@
---
import Layout from '~/layouts/PageLayout.astro';
import Header from '~/components/widgets/Header.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Features3 from '~/components/widgets/Features3.astro';
import Content from '~/components/widgets/Content.astro';
import Testimonials from '~/components/widgets/Testimonials.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro';
import Button from '~/components/ui/Button.astro';
import Image from '~/components/common/Image.astro';
const appStoreImg = '~/assets/images/app-store.png';
const appStoreDownloadLink = 'https://github.com/onwidget/astrowind';
const googlePlayImg = '~/assets/images/google-play.png';
const googlePlayDownloadLink = 'https://github.com/onwidget/astrowind';
const metadata = {
title: 'Mobile App Homepage',
};
---
<Layout metadata={metadata}>
<Fragment slot="announcement"></Fragment>
<Fragment slot="header">
<Header
position="left"
links={[
{ text: 'Services', href: '#' },
{ text: 'Features', href: '#' },
{ text: 'About', href: '#' },
]}
actions={[
{
text: 'Download',
href: '#download',
},
]}
isSticky
showToggleTheme
/>
</Fragment>
<!-- Hero2 Widget ******************* -->
<Hero2
tagline="Mobile App Web Demo"
image={{
src: 'https://images.unsplash.com/photo-1535303311164-664fc9ec6532?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80',
alt: 'AstroWind Hero Image',
}}
>
<Fragment slot="title">
<span class="text-accent dark:text-white highlight">AstroWind App</span>: <br /> professional websites <span
class="hidden xl:inline">made easy</span
>
</Fragment>
<Fragment slot="subtitle">
<span class="hidden sm:inline">
Unlock boundless creativity at your fingertips: your gateway to innovative design.
</span>
Download now and embark on a journey to elevate your projects like never before.
</Fragment>
<div slot="actions" class="flex max-w-sm gap-4">
<Button variant="link" href={appStoreDownloadLink}>
<Image src={appStoreImg} alt="App Store Image" width={200} />
</Button>
<Button variant="link" href={googlePlayDownloadLink}>
<Image src={googlePlayImg} alt="Google Play Image" width={200} />
</Button>
</div>
</Hero2>
<!-- Features3 Widget ************** -->
<Features3
id="features"
title="How to use our app?"
subtitle="Tired of spending hours crafting documents from scratch? Our app offers an innovative solution. With a wide array of professionally designed templates, you can now create stunning documents in minutes. Explore our templates now and experience the difference."
tagline="Step-by-step guide"
columns={2}
items={[
{
title: 'Download and install the app',
description: `Begin your journey by downloading our user-friendly app from your device's app store or our official website.`,
icon: 'tabler:square-number-1',
},
{
title: 'Sign up',
description:
'Create your account by providing the necessary information, enabling you to access our full range of features.',
icon: 'tabler:square-number-2',
},
{
title: 'Browse templates',
description: 'Explore our diverse collection of website templates, categorized for easy navigation.',
icon: 'tabler:square-number-3',
},
{
title: 'Preview and select a template',
description: `Visualize the potential of each template through previews, then choose the one that aligns best with your project's needs.`,
icon: 'tabler:square-number-4',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1521517407911-565264e7d82d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
alt: 'Colorful Image',
}}
/>
<!-- Content Widget **************** -->
<Content
isReversed
items={[
{
title: 'User-friendly interface',
description:
'An intuitive and easy-to-navigate interface that allows users to quickly browse and find the templates they need.',
icon: 'tabler:wand',
},
{
title: 'Personalization options',
description:
'Include basic customization tools that let users modify text, colors, images, and other elements within the templates.',
icon: 'tabler:settings',
},
{
title: 'Ready-to-use components',
description:
'Enhance your designs with ready-to-use elements like graphics, icons, and layouts, saving you time and boosting visual appeal.',
icon: 'tabler:template',
},
{
title: 'Preview Mode',
description: 'Provide a preview of each template, allowing users to see how it looks before making a purchase.',
icon: 'tabler:carousel-horizontal',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1576153192621-7a3be10b356e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80',
alt: 'Colorful Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Main Features</h3>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isAfterContent
items={[
{
title: 'Offline Access',
description: 'Offer the option for users to download purchased templates for offline use.',
icon: 'tabler:wifi-off',
},
{
title: 'Secure Cloud Storage',
description:
'Provide cloud storage for purchased templates, ensuring users can access and back up their templates from anywhere securely.',
icon: 'tabler:file-download',
},
{
title: 'Regular Updates',
description: 'Continuously add new templates and features to keep the app fresh and engaging for users.',
icon: 'tabler:refresh',
},
{
title: 'Wishlist',
description: `Allow users to create a wishlist of templates they're interested in, making it easier for them to revisit and potentially purchase later.`,
icon: 'tabler:heart',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1453738773917-9c3eff1db985?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Vintage Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Other features</h3>
</Fragment>
</Content>
<!-- Stats Widget ****************** -->
<Stats
title="Statistics of our app"
stats={[
{ amount: '20K', icon: 'tabler:download' },
{ amount: '18.5K', icon: 'tabler:users' },
{ amount: '4.7', icon: 'tabler:user-star' },
]}
/>
<!-- Testimonials Widget *********** -->
<Testimonials
title="What our users say?"
testimonials={[
{
testimonial: `It's made exploring and downloading website templates a breeze. The interface is intuitive, and I had no trouble finding the perfect template for my project. It's an app that truly empowers users.`,
name: 'Cary Kennedy',
job: 'Film director',
image: {
src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Cary Kennedy Image',
},
},
{
testimonial: `The app's seamless download process and intuitive layout have made selecting templates an enjoyable experience. Being able to preview and experiment with different designs before committing has saved me time and ensured I get the perfect look for my website.`,
name: 'Josh Wilkinson',
job: 'Product Manager',
image: {
src: 'https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Josh Wilkinson Image',
},
},
{
testimonial:
'I was able to download and use a professional website template within minutes. The step-by-step process and user-friendly interface made it easy for me to create a website that looks as if it was designed by a pro.',
name: 'Sidney Hansen',
job: 'Decorator',
image: {
src: 'https://images.unsplash.com/photo-1512361436605-a484bdb34b5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Sidney Hansen Image',
},
},
]}
callToAction={{
target: '_blank',
text: 'Read more testimonials',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:chevron-right',
}}
/>
<!-- FAQs Widget ******************* -->
<FAQs
title="Still have some doubts?"
items={[
{
title: 'What does this app do?',
description:
'This app provides a platform for you to easily browse, purchase, download, and use a wide range of website templates for your projects.',
},
{
title: 'How can this app solve my problem?',
description:
'This app streamlines the process of finding and implementing professional website designs, saving you time and effort in creating visually appealing and functional websites.',
},
{
title: 'Is it available for my device?',
description: `Our app is designed for compatibility across various devices and platforms, ensuring accessibility whether you're using a smartphone, tablet, or computer.`,
},
{
title: 'What makes this app different from others?',
description:
'Our app stands out for its user-friendly interface, extensive template collection, and seamless integration of the purchasing and downloading process, making it highly efficient.',
},
{
title: 'Are there any costs involved?',
description:
'While the app itself may be free to download, there may be costs associated with purchasing specific templates based on your preferences and project requirements.',
},
]}
/>
<!-- CallToAction Widget *********** -->
<CallToAction
id="download"
title="Download our app now!"
subtitle="Access a variety of stunning templates, simplify your creative process, and elevate your online presence."
>
<div slot="actions" class="flex max-w-sm gap-4">
<Button variant="link" href={appStoreDownloadLink}>
<Image src={appStoreImg} alt="App Store Image" width={200} />
</Button>
<Button variant="link" href={googlePlayDownloadLink}>
<Image src={googlePlayImg} alt="Google Play Image" width={200} />
</Button>
</div>
</CallToAction>
</Layout>

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

@@ -1,405 +0,0 @@
---
import Layout from '~/layouts/PageLayout.astro';
import Header from '~/components/widgets/Header.astro';
import Hero from '~/components/widgets/Hero.astro';
import Content from '~/components/widgets/Content.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Features3 from '~/components/widgets/Features3.astro';
import Testimonials from '~/components/widgets/Testimonials.astro';
import Steps from '~/components/widgets/Steps.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import { getPermalink } from '~/utils/permalinks';
const metadata = {
title: 'Personal Homepage Demo',
};
---
<Layout metadata={metadata}>
<Fragment slot="announcement"></Fragment>
<Fragment slot="header">
<Header
links={[
{ text: 'Home', href: '#' },
{ text: 'About', href: '#about' },
{ text: 'Resume', href: '#resume' },
{ text: 'Porfolio', href: '#porfolio' },
{ text: 'Blog', href: '#blog' },
{ text: 'Github', href: 'https://github.com/onwidget' },
]}
actions={[
{
text: 'Hire me',
href: '#',
},
]}
isSticky
showToggleTheme
/>
</Fragment>
<!-- Hero2 Widget ******************* -->
<Hero
id="hero"
title="Sarah Johnson"
tagline="Personal Web Demo"
actions={[{ variant: 'primary', text: 'Hire me', href: getPermalink('/contact#form') }]}
>
<Fragment slot="subtitle">
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 captivating
realities.
</Fragment>
</Hero>
<!-- Content Widget **************** -->
<Content
id="about"
columns={3}
items={[
{
icon: 'tabler:brand-dribbble',
callToAction: {
target: '_blank',
text: 'Dribbble',
href: '#',
},
},
{
icon: 'tabler:brand-behance',
callToAction: {
target: '_blank',
text: 'Behance',
href: '#',
},
},
{
icon: 'tabler:brand-pinterest',
callToAction: {
target: '_blank',
text: 'Pinterest',
href: '#',
},
},
]}
image={{
src: 'https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Colorful Image',
loading: 'eager',
}}
>
<Fragment slot="content">
<h2 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">About me</h2>
<p>
Welcome to my creative journey. My work is a testament to my commitment to bringing ideas to life, where each
pixel becomes a brushstroke in the canvas of imagination.
</p>
<br />
<p>
I find inspiration in the world around me, whether through the pages of a captivating novel, the intricate
details of typography, or the vibrant hues of nature during my outdoor escapades.
</p>
<br />
<p>If you're curious to dive deeper into my work, you can follow me:</p>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Steps Widget ****************** -->
<Steps
id="resume"
title="Work experience"
items={[
{
title:
'Graphic Designer <br /> <span class="font-normal">ABC Design Studio, New York, NY</span> <br /> <span class="text-sm font-normal">2021 - Present</span>',
description: `Collaborate with clients to understand design requirements and objectives. <br /> Develop branding solutions, including logos, color palettes, and brand guidelines. <br /> Design marketing materials such as brochures, posters, and digital assets. <br /> Create visually appealing user interfaces for websites and applications.`,
icon: 'tabler:briefcase',
},
{
title:
'Junior Graphic Designer <br /> <span class="font-normal">XYZ Creative Agency, Los Angeles, CA</span> <br /> <span class="text-sm font-normal">2018 - 2021</span>',
description: `Assisted senior designers in creating design concepts and visual assets. <br /> Contributed to the development of brand identities and marketing collateral. <br /> Collaborated with the marketing team to ensure consistent design across campaigns. <br /> Gained hands-on experience in various design software and tools.`,
icon: 'tabler:briefcase',
},
]}
classes={{ container: 'max-w-3xl' }}
/>
<!-- Steps Widget ****************** -->
<Steps
id="resume"
title="Education"
items={[
{
title: `Master of Fine Arts in Graphic Design <br /> <span class="font-normal">New York University's School of Design</span> <br /> <span class="text-sm font-normal">2018 - 2020</span>`,
icon: 'tabler:school',
},
{
title: `Bachelor of Arts in Graphic Design <br /> <span class="font-normal">New York University's School of Design</span> <br /> <span class="text-sm font-normal">2014 - 2018</span>`,
icon: 'tabler:school',
},
]}
classes={{ container: 'max-w-3xl' }}
/>
<!-- Features3 Widget ************** -->
<Features3
title="Skills"
subtitle="Discover the proficiencies that allow me to bring imagination to life through design."
columns={3}
defaultIcon="tabler:point-filled"
items={[
{
title: 'Graphic design',
description: 'Proficient in crafting visually appealing designs that convey messages effectively.',
},
{
title: 'Branding and identity',
description: 'Skilled at developing cohesive brand identities, including logos and brand guidelines.',
},
{
title: 'User-centered design',
description: 'Experienced in creating user-friendly interfaces and optimizing user experiences.',
},
{
title: 'Adobe Creative Suite',
description: 'Skilled in using Photoshop, Illustrator, and InDesign to create and edit visual elements.',
},
{
title: 'Typography',
description: 'Adept in selecting and manipulating typefaces to enhance design aesthetics.',
},
{
title: 'Color theory',
description: 'Proficient in using color to evoke emotions and enhance visual harmony.',
},
{
title: 'Print and digital design',
description: 'Knowledgeable in designing for both print materials and digital platforms.',
},
{
title: 'Attention to detail',
description: 'Diligent in maintaining precision and quality in all design work.',
},
{
title: 'Adaptability',
description: 'Quick to adapt to new design trends, technologies, and client preferences.',
},
]}
/>
<!-- Content Widget **************** -->
<Content
id="porfolio"
title="Elevating visual narratives"
subtitle="Embark on a design journey that surpasses pixels, entering a realm of imagination. Explore my portfolio, where passion and creativity converge to shape enthralling visual narratives."
isReversed
items={[
{
title: 'Description:',
description:
'Developed a comprehensive brand identity for a tech startup, Tech Innovators, specializing in disruptive innovations. The goal was to convey a modern yet approachable image that resonated with both corporate clients and tech enthusiasts.',
},
{
title: 'Role:',
description:
'Led the entire branding process from concept to execution. Created a dynamic logo that symbolized innovation, selected a vibrant color palette, and I designed corporate stationery, website graphics, and social media assets.',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1658248165252-71e116af1b34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=928&q=80',
alt: 'Tech Design Image',
}}
callToAction={{
target: '_blank',
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
Project 1: <br /><span class="text-2xl">Brand identity for tech innovators</span>
</h3>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isReversed
isAfterContent={true}
items={[
{
title: 'Description:',
description:
'Designed a captivating event poster for an art and music festival, "ArtWave Fusion," aiming to showcase the synergy between visual art and music genres.',
},
{
title: 'Role:',
description: `Translated the festival's creative theme into a visually striking poster. Used bold typography, vibrant colors, and abstract elements to depict the fusion of art and music. Ensured the design captured the festival's vibrant atmosphere.`,
},
]}
image={{
src: 'https://images.unsplash.com/photo-1619983081563-430f63602796?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Art and Music Poster Image',
}}
callToAction={{
target: '_blank',
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
Project 2: <br /><span class="text-2xl">Event poster for art & music festival</span>
</h3>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isReversed
isAfterContent={true}
items={[
{
title: 'Description:',
description: `Redesigned the e-commerce website for an eco-conscious fashion brand, GreenVogue. The objective was to align the brand's online presence with its sustainable ethos and improve user experience.`,
},
{
title: 'Role:',
description: `Conducted a thorough analysis of the brand's values and customer base to inform the design direction. Created a visually appealing interface with intuitive navigation, highlighting sustainable materials, and integrating a user-friendly shopping experience.`,
},
]}
image={{
src: 'https://plus.unsplash.com/premium_photo-1683288295841-782fa47e4770?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
alt: 'Fashion e-commerce Image',
}}
callToAction={{
target: '_blank',
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
Project 3: <br /><span class="text-2xl">E-commerce website redesign for fashion brand</span>
</h3>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Testimonials Widget *********** -->
<Testimonials
title="Client testimonials"
subtitle="Discover what clients have to say about their experiences working with me."
testimonials={[
{
testimonial: `She took our vague concept and turned it into a visual masterpiece that perfectly aligned with our goals. Her attention to detail and ability to translate ideas into compelling visuals exceeded our expectations.`,
name: 'Mark Thompson',
job: 'Creative director',
image: {
src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Mark Thompson Image',
},
},
{
testimonial: `She transformed our brand identity with her creative finesse, capturing our essence in every element. Her dedication and talent truly shine through her work.`,
name: 'Emily Martinez',
job: 'CEO',
image: {
src: 'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=772&q=80',
alt: 'Emily Martinez Image',
},
},
{
testimonial: `She has an uncanny ability to communicate emotions and stories. She crafted a logo for our NGO that not only represents our cause but also evokes empathy. Her professionalism and commitment make her a designer of exceptional caliber.`,
name: 'Laura Simmons',
job: 'Founder of an NGO',
image: {
src: 'https://images.unsplash.com/photo-1554727242-741c14fa561c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Laura Simmons Image',
},
},
{
testimonial: `We entrusted Sarah with revamping our website's user interface, and the results were astounding. Her intuitive design sense enhanced user experience, leading to a significant increase in engagement. She's a designer who truly understands the synergy of aesthetics and functionality.`,
name: 'Alex Foster',
job: 'Director of web services',
image: {
src: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Alex Foster Image',
},
},
{
testimonial: `She took our vision and elevated it beyond imagination. Her ability to capture brand essence and translate it into design is nothing short of remarkable. Working with her has been an inspiring journey.`,
name: 'Jessica Collins',
job: 'Product Manager',
image: {
src: 'https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=778&q=80',
alt: 'Jessica Collins Image',
},
},
{
testimonial: `Her ability to transform concepts into captivating visuals is nothing short of extraordinary. She took our event poster idea and turned it into a visual masterpiece that perfectly captured the essence of our festival. Sarah's dedication, creativity, and knack for delivering beyond expectations make her an invaluable asset to any project.`,
name: 'Michael Carter',
job: 'Event Coordinator',
image: {
src: 'https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Michael Carter Image',
},
},
]}
/>
<!-- CallToAction Widget *********** -->
<CallToAction
title="Let's create together"
subtitle="Ready to transform your vision into captivating designs?"
actions={[
{
variant: 'primary',
text: 'Hire me',
href: '/',
},
]}
/>
<!-- BlogLatestPost Widget **************** -->
<BlogLatestPosts
id="blog"
title="Explore my insightful articles on my blog"
information={`Dive into a realm of design wisdom and creative inspiration, where you'll find invaluable insights, practical tips, and captivating narratives that elevate and enrich your creative journey.`}
>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</BlogLatestPosts>
</Layout>

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

@@ -1,349 +0,0 @@
---
import Layout from '~/layouts/PageLayout.astro';
import Header from '~/components/widgets/Header.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import Features from '~/components/widgets/Features.astro';
import Steps2 from '~/components/widgets/Steps2.astro';
import Content from '~/components/widgets/Content.astro';
import Pricing from '~/components/widgets/Pricing.astro';
import { headerData } from '~/navigation';
import FAQs from '~/components/widgets/FAQs.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
const metadata = {
title: 'SaaS Landing Page',
};
---
<Layout metadata={metadata}>
<Fragment slot="header">
<Header
{...headerData}
actions={[
{
variant: 'secondary',
text: 'Login',
href: '#',
},
{
variant: 'primary',
text: 'Sign Up',
href: '#',
},
]}
isSticky
/>
</Fragment>
<!-- Hero2 Widget ******************* -->
<Hero2
tagline="SaaS Web Demo"
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',
}}
>
<Fragment slot="title">
Simplify web design with Astrowind: <br /> your ultimate <span class="text-accent dark:text-white highlight"
>SaaS</span
> companion<br />
</Fragment>
<Fragment slot="subtitle">
<span class="hidden sm:inline">
Elevate your website creation process with <span class="font-semibold">AstroWind</span>'s SaaS solutions.</span
>
Seamlessly blend the power of Astro 5.0 and Tailwind CSS to craft websites that resonate with your brand and audience.
</Fragment>
</Hero2>
<!-- Features Widget *************** -->
<Features
id="features"
title="Why choose AstroWind?"
subtitle="Each of the following features enhances AstroWind's value proposition."
columns={2}
items={[
{
title: 'Integration of Astro 5.0 and Tailwind CSS',
description:
'Offers a powerful combination that enhances both the development process and the end-user experience. Also, allows to build dynamic and visually stunning websites with optimized performance.',
icon: 'tabler:layers-union',
},
{
title: 'Versatile design for startups, small businesses, and more',
description: `Easily customize AstroWind to harmonize with the unique branding and identity of your venture. AstroWind's versatile design adapts to suit your needs.`,
icon: 'tabler:artboard',
},
{
title: 'Effortless customization for portfolios and marketing sites',
description:
'With intuitive customization, easily showcase portfolio pieces, case studies, project highlights, and relevant content. Ideal for creative professionals and businesses looking to highlight their expertise.',
icon: 'tabler:writing',
},
{
title: 'Optimized landing pages and engaging blogs',
description: `Landing pages are strategically designed to captivate visitors and prompt specific actions. Additionally, the blog creation feature empowers sharing insights, engaging the audience.`,
icon: 'tabler:podium',
},
{
title: 'Fast loading times and production-ready code',
description: `Using Astro 5.0 ensures fast loading and seamless rendering, enhancing browsing. The code follows best practices, improving user experience, SEO, and reducing bounce rates.`,
icon: 'tabler:rocket',
},
{
title: 'SEO-optimized structure for enhanced visibility',
description: `Follows SEO best practices with clean code, semantic HTML markup, and fast loading, enhancing search engine rankings. AstroWind's SEO structure ensures visibility to potential customers and clients.`,
icon: 'tabler:eyeglass',
},
]}
/>
<!-- Content Widget **************** -->
<Content
title="Use cases"
subtitle="Discover how AstroWind's versatile template serves as the ideal solution for various use cases, providing tailored solutions to drive success."
isReversed
items={[
{
title: 'Description:',
description:
'Are you a startup with big dreams? AstroWind propels your success. Our template forges a seamless online presence, attracting investors and customers from day one. Astro 5.0 and Tailwind CSS ensure striking, responsive sites, leaving lasting impressions. Countless startups leverage AstroWind to kickstart their journey and resonate with audiences.',
},
{
title: 'Benefits:',
description: `Allow startups to quickly create professional websites without investing extensive time and resources. <br /> Make a memorable first impression with visually appealing design elements that highlight your startup's unique value proposition. <br /> Ensures your website looks stunning and works well on all devices. <br /> Engage potential investors and customers with engaging content, clear messaging, and intuitive navigation.`,
},
]}
image={{
src: 'https://images.unsplash.com/photo-1620558138198-cfb9b4f3c294?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1671&q=80',
alt: 'Startup Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
Startup success stories: <br /><span class="text-2xl">Launching with AstroWind</span>
</h3>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isAfterContent={true}
items={[
{
title: 'Description:',
description: `For SaaS businesses, user experience is key. AstroWind enhances showcasing SaaS solutions intuitively. The template's Astro 5.0 and Tailwind CSS integration guarantees user-friendly experience, mirroring your software's efficiency. Customize pages to communicate SaaS value and solutions for your audience.`,
},
{
title: 'Benefits:',
description: `Ensuring a cohesive and user-centric design for your SaaS website. <br /> Effectively communicate complex SaaS features through visual aids, animations, and interactive elements. <br /> Prioritize user needs and pain points through well-structured layouts and clear navigation. <br /> Encourage visitors to take action with strategically placed CTAs. <br /> Ensures your SaaS website works seamlessly across all devices.`,
},
]}
image={{
src: 'https://images.unsplash.com/photo-1531973486364-5fa64260d75b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1658&q=80',
alt: 'SaaS Businesses Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
SaaS showcase: <br /><span class="text-2xl">Streamlining user experience</span>
</h3>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isReversed
isAfterContent={true}
items={[
{
title: 'Description:',
description: `Your portfolio is your masterpiece, and AstroWind is your canvas. Whether you're a designer, photographer, artist, or any other creative professional, AstroWind empowers you to showcase your work with elegance and sophistication. Tailored to highlight your creative projects, AstroWind's templates offer a visually immersive experience that lets your portfolio shine.`,
},
{
title: 'Benefits:',
description: `Serve as a captivating backdrop to showcase your creative work, capturing attention and leaving a lasting impression. <br /> Tailor your portfolio to reflect your unique style and artistic vision. <br /> Prioritizes visuals, allowing you to present your work in high-resolution detail that draws viewers into your creations. <br /> Enables seamless navigation for effortless portfolio exploration.`,
},
]}
image={{
src: 'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Portfolio Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
Creative portfolios: <br /><span class="text-2xl">Highlighting your work</span>
</h3>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
items={[
{
title: 'Description:',
description: `For small businesses, a well-crafted website can be a game-changer. AstroWind empowers small businesses to not only establish a credible online presence but also convert visitors into loyal customers. The template's thoughtful design and optimization features ensure that your website doesn't just attract attention but also guides visitors through a seamless journey, ultimately leading to conversions.`,
},
{
title: 'Benefits:',
description: `Present your small business with a professional and polished website that instills confidence and trust among visitors. <br /> Strategically placed CTAs, user-friendly forms, and optimized layouts work together to drive user engagement and conversions. <br /> Ensure a smooth browsing experience, reducing bounce rates and encouraging interaction.`,
},
]}
image={{
src: 'https://images.unsplash.com/photo-1514621166532-aa7eb1a3a2f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Small Business Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
Small business growth: <br /><span class="text-2xl">Converting visitors into customers</span>
</h3>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Pricing Widget ******************* -->
<Pricing
title="Flexible pricing plans"
prices={[
{
title: 'free',
subtitle: 'Access to core features and a wide range of templates',
price: '0',
period: '/ month',
callToAction: {
target: '_blank',
text: 'Get Started for Free',
href: '#',
},
},
{
title: 'pro',
subtitle: 'Premium templates and advanced customization',
price: 15,
period: '/ Month',
callToAction: {
target: '_blank',
text: 'Upgrade to Pro',
href: '#',
},
hasRibbon: true,
ribbonTitle: 'popular',
},
{
title: 'Enterprise',
subtitle: 'Tailored solutions for large-scale projects',
price: 45,
period: '/ Month',
callToAction: {
target: '_blank',
text: 'Unlock Enterprise Features',
href: '#',
},
},
]}
/>
<!-- FAQs Widget ******************* -->
<FAQs
title="Frequently Asked Questions"
items={[
{
title: 'Is AstroWind compatible with the latest versions of Astro and Tailwind CSS?',
description:
'Yes, AstroWind is designed to be compatible with the latest versions of both Astro and Tailwind CSS. This ensures that you can harness the full capabilities of these technologies while benefiting from the features offered by AstroWind.',
icon: 'tabler:chevrons-right',
},
{
title: 'Can I use AstroWind for both personal and commercial projects?',
description: `Certainly! AstroWind is versatile and can be used for a wide range of projects, including both personal and commercial endeavors. Whether you're building a professional portfolio, launching a startup, or creating a marketing website, AstroWind has you covered.`,
icon: 'tabler:chevrons-right',
},
{
title: 'What level of coding knowledge is required to use AstroWind?',
description:
'While some familiarity with HTML, CSS, and web development concepts is helpful, the user-friendly interface and customization options allow those with limited coding experience to create impressive websites. For more advanced users, AstroWind offers extensive customization capabilities.',
icon: 'tabler:chevrons-right',
},
{
title: 'Is customer support available for AstroWind users seeking guidance?',
description: `Absolutely, our dedicated customer support team is here to assist you with any questions or challenges you may encounter. Feel free to reach out to us through our support channels, and we'll be happy to provide the help you need.`,
icon: 'tabler:chevrons-right',
},
]}
>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</FAQs>
<!-- Steps2 Widget ****************** -->
<Steps2
title="Reach out to us"
subtitle="Have questions? Feel free to contact us using the form below. We're here to help!"
callToAction={{
text: 'Contact us',
href: '/',
}}
items={[
{
title: 'Email us',
description: 'contact@support.com',
icon: 'tabler:mail',
},
{
title: 'Call us',
description: '+1 (234) 567-890',
icon: 'tabler:headset',
},
{
title: 'Follow us',
description: '@example',
icon: 'tabler:brand-twitter',
},
]}
/>
<!-- BlogLatestPost Widget **************** -->
<BlogLatestPosts
id="blog"
title="Stay informed with AstroWind's blog"
information={`Explore our collection of articles, guides, and tutorials on web development, design trends, and using AstroWind effectively for your projects.`}
>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</BlogLatestPosts>
</Layout>

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

@@ -1,317 +0,0 @@
---
import Layout from '~/layouts/PageLayout.astro';
import Hero from '~/components/widgets/Hero.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Features2 from '~/components/widgets/Features2.astro';
import Features from '~/components/widgets/Features.astro';
import Stats from '~/components/widgets/Stats.astro';
import Features3 from '~/components/widgets/Features3.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Brands from '~/components/widgets/Brands.astro';
import { YouTube } from 'astro-embed';
const metadata = {
title: 'Startup Landing Page',
};
---
<Layout metadata={metadata}>
<!-- Hero Widget ******************* -->
<Hero
tagline="Startup Web Demo"
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
class="text-accent dark:text-white highlight">Startup</span
> with Astrowind templates
</Fragment>
<Fragment slot="subtitle">
Step into the spotlight with <span class="font-semibold">Astrowind</span> templates, your pathway to fortifying your
startup's digital footprint, fostering credibility, and expanding your reach.
</Fragment>
<Fragment slot="image">
<YouTube id="gxBkghlglTg" title="Astro just Launched.... Could it be the ultimate web framework?" />
<style is:inline>
lite-youtube {
margin: 0 auto;
max-width: 100%;
}
</style>
</Fragment>
</Hero>
<!-- Features2 Widget ************** -->
<Features2
title="About us"
subtitle="We believe in the magic of turning dreams into stunning realities. Founded by passionate developers with a shared vision, we set out to simplify the website creation process. Our templates bring together the innovation of Astro 5.0 and the versatility of Tailwind CSS, enabling you to express your unique brand identity like never before."
>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Features2>
<!-- Stats Widget ****************** -->
<Stats
title="Discover the impressive impact of Astrowind"
subtitle="The numbers below reflect the trust our users have placed in us and the remarkable outcomes we've helped them achieve."
stats={[
{ title: 'Downloads', amount: '182K' },
{ title: 'Websites Launched', amount: '87' },
{ title: 'User Ratings', amount: '4.8' },
{ title: 'Satisfied Clients', amount: '116K' },
]}
/>
<!-- Brands Widget ****************** -->
<Brands
title="Partnerships & Collaborations"
subtitle="At Astrowind, we believe in the power of collaboration to drive innovation and create exceptional experiences."
icons={[]}
images={[
{
src: 'https://cdn.pixabay.com/photo/2015/05/26/09/37/paypal-784404_1280.png',
alt: 'Paypal',
},
{
src: 'https://cdn.pixabay.com/photo/2021/12/06/13/48/visa-6850402_1280.png',
alt: 'Visa',
},
{
src: 'https://cdn.pixabay.com/photo/2013/10/01/10/29/ebay-189064_1280.png',
alt: 'Ebay',
},
{
src: 'https://cdn.pixabay.com/photo/2015/04/13/17/45/icon-720944_1280.png',
alt: 'Youtube',
},
{
src: 'https://cdn.pixabay.com/photo/2013/02/12/09/07/microsoft-80658_1280.png',
alt: 'Microsoft',
},
{
src: 'https://cdn.pixabay.com/photo/2015/04/23/17/41/node-js-736399_1280.png',
alt: 'Node JS',
},
{
src: 'https://cdn.pixabay.com/photo/2015/10/31/12/54/google-1015751_1280.png',
alt: 'Google',
},
{
src: 'https://cdn.pixabay.com/photo/2021/12/06/13/45/meta-6850393_1280.png',
alt: 'Meta',
},
{
src: 'https://cdn.pixabay.com/photo/2013/01/29/22/53/yahoo-76684_1280.png',
alt: 'Yahoo',
},
]}
/>
<!-- Features2 Widget ************** -->
<Features2
title="What services do we provide?"
subtitle="We offer a wide range of website templates that suit various industries and purposes such as business, portfolio, e-commerce, blog, etc."
items={[
{
title: 'Installation Instructions',
description:
'Offer clear instructions on how to download the purchased templates and install them on various website platforms or content management systems.',
icon: 'flat-color-icons:document',
},
{
title: 'Demo and Previews',
description:
'Provide interactive demos and previews that allow customers to see how their chosen template will look and function before making a purchase.',
icon: 'flat-color-icons:template',
},
{
title: 'Technical Support',
description:
'Providing customer support for any technical issues related to the templates or their implementation.',
icon: 'flat-color-icons:voice-presentation',
},
]}
>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Features2>
<!-- Features Widget *************** -->
<Features
id="features"
title="Main features of our templates"
subtitle="Possess several key characteristics to effectively cater to the needs of startups and entrepreneurs."
columns={3}
items={[
{
title: 'Modern and Professional Design',
description:
'Have a contemporary design that reflects current design trends and gives a professional impression.',
icon: 'tabler:artboard',
},
{
title: 'Responsive and Mobile-Friendly',
description: 'Adapt seamlessly to different screen sizes and devices to ensure a consistent experience.',
icon: 'tabler:picture-in-picture',
},
{
title: 'Customizability',
description:
'Easily customizable, allowing users to adapt the design, colors, typography, and content to match their brand identity.',
icon: 'tabler:adjustments-horizontal',
},
{
title: 'Fast Loading Times',
description: 'Optimized for speed to ensure a smooth user experience and favorable search engine rankings.',
icon: 'tabler:rocket',
},
{
title: 'Search Engine Optimization (SEO)',
description:
'Incorporate SEO best practices in template structure and code to improve visibility in search engine results.',
icon: 'tabler:arrows-right-left',
},
{
title: 'Compatibility',
description: 'The templates work seamlessly across various content management systems and website builders.',
icon: 'tabler:plug-connected',
},
]}
/>
<!-- FAQs Widget ******************* -->
<FAQs
title="Frequently Asked Questions"
items={[
{
title: 'What are landing page templates?',
description:
'Landing page templates are pre-designed web page layouts that are specifically created to serve as a foundation for building effective landing pages. These templates are designed to capture the attention of visitors and guide them towards a specific action or goal, such as signing up for a newsletter, making a purchase, or downloading a resource.',
},
{
title: 'Why should I use a template?',
description:
'Some of the advantages are that they provide a ready-to-use structure, saving you significant time. Are designed with user-friendliness in mind and provide a cost-effective alternative, saving you money while still delivering a quality result.',
},
{
title: 'Can I preview templates before buying?',
description:
'Yes, the templates allow you to preview them before making a purchase. There is a "Demo" button associated with each template.',
},
{
title: 'Do I need technical skills to use a template?',
description:
'Advanced technical skills are not required to use a template, but having a basic understanding of web navigation and familiarity with using online tools can still be beneficial. If you have more specific customization needs, you might need to consult guides or reach out to customer support for assistance.',
},
{
title: 'Can I use the template on multiple websites?',
description:
'No, the template comes with a single-use license, meaning you can use the template on one website or project only. Using the template on additional websites would require purchasing additional licenses.',
},
{
title: 'What if I need help with customization?',
description:
"The templates provides a comprehensive step-by-step guide that walk you through the customization process. If you still have doubts, you can reach out to our customer support team. They can answer your questions, provide guidance on customization, and address any issues you're facing.",
},
]}
>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</FAQs>
<!-- Features3 Widget ************** -->
<Features3
title="Let us know how we can help"
subtitle="We’re here to help and answer any question you might have."
columns={4}
items={[
{
title: 'Phone',
icon: 'tabler:phone',
callToAction: {
target: '_blank',
text: 'Call us',
href: '/',
variant: 'link',
},
},
{
title: 'Email',
icon: 'tabler:mail',
callToAction: {
target: '_blank',
text: 'Write to us',
href: '/',
variant: 'link',
},
},
{
title: 'Chat with sales',
icon: 'tabler:message-circle',
callToAction: {
target: '_blank',
text: 'Start chatting',
href: '/',
variant: 'link',
},
},
{
title: 'Chat with support',
icon: 'tabler:message-circle',
callToAction: {
target: '_blank',
text: 'Start chatting',
href: '/',
variant: 'link',
},
},
]}
/>
<!-- CallToAction Widget *********** -->
<CallToAction
actions={[
{
variant: 'primary',
target: '_blank',
text: 'Get templates',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
},
]}
>
<Fragment slot="title">Be a part of our vision</Fragment>
<Fragment slot="subtitle">
Discover a dynamic work environment, unparalleled growth opportunities, and the chance to make a meaningful
impact.
</Fragment>
</CallToAction>
</Layout>

615
src/pages/index.astro
View File

@@ -1,137 +1,80 @@
---
import Layout from '~/layouts/PageLayout.astro';
import Header from '~/components/widgets/Header.astro';
import Hero from '~/components/widgets/Hero.astro';
import Note from '~/components/widgets/Note.astro';
import Features from '~/components/widgets/Features.astro';
import Features2 from '~/components/widgets/Features2.astro';
import Steps from '~/components/widgets/Steps.astro';
import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Features3 from '~/components/widgets/Features3.astro';
import Testimonials from '~/components/widgets/Testimonials.astro';
import Steps from '~/components/widgets/Steps.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import { getPermalink } from '~/utils/permalinks';
import HomePageImage from '../assets/images/richardbergsma.png'
import MicrosoftAssociate from '../assets/images/microsoft-certified-associate-badge.webp'
import NexthinkAssociate from '../assets/images/NexthinkAssociate.webp'
import NexthinkAdministrator from '../assets/images/NexthinkAdministrator.webp'
const metadata = {
title: 'AstroWind — Free template for creating websites with Astro + Tailwind CSS',
ignoreTitleTemplate: true,
title: 'About me',
};
---
<Layout metadata={metadata}>
<!-- Hero Widget ******************* -->
<Fragment slot="announcement"></Fragment>
<Fragment slot="header">
<Header
links={[
{ text: 'Home', href: '#' },
{ text: 'About', href: '#about' },
{ text: 'Resume', href: '#resume' },
{ text: 'Porfolio', href: '#porfolio' },
{ text: 'Blog', href: '#blog' },
]}
actions={[
{
text: 'Contact me',
href: getPermalink('/contact#form'),
},
]}
isSticky
showToggleTheme
/>
</Fragment>
<!-- Hero2 Widget ******************* -->
<Hero
actions={[
{
variant: 'primary',
text: 'Get template',
href: 'https://github.com/onwidget/astrowind',
target: '_blank',
icon: 'tabler:download',
},
{ text: 'Learn more', href: '#features' },
]}
image={{ src: '~/assets/images/hero-image.png', alt: 'AstroWind Hero Image' }}
id="hero"
title="Richard Bergsma"
actions={[{ variant: 'primary', text: 'Contact me', href: getPermalink('/contact#form') }]}
>
<Fragment slot="title">
Free template for <span class="hidden xl:inline">creating websites with</span>
<span class="text-accent dark:text-white highlight"> Astro 5.0</span> + Tailwind CSS
</Fragment>
<Fragment slot="subtitle">
<span class="hidden sm:inline">
<span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 5.0
+ Tailwind CSS.</span
>
<span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span>
Suitable for Startups, Small Business, SaaS websites, Professional Portfolios, Marketing websites, Landing Pages &
Blogs.
<strong>Turning automation into action, one workflow at a time.</strong> </br>I streamline processes with Power Automate, build smart chatbots in Copilot Studio, and connect the dots with seamless API integrations—all while leveling up my Python skills.
</Fragment>
</Hero>
<!-- Note Widget ******************* -->
<Note />
<!-- Features Widget *************** -->
<Features
id="features"
tagline="Features"
title="What you get with AstroWind"
subtitle="One of the most professional and comprehensive templates currently on the market. Most starred & forked Astro theme in 2022, 2023 and 2024."
items={[
{
title: 'Astro + Tailwind CSS Integration',
description:
'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
icon: 'tabler:brand-tailwind',
},
{
title: 'Ready-to-use Components',
description:
'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
icon: 'tabler:components',
},
{
title: 'Best Practices',
description:
'Creating secure, efficient, and user-friendly websites that deliver exceptional experiences and lasting value.',
icon: 'tabler:list-check',
},
{
title: 'Excellent Page Speed',
description:
'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
icon: 'tabler:rocket',
},
{
title: 'Search Engine Optimization (SEO)',
description:
"SEO lies in its ability to enhance a website's visibility, driving organic traffic and enabling it to reach a wider audience.",
icon: 'tabler:arrows-right-left',
},
{
title: 'Open to new ideas and contributions',
description:
'Embracing a culture that is open to new ideas and contributions is integral fostering innovation, collaboration, and a dynamic user experience.',
icon: 'tabler:bulb',
},
]}
/>
<!-- Content Widget **************** -->
<Content
isReversed
tagline="Inside template"
title="AstroWind's Blueprint: Fun Meets Functionality!"
id="about"
columns={2}
items={[
{
title: 'Built on top of Astro 5.0',
description:
'Benefiting from the performance and developer-friendly features of this modern static site generator.',
},
{
title: 'Styled using Tailwind CSS',
description:
'Facilitating rapid design and consistent styling with this highly popular utility-first CSS framework.',
},
{
title: 'Cross-browser compatibility',
description:
'Ensure your website looks and functions consistently across various web browsers, delivering a seamless experience to all users.',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
src: HomePageImage,
alt: 'Colorful Image',
loading: 'eager',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Building on modern foundations</h3>
Gain a competitive advantage by incorporating industry leading practices
<h2 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">About me</h2>
With over 13 years of IT experience, I am a passionate and proficient Microsoft 365 professional who thrives on delivering optimal solutions for complex cloud and on-premise systems. As the Microsoft 365 expert in my current position, I manage the Microsoft 365 environment, communicate new features, and support colleagues with 3rd line requests. I also leverage my skills in Power Automate, Power Apps, and Nexthink to enhance automation and efficiency across various areas.</br></br>
Previously, I worked as a cloud systems and application engineer, where I set up and managed Microsoft 365 and SharePoint Online environments, migrated from different mail systems to Microsoft 365, and implemented SCCM for more automation. I also founded Bergsma IT, a company that helped small businesses migrate to the cloud and created and managed WordPress websites. I hold Microsoft certifications in Teams Administration, Azure Fundamentals, and Modern Desktop Administration. My mission is to drive IT excellence for organizational success by optimizing cloud solutions and providing outstanding technical support.
</Fragment>
<Fragment slot="bg">
@@ -139,261 +82,295 @@ const metadata = {
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isAfterContent
items={[
{
title: 'High level of customization',
description: `Tailor the template effortlessly to match your brand's identity and requirements, making your website distinct and saving you time.`,
},
{
title: 'Multiple layout possibilities',
description:
'Explore various layout options to find the structure that best presents your content, enhancing user engagement and navigation.',
},
{
title: 'Fully responsive design',
description:
"Ensure your website's optimal performance on various devices and screen sizes, providing a consistent and enjoyable user experience.",
},
{
title: 'Integration of media',
description:
'Seamlessly incorporate images, videos, and multimedia elements that enhance your content and engage visitors effectively.',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1600132806370-bf17e65e942f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2194&q=80',
alt: 'Blueprint Image',
}}
>
<Fragment slot="content">Ensure your online presence truly represents you.</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isReversed
isAfterContent
items={[
{
title: 'Enhanced user engagement',
description:
'Captivate your audience with interactive elements, intuitive navigation, and visually appealing layouts, encouraging longer visits.',
},
{
title: 'Continuous improvement',
description:
'Ensure your website stays aligned with the latest trends and technologies through regular updates and enhancements.',
},
{
title: 'Time and resource efficiency',
description:
'Skip the time-consuming process of building a website from scratch and launch your online presence sooner with AstroWind.',
},
{
title: 'Community support',
description: `Join the growing AstroWind community for insights, resources, and assistance, ensuring you're never alone on your web development journey.`,
},
]}
image={{
src: 'https://images.unsplash.com/photo-1611462985358-60d3498e0364?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Astronauts Image',
}}
>
<Fragment slot="content">Designed to foster growth and success.</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Steps Widget ****************** -->
<Steps
title="Get your dream website up and running in no time with AstroWind."
id="resume"
title="Work experience"
items={[
{
title: 'Step 1: <span class="font-medium">Download</span>',
description:
"Kickstart with GitHub! Either fork the AstroWind template or simply click 'Use this template'. Your canvas awaits, ready for your digital masterpiece. In just a few clicks, you've already set the foundation.",
icon: 'tabler:package',
title:
'IT Systems and Automation Manager<br /> <span class="font-normal">COFRA Holding C.V. - Amsterdam</span> <br /> <span class="text-sm font-normal">02-2025 - Present</span>',
description: `As the IT Systems and Automation Manager at COFRA Holding, I focus on driving automation through Power Automate and building advanced chatbots in Copilot Studio to streamline processes and enhance operational efficiency. My work involves integrating APIs to create seamless workflows, automating recurring tasks, and supporting digital transformation initiatives. In addition to my automation responsibilities, I continue to manage our Microsoft 365 environment, support 3rd line requests, develop Power Apps, oversee our Nexthink environment, manage TOPdesk, and contribute to various IT projects as needed.`,
icon: 'tabler:automation',
},
{
title: 'Step 2: <span class="font-medium">Add content</span>',
description:
"Pour your vision into it. Add images, text, and all that jazz to breathe life into your digital space. Remember, it's the content that tells your story, so make it captivating.",
icon: 'tabler:letter-case',
title:
'Office 365 Professional <br /> <span class="font-normal">COFRA Holding C.V. - Amsterdam</span> <br /> <span class="text-sm font-normal">08-2020 - 01-2025</span>',
description: `As the Microsoft 365 expert within COFRA Holding, I ensure that the environment is managed, new features are communicated, and colleagues are supported with 3rd line requests. New requests that come to me range from new Power Automate flows to Power Apps. Additionally, I focus on the setup and management of our Nexthink environment, manage TopDesk, and support other projects as required. Lately, I’ve been concentrating on leveraging Power Automate to enhance automation across various areas.`,
icon: 'tabler:brand-office',
},
]}
classes={{ container: 'max-w-3xl' }}
/>
<!-- Steps Widget ****************** -->
<Steps
id="resume"
title="Education"
items={[
{
title: `Master of Fine Arts in Graphic Design <br /> <span class="font-normal">New York University's School of Design</span> <br /> <span class="text-sm font-normal">2018 - 2020</span>`,
icon: 'tabler:school',
},
{
title: 'Step 3: <span class="font-medium">Customize styles</span>',
description:
'Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right. Your unique flair, amplified by AstroWind! Precision in design ensures a seamless user experience.',
icon: 'tabler:paint',
title: `Bachelor of Arts in Graphic Design <br /> <span class="font-normal">New York University's School of Design</span> <br /> <span class="text-sm font-normal">2014 - 2018</span>`,
icon: 'tabler:school',
},
]}
classes={{ container: 'max-w-3xl' }}
/>
<!-- Features3 Widget ************** -->
<Features3
title="Skills"
subtitle="Discover the proficiencies that allow me to bring imagination to life through design."
columns={3}
defaultIcon="tabler:point-filled"
items={[
{
title: 'Graphic design',
description: 'Proficient in crafting visually appealing designs that convey messages effectively.',
},
{
title: 'Ready!',
icon: 'tabler:check',
title: 'Branding and identity',
description: 'Skilled at developing cohesive brand identities, including logos and brand guidelines.',
},
{
title: 'User-centered design',
description: 'Experienced in creating user-friendly interfaces and optimizing user experiences.',
},
{
title: 'Adobe Creative Suite',
description: 'Skilled in using Photoshop, Illustrator, and InDesign to create and edit visual elements.',
},
{
title: 'Typography',
description: 'Adept in selecting and manipulating typefaces to enhance design aesthetics.',
},
{
title: 'Color theory',
description: 'Proficient in using color to evoke emotions and enhance visual harmony.',
},
{
title: 'Print and digital design',
description: 'Knowledgeable in designing for both print materials and digital platforms.',
},
{
title: 'Attention to detail',
description: 'Diligent in maintaining precision and quality in all design work.',
},
{
title: 'Adaptability',
description: 'Quick to adapt to new design trends, technologies, and client preferences.',
},
]}
/>
<!-- Content Widget **************** -->
<Content
id="porfolio"
title="Elevating visual narratives"
subtitle="Embark on a design journey that surpasses pixels, entering a realm of imagination. Explore my portfolio, where passion and creativity converge to shape enthralling visual narratives."
isReversed
items={[
{
title: 'Description:',
description:
'Developed a comprehensive brand identity for a tech startup, Tech Innovators, specializing in disruptive innovations. The goal was to convey a modern yet approachable image that resonated with both corporate clients and tech enthusiasts.',
},
{
title: 'Role:',
description:
'Led the entire branding process from concept to execution. Created a dynamic logo that symbolized innovation, selected a vibrant color palette, and I designed corporate stationery, website graphics, and social media assets.',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1616198814651-e71f960c3180?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80',
alt: 'Steps image',
src: 'https://images.unsplash.com/photo-1658248165252-71e116af1b34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=928&q=80',
alt: 'Tech Design Image',
}}
callToAction={{
target: '_blank',
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
}}
/>
<!-- Features2 Widget ************** -->
<Features2
title="Most used widgets"
subtitle="Provides frequently used components for building websites using Tailwind CSS"
tagline="Components"
items={[
{
title: 'Headers',
description: "Ever tried driving without GPS? Boom! That's why websites need headers for direction.",
icon: 'flat-color-icons:template',
},
{
title: 'Heros',
description:
"Picture a superhero landing – epic, right? That's the job of a Hero section, making grand entrances!",
icon: 'flat-color-icons:gallery',
},
{
title: 'Features',
description:
'Where websites strut their stuff and show off superpowers. No holding back on the bragging rights here!',
icon: 'flat-color-icons:approval',
},
{
title: 'Content',
description:
"Dive into the meat and potatoes of a site; without it, you'd just be window shopping. Content is king.",
icon: 'flat-color-icons:document',
},
{
title: 'Call-to-Action',
description:
'That enthusiastic friend who\'s always urging, "Do it! Do it!"? Yeah, that\'s this button nudging you towards adventure.',
icon: 'flat-color-icons:advertising',
},
{
title: 'Pricing',
description: 'Behold the dessert menu of the website world. Tempting choices await, can you resist?',
icon: 'flat-color-icons:currency-exchange',
},
{
title: 'Testimonial',
description: 'Step into the gossip corner! Here, other visitors spill the beans and share the juicy details.',
icon: 'flat-color-icons:voice-presentation',
},
{
title: 'Contact',
description:
'Like a digital mailbox, but faster! Drop a line, ask a question, or send a virtual high-five. Ding! Message in.',
icon: 'flat-color-icons:business-contact',
},
{
title: 'Footers',
description: "The footer's like the credits of a movie but sprinkled with easter eggs. Time to hunt!",
icon: 'flat-color-icons:database',
},
]}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
Project 1: <br /><span class="text-2xl">Brand identity for tech innovators</span>
</h3>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Features2>
</Content>
<!-- HighlightedPosts Widget ******* -->
<!-- Content Widget **************** -->
<BlogLatestPosts
title="Find out more content in our Blog"
information={`The blog is used to display AstroWind documentation.
Each new article will be an important step that you will need to know to be an expert in creating a website using Astro + Tailwind CSS.
Astro is a very interesting technology. Thanks.
`}
/>
<!-- FAQs Widget ******************* -->
<FAQs
title="Frequently Asked Questions"
subtitle="Dive into the following questions to gain insights into the powerful features that AstroWind offers and how it can elevate your web development journey."
tagline="FAQs"
classes={{ container: 'max-w-6xl' }}
<Content
isReversed
isAfterContent={true}
items={[
{
title: 'Why AstroWind?',
title: 'Description:',
description:
"Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.",
'Designed a captivating event poster for an art and music festival, "ArtWave Fusion," aiming to showcase the synergy between visual art and music genres.',
},
{
title: 'What do I need to start?',
description:
'Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds. Many say exploration is part of our destiny, but it’s actually our duty to future generations.',
},
{
title: 'How to install the Astro + Tailwind CSS template?',
description:
"Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.",
},
{
title: "What's something that you don't understand?",
description:
"A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.",
},
{
title: 'What is something that you would like to try again?',
description:
"A business big enough that it could be listed on the NASDAQ goes belly up. Disappears! It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.",
},
{
title: 'If you could only ask one question to each person you meet, what would that question be?',
description:
"This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.",
title: 'Role:',
description: `Translated the festival's creative theme into a visually striking poster. Used bold typography, vibrant colors, and abstract elements to depict the fusion of art and music. Ensured the design captured the festival's vibrant atmosphere.`,
},
]}
/>
image={{
src: 'https://images.unsplash.com/photo-1619983081563-430f63602796?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Art and Music Poster Image',
}}
callToAction={{
target: '_blank',
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
Project 2: <br /><span class="text-2xl">Event poster for art & music festival</span>
</h3>
</Fragment>
<!-- Stats Widget ****************** -->
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<Stats
stats={[
{ title: 'Downloads', amount: '132K' },
{ title: 'Stars', amount: '24.8K' },
{ title: 'Forks', amount: '10.3K' },
{ title: 'Users', amount: '48.4K' },
<!-- Content Widget **************** -->
<Content
isReversed
isAfterContent={true}
items={[
{
title: 'Description:',
description: `Redesigned the e-commerce website for an eco-conscious fashion brand, GreenVogue. The objective was to align the brand's online presence with its sustainable ethos and improve user experience.`,
},
{
title: 'Role:',
description: `Conducted a thorough analysis of the brand's values and customer base to inform the design direction. Created a visually appealing interface with intuitive navigation, highlighting sustainable materials, and integrating a user-friendly shopping experience.`,
},
]}
image={{
src: 'https://plus.unsplash.com/premium_photo-1683288295841-782fa47e4770?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
alt: 'Fashion e-commerce Image',
}}
callToAction={{
target: '_blank',
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
Project 3: <br /><span class="text-2xl">E-commerce website redesign for fashion brand</span>
</h3>
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Testimonials Widget *********** -->
<Testimonials
title="Certifications"
subtitle="Where Knowledge Meets Recognition"
testimonials={[
{
name: 'Certified Nexthink Administrator',
description: 'Earning the Nexthink Platform Administration certification demonstrates proficiency in configuring and customizing the Nexthink Platform to meet organizational needs. ',
linkUrl: 'https://learn.nexthink.com/courses/nexthink-platform-administration',
image: {
src: NexthinkAdministrator,
alt: 'Nexthink Administrator badge',
},
},
{
name: 'Certified Nexthink Associate',
description: 'Earning the Nexthink Infinity Fundamentals certification validates your understanding of the Nexthink Infinity platform and its role in enhancing digital employee experience.',
linkUrl: 'https://learn.nexthink.com/courses/nexthink-infinity-fundamentals',
image: {
src: NexthinkAssociate,
alt: 'Nexthink Associate badge',
},
},
{
name: 'Microsoft 365 Certified: Teams Administrator Associate',
description: 'Earning the Microsoft 365 Certified: Teams Administrator Associate certification demonstrates your ability to plan, deploy, configure, and manage Microsoft Teams to facilitate efficient collaboration and communication within a Microsoft 365 environment.',
linkUrl: 'https://learn.microsoft.com/en-us/credentials/certifications/m365-teams-administrator-associate/?practice-assessment-type=certification',
image: {
src: MicrosoftAssociate,
alt: 'Microsoft Certified Associate badge',
},
},
{
name: 'Certified Nexthink Administrator',
description: 'Earning the Nexthink Platform Administration certification demonstrates proficiency in configuring and customizing the Nexthink Platform to meet organizational needs. ',
linkUrl: 'https://learn.nexthink.com/courses/nexthink-platform-administration',
image: {
src: 'https://www.365devnet.nl/images/NexthinkAdministrator.webp',
alt: 'Nexthink Administrator badge',
},
},
{
name: 'Certified Nexthink Administrator',
description: 'Earning the Nexthink Platform Administration certification demonstrates proficiency in configuring and customizing the Nexthink Platform to meet organizational needs. ',
linkUrl: 'https://learn.nexthink.com/courses/nexthink-platform-administration',
image: {
src: 'https://www.365devnet.nl/images/NexthinkAdministrator.webp',
alt: 'Nexthink Administrator badge',
},
},
{
name: 'Certified Nexthink Administrator',
description: 'Earning the Nexthink Platform Administration certification demonstrates proficiency in configuring and customizing the Nexthink Platform to meet organizational needs. ',
linkUrl: 'https://learn.nexthink.com/courses/nexthink-platform-administration',
image: {
src: 'https://www.365devnet.nl/images/NexthinkAdministrator.webp',
alt: 'Nexthink Administrator badge',
},
},
]}
/>
<!-- CallToAction Widget *********** -->
<CallToAction
title="Let's create together"
subtitle="Ready to transform your vision into captivating designs?"
actions={[
{
variant: 'primary',
text: 'Get template',
href: 'https://github.com/onwidget/astrowind',
target: '_blank',
icon: 'tabler:download',
text: 'Contact me',
href: getPermalink('/contact#form'),
},
]}
>
<Fragment slot="title">
Astro&nbsp;+&nbsp;<br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
</Fragment>
/>
<Fragment slot="subtitle">
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
waste more time! :P
<!-- BlogLatestPost Widget **************** -->
<BlogLatestPosts
id="blog"
title="Explore my insightful articles on my blog"
information={`Dive into a realm of design wisdom and creative inspiration, where you'll find invaluable insights, practical tips, and captivating narratives that elevate and enrich your creative journey.`}
>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</CallToAction>
</BlogLatestPosts>
</Layout>

399
src/pages/index.astro.old Normal file
View File

@@ -0,0 +1,399 @@
---
import Layout from '~/layouts/PageLayout.astro';
import Hero from '~/components/widgets/Hero.astro';
import Note from '~/components/widgets/Note.astro';
import Features from '~/components/widgets/Features.astro';
import Features2 from '~/components/widgets/Features2.astro';
import Steps from '~/components/widgets/Steps.astro';
import Content from '~/components/widgets/Content.astro';
import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = {
title: 'AstroWind — Free template for creating websites with Astro + Tailwind CSS',
ignoreTitleTemplate: true,
};
---
<Layout metadata={metadata}>
<!-- Hero Widget ******************* -->
<Hero
actions={[
{
variant: 'primary',
text: 'Get template',
href: 'https://github.com/onwidget/astrowind',
target: '_blank',
icon: 'tabler:download',
},
{ text: 'Learn more', href: '#features' },
]}
image={{ src: '~/assets/images/hero-image.png', alt: 'AstroWind Hero Image' }}
>
<Fragment slot="title">
Free template for <span class="hidden xl:inline">creating websites with</span>
<span class="text-accent dark:text-white highlight"> Astro 5.0</span> + Tailwind CSS
</Fragment>
<Fragment slot="subtitle">
<span class="hidden sm:inline">
<span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 5.0
+ Tailwind CSS.</span
>
<span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span>
Suitable for Startups, Small Business, SaaS websites, Professional Portfolios, Marketing websites, Landing Pages &
Blogs.
</Fragment>
</Hero>
<!-- Note Widget ******************* -->
<Note />
<!-- Features Widget *************** -->
<Features
id="features"
tagline="Features"
title="What you get with AstroWind"
subtitle="One of the most professional and comprehensive templates currently on the market. Most starred & forked Astro theme in 2022, 2023 and 2024."
items={[
{
title: 'Astro + Tailwind CSS Integration',
description:
'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
icon: 'tabler:brand-tailwind',
},
{
title: 'Ready-to-use Components',
description:
'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
icon: 'tabler:components',
},
{
title: 'Best Practices',
description:
'Creating secure, efficient, and user-friendly websites that deliver exceptional experiences and lasting value.',
icon: 'tabler:list-check',
},
{
title: 'Excellent Page Speed',
description:
'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
icon: 'tabler:rocket',
},
{
title: 'Search Engine Optimization (SEO)',
description:
"SEO lies in its ability to enhance a website's visibility, driving organic traffic and enabling it to reach a wider audience.",
icon: 'tabler:arrows-right-left',
},
{
title: 'Open to new ideas and contributions',
description:
'Embracing a culture that is open to new ideas and contributions is integral fostering innovation, collaboration, and a dynamic user experience.',
icon: 'tabler:bulb',
},
]}
/>
<!-- Content Widget **************** -->
<Content
isReversed
tagline="Inside template"
title="AstroWind's Blueprint: Fun Meets Functionality!"
items={[
{
title: 'Built on top of Astro 5.0',
description:
'Benefiting from the performance and developer-friendly features of this modern static site generator.',
},
{
title: 'Styled using Tailwind CSS',
description:
'Facilitating rapid design and consistent styling with this highly popular utility-first CSS framework.',
},
{
title: 'Cross-browser compatibility',
description:
'Ensure your website looks and functions consistently across various web browsers, delivering a seamless experience to all users.',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Colorful Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Building on modern foundations</h3>
Gain a competitive advantage by incorporating industry leading practices
</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isAfterContent
items={[
{
title: 'High level of customization',
description: `Tailor the template effortlessly to match your brand's identity and requirements, making your website distinct and saving you time.`,
},
{
title: 'Multiple layout possibilities',
description:
'Explore various layout options to find the structure that best presents your content, enhancing user engagement and navigation.',
},
{
title: 'Fully responsive design',
description:
"Ensure your website's optimal performance on various devices and screen sizes, providing a consistent and enjoyable user experience.",
},
{
title: 'Integration of media',
description:
'Seamlessly incorporate images, videos, and multimedia elements that enhance your content and engage visitors effectively.',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1600132806370-bf17e65e942f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2194&q=80',
alt: 'Blueprint Image',
}}
>
<Fragment slot="content">Ensure your online presence truly represents you.</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isReversed
isAfterContent
items={[
{
title: 'Enhanced user engagement',
description:
'Captivate your audience with interactive elements, intuitive navigation, and visually appealing layouts, encouraging longer visits.',
},
{
title: 'Continuous improvement',
description:
'Ensure your website stays aligned with the latest trends and technologies through regular updates and enhancements.',
},
{
title: 'Time and resource efficiency',
description:
'Skip the time-consuming process of building a website from scratch and launch your online presence sooner with AstroWind.',
},
{
title: 'Community support',
description: `Join the growing AstroWind community for insights, resources, and assistance, ensuring you're never alone on your web development journey.`,
},
]}
image={{
src: 'https://images.unsplash.com/photo-1611462985358-60d3498e0364?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Astronauts Image',
}}
>
<Fragment slot="content">Designed to foster growth and success.</Fragment>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>
<!-- Steps Widget ****************** -->
<Steps
title="Get your dream website up and running in no time with AstroWind."
items={[
{
title: 'Step 1: <span class="font-medium">Download</span>',
description:
"Kickstart with GitHub! Either fork the AstroWind template or simply click 'Use this template'. Your canvas awaits, ready for your digital masterpiece. In just a few clicks, you've already set the foundation.",
icon: 'tabler:package',
},
{
title: 'Step 2: <span class="font-medium">Add content</span>',
description:
"Pour your vision into it. Add images, text, and all that jazz to breathe life into your digital space. Remember, it's the content that tells your story, so make it captivating.",
icon: 'tabler:letter-case',
},
{
title: 'Step 3: <span class="font-medium">Customize styles</span>',
description:
'Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right. Your unique flair, amplified by AstroWind! Precision in design ensures a seamless user experience.',
icon: 'tabler:paint',
},
{
title: 'Ready!',
icon: 'tabler:check',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1616198814651-e71f960c3180?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80',
alt: 'Steps image',
}}
/>
<!-- Features2 Widget ************** -->
<Features2
title="Most used widgets"
subtitle="Provides frequently used components for building websites using Tailwind CSS"
tagline="Components"
items={[
{
title: 'Headers',
description: "Ever tried driving without GPS? Boom! That's why websites need headers for direction.",
icon: 'flat-color-icons:template',
},
{
title: 'Heros',
description:
"Picture a superhero landing – epic, right? That's the job of a Hero section, making grand entrances!",
icon: 'flat-color-icons:gallery',
},
{
title: 'Features',
description:
'Where websites strut their stuff and show off superpowers. No holding back on the bragging rights here!',
icon: 'flat-color-icons:approval',
},
{
title: 'Content',
description:
"Dive into the meat and potatoes of a site; without it, you'd just be window shopping. Content is king.",
icon: 'flat-color-icons:document',
},
{
title: 'Call-to-Action',
description:
'That enthusiastic friend who\'s always urging, "Do it! Do it!"? Yeah, that\'s this button nudging you towards adventure.',
icon: 'flat-color-icons:advertising',
},
{
title: 'Pricing',
description: 'Behold the dessert menu of the website world. Tempting choices await, can you resist?',
icon: 'flat-color-icons:currency-exchange',
},
{
title: 'Testimonial',
description: 'Step into the gossip corner! Here, other visitors spill the beans and share the juicy details.',
icon: 'flat-color-icons:voice-presentation',
},
{
title: 'Contact',
description:
'Like a digital mailbox, but faster! Drop a line, ask a question, or send a virtual high-five. Ding! Message in.',
icon: 'flat-color-icons:business-contact',
},
{
title: 'Footers',
description: "The footer's like the credits of a movie but sprinkled with easter eggs. Time to hunt!",
icon: 'flat-color-icons:database',
},
]}
>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Features2>
<!-- HighlightedPosts Widget ******* -->
<BlogLatestPosts
title="Find out more content in our Blog"
information={`The blog is used to display AstroWind documentation.
Each new article will be an important step that you will need to know to be an expert in creating a website using Astro + Tailwind CSS.
Astro is a very interesting technology. Thanks.
`}
/>
<!-- FAQs Widget ******************* -->
<FAQs
title="Frequently Asked Questions"
subtitle="Dive into the following questions to gain insights into the powerful features that AstroWind offers and how it can elevate your web development journey."
tagline="FAQs"
classes={{ container: 'max-w-6xl' }}
items={[
{
title: 'Why AstroWind?',
description:
"Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.",
},
{
title: 'What do I need to start?',
description:
'Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds. Many say exploration is part of our destiny, but it’s actually our duty to future generations.',
},
{
title: 'How to install the Astro + Tailwind CSS template?',
description:
"Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.",
},
{
title: "What's something that you don't understand?",
description:
"A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.",
},
{
title: 'What is something that you would like to try again?',
description:
"A business big enough that it could be listed on the NASDAQ goes belly up. Disappears! It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.",
},
{
title: 'If you could only ask one question to each person you meet, what would that question be?',
description:
"This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.",
},
]}
/>
<!-- Stats Widget ****************** -->
<Stats
stats={[
{ title: 'Downloads', amount: '132K' },
{ title: 'Stars', amount: '24.8K' },
{ title: 'Forks', amount: '10.3K' },
{ title: 'Users', amount: '48.4K' },
]}
/>
<!-- CallToAction Widget *********** -->
<CallToAction
actions={[
{
variant: 'primary',
text: 'Get template',
href: 'https://github.com/onwidget/astrowind',
target: '_blank',
icon: 'tabler:download',
},
]}
>
<Fragment slot="title">
Astro&nbsp;+&nbsp;<br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
</Fragment>
<Fragment slot="subtitle">
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
waste more time! :P
</Fragment>
</CallToAction>
</Layout>

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

@@ -1,41 +0,0 @@
---
import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = {
title: 'Click-through Landing Page Demo',
};
---
<Layout metadata={metadata}>
<!-- Hero2 Widget ******************* -->
<Hero2
tagline="Click-through Demo"
title="Click-through Landing Page: The Perfect Bridge to Conversion!"
subtitle="Learn how to design a Click-Through Landing Page that seamlessly guides visitors to your main offer."
actions={[
{ variant: 'primary', text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' },
{ text: 'Learn more', href: '#' },
]}
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',
}}
/>
<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!"
actions={[
{
variant: 'primary',
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
},
]}
/>
</Layout>

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

@@ -1,41 +0,0 @@
---
import Layout from '~/layouts/LandingLayout.astro';
import Hero from '~/components/widgets/Hero.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = {
title: 'Lead Generation Landing Page Demo',
};
---
<Layout metadata={metadata}>
<!-- Hero2 Widget ******************* -->
<Hero
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.)"
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',
}}
/>
<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!"
actions={[
{
variant: 'primary',
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
},
]}
/>
</Layout>

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

@@ -1,41 +0,0 @@
---
import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = {
title: 'Pre-Launch Landing Page',
};
---
<Layout metadata={metadata}>
<!-- Hero2 Widget ******************* -->
<Hero2
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."
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',
}}
/>
<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!"
actions={[
{
variant: 'primary',
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
},
]}
/>
</Layout>

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

@@ -1,41 +0,0 @@
---
import Layout from '~/layouts/LandingLayout.astro';
import Hero from '~/components/widgets/Hero.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = {
title: 'Product Details Landing Page Demo',
};
---
<Layout metadata={metadata}>
<!-- Hero2 Widget ******************* -->
<Hero
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."
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',
}}
/>
<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!"
actions={[
{
variant: 'primary',
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
},
]}
/>
</Layout>

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

@@ -1,41 +0,0 @@
---
import Layout from '~/layouts/LandingLayout.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const metadata = {
title: 'Sales Landing Page Demo',
};
---
<Layout metadata={metadata}>
<!-- Hero2 Widget ******************* -->
<Hero2
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."
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',
}}
/>
<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!"
actions={[
{
variant: 'primary',
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
},
]}
/>
</Layout>

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

@@ -1,41 +0,0 @@
---
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."
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',
}}
/>
<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!"
actions={[
{
variant: 'primary',
text: 'Download Template',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:download',
},
]}
/>
</Layout>

3
src/types.d.ts vendored
View File

@@ -157,8 +157,9 @@ export interface Testimonial {
title?: string;
testimonial?: string;
name?: string;
job?: string;
description?: string;
image?: string | unknown;
linkUrl?: string;
}
export interface Input {