diff --git a/src/content/post/astrowind-template-in-depth.mdx b/src/content/post/astrowind-template-in-depth.mdx deleted file mode 100644 index e7c4dd8..0000000 --- a/src/content/post/astrowind-template-in-depth.mdx +++ /dev/null @@ -1,207 +0,0 @@ ---- -publishDate: 2023-07-17T00:00:00Z -title: AstroWind template in depth -excerpt: While easy to get started, Astrowind is quite complex internally. This page provides documentation on some of the more intricate parts. -image: https://images.unsplash.com/photo-1534307671554-9a6d81f4d629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1651&q=80 -category: Documentation -tags: - - astro - - tailwind css - - front-end -metadata: - canonical: https://astrowind.vercel.app/astrowind-template-in-depth ---- - -import DListItem from '~/components/ui/DListItem.astro'; -import ToggleTheme from '~/components/common/ToggleTheme.astro'; - -## Overview - -It can be a somewhat daunting task trying to get a handle on _AstroWind_ internals, and particularly various points of usage. - -This page outlines and clarifies some of the techniques found in _AstroWind_. Use it as a guide for further modification, or an instructional for techniques to use in your own endeavors. - -## Styling - -As the name suggests, _AstroWind_ relies on _TailWind_ for styling. Furthermore, _AstroWind_ defines custom low level style settings which are incorporated into _TailWind_ seamlessly, and which provides consistency for higher level styling constructs, as well as enabling dark mode. - -The styling mechanism consists of the following files (all paths are prefixed with `/src/` ): - - - 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. - - - 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. - - - 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. - - -### Dark Mode - -_Dark Mode_ is triggered by the little 'sunlight' icon:in the page header. It is defined in the _components/common/ToggleTheme.astro_, but the event is attached and the action defined in _components/common/BasicScripts.astro_ in the following snippet: - -```javascript -attachEvent('[data-aw-toggle-color-scheme]', 'click', function () { - if (defaultTheme.endsWith(':only')) { - return; - } - document.documentElement.classList.toggle('dark'); - localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; -}); -``` - -Note that this is a client event. _BasicScripts.astro_ defines several other client-side functionality as well as this one. - -## Advanced Slot Usage - -_slots_ are part of the component implementation, which is a common concept among many frameworks, including _Astrojs_. The typical slot definition in a component looks like this: - -```astro ---- -// (file: MyComponent.astro) -const { title } = Astro.props; -export interface Props { - title: string; -} ---- - -
-

{title}

- - -
-
-``` - -And in usage elsewhere: - -```astro -import MyComponent from "~/components/MyComponent"; ... - -

This content will be displayed in the slot

- -``` - -### Alternate usage - -There's another way we can use slots, useful particularly when a component can have markdown content is as follows (study carefully...): - -```astro ---- -// (file: MyComponent.astro) - -const { title } = Astro.props; -export interface Props { - title: string; -} -const content: string = await Astro.props.render('default'); ---- - -// renders the html to the 'content' variable -
-

{title}

