Reorganice navigation and add first landing pages
This commit is contained in:
prototypa
25
src/pages/landing/click-through.astro
Normal file
25
src/pages/landing/click-through.astro
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
import Layout from '~/layouts/LandingLayout.astro';
|
||||
|
||||
import Hero2 from '~/components/widgets/Hero2.astro';
|
||||
|
||||
const metadata = {
|
||||
title: 'Click-through Landing Page Demo',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<!-- Hero2 Widget ******************* -->
|
||||
|
||||
<Hero2
|
||||
tagline="Click-through Landing Demo"
|
||||
title="Unlock the Secrets to an Effective Lead Generation Landing"
|
||||
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
|
||||
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
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: 'AstroWind Hero Image',
|
||||
}}
|
||||
/>
|
||||
</Layout>
|
||||
25
src/pages/landing/lead-generation.astro
Normal file
25
src/pages/landing/lead-generation.astro
Normal file
@ -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',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<!-- Hero2 Widget ******************* -->
|
||||
|
||||
<Hero2
|
||||
tagline="Lead Generation Landing Demo"
|
||||
title="Unlock the Secrets to an Effective Lead Generation Landing"
|
||||
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
|
||||
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
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: 'AstroWind Hero Image',
|
||||
}}
|
||||
/>
|
||||
</Layout>
|
||||
@ -1,275 +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';
|
||||
|
||||
const metadata = {
|
||||
title: 'Mobile App Landing Page',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<Fragment slot="announcement"></Fragment>
|
||||
<Fragment slot="header">
|
||||
<Header
|
||||
links={[]}
|
||||
actions={[
|
||||
{
|
||||
type: 'ghost',
|
||||
text: 'Login',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
type: 'primary',
|
||||
text: 'Sign Up',
|
||||
href: '#',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Fragment>
|
||||
|
||||
<!-- Hero2 Widget ******************* -->
|
||||
|
||||
<Hero2
|
||||
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
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">
|
||||
Free template for <span class="hidden lg:inline">create your website <br />with</span>
|
||||
<span class="text-accent dark:text-white highlight"> Astro 2.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 2.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, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
|
||||
</Fragment>
|
||||
</Hero2>
|
||||
|
||||
<!-- Features3 Widget ************** -->
|
||||
|
||||
<Features3
|
||||
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: '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-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: '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-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">Benefits</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: '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',
|
||||
},
|
||||
},
|
||||
{
|
||||
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: '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',
|
||||
},
|
||||
},
|
||||
]}
|
||||
callToAction={{
|
||||
targetBlank: true,
|
||||
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
|
||||
title="Instant access to beautiful templates"
|
||||
subtitle="Access a variety of stunning templates, simplify your creative process, and elevate your online presence."
|
||||
callToAction={{
|
||||
text: 'Download App',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
icon: 'tabler:download',
|
||||
}}
|
||||
/>
|
||||
</Layout>
|
||||
25
src/pages/landing/pre-launch.astro
Normal file
25
src/pages/landing/pre-launch.astro
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
import Layout from '~/layouts/LandingLayout.astro';
|
||||
|
||||
import Hero2 from '~/components/widgets/Hero2.astro';
|
||||
|
||||
const metadata = {
|
||||
title: 'Coming Soon Landing Page',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<!-- Hero2 Widget ******************* -->
|
||||
|
||||
<Hero2
|
||||
tagline="Coming Soon Landing Demo"
|
||||
title="Unlock the Secrets to an Effective Lead Generation Landing"
|
||||
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
|
||||
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
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: 'AstroWind Hero Image',
|
||||
}}
|
||||
/>
|
||||
</Layout>
|
||||
25
src/pages/landing/product.astro
Normal file
25
src/pages/landing/product.astro
Normal file
@ -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',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<!-- Hero2 Widget ******************* -->
|
||||
|
||||
<Hero2
|
||||
tagline="Product Details Landing Demo"
|
||||
title="Unlock the Secrets to an Effective Lead Generation Landing"
|
||||
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
|
||||
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
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: 'AstroWind Hero Image',
|
||||
}}
|
||||
/>
|
||||
</Layout>
|
||||
@ -1,264 +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 CallToAction from '~/components/widgets/CallToAction.astro';
|
||||
|
||||
import { headerData } from '~/navigation';
|
||||
|
||||
const metadata = {
|
||||
title: 'Saas Landing Page',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<Fragment slot="header">
|
||||
<Header
|
||||
{...headerData}
|
||||
actions={[
|
||||
{
|
||||
type: 'ghost',
|
||||
text: 'Login',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
type: 'primary',
|
||||
text: 'Sign Up',
|
||||
href: '#',
|
||||
},
|
||||
]}
|
||||
isSticky
|
||||
/>
|
||||
</Fragment>
|
||||
|
||||
<!-- Hero2 Widget ******************* -->
|
||||
|
||||
<Hero2
|
||||
callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ 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">
|
||||
Free template for <br />
|
||||
<span class="text-accent dark:text-white highlight"> Astro 2.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 2.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, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
|
||||
</Fragment>
|
||||
</Hero2>
|
||||
|
||||
<!-- Features Widget *************** -->
|
||||
|
||||
<Features
|
||||
id="features"
|
||||
tagline="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',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- Content Widget **************** -->
|
||||
|
||||
<Content
|
||||
isReversed
|
||||
items={[
|
||||
{
|
||||
title: 'Per ei quaeque sensibus',
|
||||
description:
|
||||
'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
|
||||
},
|
||||
{
|
||||
title: 'Cu imperdiet posidonium sed',
|
||||
description:
|
||||
'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
|
||||
},
|
||||
{
|
||||
title: 'Nulla omittam sadipscing mel ne',
|
||||
description:
|
||||
'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
|
||||
},
|
||||
]}
|
||||
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: 'Colorful Image',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="content">
|
||||
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
|
||||
Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
|
||||
euismod tacimates.
|
||||
</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: 'Per ei quaeque sensibus',
|
||||
description:
|
||||
'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
|
||||
},
|
||||
{
|
||||
title: 'Cu imperdiet posidonium sed',
|
||||
description:
|
||||
'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
|
||||
},
|
||||
{
|
||||
title: 'Nulla omittam sadipscing mel ne',
|
||||
description:
|
||||
'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
|
||||
},
|
||||
]}
|
||||
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: 'Colorful Image',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="content">
|
||||
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
|
||||
Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
|
||||
euismod tacimates.
|
||||
</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: 'Per ei quaeque sensibus',
|
||||
description:
|
||||
'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
|
||||
},
|
||||
{
|
||||
title: 'Cu imperdiet posidonium sed',
|
||||
description:
|
||||
'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
|
||||
},
|
||||
{
|
||||
title: 'Nulla omittam sadipscing mel ne',
|
||||
description:
|
||||
'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
|
||||
},
|
||||
]}
|
||||
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: 'Colorful Image',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="content">
|
||||
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
|
||||
Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
|
||||
euismod tacimates.
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="bg">
|
||||
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
|
||||
</Fragment>
|
||||
</Content>
|
||||
|
||||
<!-- Steps2 Widget ****************** -->
|
||||
|
||||
<Steps2
|
||||
title="Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst."
|
||||
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. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus."
|
||||
callToAction={{
|
||||
text: 'Get template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
icon: 'tabler:download',
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
title: 'Responsive Elements',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
},
|
||||
{
|
||||
title: 'Flexible Team',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
},
|
||||
{
|
||||
title: 'Ecologic Software',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- CallToAction Widget *********** -->
|
||||
|
||||
<CallToAction
|
||||
callToAction={{
|
||||
text: 'Get template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
icon: 'tabler:download',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Astro + <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>
|
||||
25
src/pages/landing/sales.astro
Normal file
25
src/pages/landing/sales.astro
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
import Layout from '~/layouts/LandingLayout.astro';
|
||||
|
||||
import Hero2 from '~/components/widgets/Hero2.astro';
|
||||
|
||||
const metadata = {
|
||||
title: 'Sales Landing Page Demo',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<!-- Hero2 Widget ******************* -->
|
||||
|
||||
<Hero2
|
||||
tagline="Sales Landing Demo"
|
||||
title="Unlock the Secrets to an Effective Lead Generation Landing"
|
||||
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
|
||||
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
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: 'AstroWind Hero Image',
|
||||
}}
|
||||
/>
|
||||
</Layout>
|
||||
25
src/pages/landing/squeeze.astro
Normal file
25
src/pages/landing/squeeze.astro
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
import Layout from '~/layouts/LandingLayout.astro';
|
||||
|
||||
import Hero2 from '~/components/widgets/Hero2.astro';
|
||||
|
||||
const metadata = {
|
||||
title: 'Squeeze Landing Page Demo',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<!-- Hero2 Widget ******************* -->
|
||||
|
||||
<Hero2
|
||||
tagline="Squeeze Landing Demo"
|
||||
title="Unlock the Secrets to an Effective Lead Generation Landing"
|
||||
subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
|
||||
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
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: 'AstroWind Hero Image',
|
||||
}}
|
||||
/>
|
||||
</Layout>
|
||||
@ -1,259 +0,0 @@
|
||||
---
|
||||
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';
|
||||
import Features3 from '~/components/widgets/Features3.astro';
|
||||
import FAQs from '~/components/widgets/FAQs.astro';
|
||||
|
||||
const metadata = {
|
||||
title: 'Startup Landing Page',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<Fragment slot="header">
|
||||
<Header {...headerData} showRssFeed showToggleTheme position="left" />
|
||||
</Fragment>
|
||||
|
||||
<!-- Hero Widget ******************* -->
|
||||
|
||||
<Hero
|
||||
callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Free template for <span class="hidden lg:inline">create your website <br />with</span>
|
||||
<span class="text-accent dark:text-white highlight"> Astro 2.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 2.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, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="image">
|
||||
<div class="relative h-0 pb-[56.25%]">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/dsTXcSeAZq8"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
|
||||
allowfullscreen
|
||||
class="absolute top-0 left-0 w-full h-full"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</Fragment>
|
||||
</Hero>
|
||||
|
||||
<!-- Stats Widget ****************** -->
|
||||
|
||||
<Stats
|
||||
title="Our statistics"
|
||||
stats={[
|
||||
{ title: 'Templates', amount: '56' },
|
||||
{ title: 'Downloads', amount: '182K' },
|
||||
{ title: 'User Ratings', amount: '4.8' },
|
||||
{ title: 'Satisfied Clients', amount: '116K' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- 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: 'Download and 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>
|
||||
|
||||
<!-- CallToAction Widget *********** -->
|
||||
|
||||
<CallToAction
|
||||
callToAction={{
|
||||
targetBlank: true,
|
||||
text: 'Get template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
icon: 'tabler:download',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Astro + <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>
|
||||
|
||||
<!-- 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: {
|
||||
targetBlank: true,
|
||||
text: 'Call us',
|
||||
href: '/',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
icon: 'tabler:mail',
|
||||
callToAction: {
|
||||
targetBlank: true,
|
||||
text: 'Write to us',
|
||||
href: '/',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Chat with sales',
|
||||
icon: 'tabler:message-circle',
|
||||
callToAction: {
|
||||
targetBlank: true,
|
||||
text: 'Start chatting',
|
||||
href: '/',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Chat with support',
|
||||
icon: 'tabler:message-circle',
|
||||
callToAction: {
|
||||
targetBlank: true,
|
||||
text: 'Start chatting',
|
||||
href: '/',
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Fragment slot="bg">
|
||||
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
|
||||
</Fragment>
|
||||
</Features3>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user