Files
blog/src/pages/landing/mobile-app.astro
2023-08-07 14:36:23 +02:00

243 lines
8.4 KiB
Plaintext

---
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';
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: import('~/assets/images/hero.png'), 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
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. Save time, achieve a polished look, and customize templates to fit your style. Join thousands of satisfied users who've transformed their documents effortlessly. Explore our templates now and experience the difference."
tagline="Step-by-step guide on how to use our app"
columns={2}
items={[
{
title: 'Download and Install the App',
description:
'Morbi faucibus luctus quam, sit amet aliquet felis tempor id. Cras augue massa, ornare quis dignissim a, molestie vel nulla.',
icon: 'tabler:square-number-1',
},
{
title: 'Sign Up',
description:
'Vivamus porttitor, tortor convallis aliquam pretium, turpis enim consectetur elit, vitae egestas purus erat ac nunc nulla.',
icon: 'tabler:square-number-2',
},
{
title: 'Browse Templates',
description:
'Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat. Nulla eleifend nulla id sem fermentum.',
icon: 'tabler:square-number-3',
},
{
title: 'Preview and Select a Template',
description:
'Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat. Nulla eleifend nulla id sem fermentum.',
icon: 'tabler:square-number-4',
},
]}
image={{
src: 'https://cdn.pixabay.com/photo/2023/07/18/21/40/astronaut-8135685_1280.jpg',
alt: 'Astronaut Image',
}}
/>
<!-- Content Widget **************** -->
<Content
items={[
{
title: 'High-Quality Designs',
description: 'Pellentesque dui nibh, cursus ac eros eget, pharetra malesuada tortor.',
icon: 'tabler:wand',
},
{
title: 'Customization Tools',
description: 'Nulla vulputate sollicitudin massa, id rutrum tellus tristique et.',
icon: 'tabler:settings',
},
{
title: 'Pre-Designed Elements',
description: 'Mauris eget urna non leo fringilla auctor quis efficitur sem.',
icon: 'tabler:presentation',
},
{
title: 'Preview and Mockup Views',
description: ' Donec lorem metus, maximus vitae magna sed, tincidunt interdum magna.',
icon: 'tabler:carousel-horizontal',
},
{
title: 'Offline Access',
description:
'Sed accumsan, purus facilisis efficitur accumsan, lectus lacus vestibulum diam, in sollicitudin orci tellus in libero.',
icon: 'tabler:wifi-off',
},
]}
image={{
src: 'https://cdn.pixabay.com/photo/2023/07/22/19/25/ai-generated-8144026_1280.jpg',
alt: 'Features Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Main Features</h3>
</Fragment>
</Content>
<!-- Content Widget **************** -->
<Content
isReversed
isAfterContent
items={[
{
title: 'Time Savings',
description: 'Sed condimentum dui vel lorem cursus molestie duis id tristique justo.',
icon: 'tabler:clock',
},
{
title: 'Professional Appearance',
description: 'Cras purus velit, finibus quis dui nec, faucibus porttitor purus.',
icon: 'tabler:school',
},
{
title: 'Accessibility for Non-Designers',
description: 'Morbi volutpat ultricies dictum. In eu nunc id odio congue porttitor.',
icon: 'tabler:accessible',
},
{
title: 'Cost-Efficiency',
description: 'Fusce vitae odio sed lacus tempor aliquam sit amet ut velit pellentesque sagittis cursus nisi.',
icon: 'tabler:coin',
},
{
title: 'Instant Download',
description:
'Sed semper tempus dolor, non pretium velit lacinia tristique, fusce hendrerit fermentum lorem dignissim convallis.',
icon: 'tabler:file-download',
},
]}
image={{
src: 'https://cdn.pixabay.com/photo/2020/07/25/22/26/rocket-5438053_1280.jpg',
alt: 'Benefits Image',
}}
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Benefits</h3>
</Fragment>
</Content>
<!-- Testimonials Widget *********** -->
<Testimonials
tagline="What our users say about us?"
testimonials={[
{
testimonial:
'Vestibulum auctor dui vel nunc rutrum, quis elementum dui tristique. Sed hendrerit at lacus eget consectetur. In elementum scelerisque scelerisque. Nulla vel venenatis velit.',
name: 'Cary Kennedy',
job: 'Film director',
image: {
src: 'https://cdn.pixabay.com/photo/2023/07/22/19/25/ai-generated-8144026_1280.jpg',
alt: 'Cary Kennedy Image',
},
},
{
testimonial:
'Mauris condimentum at tellus eget lacinia. Integer at ipsum eget urna rhoncus tincidunt. Curabitur condimentum scelerisque lobortis. Cras semper purus egestas sem blandit, in volutpat nibh rutrum.',
name: 'Josh Wilkinson',
job: 'Product Manager',
image: {
src: 'https://cdn.pixabay.com/photo/2023/07/18/21/40/astronaut-8135685_1280.jpg',
alt: 'Josh Wilkinson Image',
},
},
{
testimonial:
'Praesent laoreet metus ac vehicula venenatis. Vivamus ullamcorper enim neque, sit amet eleifend sapien volutpat a. Proin quis varius metus. Etiam ut neque ipsum.',
name: 'Sidney Hansen',
job: 'Decorator',
image: {
src: 'https://cdn.pixabay.com/photo/2020/07/25/22/26/rocket-5438053_1280.jpg',
alt: 'Sidney Hansen Image',
},
},
]}
callToAction={{
targetBlank: true,
text: 'Read more testimonials',
href: 'https://github.com/onwidget/astrowind',
icon: 'tabler:chevron-right',
}}
/>
<!-- CallToAction Widget *********** -->
<CallToAction
callToAction={{
text: 'Download App',
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>