-
- -
-
-``` - -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) - -{' '} - -### Here is some markdown content - With a bullet item. -``` - -_MyComponent_ renders the markdown to html and then injects it into the div. - -This actually has a big advantage -- consider that with the normal usage you don't have access to the slot contents: _Astro_ just plops the content into the _<slot/>_ tag. Using this method, however, allows you to access the content and further manipulate it before it gets inserted into the html. - -This allows a great deal of flexibility in component design. - -### Yet Another Step - -Now, we get to the techniques used in _AstroWind_, we'll use the _pages/index.astro_ file to illustrate. - -You'll note that the index file imports a lot of components, each one roughly analagous to a panel in the index page. Each of these components, in turn, is instantiated sequentially throughout the page. But, you'll notice that some of them use this kind of construct (we'll use the last section, _CallToAction_, as it is most illustrative of the technique): - -```astro - - - Astro +
Tailwind CSS - - - - Be very surprised by these huge fake numbers you are seeing on this page. Don't waste - more time! :P - - -``` - -Some things to note, here: - - - This argument is actually being passed a javascript object -- not a string. (However, in the TS definition, it could - be a string...) - - - Furthermore, these <Fragment/> elements each have a _slot="(value)"_ specifier. - - -The latter seems odd, because <Fragment/> is a built-in component over which you have no control, and doesn't have a provision for rendering slots, per se. - -The answer lies in a paragraph in the _Astro_ docs, slots section, which states: - -> Use a `slot="my-slot"` attribute on the child element that you want to pass through to a matching slot `name="my-slot" />` placeholder in your component. - -That's pretty concise and a bit of a head-scratcher to read, but basically what it says is that: - -1. Given a component that defines a slot: -1. you can reference a slot from a child element of that component and, -1. provide content to the parent component's slot from the child by naming the slot in the child with a `slot=""` property assignment, where the _slot-name_ is the parent's slot. - -So, in the example above, the _CallToAction_ component defines the _subtitle_ slot, and the following _<Fragment slot="subtitle">_ populates the slot with the following content: - -```astro - - Be very surprised by these huge fake numbers you are seeing on this page. Don't waste - more time! :P - -``` - -And, the _CallToAction_ component defines and renders it thusly: - -```astro ---- -//... -const { subtitle = await Astro.slots.render('subtitle') } = Astro.props; ---- - -//... -{subtitle &&

} -//... -``` - -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. diff --git a/src/content/post/get-started-website-with-astro-tailwind-css.md b/src/content/post/get-started-website-with-astro-tailwind-css.md deleted file mode 100644 index 2c88722..0000000 --- a/src/content/post/get-started-website-with-astro-tailwind-css.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -publishDate: 2023-08-12T00:00:00Z -author: John Smith -title: Get started with AstroWind to create a website using Astro and Tailwind CSS -excerpt: Start your web journey with AstroWind – harness Astro and Tailwind CSS for a stunning site. Explore our guide now. -image: https://images.unsplash.com/photo-1516996087931-5ae405802f9f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80 -category: Tutorials -tags: - - astro - - tailwind css -metadata: - canonical: https://astrowind.vercel.app/get-started-website-with-astro-tailwind-css ---- - -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - -## Nostra torquent consequat volutpat aliquet neque - -Lorem ipsum dolor sit amet consectetur adipiscing elit proin, aenean litora volutpat urna egestas magnis arcu non, cras ut cursus et sed morbi lectus. Integer faucibus sagittis eu nunc urna aliquet a laoreet torquent, suspendisse penatibus nulla sollicitudin congue rutrum dictum. Ornare mi habitasse fermentum phasellus dui et morbi litora sodales dictum id erat, nibh purus class ligula aenean lectus venenatis euismod cras torquent ac. Senectus sagittis conubia hendrerit at egestas porta venenatis nisi metus gravida tempor, aenean facilisis nisl ante facilisi lacus integer hac iaculis purus. Scelerisque libero torquent egestas curae tellus viverra inceptos imperdiet urna, porta suspendisse interdum primis odio morbi tempor commodo dictumst, suscipit ornare habitasse semper feugiat cras quisque lobortis. - -Iaculis arcu commodo dis proin vitae himenaeos, ante tristique potenti magna ligula, sagittis libero fermentum ullamcorper sociis. Sem eros non arcu natoque fringilla lacus vestibulum lacinia integer mus viverra in proin, sagittis fusce tortor erat enim rutrum vulputate curae laoreet class diam. Inceptos convallis ac nisi natoque nam quisque magnis ut nullam fringilla curae, luctus lacus purus habitant erat magna molestie class habitasse metus, nibh lobortis tortor curabitur neque phasellus feugiat netus morbi parturient. Neque malesuada mauris justo himenaeos pharetra, ullamcorper enim ligula a nulla consequat, eget vivamus velit ridiculus. - -## Praesent tellus ad sapien erat or - -- Quam orci nostra mi nulla, hac a. - -- Interdum iaculis quis tellus sociis orci nulla, quam rutrum conubia tortor primis. - -- Non felis sem placerat aenean duis, ornare turpis nostra. - -- Habitasse duis sociis sagittis cursus, ante dictumst commodo. - -Duis maecenas massa habitasse inceptos imperdiet scelerisque at condimentum ultrices, nam dui leo enim taciti varius cras habitant pretium rhoncus, ut hac euismod nostra metus sagittis mi aenean. Quam eleifend aliquet litora eget a tempor, ultricies integer vestibulum non felis sodales, eros diam massa libero iaculis. - -Nisl ligula ante magnis himenaeos pellentesque orci cras integer urna ut convallis, id phasellus libero est nunc ultrices eget blandit massa ac hac, morbi vulputate quisque tellus feugiat conubia luctus tincidunt curae fermentum. Venenatis dictumst tincidunt senectus vivamus duis dis sociis taciti porta primis, rhoncus ridiculus rutrum curae mattis ullamcorper ac sagittis nascetur curabitur erat, faucibus placerat vulputate eu at habitasse nulla nisl interdum. Varius turpis dignissim montes ac ante tristique quis parturient hendrerit faucibus, consequat auctor penatibus suspendisse rutrum erat nulla inceptos est justo, etiam mollis mauris facilisi cras sociosqu eu sapien sed. - -Blandit aptent conubia mollis mauris habitasse suspendisse torquent aenean, ac primis auctor congue cursus mi posuere molestie, velit elementum per feugiat libero dictumst phasellus. Convallis mollis taciti condimentum praesent id porttitor ac dictumst at, sed in eu eleifend vehicula fermentum lectus litora venenatis, gravida hac molestie cum sociosqu mus viverra torquent. Congue est fusce habitasse ridiculus integer suscipit platea volutpat, inceptos varius elementum pellentesque malesuada interdum magnis. Hac lacus eget enim purus massa commodo nec lectus natoque fames arcu, mattis class quam ut neque dui cras quis diam orci sed velit, erat morbi eros suscipit sagittis laoreet vivamus torquent nulla turpis. - -Ridiculus velit suscipit consequat auctor interdum magna gravida dictumst libero ut habitasse, sollicitudin vehicula suspendisse leo erat tristique at platea sagittis proin dignissim, id ornare scelerisque et urna maecenas congue tincidunt dictum malesuada. Dui vulputate accumsan scelerisque ridiculus dictum quisque et nam hac, tempus ultricies curabitur proin netus diam vivamus. Vestibulum ante ac auctor mi urna risus lacinia vulputate justo orci sociis dui semper, commodo morbi enim vivamus neque sem pellentesque velit donec hac metus odio. Tempor ultrices himenaeos massa sollicitudin mus conubia scelerisque cubilia, nascetur potenti mauris convallis et lectus gravida egestas sociis, erat eros ultricies aptent congue tortor ornare. - -Pretium aliquet sodales aliquam tincidunt litora lectus, erat dui nibh diam mus, sed hendrerit condimentum senectus arcu. Arcu a nibh auctor dapibus eros turpis tempus commodo, libero hendrerit dictum interdum mus class sed scelerisque, sapien dictumst enim magna molestie habitant donec. Fringilla dui sed curabitur commodo varius est vel, viverra primis habitant sapien montes mattis dignissim, gravida cubilia laoreet tempus aliquet senectus. Sociosqu purus praesent porttitor curae sollicitudin accumsan feugiat maecenas donec quis lacus, suscipit taciti convallis odio morbi eros nibh bibendum nunc orci. Magna cras nullam aliquam metus nibh sagittis facilisi tortor nec, mus varius curae ridiculus fames congue interdum erat urna, neque odio lobortis mi mattis diam cubilia arcu. - -Laoreet fusce nec class porttitor mus proin aenean, velit vestibulum feugiat porta egestas sapien posuere, conubia nisi tempus varius hendrerit tortor. Congue aliquam scelerisque neque vivamus habitasse semper mauris pellentesque accumsan posuere, suspendisse lectus gravida erat sagittis arcu praesent mus ornare. Habitasse nibh nam morbi mollis senectus erat risus, cum sollicitudin class platea congue mattis venenatis, luctus aenean parturient hendrerit malesuada ante. Mus auctor tincidunt consequat massa tortor nulla luctus habitasse vestibulum quis velit, laoreet sagittis cum facilisi in sem tellus leo vulputate vehicula bibendum orci, felis nisl blandit lacus convallis congue turpis magna facilisis condimentum. - -Dictumst pellentesque urna donec sociis suscipit montes consequat, commodo quam habitasse senectus fringilla maecenas, inceptos magna tristique eu nullam nam. Maecenas orci nibh hac eu tristique ut penatibus ultrices ante, pellentesque cubilia pharetra dis facilisis aliquam praesent malesuada vivamus, commodo cras velit convallis molestie nec tellus augue. Etiam ut convallis risus id dapibus platea laoreet accumsan, habitant et aenean netus inceptos iaculis per, mauris curae at ligula odio ad eu. Mauris erat tempor interdum sapien commodo per nullam tortor, fusce facilisis vehicula egestas dui nulla conubia ut fames, fringilla et tincidunt penatibus facilisi at mollis. - -Fermentum sociosqu litora primis sollicitudin fusce diam consequat vehicula per lobortis et, viverra sodales magna rutrum sed mollis faucibus molestie purus montes est, risus nostra congue venenatis lectus enim torquent eros dis dapibus. Dui suscipit scelerisque massa ligula euismod accumsan augue, magna vel lacus ante nullam senectus commodo, viverra cubilia eros eget penatibus tempor. Mattis mauris hac felis semper dui sociis faucibus mollis ornare pretium aliquam velit nisl, quis litora sem at vel duis rutrum imperdiet natoque viverra himenaeos tempor. - -Integer eu tristique purus luctus vivamus porttitor vel nisl, tortor malesuada augue vulputate diam velit pellentesque sodales, duis phasellus vestibulum fermentum leo facilisi porta. Hac porttitor cum dapibus volutpat quisque odio taciti nulla senectus mollis curae, accumsan suscipit cubilia tempor ligula in venenatis justo leo erat, magna tincidunt nullam lacinia luctus malesuada non vivamus praesent pharetra. Non quam felis montes pretium volutpat suspendisse lacus, torquent magna dictumst orci libero porta, feugiat taciti cras ridiculus aenean rutrum. Tellus nostra tincidunt hac in ligula mi vulputate venenatis pellentesque urna dui, at luctus tristique quisque vel a dignissim scelerisque platea pretium, suspendisse ante phasellus porttitor quis aliquam malesuada etiam enim nullam. - -Hendrerit taciti litora nec facilisis diam vehicula magnis potenti, parturient velit egestas nisl lobortis tincidunt rutrum cursus, fusce senectus mi massa primis mattis rhoncus. Accumsan est ac varius consequat vulputate, ligula cursus euismod sagittis inceptos scelerisque, lacus malesuada torquent dictumst. Volutpat morbi metus urna rhoncus nunc tempor molestie, congue curabitur quis interdum posuere. Mollis viverra velit tortor mus netus nunc molestie metus, sem massa himenaeos luctus feugiat taciti iaculis fames porttitor, leo arcu consequat gravida dapibus pulvinar elementum. diff --git a/src/content/post/how-to-customize-astrowind-to-your-brand.md b/src/content/post/how-to-customize-astrowind-to-your-brand.md deleted file mode 100644 index efd9b63..0000000 --- a/src/content/post/how-to-customize-astrowind-to-your-brand.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -publishDate: 2023-08-06T00:00:00Z -title: How to customize AstroWind template to suit your branding -excerpt: Personalize AstroWind template for your brand. Our guide unlocks seamless customization steps for a unique online presence. -image: https://images.unsplash.com/photo-1546984575-757f4f7c13cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80 -tags: - - astro - - tailwind css - - theme -metadata: - canonical: https://astrowind.vercel.app/how-to-customize-astrowind-to-your-brand ---- - -## Congue justo vulputate nascetur convallis varius orci fringilla nulla pharetr - -Lorem ipsum dolor sit amet consectetur adipiscing elit, augue malesuada natoque in ad erat aliquam facilisi, lacus rhoncus mattis nostra et a. Mauris malesuada rutrum dis libero egestas mus vulputate, fermentum ad morbi phasellus faucibus tellus leo urna, blandit ullamcorper diam imperdiet dictumst litora. Fringilla eros malesuada lobortis mi odio metus leo, blandit imperdiet augue fames aliquam ultricies tortor massa, duis magnis hendrerit id magna sociosqu. Aptent mi imperdiet id sapien suscipit ut netus turpis, lacinia ac porttitor potenti dui taciti at egestas, fermentum neque nascetur sodales tortor nunc congue. - -Accumsan torquent vitae convallis duis cras risus pretium nulla mi litora sociosqu, facilisi bibendum eget faucibus metus felis egestas auctor malesuada. Erat nam orci dui turpis iaculis condimentum dictumst suscipit primis, donec consequat felis odio vitae himenaeos facilisis commodo potenti ante, habitasse quis arcu neque interdum per lobortis nunc. Ultricies lobortis ullamcorper sagittis et sollicitudin sociis sed dignissim posuere, nisi pharetra erat varius id aenean lacinia commodo morbi primis, ornare diam proin nunc volutpat nec dui egestas. - -## Mauris velit laoreet vitae cursus augue - -- Massa egestas consequat nisl id volutpat, varius neque aenean. - -- Venenatis tincidunt eros pretium viverra lacinia convallis, turpis orci condimentum fusce. - -- Pellentesque in aliquet nisi gravida netus, commodo aptent volutpat. - -- Nisi rutrum eros euismod, parturient ullamcorper mattis a, dapibus vestibulum. - -Senectus fermentum tristique egestas bibendum per dictumst purus pharetra cras dictum pulvinar, vitae nec eros montes dis quis nullam duis netus litora, feugiat cubilia mollis porttitor velit ligula metus ante risus eu. - -Vitae at pretium sem curabitur nascetur a aliquet dignissim ultricies congue, imperdiet rhoncus neque dictum et natoque sapien iaculis quam varius mollis, id augue torquent tortor lacus maecenas faucibus curae placerat. Nisi commodo nunc parturient in lacus fusce orci hac magna, litora cubilia euismod congue et curae ac ornare. Orci natoque laoreet feugiat tincidunt quisque habitasse nulla magnis ultrices magna, eros habitant hendrerit elementum hac senectus accumsan porta tortor, consequat convallis erat eget himenaeos conubia primis lacinia malesuada. - -Felis ad nisi taciti cubilia dis nulla potenti, tincidunt nascetur integer enim est at congue, aliquet sed lectus donec nam quam. Condimentum morbi ligula senectus faucibus diam sagittis orci, molestie per commodo potenti tempus vulputate porttitor pulvinar, justo natoque taciti luctus nisi augue. Ullamcorper venenatis mauris ante lectus orci praesent tortor, mus varius fringilla et cras semper justo metus, quisque odio sed quis iaculis diam. - -Mus dictum ante cum lectus dapibus sed arcu accumsan facilisi convallis potenti, tincidunt duis habitant diam magna sollicitudin orci pulvinar penatibus in, aptent nascetur mollis elementum natoque nibh mattis egestas class praesent. Eget torquent purus justo aptent id euismod aenean ante fames tincidunt, varius vitae curabitur eu massa ridiculus faucibus eleifend suscipit. Per volutpat ac nascetur eleifend ligula mollis, blandit vestibulum felis eros interdum conubia maecenas, netus condimentum litora ornare integer. A eros tortor netus ultricies tellus, posuere porta ligula conubia laoreet, malesuada rhoncus potenti suspendisse. - -Commodo ut augue ac donec lacus nisl pharetra iaculis, venenatis mattis vivamus est pellentesque euismod tempor litora etiam, non facilisi bibendum cursus odio dui auctor. Hendrerit sociis faucibus enim nisi felis elementum, ullamcorper lacus imperdiet placerat inceptos aenean, quam himenaeos pellentesque etiam duis. Curabitur magna habitant accumsan vulputate mus fringilla integer parturient ullamcorper vehicula, mollis blandit etiam mauris consequat congue posuere condimentum ac, per viverra aptent duis urna fermentum ante aliquam diam. - -Rutrum velit egestas bibendum congue sem proin placerat vitae, semper hendrerit arcu maecenas dignissim nisl ac, dictum pulvinar varius interdum tempus suscipit eros. Ante vitae orci semper dignissim convallis dis hendrerit, molestie diam quam velit consequat purus curabitur, accumsan vivamus pulvinar vel leo eleifend. Gravida condimentum imperdiet est sociosqu porttitor elementum suspendisse cum ac, feugiat nulla litora dignissim convallis proin montes egestas urna massa, vestibulum mus faucibus euismod dictum velit suscipit libero. - -Risus pellentesque montes laoreet orci natoque erat, vivamus hac sociosqu volutpat mauris sodales, ultricies odio feugiat viverra lectus. Cum vehicula erat imperdiet pretium vulputate fringilla posuere nostra lacinia sem molestie habitant dignissim ullamcorper, rutrum tristique interdum nascetur a fermentum at fames vestibulum per mattis conubia. Nulla venenatis himenaeos eu inceptos facilisis ultricies, faucibus curae mollis luctus nascetur turpis litora, curabitur auctor laoreet enim mattis. Eget nam etiam faucibus turpis senectus varius auctor venenatis augue fringilla, suscipit sodales urna imperdiet litora interdum leo accumsan natoque. - -Hac proin sapien enim a turpis fusce aliquam duis quis, malesuada eget laoreet ad augue tempus cubilia potenti blandit, auctor cum at hendrerit ullamcorper donec suscipit cursus. Ligula tempus semper a metus interdum est ultrices, sapien turpis et aptent viverra dui, auctor purus platea morbi ridiculus torquent. Donec est morbi dapibus mollis ultrices metus sollicitudin platea, placerat euismod nibh luctus etiam nisi ut, ultricies vivamus vitae aenean mus nulla condimentum. - -Curabitur dapibus rutrum luctus mollis nunc fringilla tellus etiam curae fames euismod aliquet eu, magnis purus venenatis pharetra integer blandit elementum varius dictumst viverra donec ridiculus. Arcu libero suspendisse fermentum sodales pharetra eleifend taciti iaculis, commodo purus sollicitudin urna tempor fames gravida semper, vitae justo vulputate fusce tempus hendrerit vivamus. Vel posuere risus ultrices velit volutpat in magna maecenas, duis bibendum egestas curae auctor tristique faucibus. Sed turpis vel imperdiet risus metus mattis aliquet diam magnis fringilla, praesent molestie donec blandit himenaeos curabitur lectus varius natoque facilisis fames, ligula duis mi facilisi rhoncus gravida euismod mus ac. - -Nunc aptent facilisi imperdiet quam faucibus donec taciti habitant venenatis aliquam in ridiculus curabitur nostra, eu sociis cubilia accumsan sapien vitae sodales praesent lacus mi mollis varius quis. Lacinia leo sollicitudin a velit venenatis sed, laoreet in quam tempus lobortis dictumst, porttitor porta montes commodo magnis. Malesuada erat consequat varius lobortis ornare cursus nibh velit, ultrices rutrum dignissim dictum elementum dis volutpat risus at, ante ridiculus mi tempus tellus senectus duis. - -Donec dapibus est aliquam cum dictum potenti diam, fusce himenaeos molestie phasellus massa eros nam pulvinar, eget sociosqu sapien duis natoque nunc. Justo donec natoque mus at tempus curae ornare, aenean congue fames mauris sociosqu mattis orci, quam accumsan erat nunc senectus massa. Cum dis vestibulum litora fames mattis lacinia ligula, habitasse viverra suspendisse faucibus consequat primis, magna risus arcu vel commodo facilisis. - -Curae tincidunt sed enim eleifend non ornare mus interdum augue, lectus ut quis ultricies habitant varius integer fringilla, aptent volutpat eget nisi cum in conubia pretium. Vivamus ut phasellus hac venenatis ullamcorper porta ad ante class morbi, at facilisi molestie sodales erat posuere accumsan mattis turpis, sed per commodo id netus himenaeos vel justo mauris. Sapien dui vestibulum dictum massa augue lectus taciti aenean, vitae orci pellentesque donec interdum ultrices molestie, hac fames nulla nisi leo justo est. - -Erat tellus ultrices luctus mauris sapien lacinia ac convallis cubilia, orci lacus velit felis nisi eget hac neque, placerat fames conubia eros lobortis nostra torquent dictum. Ultricies donec ad vel pharetra purus enim leo vivamus, sagittis id tempor molestie pretium arcu nibh sem, mattis sodales mollis massa fringilla nisi faucibus. Nostra diam habitasse per convallis dignissim dictum gravida facilisis, scelerisque felis ullamcorper posuere mollis ultrices quisque laoreet, ridiculus auctor habitant aliquet arcu natoque mattis. - -Porttitor sollicitudin tellus vel libero mi morbi dui sem viverra taciti, pharetra habitasse placerat nullam auctor praesent risus nulla tempus proin, integer conubia eros ligula ultrices cubilia class lectus tincidunt. Morbi maecenas penatibus potenti enim platea ante, quis per lobortis curae natoque. Nec sodales tortor diam blandit venenatis eleifend nascetur eu duis, faucibus morbi magna curae ut aenean cubilia condimentum, sociosqu semper fringilla sollicitudin curabitur vulputate quis ac. Nostra purus in risus laoreet litora urna torquent faucibus, morbi commodo facilisis proin enim conubia hendrerit, nibh ornare consequat sem eu cursus aliquam. - -Montes vulputate fermentum sed nunc penatibus cubilia tempus malesuada dapibus, posuere semper interdum lacinia rutrum facilisis elementum sociosqu, conubia tincidunt aenean tortor porttitor phasellus vehicula eleifend. Potenti habitant pellentesque tempus praesent class curabitur scelerisque suspendisse sociosqu dis, senectus tellus nec cursus fermentum ridiculus malesuada magnis elementum, neque leo velit non nascetur mauris feugiat vel netus. Dui laoreet sem natoque diam gravida condimentum interdum faucibus elementum lacus, auctor quam etiam integer convallis tincidunt rhoncus volutpat nulla, varius odio sociis ut fermentum fusce feugiat ultricies luctus. - -Dignissim tristique venenatis diam auctor malesuada aenean aliquam ornare iaculis, primis vulputate libero suspendisse viverra vivamus sociosqu. Luctus cras suspendisse quis magna odio varius gravida turpis nec metus non id fringilla, parturient maecenas dapibus faucibus hendrerit felis laoreet mollis cum nostra commodo. Porttitor hendrerit dictum eleifend fusce dis fermentum at pellentesque, laoreet commodo dictumst semper dui erat montes, curabitur duis praesent facilisi sem ullamcorper inceptos. - -Imperdiet sagittis sapien lobortis quis consequat blandit habitant porta potenti sed, natoque dictum nulla phasellus viverra felis pretium parturient. Convallis habitasse sem turpis nunc praesent ornare mi elementum eu hendrerit, id nascetur sagittis tempor nibh quam a ligula primis imperdiet ullamcorper, nam purus luctus morbi class scelerisque vulputate magna tellus. Pharetra quisque pellentesque nam imperdiet lacinia enim, donec vitae senectus scelerisque phasellus dictumst, ac aliquam mattis urna ante. - -Habitant praesent pulvinar scelerisque per phasellus lobortis velit, magnis odio himenaeos primis curabitur senectus, nascetur ullamcorper convallis nunc placerat nisl. Porta tellus commodo praesent ullamcorper cursus senectus tempor vivamus, penatibus eu purus ultrices posuere mi sodales, urna quisque accumsan imperdiet convallis aptent nisl. Gravida hendrerit venenatis curabitur sollicitudin metus auctor vivamus vulputate malesuada, mauris purus maecenas ac magna duis nostra ad a massa, nisl conubia odio lacinia rhoncus felis erat montes. Nostra eros proin mi venenatis enim semper ad magnis netus, in vestibulum ornare ac fusce aliquet aptent non condimentum faucibus, tempor arcu potenti blandit magna consequat luctus nam. diff --git a/src/content/post/landing.md b/src/content/post/landing.md deleted file mode 100644 index e5eac32..0000000 --- a/src/content/post/landing.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -publishDate: 2023-07-15T00:00:00Z -title: 'Mastering Landing Pages: Practical Guide for 2023' -excerpt: Ever clicked on an ad and found yourself on a page that seemed to really want you to do something? Congratulations, you've landed on a Landing Page! -image: https://images.unsplash.com/photo-1561069934-eee225952461?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80 -tags: - - landing-pages - - front-end - - resources -metadata: - canonical: https://astrowind.vercel.app/landing ---- - -In the vast digital landscape, standing out is more than a desire—it's a necessity. Enter the world of Landing Pages, the unsung heroes of digital marketing. With the power of the AstroWind template, developed using Astro and Tailwind CSS, crafting these pages becomes even more intuitive. Let's dive deep into understanding, creating, and optimizing them. - -## Landing Pages Unveiled - -A **Landing Page** is a standalone web page, distinct from your main website. Crafted with a singular objective: to convert visitors into actionable leads or sales. It's where a visitor "lands" post-clicking on a marketing link or ad. - -Imagine clicking on an ad for a limited-time discount on a popular shoe brand. This action guides you to a page that showcases the discounted shoes, featuring a clear "Buy Now" button. That's a Landing Page in action, focusing your attention solely on the offer. - -## The Power of Precision - -Unlike a homepage brimming with diverse content, a Landing Page is laser-focused. It eliminates potential distractions like excessive navigation, ensuring the visitor's attention remains undivided. The result? Higher conversion rates and a more streamlined user experience. - -![Target](https://images.unsplash.com/photo-1596008194705-2091cd6764d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1639&q=80) - -Think of a Landing Page as a digital salesperson. Just as a salesperson would pitch a product without distractions, a Landing Page promotes an offer without unnecessary links or information. It's like walking into a store with a single product on display, making your choice straightforward. - -## Why Landing Pages Matter - -In today's digital rush, hoping customers stumble upon you is a strategy of the past. Landing Pages are the future. They: - -- **Guide Traffic**: Directing visitors seamlessly through the sales funnel. -- **Boost ROI**: Maximizing returns on marketing investments. -- **Personalize User Experience**: Tailoring content to specific audience segments. - -For instance, if you're launching a new fitness app. A well-crafted Landing Page can target individuals interested in health and wellness, offering them a free trial. This targeted approach ensures that those genuinely interested in fitness are the ones you're engaging with. - -## Crafting the Perfect Landing Page - -Every element of your Landing Page should resonate with its core objective. Here's what a high-converting Landing Page entails: - -- **Benefit-Centric Headline**: Your headline should instantly convey the value proposition. -- **Engaging Imagery**: Visuals that complement and enhance the content. -- **Compelling Copy**: Clear, concise, and persuasive text that speaks directly to the visitor's needs. -- **Clear Call-to-Action (CTA)**: A standout button or link urging the visitor to take action. -- **Minimalist Design**: A clutter-free layout that emphasizes the offer. For example, using a Tailwind CSS web template like AstroWind. -- **Trust Indicators**: Endorsements, reviews, and badges that bolster credibility. - -Imagine browsing online for a writing course. You land on a page with a captivating headline: "Unlock the Writer Within." Below, there's an engaging image of a person writing, followed by persuasive text and a bright "Enroll Now" button. This Landing Page has effectively used its elements to entice you to sign up. - -## Homepage vs. Landing Page - -While both are pivotal, they serve distinct roles: - -- **Homepage**: Offers a panoramic view of your brand, catering to diverse visitor intents. -- **Landing Page**: Zeros in on a single, specific action, be it signing up, purchasing, or downloading. - -Consider a popular online store. Their homepage might display various product categories, from electronics to clothing. However, if they’re promoting a summer sale, the Landing Page would focus solely on summer products. This focused approach urges visitors to take action, encouraging them to "Shop the Summer Sale Now!" - -## The Art of Optimization - -The digital realm is ever-evolving. Regular tweaks based on analytics can ensure your Landing Page remains a conversion powerhouse. Embrace A/B testing to compare different versions and refine for optimal results. - -Let's say you have a Landing Page for a new skincare product. Version A uses an image of the product, while Version B showcases a video review. A/B testing might reveal that Version B, with the video, has a 20% higher conversion rate. Such insights can be invaluable for future campaigns. - -## Landing Pages in Action - -Landing Pages are versatile tools in your marketing toolkit. They play a role in various scenarios: promoting a product launch, capturing emails for a newsletter, or driving event registrations. They’re not just about capturing leads but nurturing and converting them. - -Presented below are several prevalent types of Landing Pages. Each link offers a prime example of its respective type. Additionally, we carefully craft each link in the form of a comprehensive guide. - -This approach ensures that you observe the best practices in action. Also, it enables you to acquire a step-by-step understanding of how to skillfully create each type. - -### [Lead Generation Landing Page](landing/lead-generation) - -**Purpose**: Designed primarily to capture user data, such as email addresses or contact details. - -**Content**: Usually includes a form where users can input their details. It also highlights what they'll get in return, such as an eBook, a webinar, or a free trial. - -**Focus**: Enticing visitors to provide their personal details by offering something valuable in return. - -**Key Differentiator**: Unlike “Click-through Landing Pages,” which guide users to another step, these directly gather user data. - -**Example**: A digital marketing agency offering a free SEO audit in exchange for business contact details. - -### [Long-form Sales Landing Page](landing/sales) - -**Purpose**: Primarily designed to sell, aiming to persuade and convert visitors into customers. - -**Content**: Extensive, providing a wealth of information including product details, benefits, user stories, success stories, guarantees, and bonuses. - -**Focus**: Utilizes a narrative to present a problem and offer the product or service as the solution. The aim is to emotionally connect with the visitor. - -**Key Differentiator**: While 'Click-through Landing Pages' warm up the visitor for a bigger commitment. 'Long-form Sales Landing Pages' aim to close the sale directly on the page. - -**Example**: A weight loss program detailing a person's journey and the challenges they've faced. It also highlights how the program assisted them and why it's an ideal solution for others. - -### [Click-through Landing Page](landing/click-through) - -**Purpose**: Acts as a middle step, warming up visitors for a bigger commitment. - -**Content**: Provides essential details and benefits of an offer, urging visitors to click through to another page. - -**Focus**: To lead visitors to the final conversion point, be it a checkout page or a sign-up form. - -**Key Differentiator**: Unlike "Subscription Landing Pages" that aim for a recurring commitment, these lead to a one-time action. - -**Example**: An online store showcasing a new product's benefits, leading visitors to the purchase page. - -### [Product Details Landing Page](landing/product) - -**Purpose**: Designed to inform by providing specific details about a product or service. - -**Content**: Focuses on features, specifications, and benefits. May include high-quality images, detailed descriptions, demo videos, and user reviews. - -**Focus**: Presents the product or service transparently and attractively. - -**Key Differentiator**: While 'Long-form Sales Landing Pages' aim to persuade through narratives and overcoming objections. 'Product Details Landing Pages' focus on presenting the product or service in a clear and detailed manner. - -**Example**: A tech website detailing a new laptop's specifications, unique features, comparisons with previous models, and user reviews. - -### [Coming Soon or Pre-Launch Landing Page](landing/pre-launch) - -**Purpose**: Creates excitement for an upcoming product, service, or event. - -**Content**: Often includes a countdown timer, teaser content, and an option to sign up for notifications. - -**Focus**: To generate buzz and capture early interest. - -**Key Differentiator**: Unlike other landing pages that present available offers, these promote something not yet accessible. - -**Example**: A game developer teasing their upcoming game release with sneak peeks and an option for early access. - -### [Subscription Landing Page](landing/subscription) - -**Purpose**: Encourages visitors to subscribe to a service, newsletter, or recurring product. - -**Content**: Highlights the benefits of subscribing, often offering special deals or exclusive content for subscribers. - -**Focus**: To secure a long-term commitment from the visitor. - -**Key Differentiator**: Unlike "Click-through Landing Pages" that lead to a one-time action, these aim for a recurring commitment. - -**Example**: A magazine promoting its monthly subscription, detailing exclusive articles and special subscriber-only benefits. - -## Conclusion - -In the digital marketing symphony, Landing Pages become the crescendo. They capture attention, evoke action, and drive results. As we move forward, an essential task is to optimize, maintain relevance, and create high-converting Landing Pages. These factors collectively hold the key to achieving digital success. - -Imagine a world where every online interaction gets personalized and directed. This showcases the potential of Landing Pages. For startups seeking traction or established brands introducing new products, Landing Pages can serve as the catalyst. They possess the power to spur digital growth and boost engagement. diff --git a/src/navigation.js b/src/navigation.js index 130c21d..52861c6 100644 --- a/src/navigation.js +++ b/src/navigation.js @@ -10,153 +10,63 @@ export const headerData = { href: '#' }, { - text: 'Checkout Notes', + text: 'More Coming Soon', href: '#' }, ], }, - // { - // text: 'Products', - // links: [ - // { - // text: 'Shopify Apps', - // href: getPermalink('/homes/saas'), - // }, - // { - // text: 'Coming Soon', - // href: getPermalink('/homes/saas'), - // }, - // ], - // }, - // { - // text: 'Pages', - // links: [ - // { - // text: 'Features (Anchor Link)', - // href: getPermalink('/#features'), - // }, - // { - // text: 'Services', - // href: getPermalink('/services'), - // }, - // { - // text: 'Pricing', - // href: getPermalink('/pricing'), - // }, - // { - // text: 'About us', - // href: getPermalink('/about'), - // }, - // { - // text: 'Contact', - // href: getPermalink('/contact'), - // }, - // { - // text: 'Terms', - // href: getPermalink('/terms'), - // }, - // { - // text: 'Privacy policy', - // href: getPermalink('/privacy'), - // }, - // ], - // }, + { + text: 'FAQS', + href: getPermalink('/faq'), + }, { text: 'About', href: getPermalink('/about'), - // 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: 'Product Details (or Services)', - // href: getPermalink('/landing/product'), - // }, - // { - // text: 'Coming Soon or Pre-Launch', - // href: getPermalink('/landing/pre-launch'), - // }, - // { - // text: 'Subscription', - // href: getPermalink('/landing/subscription'), - // }, - // ], }, { text: 'Blog', href: getBlogPermalink(), - // links: [ - // { - // text: 'Blog List', - // href: getBlogPermalink(), - // }, - // { - // text: 'Article', - // href: getPermalink('get-started-website-with-astro-tailwind-css', 'post'), - // }, - // { - // text: 'Article (with MDX)', - // href: getPermalink('markdown-elements-demo-post', 'post'), - // }, - // { - // text: 'Category Page', - // href: getPermalink('tutorials', 'category'), - // }, - // { - // text: 'Tag Page', - // href: getPermalink('astro', 'tag'), - // }, - // ], }, ], // actions: [{ text: 'Download', href: 'https://github.com/onwidget/astrowind', target: '_blank' }], }; export const footerData = { - links: [ - { - title: 'Product', - links: [ - { text: 'Pricing', href: '#' }, - { text: 'Features', href: '#' }, - { text: 'Resources', href: '#' }, - ], - }, - { - title: 'Platform', - links: [ - { text: 'Developer API', href: '#' }, - { text: 'Partners', href: '#' }, - ], - }, - { - title: 'Support', - links: [ - { text: 'Docs', href: '#' }, - { text: 'Community Forum', href: '#' }, - { text: 'Professional Services', href: '#' }, - ], - }, - { - title: 'Company', - links: [ - { text: 'About', href: '#' }, - { text: 'Blog', href: '#' }, - { text: 'Team', href: '#' }, - { text: 'Careers', href: '#' }, - { text: 'Press', href: '#' }, - ], - }, - ], + // links: [ + // { + // title: 'Product', + // links: [ + // { text: 'Pricing', href: '#' }, + // { text: 'Features', href: '#' }, + // { text: 'Resources', href: '#' }, + // ], + // }, + // { + // title: 'Platform', + // links: [ + // { text: 'Developer API', href: '#' }, + // { text: 'Partners', href: '#' }, + // ], + // }, + // { + // title: 'Support', + // links: [ + // { text: 'Docs', href: '#' }, + // { text: 'Community Forum', href: '#' }, + // { text: 'Professional Services', href: '#' }, + // ], + // }, + // { + // title: 'Company', + // links: [ + // { text: 'About', href: '#' }, + // { text: 'Blog', href: '#' }, + // { text: 'Team', href: '#' }, + // { text: 'Careers', href: '#' }, + // { text: 'Press', href: '#' }, + // ], + // }, + // ], secondaryLinks: [ { text: 'Terms', href: getPermalink('/terms') }, { text: 'Privacy Policy', href: getPermalink('/privacy') }, diff --git a/src/pages/contact.astro b/src/pages/contact.astro deleted file mode 100644 index 70157e0..0000000 --- a/src/pages/contact.astro +++ /dev/null @@ -1,79 +0,0 @@ ---- -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', -}; ---- - - - - - - - - - - - - diff --git a/src/pages/faq.astro b/src/pages/faq.astro new file mode 100644 index 0000000..8d8c56f --- /dev/null +++ b/src/pages/faq.astro @@ -0,0 +1,65 @@ +--- +import FAQs from '~/components/widgets/FAQs.astro'; +import Hero from '~/components/widgets/Hero.astro'; +import Layout from '~/layouts/PageLayout.astro'; + +const metadata = { + title: 'FAQS', +}; +--- + + + + + + Frequently Asked Questions + + + Dive into the following questions to gain insights into the powerful features that AstroWind offers and how it can + elevate your web development journey. + + + + + + diff --git a/src/pages/homes/mobile-app.astro b/src/pages/homes/mobile-app.astro deleted file mode 100644 index 8d06721..0000000 --- a/src/pages/homes/mobile-app.astro +++ /dev/null @@ -1,297 +0,0 @@ ---- -import Layout from '~/layouts/PageLayout.astro'; - -import Header from '~/components/widgets/Header.astro'; - -import Hero2 from '~/components/widgets/Hero2.astro'; -import CallToAction from '~/components/widgets/CallToAction.astro'; -import Features3 from '~/components/widgets/Features3.astro'; -import Content from '~/components/widgets/Content.astro'; -import Testimonials from '~/components/widgets/Testimonials.astro'; -import FAQs from '~/components/widgets/FAQs.astro'; -import Stats from '~/components/widgets/Stats.astro'; - -import Button from '~/components/ui/Button.astro'; -import Image from '~/components/common/Image.astro'; - -const appStoreImg = '~/assets/images/app-store.png'; -const appStoreDownloadLink = 'https://github.com/onwidget/astrowind'; - -const googlePlayImg = '~/assets/images/google-play.png'; -const googlePlayDownloadLink = 'https://github.com/onwidget/astrowind'; - -const metadata = { - title: 'Mobile App Homepage', -}; ---- - - - - -

