Epitech/ratrapage_T-WEB
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 1 Wiki Activity

feat: astro template for front and fix login(#13)
All checks were successful
Build Docker Image Front / run (push) Successful in 25s
Details
Build Docker Image Back / run (push) Successful in 25s
Details

Browse Source 
Reviewed-on: #13
Co-authored-by: Clement <c.boesmier@aptatio.com>
Co-committed-by: Clement <c.boesmier@aptatio.com>
This commit is contained in:
Clement
2024-05-21 10:07:56 +02:00
committed by Clement
parent 57a57c63ff
commit 1593fa3493
145 changed files with 14966 additions and 2182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
front/src/pages/404.astro Normal file
View File

@ -0,0 +1,24 @@
---
import Layout from 'layouts/Layout.astro';
import { getHomePermalink } from 'utils/permalinks';
const title = `Error 404`;
---
<Layout metadata={{ title }}>
<section class="flex items-center h-full p-16">
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
<div class="max-w-md text-center">
<h2 class="mb-8 font-bold text-9xl">
<span class="sr-only">Error</span>
<span class="text-primary">404</span>
</h2>
<p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
<p class="mt-4 mb-8 text-lg text-muted dark:text-slate-400">
But dont worry, you can find plenty of other things on our homepage.
</p>
<a rel="noopener noreferrer" href={getHomePermalink()} class="btn ml-4">Back to homepage</a>
</div>
</div>
</section>
</Layout>

52
front/src/pages/[...blog]/[...page].astro Normal file
View File

@ -0,0 +1,52 @@
---
import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
import Layout from 'layouts/PageLayout.astro';
import BlogList from 'components/blog/List.astro';
import Headline from 'components/blog/Headline.astro';
import Pagination from 'components/blog/Pagination.astro';
// import PostTags from "~/components/blog/Tags.astro";
import { blogListRobots, getStaticPathsBlogList } from 'utils/blog';
export const prerender = true;
export const getStaticPaths = (async ({ paginate }) => {
return await getStaticPathsBlogList({ paginate });
}) satisfies GetStaticPaths;
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const { page } = Astro.props as Props;
const currentPage = page.currentPage ?? 1;
// const allCategories = await findCategories();
// const allTags = await findTags();
const metadata = {
title: `Blog${currentPage > 1 ? ` — Page ${currentPage}` : ''}`,
robots: {
index: blogListRobots?.index && currentPage === 1,
follow: blogListRobots?.follow,
},
openGraph: {
type: 'blog',
},
};
---
<Layout metadata={metadata}>
<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-4xl">
<Headline
subtitle="A statically generated blog example with news, tutorials, resources and other interesting content related to AstroWind"
>
The Blog
</Headline>
<BlogList posts={page.data} />
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
<!--
<PostTags tags={allCategories} class="mb-2" title="Search by Categories:" isCategory />
<PostTags tags={allTags} title="Search by Tags:" />
-->
</section>
</Layout>

37
front/src/pages/[...blog]/[category]/[...page].astro Normal file
View File

@ -0,0 +1,37 @@
---
import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
import { blogCategoryRobots, getStaticPathsBlogCategory } from 'utils/blog';
import Layout from 'layouts/PageLayout.astro';
import BlogList from 'components/blog/List.astro';
import Headline from 'components/blog/Headline.astro';
import Pagination from 'components/blog/Pagination.astro';
export const prerender = true;
export const getStaticPaths = (async ({ paginate }) => {
return await getStaticPathsBlogCategory({ paginate });
}) satisfies GetStaticPaths;
type Props = InferGetStaticPropsType<typeof getStaticPaths> & { category: Record<string, string> };
const { page, category } = Astro.props as Props;
const currentPage = page.currentPage ?? 1;
const metadata = {
title: `Category '${category.title}' ${currentPage > 1 ? ` — Page ${currentPage}` : ''}`,
robots: {
index: blogCategoryRobots?.index,
follow: blogCategoryRobots?.follow,
},
};
---
<Layout metadata={metadata}>
<section class="px-4 md:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-4xl">
<Headline>{category.title}</Headline>
<BlogList posts={page.data} />
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
</section>
</Layout>

37
front/src/pages/[...blog]/[tag]/[...page].astro Normal file
View File

@ -0,0 +1,37 @@
---
import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
import { blogTagRobots, getStaticPathsBlogTag } from 'utils/blog';
import Layout from 'layouts/PageLayout.astro';
import BlogList from 'components/blog/List.astro';
import Headline from 'components/blog/Headline.astro';
import Pagination from 'components/blog/Pagination.astro';
export const prerender = true;
export const getStaticPaths = (async ({ paginate }) => {
return await getStaticPathsBlogTag({ paginate });
}) satisfies GetStaticPaths;
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const { page, tag } = Astro.props as Props;
const currentPage = page.currentPage ?? 1;
const metadata = {
title: `Posts by tag '${tag.title}'${currentPage > 1 ? ` — Page ${currentPage} ` : ''}`,
robots: {
index: blogTagRobots?.index,
follow: blogTagRobots?.follow,
},
};
---
<Layout metadata={metadata}>
<section class="px-4 md:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-4xl">
<Headline>Tag: {tag.title}</Headline>
<BlogList posts={page.data} />
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
</section>
</Layout>

54
front/src/pages/[...blog]/index.astro Normal file
View File

@ -0,0 +1,54 @@
---
import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
import merge from 'lodash.merge';
import type { ImageMetadata } from 'astro';
import Layout from 'layouts/PageLayout.astro';
import SinglePost from 'components/blog/SinglePost.astro';
import ToBlogLink from 'components/blog/ToBlogLink.astro';
import { getCanonical, getPermalink } from 'utils/permalinks';
import { getStaticPathsBlogPost, blogPostRobots } from 'utils/blog';
import { findImage } from 'utils/images';
import type { MetaData } from 'types';
import RelatedPosts from 'components/blog/RelatedPosts.astro';
export const prerender = true;
export const getStaticPaths = (async () => {
return await getStaticPathsBlogPost();
}) satisfies GetStaticPaths;
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const { post } = Astro.props as Props;
const url = getCanonical(getPermalink(post.permalink, 'post'));
const image = (await findImage(post.image)) as ImageMetadata | string | undefined;
const metadata = merge(
{
title: post.title,
description: post.excerpt,
robots: {
index: blogPostRobots?.index,
follow: blogPostRobots?.follow,
},
openGraph: {
type: 'article',
...(image
? { images: [{ url: image, width: (image as ImageMetadata)?.width, height: (image as ImageMetadata)?.height }] }
: {}),
},
},
{ ...(post?.metadata ? { ...post.metadata, canonical: post.metadata?.canonical || url } : {}) }
) as MetaData;
---
<Layout metadata={metadata}>
<SinglePost post={{ ...post, image: image }} url={url}>
{post.Content ? <post.Content /> : <Fragment set:html={post.content || ''} />}
</SinglePost>
<ToBlogLink />
<RelatedPosts post={post} />
</Layout>

228
front/src/pages/about.astro Normal file
View File

@ -0,0 +1,228 @@
---
import Features2 from 'components/widgets/Features2.astro';
import Features3 from 'components/widgets/Features3.astro';
import Hero from 'components/widgets/Hero.astro';
import Stats from 'components/widgets/Stats.astro';
import Steps2 from 'components/widgets/Steps2.astro';
import Layout from 'layouts/PageLayout.astro';
const metadata = {
title: 'About us',
};
---
<Layout metadata={metadata}>
<!-- Hero Widget ******************* -->
<Hero
tagline="About us"
image={{
src: 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Caos Image',
}}
>
<Fragment slot="title">
Elevate your online presence with our <br />
<span class="text-accent dark:text-white highlight"> Beautiful Website Templates</span>
</Fragment>
<Fragment slot="subtitle">
Donec efficitur, ipsum quis congue luctus, mauris magna convallis mauris, eu auctor nisi lectus non augue. Donec
quis lorem non massa vulputate efficitur ac at turpis. Sed tincidunt ex a nunc convallis, et lobortis nisi tempus.
Suspendisse vitae nisi eget tortor luctus maximus sed non lectus.
</Fragment>
</Hero>
<!-- Stats Widget ****************** -->
<Stats
title="Statistics about us"
stats={[
{ title: 'Offices', amount: '4' },
{ title: 'Employees', amount: '248' },
{ title: 'Templates', amount: '12' },
{ title: 'Awards', amount: '24' },
]}
/>
<!-- Features3 Widget ************** -->
<Features3
title="Our templates"
subtitle="Etiam scelerisque, enim eget vestibulum luctus, nibh mauris blandit nulla, nec vestibulum risus justo ut enim. Praesent lacinia diam et ante imperdiet euismod."
columns={3}
isBeforeContent={true}
items={[
{
title: 'Educational',
description:
'Morbi faucibus luctus quam, sit amet aliquet felis tempor id. Cras augue massa, ornare quis dignissim a, molestie vel nulla.',
icon: 'tabler:template',
},
{
title: 'Interior Design',
description:
'Vivamus porttitor, tortor convallis aliquam pretium, turpis enim consectetur elit, vitae egestas purus erat ac nunc nulla.',
icon: 'tabler:template',
},
{
title: 'Photography',
description:
'Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat. Nulla eleifend nulla id sem fermentum.',
icon: 'tabler:template',
},
]}
/>
<!-- Features3 Widget ************** -->
<Features3
columns={3}
isAfterContent={true}
items={[
{
title: 'E-commerce',
description:
'Rutrum non odio at vehicula. Proin ipsum justo, dignissim in vehicula sit amet, dignissim id quam. Sed ac tincidunt sapien.',
icon: 'tabler:template',
},
{
title: 'Blog',
description:
'Nullam efficitur volutpat sem sed fringilla. Suspendisse et enim eu orci volutpat laoreet ac vitae libero.',
icon: 'tabler:template',
},
{
title: 'Business',
description:
'Morbi et elit finibus, facilisis justo ut, pharetra ipsum. Donec efficitur, ipsum quis congue luctus, mauris magna.',
icon: 'tabler:template',
},
{
title: 'Branding',
description:
'Suspendisse vitae nisi eget tortor luctus maximus sed non lectus. Cras malesuada pretium placerat. Nullam venenatis dolor a ante rhoncus.',
icon: 'tabler:template',
},
{
title: 'Medical',
description:
'Vestibulum malesuada lacus id nibh posuere feugiat. Nam volutpat nulla a felis ultrices, id suscipit mauris congue. In hac habitasse platea dictumst.',
icon: 'tabler:template',
},
{
title: 'Fashion Design',
description:
'Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus.',
icon: 'tabler:template',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
alt: 'Colorful Image',
}}
/>
<!-- Steps2 Widget ****************** -->
<Steps2
title="Our values"
subtitle="Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus. Nulla facilisi. Vestibulum malesuada lacus."
items={[
{
title: 'Customer-centric approach',
description:
'Donec id nibh neque. Quisque et fermentum tortor. Fusce vitae dolor a mauris dignissim commodo. Ut eleifend luctus condimentum.',
},
{
title: 'Constant Improvement',
description:
'Phasellus laoreet fermentum venenatis. Vivamus dapibus pulvinar arcu eget mattis. Fusce eget mauris leo.',
},
{
title: 'Ethical Practices',
description:
'Vestibulum imperdiet libero et lectus molestie, et maximus augue porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
},
]}
/>
<!-- Steps2 Widget ****************** -->
<Steps2
title="Achievements"
subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla."
isReversed={true}
callToAction={{
text: 'See more',
href: '/',
}}
items={[
{
title: 'Global reach',
description: 'Nam malesuada urna in enim imperdiet tincidunt. Phasellus non tincidunt nisi, at elementum mi.',
icon: 'tabler:globe',
},
{
title: 'Positive customer feedback and reviews',
description:
'Cras semper nulla leo, eget laoreet erat cursus sed. Praesent faucibus massa in purus iaculis dictum.',
icon: 'tabler:message-star',
},
{
title: 'Awards and recognition as industry experts',
description:
'Phasellus lacinia cursus velit, eu malesuada magna pretium eu. Etiam aliquet tellus purus, blandit lobortis ex rhoncus vitae.',
icon: 'tabler:award',
},
]}
/>
<!-- Features2 Widget ************** -->
<Features2
title="Our locations"
tagline="Find us"
columns={4}
items={[
{
title: 'EE.UU',
description: '1234 Lorem Ipsum St, 12345, Miami',
},
{
title: 'Spain',
description: '5678 Lorem Ipsum St, 56789, Madrid',
},
{
title: 'Australia',
description: '9012 Lorem Ipsum St, 90123, Sydney',
},
{
title: 'Brazil',
description: '3456 Lorem Ipsum St, 34567, São Paulo',
},
]}
/>
<!-- Features2 Widget ************** -->
<Features2
title="Technical Support"
tagline="Contact us"
columns={2}
items={[
{
title: 'Chat with us',
description:
'Integer luctus laoreet libero, auctor varius purus rutrum sit amet. Ut nec molestie nisi, quis eleifend mi.',
icon: 'tabler:messages',
},
{
title: 'Call us',
description:
'Mauris faucibus finibus orci, in posuere elit viverra non. In hac habitasse platea dictumst. Cras lobortis metus a hendrerit congue.',
icon: 'tabler:headset',
},
]}
/>
</Layout>

14
front/src/pages/account/index.astro
View File

@ -1,5 +1,6 @@
---
import Layout from 'layouts/Layout.astro'
import Layout from 'layouts/PageLayout.astro';
//import Layout from 'layouts/Layout.astro';
import PocketBase from 'pocketbase'
@ -11,11 +12,12 @@ if(!auth.isValid){
return Astro.redirect("/account/login");
}
const metadata = {
title: 'Account',
ignoreTitleTemplate: true,
};
---
<Layout title="Account setting">
<h1>Bonjour {user!.name}</h1>
<div>
<a href="/account/logout">deconnexion</a>
</div>
<Layout metadata={metadata}>
<h1>Bonjour {user!.username}</h1>
</Layout>

45
front/src/pages/account/login.astro
View File

@ -1,8 +1,11 @@
---
import Layout from "layouts/Layout.astro";
import Layout from 'layouts/PageLayout.astro';
//import Layout from 'layouts/Layout.astro';
import AstroUtils from "libs/AstroUtils";
import PocketBase from 'pocketbase'
import ContactUs from 'components/widgets/Contact.astro';
import CallToAction from 'components/widgets/CallToAction.astro';
import Oauth from 'components/Oauth.astro';
const pb = Astro.locals.pb
@ -10,7 +13,8 @@ if(pb.authStore.isValid){
return Astro.redirect("/account")
}
const res = await AstroUtils.wrap(async () => {
await AstroUtils.wrap(async () => {
if (Astro.request.method !== 'POST') {
return
}
@ -29,12 +33,33 @@ const res = await AstroUtils.wrap(async () => {
return Astro.redirect("/account/login");// route('/account/login', {message: 'Compte invalide, valider les identifiants'})) //XXX: comprendre comment le system de route fonctionne
}
})
const metadata = {
title: 'Login',
ignoreTitleTemplate: true,
};
---
<Layout title="login">
<form id="account-creation" method="post" enctype="multipart/form-data">
<input required name="username" placeholder="Pseudo ou email"/>
<input required name="password" type="password" placeholder="Mot de passe" />
<button>Connection</button>
</form>
</Layout>
<Layout metadata={metadata}>
<ContactUs
formid="login"
title="Connexion"
subtitle="Connectez vous pour sauvegardez vos recherche"
button='Connexion'
method='post'
enctype="multipart/form-data"
inputs={[
{
type: 'text',
name: 'username',
label: 'Nom d\'utilisateur ou e-mail',
placeholder: "michel@example.com"
},
{
type: "password",
name: "password"
}
]}
/>
<Oauth/>
</Layout>

4
front/src/pages/account/logout.astro
View File

@ -8,6 +8,6 @@ if(pb.authStore.isValid){
pb.authStore.clear()
}
return Astro.redirect('/account/login')
return Astro.redirect('/')
---
---

60
front/src/pages/account/oauth.astro
View File

@ -1,14 +1,10 @@
---
const pb = Astro.locals.pb
const redirectUrl = Astro.url.protocol + "//" + Astro.url.host + '/account/oauth';
console.log(redirectUrl)
const params = Astro.url.searchParams
const code = params.get('code')
console.log(redirectUrl)
console.log(Astro.request.headers.get('cookie'))
//TODO socké dans les cookies
// load the previously stored provider's data
@ -28,15 +24,18 @@ if (!code) {
// compare the redirect's state param and the stored provider's one
if (provider.state !== params.get('state')) {
console.log(provider.state)
console.log(params.get('state'))
throw "State parameters don't match.";
}
pb.collection('users').authWithOAuth2Code(
let authenticated = false
await pb.collection('users').authWithOAuth2Code(
provider.name,
code,
provider.codeVerifier,
redirectUrl,
// pass optional user create data
{
emailVisibility: false,
}
@ -44,10 +43,17 @@ pb.collection('users').authWithOAuth2Code(
//REDIRECT
console.log("oauth OK !!");
console.log(JSON.stringify(authData, null, 2));
}).catch((err) => {
console.log(pb.authStore.isValid);
console.log(pb.authStore.isValid);
authenticated = true
}).catch((err) => {
console.log("oauth fail !!");
console.log(err);
});
});
if (authenticated) {
return Astro.redirect("/account")
}
---
@ -59,39 +65,5 @@ pb.collection('users').authWithOAuth2Code(
<title>OAuth2 redirect page</title>
</head>
<body>
<pre id="content">Authenticating...</pre>
<script src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js"></script>
<script type="text/javascript">
const pb = new PocketBase("http://127.0.0.1:8090");
const redirectUrl = 'http://127.0.0.1:8090/redirect.html';
// parse the query parameters from the redirected url
const params = (new URL(window.location)).searchParams;
// load the previously stored provider's data
const provider = JSON.parse(localStorage.getItem('provider'))
// compare the redirect's state param and the stored provider's one
if (provider.state !== params.get('state')) {
throw "State parameters don't match.";
}
// authenticate
pb.collection('users').authWithOAuth2Code(
provider.name,
params.get('code'),
provider.codeVerifier,
redirectUrl,
// pass optional user create data
{
emailVisibility: false,
}
).then((authData) => {
document.getElementById('content').innerText = JSON.stringify(authData, null, 2);
}).catch((err) => {
document.getElementById('content').innerText = "Failed to exchange code.\n" + err;
});
</script>
</body>
</html>
</html>

134
front/src/pages/account/register.astro
View File

@ -1,77 +1,97 @@
---
import Layout from 'layouts/Layout.astro';
import Layout from 'layouts/PageLayout.astro';
//import Layout from 'layouts/Layout.astro';
import AstroUtils from 'libs/AstroUtils';
import { getEnv } from 'libs/Env';
import ContactUs from 'components/widgets/Contact.astro';
import Oauth from 'components/Oauth.astro';
const pb = Astro.locals.pb
const oauths = await pb.collection('users').listAuthMethods();
console.log(JSON.stringify(oauths.authProviders[0]));
let secure = true
if (getEnv('NODE_ENV', 'production') !== 'production') {
secure = false
}
Astro.cookies.set('provider', oauths.authProviders[0],{
httpOnly: true,
path: '/',
secure: secure,
sameSite: 'lax',
maxAge: 365000
})
if(pb.authStore.isValid){
return Astro.redirect("/account")
}
let loged = false
await AstroUtils.wrap(async () => {
if (Astro.request.method !== 'POST'){
return
}
const form = await Astro.request.formData()
if(form.get("type") == "userPassword"){
const request = {
username: form.get("username") as string,
name: form.get("name") as string,
email: form.get("email") as string,
password: form.get("password") as string,
passwordConfirm: form.get("passwordConfirm") as string,
}
try{
await pb.collection('users').create(request)
return Astro.redirect('/account/login')
}catch(e){
console.log(e);
}
}else if (form.get("type") == "discord2FA") {
// console.log("pouet")
// await pb.collection('user').authWithOAuth2({provider: 'discord'})
// console.log("pouetF");
}else{
Astro.redirect("/404")
const request = {
username: form.get("username") as string,
name: form.get("name") as string,
email: form.get("email") as string,
password: form.get("password") as string,
passwordConfirm: form.get("passwordConfirm") as string,
}
})
try{
await pb.collection('users').create(request)
loged = true
}catch(e){
console.log(e);
}
})
if (loged) {
return Astro.redirect('/account/login')
}
const metadata = {
title: 'Register',
ignoreTitleTemplate: true,
};
---
<Layout title="register">
<form id="account-creation" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="userPassword">
<input required name="name" placeholder="Prénom Nom"/>
<input required name="username" placeholder="Pseudo"/>
<input required name="email" type="email" placeholder="Renseignez votre email" />
<input required name="password" type="password" placeholder="Créez un mot de passe" />
<input required name="passwordConfirm" type="password" placeholder="Confirmer votre mot de passe" />
<button>Créer un compte</button>
</form>
<Layout metadata={metadata}>
<button id="OauthDiscord">connexion avec discord</button>
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="discord2FA">
</form>
<a href={oauths.authProviders[0].authUrl + Astro.url.protocol + "//" + Astro.url.host + '/account/oauth'}>discord?</a>
<ContactUs
formid='account-creation'
title='Inscription'
subtitle="inscrivez vous pour sauvegardez vos recherche"
button='Créer un compte'
method='post'
enctype="multipart/form-data"
inputs={[
{
type: 'text',
name: 'name',
label: 'Prénom Nom',
placeholder: "Michel Biche"
},{
type: 'text',
name: 'username',
label: 'Nom d\'utilisateur',
placeholder: "michel85"
},{
type: 'email',
name: 'email',
label: 'Adresse email',
placeholder: "michel@example.com"
},{
type: 'password',
name: 'password',
label: 'Créez un mot de passe',
},{
type: 'password',
name: 'passwordConfirm',
label: 'Confirmer votre mot de passe',
},
]}
/>
<Oauth/>
<form id="account-creation" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="userPassword">
<input required name="name" placeholder="Prénom Nom"/>
<input required name="username" placeholder="Pseudo"/>
<input required name="email" type="email" placeholder="Renseignez votre email" />
<input required name="password" type="password" placeholder="Créez un mot de passe" />
<input required name="passwordConfirm" type="password" placeholder="Confirmer votre mot de passe" />
<button>Créer un compte</button>
</form>
<button id="OauthDiscord">connexion avec discord</button>
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="discord2FA">
</form>
</Layout>

79
front/src/pages/contact.astro Normal file
View File

@ -0,0 +1,79 @@
---
import Layout from 'layouts/PageLayout.astro';
import HeroText from 'components/widgets/HeroText.astro';
import ContactUs from 'components/widgets/Contact.astro';
import Features2 from 'components/widgets/Features2.astro';
const metadata = {
title: 'Contact',
};
---
<Layout metadata={metadata}>
<!-- HeroText Widget ******************* -->
<HeroText tagline="Contact" title="Let's Connect!" />
<ContactUs
id="form"
title="Drop us a message today!"
subtitle="For quicker answers, explore our FAQs section. You may find the solution you're looking for right there! If not, our support team is delighted to help you."
inputs={[
{
type: 'text',
name: 'name',
label: 'Name',
},
{
type: 'email',
name: 'email',
label: 'Email',
},
]}
textarea={{
label: 'Message',
}}
disclaimer={{
label:
'By submitting this contact form, you acknowledge and agree to the collection of your personal information.',
}}
description="Our support team typically responds within 24 business hours."
/>
<!-- Features2 Widget ************** -->
<Features2
title="We are here to help!"
items={[
{
title: 'General support',
description: `Chat with us for inquiries related to account management, website navigation, payment issues, accessing purchased templates or general questions about the website's functionality.`,
},
{
title: 'Contact sales',
description:
'Chat with us for questions about purchases, customization options, licensing for commercial use, inquiries about specific template, etc.',
},
{
title: 'Technical support',
description:
'Chat with us when facing issues like template installation, problems editing difficulties, compatibility issues with software or download errors, or other technical challenges related to using the templates.',
},
{
title: 'Phone',
description: '+1 (234) 567-890',
icon: 'tabler:headset',
},
{
title: 'Email',
description: 'contact@support.com',
icon: 'tabler:mail',
},
{
title: 'Location',
description: '1234 Lorem Ipsum St, 12345, Miami, EEUU',
icon: 'tabler:map-pin',
},
]}
/>
</Layout>

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

@ -0,0 +1,297 @@
---
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
front/src/pages/homes/personal.astro Normal file
View File

@ -0,0 +1,405 @@
---
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
front/src/pages/homes/saas.astro Normal file
View File

@ -0,0 +1,349 @@
---
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 4.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 4.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 4.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 4.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 4.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
front/src/pages/homes/startup.astro Normal file
View File

@ -0,0 +1,317 @@
---
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 4.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>

514
front/src/pages/index.astro
View File

@ -1,123 +1,399 @@
---
import Layout from 'layouts/Layout.astro';
import Card from 'components/Card.astro';
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 title="Welcome to Astro.">
<main>
<svg
class="astro-a"
width="495"
height="623"
viewBox="0 0 495 623"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M167.19 364.254C83.4786 364.254 0 404.819 0 404.819C0 404.819 141.781 19.4876 142.087 18.7291C146.434 7.33701 153.027 0 162.289 0H332.441C341.703 0 348.574 7.33701 352.643 18.7291C352.92 19.5022 494.716 404.819 494.716 404.819C494.716 404.819 426.67 364.254 327.525 364.254L264.41 169.408C262.047 159.985 255.147 153.581 247.358 153.581C239.569 153.581 232.669 159.985 230.306 169.408L167.19 364.254ZM160.869 530.172C160.877 530.18 160.885 530.187 160.894 530.195L160.867 530.181C160.868 530.178 160.868 530.175 160.869 530.172ZM136.218 411.348C124.476 450.467 132.698 504.458 160.869 530.172C160.997 529.696 161.125 529.242 161.248 528.804C161.502 527.907 161.737 527.073 161.917 526.233C165.446 509.895 178.754 499.52 195.577 500.01C211.969 500.487 220.67 508.765 223.202 527.254C224.141 534.12 224.23 541.131 224.319 548.105C224.328 548.834 224.337 549.563 224.347 550.291C224.563 566.098 228.657 580.707 237.264 593.914C245.413 606.426 256.108 615.943 270.749 622.478C270.593 621.952 270.463 621.508 270.35 621.126C270.045 620.086 269.872 619.499 269.685 618.911C258.909 585.935 266.668 563.266 295.344 543.933C298.254 541.971 301.187 540.041 304.12 538.112C310.591 533.854 317.059 529.599 323.279 525.007C345.88 508.329 360.09 486.327 363.431 457.844C364.805 446.148 363.781 434.657 359.848 423.275C358.176 424.287 356.587 425.295 355.042 426.275C351.744 428.366 348.647 430.33 345.382 431.934C303.466 452.507 259.152 455.053 214.03 448.245C184.802 443.834 156.584 436.019 136.218 411.348Z"
fill="url(#paint0_linear_1805_24383)"></path>
<defs>
<linearGradient
id="paint0_linear_1805_24383"
x1="247.358"
y1="0"
x2="247.358"
y2="622.479"
gradientUnits="userSpaceOnUse"
>
<stop stop-opacity="0.9"></stop>
<stop offset="1" stop-opacity="0.2"></stop>
</linearGradient>
</defs>
</svg>
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
<p class="instructions">
To get started, open the directory <code>src/pages</code> in your project.<br />
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
</p>
<ul role="list" class="link-card-grid">
<Card
href="https://docs.astro.build/"
title="Documentation"
body="Learn how Astro works and explore the official API docs."
/>
<Card
href="https://astro.build/integrations/"
title="Integrations"
body="Supercharge your project with new frameworks and libraries."
/>
<Card
href="https://astro.build/themes/"
title="Themes"
body="Explore a galaxy of community-built starter themes."
/>
<Card
href="https://astro.build/chat/"
title="Community"
body="Come say hi to our amazing Discord community. ❤️"
/>
</ul>
</main>
<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 4.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 4.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."
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 4.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</em>',
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>
<style>
main {
margin: auto;
padding: 1rem;
width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
.astro-a {
position: absolute;
top: -32px;
left: 50%;
transform: translatex(-50%);
width: 220px;
height: auto;
z-index: -1;
}
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
}
.text-gradient {
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
.instructions {
margin-bottom: 2rem;
border: 1px solid rgba(var(--accent-light), 25%);
background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
padding: 1.5rem;
border-radius: 8px;
}
.instructions code {
font-size: 0.8em;
font-weight: bold;
background: rgba(var(--accent-light), 12%);
color: rgb(var(--accent-light));
border-radius: 4px;
padding: 0.3em 0.4em;
}
.instructions strong {
color: rgb(var(--accent-light));
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 2rem;
padding: 0;
}
</style>

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

@ -0,0 +1,41 @@
---
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
front/src/pages/landing/lead-generation.astro Normal file
View File

@ -0,0 +1,41 @@
---
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
front/src/pages/landing/pre-launch.astro Normal file
View File

@ -0,0 +1,41 @@
---
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
front/src/pages/landing/product.astro Normal file
View File

@ -0,0 +1,41 @@
---
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
front/src/pages/landing/sales.astro Normal file
View File

@ -0,0 +1,41 @@
---
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
front/src/pages/landing/subscription.astro Normal file
View File

@ -0,0 +1,41 @@
---
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>

13
front/src/pages/maps.astro
View File

@ -1,11 +1,16 @@
---
import Layout from 'layouts/Layout.astro';
import Layout from 'layouts/PageLayout.astro';
import 'leaflet/dist/leaflet.css'
const metadata = {
title: 'Maps',
ignoreTitleTemplate: true,
};
---
<Layout title="maps test">
<Layout metadata={metadata}>
<div class="w-52 h-52" id="map" />
<div class="w-full h-96" id="map" />
</Layout>
@ -23,4 +28,4 @@ import 'leaflet/dist/leaflet.css'
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
</script>
</script>

244
front/src/pages/pricing.astro Normal file
View File

@ -0,0 +1,244 @@
---
import Layout from 'layouts/PageLayout.astro';
import HeroText from 'components/widgets/HeroText.astro';
import Prices from 'components/widgets/Pricing.astro';
import FAQs from 'components/widgets/FAQs.astro';
import Steps from 'components/widgets/Steps.astro';
import Features3 from 'components/widgets/Features3.astro';
import CallToAction from 'components/widgets/CallToAction.astro';
const metadata = {
title: 'Pricing',
};
---
<Layout metadata={metadata}>
<!-- HeroText Widget ******************* -->
<HeroText
tagline="Pricing"
title="Stellar Pricing for Every Journey"
subtitle="Choose the perfect plan that aligns with your cosmic goals."
/>
<!-- Pricing Widget ******************* -->
<Prices
title="Our prices"
subtitle="Only pay for what you need"
prices={[
{
title: 'basic',
subtitle: 'Optimal choice for personal use',
price: 29,
period: 'per month',
items: [
{
description: 'Etiam in libero, et volutpat',
},
{
description: 'Aenean ac nunc dolor tristique',
},
{
description: 'Cras scelerisque accumsan lib',
},
{
description: 'In hac habitasse',
},
],
callToAction: {
target: '_blank',
text: 'Get started',
href: '#',
},
},
{
title: 'standard',
subtitle: 'Optimal choice for small teams',
price: 69,
period: 'Per Month',
items: [
{
description: 'Proin vel laoreet',
},
{
description: 'Ut efficitur habitasse egestas',
},
{
description: 'Volutpat hac curabitur',
},
{
description: 'Pellentesque blandit ut nibh',
},
{
description: 'Donec fringilla sem',
},
],
callToAction: {
target: '_blank',
text: 'Get started',
href: '#',
},
hasRibbon: true,
ribbonTitle: 'popular',
},
{
title: 'premium',
subtitle: 'Optimal choice for companies',
price: 199,
period: 'Per Month',
items: [
{
description: 'Curabitur suscipit risus',
},
{
description: 'Aliquam habitasse malesuada',
},
{
description: 'Suspendisse sit amet blandit',
},
{
description: 'Suspendisse auctor blandit dui',
},
],
callToAction: {
target: '_blank',
text: 'Get started',
href: '#',
},
},
]}
/>
<!-- Features3 Widget ************** -->
<Features3
title="Price-related features"
subtitle="Discover the advantages of choosing our plans"
columns={2}
items={[
{
title: 'Tiered Pricing Plans',
description: 'Choose from a range of pricing plans designed to accommodate different budgets and requirements.',
icon: 'tabler:stairs',
},
{
title: 'Transparent Pricing',
description: 'Clearly displayed pricing details for each plan, with no hidden costs or unexpected charges.',
icon: 'tabler:flip-vertical',
},
{
title: 'Secure Payment Methods',
description: 'Secure payment gateways to protect your financial information during transactions.',
icon: 'tabler:shield-lock',
},
{
title: 'Instant Access',
description: `Immediate access to your chosen plan's features and templates upon subscription.`,
icon: 'tabler:accessible',
},
{
title: 'Upgrade Value',
description: 'Upgrade to higher-tier plans to unlock more features and benefits for an enhanced experience.',
icon: 'tabler:chevrons-up',
},
{
title: '24H support',
description: 'Questions answered via live chat, email or phone, every calendar day.',
icon: 'tabler:headset',
},
]}
classes={{ container: 'max-w-5xl' }}
/>
<!-- Steps Widget ****************** -->
<Steps
title="A guided journey from plans to creativity"
tagline="simplified process"
isReversed={true}
items={[
{
title: 'Explore plans',
icon: 'tabler:number-1',
},
{
title: 'Select a plan',
icon: 'tabler:number-2',
},
{
title: 'Sign Up / Log In',
icon: 'tabler:number-3',
},
{
title: 'Review order',
icon: 'tabler:number-4',
},
{
title: 'Enter payment details',
icon: 'tabler:number-5',
},
{
title: 'Confirmation',
icon: 'tabler:number-6',
},
{
title: 'Download and start using the template(s)',
icon: 'tabler:number-7',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1536816579748-4ecb3f03d72a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80',
alt: 'Steps image',
}}
/>
<!-- FAQs Widget ******************* -->
<FAQs
title="Pricing FAQs"
subtitle="Choosing the right plan is important, and we're here to answer your questions. If you have queries about our pricing options, you're in the right place."
columns={1}
items={[
{
title: 'Do the plans come with customer support?',
description:
'Absolutely, all plans include access to our dedicated customer support to assist you with any queries or concerns.',
},
{
title: 'Is there a trial period for the different plans?',
description:
"Unfortunately, we don't offer trial periods for the plans. However, you can check out our demo section to preview the quality of our templates.",
},
{
title: 'Can I switch between plans?',
description:
'Certainly! You can easily upgrade or downgrade your plan, at any time, to find the one that best suits your evolving requirements.',
},
{
title: 'What payment methods do you accept?',
description:
'We accept major credit cards and online payment methods to ensure a convenient and secure transaction process.',
},
{
title: 'Are there any hidden fees beyond the displayed cost?',
description:
'No, the subscription cost covers all the features and templates listed under each plan. There are no hidden fees or extra charges.',
},
]}
/>
<!-- CallToAction Widget *********** -->
<CallToAction
title="Ready to boost your projects?"
subtitle="Join our community of satisfied customers who have transformed their work with our templates."
actions={[
{
variant: 'primary',
text: 'Get started now',
href: '/',
},
]}
/>
</Layout>

185
front/src/pages/privacy.md Normal file
View File

@ -0,0 +1,185 @@
---
title: 'Privacy Policy'
layout: '~/layouts/MarkdownLayout.astro'
---
_Last updated_: January 06, 2023
This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You.
We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy. This Privacy Policy is just a Demo.
## Interpretation and Definitions
### Interpretation
The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
### Definitions
For the purposes of this Privacy Policy:
- **Account** means a unique account created for You to access our Service or parts of our Service.
- **Company** (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to AstroWind LLC, 1 Cupertino, CA 95014.
- **Cookies** are small files that are placed on Your computer, mobile device or any other device by a website, containing the details of Your browsing history on that website among its many uses.
- **Country** refers to: California, United States
- **Device** means any device that can access the Service such as a computer, a cellphone or a digital tablet.
- **Personal Data** is any information that relates to an identified or identifiable individual.
- **Service** refers to the Website.
- **Service Provider** means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used.
- **Usage Data** refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).
- **Website** refers to AstroWind, accessible from [https://astrowind.vercel.app](https://astrowind.vercel.app)
- **You** means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
## Collecting and Using Your Personal Data
### Types of Data Collected
#### Personal Data
While using Our Service, We may ask You to provide Us with certain personally identifiable information that can be used to contact or identify You. Personally identifiable information may include, but is not limited to:
- Usage Data
#### Usage Data
Usage Data is collected automatically when using the Service.
Usage Data may include information such as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
When You access the Service by or through a mobile device, We may collect certain information automatically, including, but not limited to, the type of mobile device You use, Your mobile device unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic data.
We may also collect information that Your browser sends whenever You visit our Service or when You access the Service by or through a mobile device.
#### Tracking Technologies and Cookies
We use Cookies and similar tracking technologies to track the activity on Our Service and store certain information. Tracking technologies used are beacons, tags, and scripts to collect and track information and to improve and analyze Our Service. The technologies We use may include:
- **Cookies or Browser Cookies.** A cookie is a small file placed on Your Device. You can instruct Your browser to refuse all Cookies or to indicate when a Cookie is being sent. However, if You do not accept Cookies, You may not be able to use some parts of our Service. Unless you have adjusted Your browser setting so that it will refuse Cookies, our Service may use Cookies.
- **Web Beacons.** Certain sections of our Service and our emails may contain small electronic files known as web beacons (also referred to as clear gifs, pixel tags, and single-pixel gifs) that permit the Company, for example, to count users who have visited those pages or opened an email and for other related website statistics (for example, recording the popularity of a certain section and verifying system and server integrity).
Cookies can be "Persistent" or "Session" Cookies. Persistent Cookies remain on Your personal computer or mobile device when You go offline, while Session Cookies are deleted as soon as You close Your web browser.
We use both Session and Persistent Cookies for the purposes set out below:
- **Necessary / Essential Cookies**
Type: Session Cookies
Administered by: Us
Purpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services.
- **Cookies Policy / Notice Acceptance Cookies**
Type: Persistent Cookies
Administered by: Us
Purpose: These Cookies identify if users have accepted the use of cookies on the Website.
- **Functionality Cookies**
Type: Persistent Cookies
Administered by: Us
Purpose: These Cookies allow us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website.
For more information about the cookies we use and your choices regarding cookies, please visit our Cookies Policy or the Cookies section of our Privacy Policy.
## Use of Your Personal Data
The Company may use Personal Data for the following purposes:
- **To provide and maintain our Service**, including to monitor the usage of our Service.
- **To manage Your Account:** to manage Your registration as a user of the Service. The Personal Data You provide can give You access to different functionalities of the Service that are available to You as a registered user.
- **For the performance of a contract:** the development, compliance and undertaking of the purchase contract for the products, items or services You have purchased or of any other contract with Us through the Service.
- **To contact You:** To contact You by email, telephone calls, SMS, or other equivalent forms of electronic communication, such as a mobile application's push notifications regarding updates or informative communications related to the functionalities, products or contracted services, including the security updates, when necessary or reasonable for their implementation.
- **To provide You** with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless You have opted not to receive such information.
- **To manage Your requests:** To attend and manage Your requests to Us.
- **For business transfers:** We may use Your information to evaluate or conduct a merger, divestiture, restructuring, reorganization, dissolution, or other sale or transfer of some or all of Our assets, whether as a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which Personal Data held by Us about our Service users is among the assets transferred.
- **For other purposes**: We may use Your information for other purposes, such as data analysis, identifying usage trends, determining the effectiveness of our promotional campaigns and to evaluate and improve our Service, products, services, marketing and your experience.
We may share Your personal information in the following situations:
- **With Service Providers:** We may share Your personal information with Service Providers to monitor and analyze the use of our Service, to contact You.
- **For business transfers:** We may share or transfer Your personal information in connection with, or during negotiations of, any merger, sale of Company assets, financing, or acquisition of all or a portion of Our business to another company.
- **With Affiliates:** We may share Your information with Our affiliates, in which case we will require those affiliates to honor this Privacy Policy. Affiliates include Our parent company and any other subsidiaries, joint venture partners or other companies that We control or that are under common control with Us.
- **With business partners:** We may share Your information with Our business partners to offer You certain products, services or promotions.
- **With other users:** when You share personal information or otherwise interact in the public areas with other users, such information may be viewed by all users and may be publicly distributed outside.
- **With Your consent**: We may disclose Your personal information for any other purpose with Your consent.
## Retention of Your Personal Data
The Company will retain Your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use Your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
The Company will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period of time, except when this data is used to strengthen the security or to improve the functionality of Our Service, or We are legally obligated to retain this data for longer time periods.
## Transfer of Your Personal Data
Your information, including Personal Data, is processed at the Company's operating offices and in any other places where the parties involved in the processing are located. It means that this information may be transferred to — and maintained on — computers located outside of Your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from Your jurisdiction.
Your consent to this Privacy Policy followed by Your submission of such information represents Your agreement to that transfer.
The Company will take all steps reasonably necessary to ensure that Your data is treated securely and in accordance with this Privacy Policy and no transfer of Your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of Your data and other personal information.
## Delete Your Personal Data
You have the right to delete or request that We assist in deleting the Personal Data that We have collected about You.
Our Service may give You the ability to delete certain information about You from within the Service.
You may update, amend, or delete Your information at any time by signing in to Your Account, if you have one, and visiting the account settings section that allows you to manage Your personal information. You may also contact Us to request access to, correct, or delete any personal information that You have provided to Us.
Please note, however, that We may need to retain certain information when we have a legal obligation or lawful basis to do so.
## Disclosure of Your Personal Data
### Business Transactions
If the Company is involved in a merger, acquisition or asset sale, Your Personal Data may be transferred. We will provide notice before Your Personal Data is transferred and becomes subject to a different Privacy Policy.
#### Law enforcement
Under certain circumstances, the Company may be required to disclose Your Personal Data if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency).
#### Other legal requirements
The Company may disclose Your Personal Data in the good faith belief that such action is necessary to:
- Comply with a legal obligation
- Protect and defend the rights or property of the Company
- Prevent or investigate possible wrongdoing in connection with the Service
- Protect the personal safety of Users of the Service or the public
- Protect against legal liability
## Security of Your Personal Data
The security of Your Personal Data is important to Us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While We strive to use commercially acceptable means to protect Your Personal Data, We cannot guarantee its absolute security.
## Children's Privacy
Our Service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the age of 13 without verification of parental consent, We take steps to remove that information from Our servers.
If We need to rely on consent as a legal basis for processing Your information and Your country requires consent from a parent, We may require Your parent's consent before We collect and use that information.
## Links to Other Websites
Our Service may contain links to other websites that are not operated by Us. If You click on a third party link, You will be directed to that third party's site. We strongly advise You to review the Privacy Policy of every site You visit.
We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
## Changes to this Privacy Policy
We may update Our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page.
We will let You know via email and/or a prominent notice on Our Service, prior to the change becoming effective and update the "Last updated" date at the top of this Privacy Policy.
You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
## Contact Us
If you have any questions about this Privacy Policy, You can contact us:
- By email: somecoolemail@domain.com

37
front/src/pages/rss.xml.ts Normal file
View File

@ -0,0 +1,37 @@
import { getRssString } from '@astrojs/rss'
import { SITE, METADATA, APP_BLOG } from 'astrowind:config'
import { fetchPosts } from 'utils/blog'
import { getPermalink } from 'utils/permalinks'
export const GET = async () => {
if (!APP_BLOG.isEnabled) {
return new Response(null, {
status: 404,
statusText: 'Not found',
})
}
const posts = await fetchPosts()
const rss = await getRssString({
title: `${SITE.name}’s Blog`,
description: METADATA?.description || '',
site: import.meta.env.SITE,
items: posts.map((post) => ({
link: getPermalink(post.permalink, 'post'),
title: post.title,
description: post.excerpt,
pubDate: post.publishDate,
})),
trailingSlash: SITE.trailingSlash,
})
return new Response(rss, {
headers: {
'Content-Type': 'application/xml',
},
})
}

224
front/src/pages/services.astro Normal file
View File

@ -0,0 +1,224 @@
---
import CallToAction from 'components/widgets/CallToAction.astro';
import Content from 'components/widgets/Content.astro';
import Features2 from 'components/widgets/Features2.astro';
import Hero from 'components/widgets/Hero.astro';
import Testimonials from 'components/widgets/Testimonials.astro';
import Layout from 'layouts/PageLayout.astro';
const metadata = {
title: 'Services',
};
---
<Layout metadata={metadata}>
<!-- Hero Widget ******************* -->
<Hero
tagline="Services"
title="Elevate your projects with our stunning templates"
subtitle="Explore our meticulously crafted templates tailored to various industries and purposes. From captivating presentations to functional website designs, we offer the tools you need to succeed."
actions={[{ variant: 'primary', target: '_blank', text: 'Start exploring', href: '/' }]}
image={{
src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
alt: 'AstroWind Hero Image',
}}
/>
<!-- Features2 Widget ************** -->
<Features2
title="Explore our diverse templates"
subtitle="Discover our selection below to streamline and elevate your projects."
columns={3}
items={[
{
title: 'Educational',
description:
'By harmonizing instructional design and visual appeal, templates streamline content creation for varied materials, expediting development and cultivating engaging educational spaces.',
icon: 'tabler:school',
},
{
title: 'Interior Design',
description:
'Crafting functional, visually appealing spaces for residential and commercial use. Templates emphasize layout, colors, and furniture setups, offering a versatile toolkit for your design vision.',
icon: 'tabler:home-star',
},
{
title: 'Photography',
description: `Empowering photographers, our templates facilitate captivating storytelling. With a keen focus on layout, galleries, and typography, they cater to both professionals and enthusiasts.`,
icon: 'tabler:photo',
},
{
title: 'E-commerce',
description:
'Developing engaging online stores, our E-commerce templates ensure a dynamic presence to effectively showcase products. Ideal for startups or revamps.',
icon: 'tabler:shopping-cart',
},
{
title: 'Blog',
description:
'With attention to typography, these templates empower effective content presentation for writers at any stage, ensuring visually engaging and user-friendly blogs.',
icon: 'tabler:article',
},
{
title: 'Business',
description:
'Providing polished options for effective visual communication, these templates empower both startups and established companies for a professional brand presence.',
icon: 'tabler:building-store',
},
{
title: 'Branding',
description:
'Offering pre-designed elements for a consistent brand identity, including logos and marketing materials. Ideal for new ventures or revamps.',
icon: 'tabler:arrow-big-up-lines',
},
{
title: 'Medical',
description: `From presentations to patient forms, these tools enhance communication effectiveness for healthcare professionals. Ideal for medical practices and research pursuits.`,
icon: 'tabler:vaccine',
},
{
title: 'Fashion Design',
description:
'With attention to detail, customization, and contemporary design, they empower designers to showcase ideas cohesively. Ideal for all levels of designers.',
icon: 'tabler:tie',
},
]}
/>
<!-- Content Widget **************** -->
<Content
isReversed
items={[
{
title: 'High-Quality Designs',
description:
'Our templates feature top-tier designs that ensure a professional and polished appearance for your projects.',
icon: 'tabler:wand',
},
{
title: 'Customization Tools',
description:
'Tailor each template to your unique needs with user-friendly customization tools that let you personalize colors, fonts, and content.',
icon: 'tabler:settings',
},
{
title: 'Pre-Designed Elements',
description:
'Save time and effort with our ready-to-use elements, including graphics, icons, and layouts that enhance the visual appeal of your creations.',
icon: 'tabler:presentation',
},
{
title: 'Preview and Mockup Views',
description:
'Visualize the final outcome before making any changes using our preview and mockup views, ensuring your projects meet your expectations.',
icon: 'tabler:carousel-horizontal',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1525909002-1b05e0c869d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
alt: 'Features 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: 'Time Savings',
description:
'Streamline your workflow, enabling you to create stunning materials efficiently and allocate more time to your core tasks.',
icon: 'tabler:clock',
},
{
title: 'Professional Appearance',
description:
'Elevate your projects with the polished and sophisticated look that our templates provide, making a lasting impression on your audience.',
icon: 'tabler:school',
},
{
title: 'Cost-Efficiency',
description:
'Benefit from cost savings by avoiding the need for custom design work, as our templates offer professional-grade designs at a fraction of the cost.',
icon: 'tabler:coin',
},
{
title: 'Instant Download',
description:
'Enjoy immediate access to your chosen templates upon purchase, enabling you to begin working on your projects without delay.',
icon: 'tabler:file-download',
},
]}
image={{
src: 'https://images.unsplash.com/photo-1552664688-cf412ec27db2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Benefits Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Benefits</h3>
</Fragment>
</Content>
<!-- Testimonials Widget *********** -->
<Testimonials
title="Words from real customers"
testimonials={[
{
testimonial: `The designs are not only visually appealing but also highly professional. The templates have saved me a significant amount of time while helping me make a lasting impression on my clients.`,
name: 'Emily Kennedy',
job: 'Front-end developer',
image: {
src: 'https://images.unsplash.com/photo-1618835962148-cf177563c6c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=930&q=80',
alt: 'Emily Kennedy Image',
},
},
{
testimonial: `It beautifully showcases my work, with its clean and elegant design that lets my photographs shine. Customization was a breeze, even for a non-tech person like me. The result is a professional and immersive portfolio that's garnered numerous compliments.`,
name: 'Sarah Hansen',
job: 'Photographer',
image: {
src: 'https://images.unsplash.com/photo-1561406636-b80293969660?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Sarah Hansen Image',
},
},
{
testimonial: `I discovered these templates and I'm impressed by their variety and quality. They've helped me establish a consistent brand image across my marketing and social platforms, elevating my business's overall appearance.`,
name: 'Mark Wilkinson',
job: 'Small business owner',
image: {
src: 'https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=824&q=80',
alt: 'Mark Wilkinson Image',
},
},
]}
callToAction={{
target: '_blank',
text: 'More testimonials...',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:chevron-right',
}}
/>
<!-- CallToAction Widget *********** -->
<CallToAction
actions={[
{
variant: 'primary',
text: 'Start exploring',
href: '/',
},
]}
title="Dive into our template collection"
subtitle="Whether you're in business, design, or education, our templates are here to elevate your projects."
/>
</Layout>

120
front/src/pages/terms.md Normal file
View File

@ -0,0 +1,120 @@
---
title: 'Terms and Conditions'
layout: '~/layouts/MarkdownLayout.astro'
---
_Last updated_: January 06, 2023
Please read these terms and conditions carefully before using Our Service.
## Interpretation and Definitions
### Interpretation
The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
### Definitions
For the purposes of these Terms and Conditions:
- **Affiliate** means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.
- **Country** refers to: California, United States
- **Company** (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to AstroWind LLC, 1 Cupertino, CA 95014.
- **Device** means any device that can access the Service such as a computer, a cellphone or a digital tablet.
- **Service** refers to the Website.
- **Terms and Conditions** (also referred as "Terms") mean these Terms and Conditions that form the entire agreement between You and the Company regarding the use of the Service. This Terms and Conditions agreement is a Demo.
- **Third-party Social Media Service** means any services or content (including data, information, products or services) provided by a third-party that may be displayed, included or made available by the Service.
- **Website** refers to AstroWind, accessible from [https://astrowind.vercel.app](https://astrowind.vercel.app)
- **You** means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
## Acknowledgment
These are the Terms and Conditions governing the use of this Service and the agreement that operates between You and the Company. These Terms and Conditions set out the rights and obligations of all users regarding the use of the Service.
Your access to and use of the Service is conditioned on Your acceptance of and compliance with these Terms and Conditions. These Terms and Conditions apply to all visitors, users and others who access or use the Service.
By accessing or using the Service You agree to be bound by these Terms and Conditions. If You disagree with any part of these Terms and Conditions then You may not access the Service.
You represent that you are over the age of 18\. The Company does not permit those under 18 to use the Service.
Your access to and use of the Service is also conditioned on Your acceptance of and compliance with the Privacy Policy of the Company. Our Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your personal information when You use the Application or the Website and tells You about Your privacy rights and how the law protects You. Please read Our Privacy Policy carefully before using Our Service.
## Links to Other Websites
Our Service may contain links to third-party web sites or services that are not owned or controlled by the Company.
The Company has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that the Company shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any such content, goods or services available on or through any such web sites or services.
We strongly advise You to read the terms and conditions and privacy policies of any third-party web sites or services that You visit.
## Termination
We may terminate or suspend Your access immediately, without prior notice or liability, for any reason whatsoever, including without limitation if You breach these Terms and Conditions.
Upon termination, Your right to use the Service will cease immediately.
## Limitation of Liability
Notwithstanding any damages that You might incur, the entire liability of the Company and any of its suppliers under any provision of this Terms and Your exclusive remedy for all of the foregoing shall be limited to the amount actually paid by You through the Service or 100 USD if You haven't purchased anything through the Service.
To the maximum extent permitted by applicable law, in no event shall the Company or its suppliers be liable for any special, incidental, indirect, or consequential damages whatsoever (including, but not limited to, damages for loss of profits, loss of data or other information, for business interruption, for personal injury, loss of privacy arising out of or in any way related to the use of or inability to use the Service, third-party software and/or third-party hardware used with the Service, or otherwise in connection with any provision of this Terms), even if the Company or any supplier has been advised of the possibility of such damages and even if the remedy fails of its essential purpose.
Some states do not allow the exclusion of implied warranties or limitation of liability for incidental or consequential damages, which means that some of the above limitations may not apply. In these states, each party's liability will be limited to the greatest extent permitted by law.
## "AS IS" and "AS AVAILABLE" Disclaimer
The Service is provided to You "AS IS" and "AS AVAILABLE" and with all faults and defects without warranty of any kind. To the maximum extent permitted under applicable law, the Company, on its own behalf and on behalf of its Affiliates and its and their respective licensors and service providers, expressly disclaims all warranties, whether express, implied, statutory or otherwise, with respect to the Service, including all implied warranties of merchantability, fitness for a particular purpose, title and non-infringement, and warranties that may arise out of course of dealing, course of performance, usage or trade practice. Without limitation to the foregoing, the Company provides no warranty or undertaking, and makes no representation of any kind that the Service will meet Your requirements, achieve any intended results, be compatible or work with any other software, applications, systems or services, operate without interruption, meet any performance or reliability standards or be error free or that any errors or defects can or will be corrected.
Without limiting the foregoing, neither the Company nor any of the company's provider makes any representation or warranty of any kind, express or implied: (i) as to the operation or availability of the Service, or the information, content, and materials or products included thereon; (ii) that the Service will be uninterrupted or error-free; (iii) as to the accuracy, reliability, or currency of any information or content provided through the Service; or (iv) that the Service, its servers, the content, or e-mails sent from or on behalf of the Company are free of viruses, scripts, trojan horses, worms, malware, timebombs or other harmful components.
Some jurisdictions do not allow the exclusion of certain types of warranties or limitations on applicable statutory rights of a consumer, so some or all of the above exclusions and limitations may not apply to You. But in such a case the exclusions and limitations set forth in this section shall be applied to the greatest extent enforceable under applicable law.
## Governing Law
The laws of the Country, excluding its conflicts of law rules, shall govern this Terms and Your use of the Service. Your use of the Application may also be subject to other local, state, national, or international laws.
## Disputes Resolution
If You have any concern or dispute about the Service, You agree to first try to resolve the dispute informally by contacting the Company.
## For European Union (EU) Users
If You are a European Union consumer, you will benefit from any mandatory provisions of the law of the country in which you are resident in.
## United States Legal Compliance
You represent and warrant that (i) You are not located in a country that is subject to the United States government embargo, or that has been designated by the United States government as a "terrorist supporting" country, and (ii) You are not listed on any United States government list of prohibited or restricted parties.
## Severability and Waiver
### Severability
If any provision of these Terms is held to be unenforceable or invalid, such provision will be changed and interpreted to accomplish the objectives of such provision to the greatest extent possible under applicable law and the remaining provisions will continue in full force and effect.
### Waiver
Except as provided herein, the failure to exercise a right or to require performance of an obligation under these Terms shall not effect a party's ability to exercise such right or require such performance at any time thereafter nor shall the waiver of a breach constitute a waiver of any subsequent breach.
## Translation Interpretation
These Terms and Conditions may have been translated if We have made them available to You on our Service. You agree that the original English text shall prevail in the case of a dispute.
## Changes to These Terms and Conditions
We reserve the right, at Our sole discretion, to modify or replace these Terms at any time. If a revision is material We will make reasonable efforts to provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at Our sole discretion.
By continuing to access or use Our Service after those revisions become effective, You agree to be bound by the revised terms. If You do not agree to the new terms, in whole or in part, please stop using the website and the Service.
## Contact Us
If you have any questions about these Terms and Conditions, You can contact us:
- By email: somecoolemail@domain.com