+
+π _Most *starred* & *forked* Astro theme in 2022 & 2023_. π
+
+**AstroWind** is a free and open-source template to make your website using **[Astro 4.0](https://astro.build/) + [Tailwind CSS](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account web best practices.
+
+- β
**Production-ready** scores in **PageSpeed Insights** reports.
+- β
Integration with **Tailwind CSS** supporting **Dark mode** and **_RTL_**.
+- β
**Fast and SEO friendly blog** with automatic **RSS feed**, **MDX** support, **Categories & Tags**, **Social Share**, ...
+- β
**Image Optimization** (using new **Astro Assets** and **Unpic** for Universal image CDN).
+- β
Generation of **project sitemap** based on your routes.
+- β
**Open Graph tags** for social media sharing.
+- β
**Analytics** built-in Google Analytics, and Splitbee integration.
+
+
+
+[](https://onwidget.com)
+[](https://github.com/onwidget/astrowind/blob/main/LICENSE.md)
+[](https://github.com/onwidget)
+[](https://github.com/onwidget/astrowind#contributing)
+[](https://snyk.io/test/github/onwidget/astrowind)
+[](https://github.com/onwidget/astrowind)
+[](https://github.com/onwidget/astrowind)
+
+
+ {
+ image &&
+ (link ? (
+
+
+
+ + { + link ? ( + + {post.title} + + ) : ( + post.title + ) + } +
+ +{post.excerpt}
+
+ {posts.map((post) =>
diff --git a/front/src/components/blog/GridItem.astro b/front/src/components/blog/GridItem.astro
new file mode 100644
index 0000000..cf7ed14
--- /dev/null
+++ b/front/src/components/blog/GridItem.astro
@@ -0,0 +1,69 @@
+---
+import { APP_BLOG } from 'astrowind:config';
+import type { Post } from '~/types';
+
+import Image from '~/components/common/Image.astro';
+
+import { findImage } from '~/utils/images';
+import { getPermalink } from '~/utils/permalinks';
+
+export interface Props {
+ post: Post;
+}
+
+const { post } = Astro.props;
+const image = await findImage(post.image);
+
+const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') : '';
+---
+
+-
+ {
+ posts.map((post) => (
+
-
+
- +
+ ))
+ }
+
+ {image && (
+
+
+ ) : (
+
+ {image && (
+
+ ))
+ }
+
+
+
+
+ {post.excerpt &&
+
+
+
+ + { + link ? ( + + {post.title} + + ) : ( + post.title + ) + } +
+{post.excerpt}
} + { + post.tags && Array.isArray(post.tags) ? ( + + ) : ( +
+
+ )
+}
diff --git a/front/src/components/blog/RelatedPosts.astro b/front/src/components/blog/RelatedPosts.astro
new file mode 100644
index 0000000..8d55ecd
--- /dev/null
+++ b/front/src/components/blog/RelatedPosts.astro
@@ -0,0 +1,28 @@
+---
+import { APP_BLOG } from 'astrowind:config';
+
+import { getRelatedPosts } from '~/utils/blog';
+import BlogHighlightedPosts from '../widgets/BlogHighlightedPosts.astro';
+import type { Post } from '~/types';
+import { getBlogPermalink } from '~/utils/permalinks';
+
+export interface Props {
+ post: Post;
+}
+
+const { post } = Astro.props;
+
+const relatedPosts = post.tags ? await getRelatedPosts(post, 4) : [];
+---
+
+{
+ APP_BLOG.isRelatedPostsEnabled ? (
+
+
+
+
+
+
+
+
+
+
+ {post.title} +
++ {post.excerpt} +
+ + { + post.image ? ( +
+
+
+ )
+ }
+
+
+
+
+ -
+ {tags.map((tag) => (
+
- + {!APP_BLOG?.tag?.isEnabled ? ( + tag.title + ) : ( + + {tag.title} + + )} + + ))} +
+
+
diff --git a/front/src/components/common/Analytics.astro b/front/src/components/common/Analytics.astro
new file mode 100644
index 0000000..a1a553d
--- /dev/null
+++ b/front/src/components/common/Analytics.astro
@@ -0,0 +1,13 @@
+---
+import { GoogleAnalytics } from '@astrolib/analytics';
+import { ANALYTICS } from 'astrowind:config';
+---
+
+{
+ ANALYTICS?.vendors?.googleAnalytics?.id ? (
+
+ Share:
+
+
+
+
+
+
diff --git a/front/src/components/common/SplitbeeAnalytics.astro b/front/src/components/common/SplitbeeAnalytics.astro
new file mode 100644
index 0000000..66651db
--- /dev/null
+++ b/front/src/components/common/SplitbeeAnalytics.astro
@@ -0,0 +1,6 @@
+---
+const { doNotTrack = true, noCookieMode = false, url = 'https://cdn.splitbee.io/sb.js' } = Astro.props;
+---
+
+
+
diff --git a/front/src/components/common/ToggleMenu.astro b/front/src/components/common/ToggleMenu.astro
new file mode 100644
index 0000000..2d19b16
--- /dev/null
+++ b/front/src/components/common/ToggleMenu.astro
@@ -0,0 +1,29 @@
+---
+export interface Props {
+ label?: string;
+ class?: string;
+}
+
+const {
+ label = 'Toggle Menu',
+ class: className = 'flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group',
+} = Astro.props;
+---
+
+
diff --git a/front/src/components/common/ToggleTheme.astro b/front/src/components/common/ToggleTheme.astro
new file mode 100644
index 0000000..8f3aafb
--- /dev/null
+++ b/front/src/components/common/ToggleTheme.astro
@@ -0,0 +1,28 @@
+---
+import { Icon } from 'astro-icon/components';
+
+import { UI } from 'astrowind:config';
+
+export interface Props {
+ label?: string;
+ class?: string;
+ iconClass?: string;
+ iconName?: string;
+}
+
+const {
+ label = 'Toggle between Dark and Light mode',
+ class:
+ className = 'text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
+ iconClass = 'w-6 h-6',
+ iconName = 'tabler:sun',
+} = Astro.props;
+---
+
+{
+ !(UI.theme && UI.theme.endsWith(':only')) && (
+
+ )
+}
diff --git a/front/src/components/ui/Background.astro b/front/src/components/ui/Background.astro
new file mode 100644
index 0000000..1093c17
--- /dev/null
+++ b/front/src/components/ui/Background.astro
@@ -0,0 +1,11 @@
+---
+export interface Props {
+ isDark?: boolean;
+}
+
+const { isDark = false } = Astro.props;
+---
+
+
+
diff --git a/front/src/components/ui/Button.astro b/front/src/components/ui/Button.astro
new file mode 100644
index 0000000..d3c2398
--- /dev/null
+++ b/front/src/components/ui/Button.astro
@@ -0,0 +1,40 @@
+---
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+import type { CallToAction as Props } from '~/types';
+
+const {
+ variant = 'secondary',
+ target,
+ text = Astro.slots.render('default'),
+ icon = '',
+ class: className = '',
+ type,
+ ...rest
+} = Astro.props;
+
+const variants = {
+ primary: 'btn-primary',
+ secondary: 'btn-secondary',
+ tertiary: 'btn btn-tertiary',
+ link: 'cursor-pointer hover:text-primary',
+};
+---
+
+{
+ type === 'button' || type === 'submit' || type === 'reset' ? (
+
+ ) : (
+
+
+ {tagline && (
+
+ )}
+ {title && (
+
+ )}
+
+ {subtitle && }
+
+ )
+}
diff --git a/front/src/components/ui/ItemGrid.astro b/front/src/components/ui/ItemGrid.astro
new file mode 100644
index 0000000..fe560a3
--- /dev/null
+++ b/front/src/components/ui/ItemGrid.astro
@@ -0,0 +1,65 @@
+---
+import type { ItemGrid as Props } from '~/types';
+import { twMerge } from 'tailwind-merge';
+import Button from './Button.astro';
+import { Icon } from 'astro-icon/components';
+
+const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props;
+
+const {
+ container: containerClass = '',
+ panel: panelClass = '',
+ title: titleClass = '',
+ description: descriptionClass = '',
+ icon: defaultIconClass = 'text-primary',
+ action: actionClass = '',
+} = classes;
+---
+
+{
+ items && (
+
+ {items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
+
+ )
+}
diff --git a/front/src/components/ui/ItemGrid2.astro b/front/src/components/ui/ItemGrid2.astro
new file mode 100644
index 0000000..34a902e
--- /dev/null
+++ b/front/src/components/ui/ItemGrid2.astro
@@ -0,0 +1,53 @@
+---
+import type { ItemGrid as Props } from '~/types';
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+import Button from './Button.astro';
+
+const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props;
+
+const {
+ container: containerClass = '',
+ // container: containerClass = "sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+ panel: panelClass = '',
+ title: titleClass = '',
+ description: descriptionClass = '',
+ icon: defaultIconClass = 'text-primary',
+} = classes;
+---
+
+{
+ items && (
+
+
+ ))}
+
+
+
+ {(icon || defaultIcon) && (
+
+
+ {title &&
+ {title}
} + {description && ( + + )} + {callToAction && ( +
+
+
+ )}
+
+ {items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
+
+ )
+}
diff --git a/front/src/components/ui/Timeline.astro b/front/src/components/ui/Timeline.astro
new file mode 100644
index 0000000..8154604
--- /dev/null
+++ b/front/src/components/ui/Timeline.astro
@@ -0,0 +1,54 @@
+---
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+import type { Item } from '~/types';
+
+export interface Props {
+ items?: Array
+ {(icon || defaultIcon) && (
+
+ ))}
+ {title}
+ {description && (
+
+ )}
+ {callToAction && (
+
+
+
+ )}
+
+ {items.map(({ title, description, icon, classes: itemClasses = {} }, index = 0) => (
+
+ )
+}
diff --git a/front/src/components/ui/WidgetWrapper.astro b/front/src/components/ui/WidgetWrapper.astro
new file mode 100644
index 0000000..a53df1d
--- /dev/null
+++ b/front/src/components/ui/WidgetWrapper.astro
@@ -0,0 +1,31 @@
+---
+import type { HTMLTag } from 'astro/types';
+import type { Widget } from '~/types';
+import { twMerge } from 'tailwind-merge';
+import Background from './Background.astro';
+
+export interface Props extends Widget {
+ containerClass?: string;
+ ['as']?: HTMLTag;
+}
+
+const { id, isDark = false, containerClass = '', bg, as = 'section' } = Astro.props;
+
+const WrapperTag = as;
+---
+
+
+
+ ))}
+
+
+
+
+ {index !== items.length - 1 && }
+
+ {(icon || defaultIcon) && (
+
+
+ {title && }
+ {description && (
+
+ )}
+
+
+
+
+ {title && (
+
+
+
+
+ {APP_BLOG.list.isEnabled && linkText && linkUrl && (
+
+ {linkText} Β»
+
+ )}
+
+ )}
+
+ {information && }
+
+ {title && (
+
+
+
+
+ {APP_BLOG.list.isEnabled && linkText && linkUrl && (
+
+ )}
+
+ )}
+
+ {information && }
+
+ {icons && icons.map((icon) =>
+
+
+ )
+ )
+ }
+
+
+
+ {Array.isArray(actions) ? (
+ actions.map((action) => (
+
+ )
+ }
+
+
+
+ ))
+ ) : (
+
+
+ )
+ }
+
+
+
+
+
+ {content && }
+
+ {
+ callToAction && (
+
+
+
+
+
+ )
+ }
+
+
+
+
+
+
+
+ {
+ tagline && (
+
+ )
+ }
+ {
+ title && (
+
+ )
+ }
+
+
+ {subtitle && }
+ {
+ actions && (
+
+ {content &&
+ {Array.isArray(actions) ? (
+ actions.map((action) => (
+
+ )
+ }
+
+
+
+ ))
+ ) : (
+
+ {
+ image && (
+
+
+ {typeof image === 'string' ? (
+
+ )
+ }
+
+
+
+
+
+
+ {
+ tagline && (
+
+ )
+ }
+ {
+ title && (
+
+ )
+ }
+
+
+ {subtitle && }
+
+ {
+ actions && (
+
+ {content &&
+ {Array.isArray(actions) ? (
+ actions.map((action) => (
+
+ )
+ }
+
+
+
+ ))
+ ) : (
+
+ {
+ image && (
+
+
+ {typeof image === 'string' ? (
+
+ )
+ }
+
+
+
+
+
+
+ {
+ tagline && (
+
+ )
+ }
+ {
+ title && (
+
+ )
+ }
+
+
+ {subtitle && }
+
+ {content &&
+ {
+ callToAction && (
+
+
+ {typeof callToAction === 'string' ? (
+
+ )
+ }
+ {
+ callToAction2 && (
+
+ {typeof callToAction2 === 'string' ? (
+
+ )
+ }
+
+
+
+
+
+
+ {
+ prices &&
+ prices.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
+
+
+ {price && period && (
+
+ ))
+ }
+
+ {hasRibbon && ribbonTitle && (
+
+ )}
+
+
+ {ribbonTitle}
+
+
+ )}
+
+ {title && (
+
+ {callToAction && (
+ {title}
+ )} + {subtitle &&{subtitle}
} +
+
+ {items && (
+
+ $
+ {price}
+
+ {period}
+ -
+ {items.map(
+ ({ description, icon }) =>
+ description && (
+
-
+ ++ {description} +
+
+ )
+ )}
+
+ {typeof callToAction === 'string' ? (
+
+ )}
+
+ {
+ stats &&
+ stats.map(({ amount, title, icon }) => (
+
+
+ {icon && (
+
+ ))
+ }
+
+
+ )}
+ {amount && (
+
+ {amount}
+
+ )}
+ {title && (
+
+ {title}
+
+ )}
+
+
+
+ } />
+
+ {
+ image && (
+
+ {typeof image === 'string' ? (
+
+ )
+ }
+
+
+
+
+
+ {
+ typeof callToAction === 'string' ? (
+
+
+
+ -
+ {
+ items && items.length
+ ? items.map(({ title: title2, description, icon }, index) => (
+
-
+ + + {icon ?+
: index + 1} + + + + ++
+ ))
+ : ''
+ }
+
+ {
+ testimonials &&
+ testimonials.map(({ title, testimonial, name, job, image }) => (
+
+ {
+ callToAction && (
+
+
+ ))
+ }
+
+ {title &&
+ +
+ {title}
} + {testimonial && ( +++ )} + +" {testimonial} "
+
+ +
+ {image && (
+
+
+ {typeof image === 'string' ? (
+
+ )}
+
+
+ {name &&
+ {name}
} + {job &&{job}
} +
+
+
+ )
+ }
+
+
+```
+
+And in usage elsewhere:
+
+```astro
+import MyComponent from "~/components/MyComponent"; ...
+{title}
+This content will be displayed in the slot
+
+
+```
+
+Whoa!! What's going on here?
+
+Notice there is no slot definition in the html portion of the component. Instead, what we do is have _Astro_ render the slot content (here, the 'default' content, but you can also render named slots) into a variable, and then use that content in a _div_ (for instance).
+
+So, if the usage is in a markdown file, like so:
+
+```mdx
+import MyComponent from '../../components/MyComponent';
+
+# Using the above component in a .mdx file (that can take components)
+
+{' '}
+
+{title}
+ + + +Tailwind CSS +
Don't waste + more time! :P +
Don't waste + more time! :P +
+
+
+## Astro Embed
+
+### Youtube
+
+{frontmatter.title}
+
+
+ 
+ Made by onWidget Β· All rights reserved.
+ `,
+};
diff --git a/front/src/pages/404.astro b/front/src/pages/404.astro
new file mode 100644
index 0000000..9ef7a08
--- /dev/null
+++ b/front/src/pages/404.astro
@@ -0,0 +1,24 @@
+---
+import Layout from '~/layouts/Layout.astro';
+import { getHomePermalink } from '~/utils/permalinks';
+
+const title = `Error 404`;
+---
+
+
+
+
+
+ + Error + 404 +
+Sorry, we couldn't find this page.
++ But dont worry, you can find plenty of other things on our homepage. +
+ Back to homepage ++ Beautiful Website Templates +
professional websites made easy +
+
+
+
+
+ Main Features
+Other features
+
+
+
+
+
+ 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. +
About me
++ 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. +
++
+ 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. +
++
If you're curious to dive deeper into my work, you can follow me:
+2021 - Present', + description: `Collaborate with clients to understand design requirements and objectives.
Develop branding solutions, including logos, color palettes, and brand guidelines.
Design marketing materials such as brochures, posters, and digital assets.
Create visually appealing user interfaces for websites and applications.`, + icon: 'tabler:briefcase', + }, + { + title: + 'Junior Graphic Designer
XYZ Creative Agency, Los Angeles, CA
2018 - 2021', + description: `Assisted senior designers in creating design concepts and visual assets.
Contributed to the development of brand identities and marketing collateral.
Collaborated with the marketing team to ensure consistent design across campaigns.
Gained hands-on experience in various design software and tools.`, + icon: 'tabler:briefcase', + }, + ]} + classes={{ container: 'max-w-3xl' }} + /> + + + +
2018 - 2020`, + icon: 'tabler:school', + }, + { + title: `Bachelor of Arts in Graphic Design
New York University's School of Design
2014 - 2018`, + icon: 'tabler:school', + }, + ]} + classes={{ container: 'max-w-3xl' }} + /> + + + +
+ Project 1:
Brand identity for tech innovators
+
+
+ Project 2:
Event poster for art & music festival
+
+
+ Project 3:
E-commerce website redesign for fashion brand
+
+ your ultimate SaaS companion
+
Ensures your website looks stunning and works well on all devices.
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', + }} + > +
+ Startup success stories:
Launching with AstroWind
+
+ Prioritize user needs and pain points through well-structured layouts and clear navigation.
Encourage visitors to take action with strategically placed CTAs.
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', + }} + > +
+ SaaS showcase:
Streamlining user experience
+
+ Prioritizes visuals, allowing you to present your work in high-resolution detail that draws viewers into your creations.
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', + }} + > +
+ Creative portfolios:
Highlighting your work
+
+ 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', + }} + > +
+ Small business growth:
Converting visitors into customers
+
+ Welcome to Astro
-
- To get started, open the directory src/pages in your project.
- Code Challenge: Tweak the "Welcome to Astro" message above.
-
-
-
Building on modern foundations
+ Gain a competitive advantage by incorporating industry leading practices +Tailwind CSS +
Don't + waste more time! :P +