- - - - - - - AstroWind App:
professional websites - - - - - Download now and embark on a journey to elevate your projects like never before. - - -
- - - -
- - - - - - - - - - -

Main Features

- - - - - - - -

Other features

- - - - - - - - - - - - - - - - - - -
- - - -
- - diff --git a/src/pages/homes/personal.astro b/src/pages/homes/personal.astro deleted file mode 100644 index 092053d..0000000 --- a/src/pages/homes/personal.astro +++ /dev/null @@ -1,405 +0,0 @@ ---- -import Layout from '~/layouts/PageLayout.astro'; - -import Header from '~/components/widgets/Header.astro'; -import Hero from '~/components/widgets/Hero.astro'; -import Content from '~/components/widgets/Content.astro'; -import CallToAction from '~/components/widgets/CallToAction.astro'; -import Features3 from '~/components/widgets/Features3.astro'; -import Testimonials from '~/components/widgets/Testimonials.astro'; -import Steps from '~/components/widgets/Steps.astro'; -import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro'; -import { getPermalink } from '~/utils/permalinks'; - -const metadata = { - title: 'Personal Homepage Demo', -}; ---- - - - - -
- - - - - - - I'm a Graphic Designer passionate about crafting visual stories.
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:

- - - -
- - - - - - ABC Design Studio, New York, NY
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' }} - /> - - - - New York University's School of Design
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 -

