diff --git a/astro.config.mjs b/astro.config.mjs index 8180135..02f5715 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -3,10 +3,10 @@ import { fileURLToPath } from 'url'; import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; -import partytown from '@astrojs/partytown'; import sitemap from '@astrojs/sitemap'; import tailwind from '@astrojs/tailwind'; +import mdx from '@astrojs/mdx'; +import partytown from '@astrojs/partytown'; import compress from 'astro-compress'; import icon from 'astro-icon'; import tasks from "./src/utils/tasks"; @@ -30,14 +30,12 @@ export default defineConfig({ trailingSlash: SITE_CONFIG.trailingSlash ? 'always' : 'never', output: 'static', - compressHTML: true, integrations: [ tailwind({ applyBaseStyles: false, }), sitemap(), - mdx(), icon({ include: { @@ -65,7 +63,17 @@ export default defineConfig({ tasks(), - compress() + compress({ + css: true, + html: { + removeAttributeQuotes: false, + }, + img: false, + js: true, + svg: true, + + logger: 1, + }), ], markdown: { diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro index 6f3d210..563c9ce 100644 --- a/src/components/widgets/Content.astro +++ b/src/components/widgets/Content.astro @@ -49,7 +49,7 @@ const { {items.map(({ title: title2, description, icon }) => (
-
+
diff --git a/src/components/widgets/Hero2.astro b/src/components/widgets/Hero2.astro index 7e49859..36f501d 100644 --- a/src/components/widgets/Hero2.astro +++ b/src/components/widgets/Hero2.astro @@ -6,6 +6,7 @@ import { CallToAction } from '~/types'; export interface Props { title?: string; subtitle?: string; + tagline?: string; content?: string; callToAction?: string | CallToAction; callToAction2?: string | CallToAction; @@ -15,6 +16,7 @@ export interface Props { const { title = await Astro.slots.render('title'), subtitle = await Astro.slots.render('subtitle'), + tagline, content = await Astro.slots.render('content'), callToAction = await Astro.slots.render('callToAction'), callToAction2 = await Astro.slots.render('callToAction2'), @@ -28,6 +30,12 @@ const {
+ {tagline && ( +

+ )} { title && (

+ This file is essentially an extension of _TailWind's_ base.css. High-level component styles are defined here. Note also styling on elements selected by 'attribute' selectors at the bottom of the files, particularly those selected by 'data' attributes. @@ -36,12 +36,8 @@ The styling mechanism consists of the following files (all paths are prefixed wi Defines custom colors and fonts. For these to take effect in the 'base.css' file, they need to be loaded in the html header section. See next. - - Instantiates the _CustomStyles.astro_ component, along with other meta information (as the name implies). All of this - is injected in to the header - see next. - - - This layout is used for all of the pages rendered by _AstroWind_. The contents of _MetaTags.astro_ component, + + This layout is used for all of the pages rendered by _AstroWind_. The contents of _tailwind.css_ and _CustomStyles.astro_ component, described above, is injected into the html header. @@ -209,56 +205,3 @@ const { subtitle = await Astro.slots.render('subtitle') } = Astro.props; There's a lot to wrap your head around, here. Notice first that _subtitle_ is defined as a prop/argument, but it's being processed as a slot. Interestingly, prop args and slots seem to be somewhat interchangeable: if the subtitle was just a string, it would simply take that assignment. The main difference is that if you render them independently, you have to call the render with an _await_ modifier. - -## CallToAction Property - - - - - - -
Note: -There's a _lot_ of duplicate (or at least very similar code) in the following components, especially as regards the _CallToAction_ mechanism -- adding to a lot of confusion and something of a maintenance headache: - -
- src/components/widgets/Hero.astro src/components/widgets/Steps2.astro src/components/widgets/CallToAction.astro - src/components/widgets/Hero2.astro src/pages/landing/startup.astro -
- -Seems like this could be cleaned up. - -
- -The _CallToAction_ property can be of type `string | CallToAction` where the `CallToAction` is a typed object. In the component, this is handled thusly: - -```astro ---- -const { callToAction = await Astro.slots.render('callToAction') } = Astro.props; -// also rendered as a slot ---- - -
- ... - { - typeof callToAction === 'string' ? ( - - ) : ( - callToAction && - callToAction.text && - callToAction.href && ( -
- - {callToAction.icon && } - {callToAction.text} - -
- ) - ) - } -
-``` - -First, the property type is checked to see if it's a string: if so, it's just set into a child _<Fragment>'s_ html. - -If not, it is validated as an object and then members of the object are assigned to various -html elements. diff --git a/src/layouts/LandingLayout.astro b/src/layouts/LandingLayout.astro new file mode 100644 index 0000000..1655645 --- /dev/null +++ b/src/layouts/LandingLayout.astro @@ -0,0 +1,36 @@ +--- +import PageLayout from '~/layouts/PageLayout.astro'; +import Header from '~/components/widgets/Header.astro'; + +import { headerData } from '~/navigation'; +import { MetaData } from '~/types'; + +export interface Props { + metadata?: MetaData; +} + +const { metadata } = Astro.props; +--- + + + + + + + +
+ + + + diff --git a/src/navigation.js b/src/navigation.js index 67a3aa8..e9ec3d6 100644 --- a/src/navigation.js +++ b/src/navigation.js @@ -3,19 +3,23 @@ import { getPermalink, getBlogPermalink, getAsset } from './utils/permalinks'; export const headerData = { links: [ { - text: 'Landing', + text: 'Homes', links: [ { text: 'Sass', - href: getPermalink('/landing/saas'), + href: getPermalink('/homes/saas'), }, { text: 'Startup', - href: getPermalink('/landing/startup'), + href: getPermalink('/homes/startup'), }, { - text: 'Mobile App', - href: getPermalink('/landing/mobile-app'), + text: 'App Download', + href: getPermalink('/homes/mobile-app'), + }, + { + text: 'Personal', + href: "#", }, ], }, @@ -52,6 +56,35 @@ export const headerData = { }, ], }, + { + text: 'Landing', + links: [ + { + text: 'Lead Generation', + href: getPermalink('/landing/lead-generation'), + }, + { + text: 'Long-form Sales', + href: getPermalink('/landing/sales'), + }, + { + text: 'Click-Through', + href: getPermalink('/landing/click-through'), + }, + { + text: 'Squeeze', + href: getPermalink('/landing/squeeze'), + }, + { + text: 'Product Details (or Services)', + href: getPermalink('/landing/product'), + }, + { + text: 'Coming Soon or Pre-Launch', + href: getPermalink('/landing/pre-launch'), + }, + ], + }, { text: 'Blog', links: [ @@ -81,10 +114,6 @@ export const headerData = { text: 'Widgets', href: '#', }, - { - text: 'Contact', - href: '#', - }, ], actions: [{ type: 'button', text: 'Download', href: 'https://github.com/onwidget/astrowind' }], }; diff --git a/src/pages/landing/mobile-app.astro b/src/pages/homes/mobile-app.astro similarity index 59% rename from src/pages/landing/mobile-app.astro rename to src/pages/homes/mobile-app.astro index 5ec8312..896a399 100644 --- a/src/pages/landing/mobile-app.astro +++ b/src/pages/homes/mobile-app.astro @@ -1,7 +1,6 @@ --- -import Layout from '~/layouts/PageLayout.astro'; +import Layout from '~/layouts/LandingLayout.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'; @@ -11,39 +10,18 @@ import FAQs from '~/components/widgets/FAQs.astro'; import Stats from '~/components/widgets/Stats.astro'; const metadata = { - title: 'Mobile App Landing Page', + title: 'Mobile App Homepage', }; --- - - -
- Free template for @@ -69,24 +47,27 @@ const metadata = { 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.`, + title: 'Download and Install the App', + description: + 'Morbi faucibus luctus quam, sit amet aliquet felis tempor id. Cras augue massa, ornare quis dignissim a, molestie vel nulla.', icon: 'tabler:square-number-1', }, { - title: 'Sign up', + title: 'Sign Up', description: - 'Create your account by providing the necessary information, enabling you to access our full range of features.', + 'Vivamus porttitor, tortor convallis aliquam pretium, turpis enim consectetur elit, vitae egestas purus erat ac nunc nulla.', icon: 'tabler:square-number-2', }, { - title: 'Browse templates', - description: 'Explore our diverse collection of website templates, categorized for easy navigation.', + title: 'Browse Templates', + description: + 'Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat. Nulla eleifend nulla id sem fermentum.', 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.`, + title: 'Preview and Select a Template', + description: + 'Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat. Nulla eleifend nulla id sem fermentum.', icon: 'tabler:square-number-4', }, ]} @@ -99,32 +80,34 @@ const metadata = { @@ -264,12 +251,17 @@ const metadata = { + > + Get Started Now + + + Be very surprised by these huge fake numbers you are seeing on this page. Don't + waste more time! :P + + diff --git a/src/pages/landing/saas.astro b/src/pages/homes/saas.astro similarity index 100% rename from src/pages/landing/saas.astro rename to src/pages/homes/saas.astro diff --git a/src/pages/landing/startup.astro b/src/pages/homes/startup.astro similarity index 97% rename from src/pages/landing/startup.astro rename to src/pages/homes/startup.astro index 0f06c3b..82792ec 100644 --- a/src/pages/landing/startup.astro +++ b/src/pages/homes/startup.astro @@ -1,11 +1,9 @@ --- import Layout from '~/layouts/PageLayout.astro'; -import Header from '~/components/widgets/Header.astro'; import Hero from '~/components/widgets/Hero.astro'; import CallToAction from '~/components/widgets/CallToAction.astro'; -import { headerData } from '~/navigation'; import Features2 from '~/components/widgets/Features2.astro'; import Features from '~/components/widgets/Features.astro'; import Stats from '~/components/widgets/Stats.astro'; @@ -18,10 +16,6 @@ const metadata = { --- - -
- - + + + + diff --git a/src/pages/landing/lead-generation.astro b/src/pages/landing/lead-generation.astro new file mode 100644 index 0000000..4f06f04 --- /dev/null +++ b/src/pages/landing/lead-generation.astro @@ -0,0 +1,25 @@ +--- +import Layout from '~/layouts/LandingLayout.astro'; + +import Hero2 from '~/components/widgets/Hero2.astro'; + +const metadata = { + title: 'Lead Generation Landing Page Demo', +}; +--- + + + + + + diff --git a/src/pages/landing/pre-launch.astro b/src/pages/landing/pre-launch.astro new file mode 100644 index 0000000..d3dc09f --- /dev/null +++ b/src/pages/landing/pre-launch.astro @@ -0,0 +1,25 @@ +--- +import Layout from '~/layouts/LandingLayout.astro'; + +import Hero2 from '~/components/widgets/Hero2.astro'; + +const metadata = { + title: 'Coming Soon Landing Page', +}; +--- + + + + + + diff --git a/src/pages/landing/product.astro b/src/pages/landing/product.astro new file mode 100644 index 0000000..4a0ca4b --- /dev/null +++ b/src/pages/landing/product.astro @@ -0,0 +1,25 @@ +--- +import Layout from '~/layouts/LandingLayout.astro'; + +import Hero2 from '~/components/widgets/Hero2.astro'; + +const metadata = { + title: 'Product Details Landing Page Demo', +}; +--- + + + + + + diff --git a/src/pages/landing/sales.astro b/src/pages/landing/sales.astro new file mode 100644 index 0000000..f2e2257 --- /dev/null +++ b/src/pages/landing/sales.astro @@ -0,0 +1,25 @@ +--- +import Layout from '~/layouts/LandingLayout.astro'; + +import Hero2 from '~/components/widgets/Hero2.astro'; + +const metadata = { + title: 'Sales Landing Page Demo', +}; +--- + + + + + + diff --git a/src/pages/landing/squeeze.astro b/src/pages/landing/squeeze.astro new file mode 100644 index 0000000..1c6807f --- /dev/null +++ b/src/pages/landing/squeeze.astro @@ -0,0 +1,25 @@ +--- +import Layout from '~/layouts/LandingLayout.astro'; + +import Hero2 from '~/components/widgets/Hero2.astro'; + +const metadata = { + title: 'Squeeze Landing Page Demo', +}; +--- + + + + + +