- - - -
- - - - - - - - - - - - - - - -
- - - diff --git a/src/pages/homes/saas.astro b/src/pages/homes/saas.astro deleted file mode 100644 index 25e0c0b..0000000 --- a/src/pages/homes/saas.astro +++ /dev/null @@ -1,349 +0,0 @@ ---- -import Layout from '~/layouts/PageLayout.astro'; - -import Header from '~/components/widgets/Header.astro'; -import Hero2 from '~/components/widgets/Hero2.astro'; -import Features from '~/components/widgets/Features.astro'; -import Steps2 from '~/components/widgets/Steps2.astro'; -import Content from '~/components/widgets/Content.astro'; -import Pricing from '~/components/widgets/Pricing.astro'; - -import { headerData } from '~/navigation'; -import FAQs from '~/components/widgets/FAQs.astro'; -import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro'; - -const metadata = { - title: 'SaaS Landing Page', -}; ---- - - - -
- - - - - - - Simplify web design with Astrowind:
your ultimate SaaS companion
- - - - - Seamlessly blend the power of Astro 4.0 and Tailwind CSS to craft websites that resonate with your brand and audience. - - - - - - - - - - Make a memorable first impression with visually appealing design elements that highlight your startup's unique value proposition.
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 -

- - - -
- - - - - - Effectively communicate complex SaaS features through visual aids, animations, and interactive elements.
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 -

- - - -
- - - - - - Tailor your portfolio to reflect your unique style and artistic vision.
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 -

- - - -
- - - - - - Strategically placed CTAs, user-friendly forms, and optimized layouts work together to drive user engagement and conversions.
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 -

- - - -
- - - - - - - - - - - -
- - - - - - - - - - - -
- - - diff --git a/src/pages/homes/startup.astro b/src/pages/homes/startup.astro deleted file mode 100644 index 51daa77..0000000 --- a/src/pages/homes/startup.astro +++ /dev/null @@ -1,317 +0,0 @@ ---- -import Layout from '~/layouts/PageLayout.astro'; - -import Hero from '~/components/widgets/Hero.astro'; -import CallToAction from '~/components/widgets/CallToAction.astro'; - -import Features2 from '~/components/widgets/Features2.astro'; -import Features from '~/components/widgets/Features.astro'; -import Stats from '~/components/widgets/Stats.astro'; -import Features3 from '~/components/widgets/Features3.astro'; -import FAQs from '~/components/widgets/FAQs.astro'; -import Brands from '~/components/widgets/Brands.astro'; - -import { YouTube } from 'astro-embed'; - -const metadata = { - title: 'Startup Landing Page', -}; ---- - - - - - - - Improve your Startup with Astrowind templates - - - - Step into the spotlight with Astrowind templates, your pathway to fortifying your - startup's digital footprint, fostering credibility, and expanding your reach. - - - - - - - - - - - - -
- - - - - - - - - - - - - - - -
- - - - - - - - - - - -
- - - - - - - - - - - Be a part of our vision - - - Discover a dynamic work environment, unparalleled growth opportunities, and the chance to make a meaningful - impact. - - - diff --git a/src/pages/index.astro b/src/pages/index.astro index 5ff84c4..0f4dc42 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,9 +4,6 @@ import Layout from '~/layouts/PageLayout.astro'; import Hero from '~/components/widgets/Hero.astro'; import Features from '~/components/widgets/Features.astro'; import Features2 from '~/components/widgets/Features2.astro'; -import Content from '~/components/widgets/Content.astro'; -// import FAQs from '~/components/widgets/FAQs.astro'; -// import Stats from '~/components/widgets/Stats.astro'; const metadata = { title: 'Sturmfrei Pty Ltd', @@ -74,226 +71,32 @@ const metadata = { ]} /> - - - -

Building on modern foundations

- Gain a competitive advantage by incorporating industry leading practices - - - -
- - - - - - Ensure your online presence truly represents you. - - -
- - - - - - - - -
- - - - - - - - + /> diff --git a/src/pages/landing/click-through.astro b/src/pages/landing/click-through.astro deleted file mode 100644 index 47140ed..0000000 --- a/src/pages/landing/click-through.astro +++ /dev/null @@ -1,41 +0,0 @@ ---- -import Layout from '~/layouts/LandingLayout.astro'; - -import Hero2 from '~/components/widgets/Hero2.astro'; -import CallToAction from '~/components/widgets/CallToAction.astro'; - -const metadata = { - title: 'Click-through Landing Page Demo', -}; ---- - - - - - - - - diff --git a/src/pages/landing/lead-generation.astro b/src/pages/landing/lead-generation.astro deleted file mode 100644 index 09f6fad..0000000 --- a/src/pages/landing/lead-generation.astro +++ /dev/null @@ -1,41 +0,0 @@ ---- -import Layout from '~/layouts/LandingLayout.astro'; - -import Hero from '~/components/widgets/Hero.astro'; -import CallToAction from '~/components/widgets/CallToAction.astro'; - -const metadata = { - title: 'Lead Generation Landing Page Demo', -}; ---- - - - - - - - - diff --git a/src/pages/landing/pre-launch.astro b/src/pages/landing/pre-launch.astro deleted file mode 100644 index 43c9da7..0000000 --- a/src/pages/landing/pre-launch.astro +++ /dev/null @@ -1,41 +0,0 @@ ---- -import Layout from '~/layouts/LandingLayout.astro'; - -import Hero2 from '~/components/widgets/Hero2.astro'; -import CallToAction from '~/components/widgets/CallToAction.astro'; - -const metadata = { - title: 'Pre-Launch Landing Page', -}; ---- - - - - - - - - diff --git a/src/pages/landing/product.astro b/src/pages/landing/product.astro deleted file mode 100644 index 238cd7e..0000000 --- a/src/pages/landing/product.astro +++ /dev/null @@ -1,41 +0,0 @@ ---- -import Layout from '~/layouts/LandingLayout.astro'; - -import Hero from '~/components/widgets/Hero.astro'; -import CallToAction from '~/components/widgets/CallToAction.astro'; - -const metadata = { - title: 'Product Details Landing Page Demo', -}; ---- - - - - - - - - diff --git a/src/pages/landing/sales.astro b/src/pages/landing/sales.astro deleted file mode 100644 index f992a46..0000000 --- a/src/pages/landing/sales.astro +++ /dev/null @@ -1,41 +0,0 @@ ---- -import Layout from '~/layouts/LandingLayout.astro'; - -import Hero2 from '~/components/widgets/Hero2.astro'; -import CallToAction from '~/components/widgets/CallToAction.astro'; - -const metadata = { - title: 'Sales Landing Page Demo', -}; ---- - - - - - - - - diff --git a/src/pages/landing/subscription.astro b/src/pages/landing/subscription.astro deleted file mode 100644 index 192b6e3..0000000 --- a/src/pages/landing/subscription.astro +++ /dev/null @@ -1,41 +0,0 @@ ---- -import Layout from '~/layouts/LandingLayout.astro'; - -import Hero2 from '~/components/widgets/Hero2.astro'; -import CallToAction from '~/components/widgets/CallToAction.astro'; - -const metadata = { - title: 'Subscription Landing Page Demo', -}; ---- - - - - - - - - diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro deleted file mode 100644 index 0e7fb1a..0000000 --- a/src/pages/pricing.astro +++ /dev/null @@ -1,244 +0,0 @@ ---- -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', -}; ---- - - - - - - - - - - - - - diff --git a/src/pages/services.astro b/src/pages/services.astro deleted file mode 100644 index 6250bd3..0000000 --- a/src/pages/services.astro +++ /dev/null @@ -1,224 +0,0 @@ ---- -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', -}; ---- - - - - - - - - - - - - - - -

Main Features

- - - - - - - -

Benefits

- - - - - - - - - - -