Modify stats widget and include on mobile-app page
This commit is contained in:
widgeter
@ -1,57 +1,46 @@
|
||||
---
|
||||
interface Item {
|
||||
name: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
tagline?: string;
|
||||
items?: Array<Item>;
|
||||
}
|
||||
import { Stats } from '~/types';
|
||||
import WidgetWrapper from '../ui/WidgetWrapper.astro';
|
||||
import Headline from '../ui/Headline.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
tagline,
|
||||
items = [],
|
||||
} = Astro.props;
|
||||
stats = [],
|
||||
|
||||
id,
|
||||
isDark = false,
|
||||
classes = {},
|
||||
bg = await Astro.slots.render('bg'),
|
||||
} = Astro.props as Stats;
|
||||
---
|
||||
|
||||
<div class="px-4 py-4 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl not-prose">
|
||||
{
|
||||
(title || subtitle || tagline) && (
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
{tagline && (
|
||||
<p class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase">
|
||||
{tagline}
|
||||
</p>
|
||||
)}
|
||||
{title && (
|
||||
<h2
|
||||
class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading"
|
||||
set:html={title}
|
||||
/>
|
||||
)}
|
||||
{subtitle && (
|
||||
<p class="max-w-3xl mx-auto text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
|
||||
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
|
||||
<Headline title={title} subtitle={subtitle} tagline={tagline} />
|
||||
<div class="flex flex-wrap justify-center -m-4 text-center">
|
||||
{
|
||||
items.map(({ name, value }) => (
|
||||
<div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-12 md:mb-0">
|
||||
<div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary dark:text-blue-600 font-heading">
|
||||
{value}
|
||||
stats &&
|
||||
stats.map(({ amount, title, icon }) => (
|
||||
<div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] mb-12 text-center md:mb-0 md:border-r md:last:border-none dark:md:border-slate-500">
|
||||
{icon && (
|
||||
<div class="flex items-center justify-center mx-auto mb-4 text-primary">
|
||||
<Icon name={icon} class="w-10 h-10" />
|
||||
</div>
|
||||
)}
|
||||
{amount && (
|
||||
<div class="font-heading text-primary text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
|
||||
{amount}
|
||||
</div>
|
||||
)}
|
||||
{title && (
|
||||
<h6 class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
|
||||
{title}
|
||||
</h6>
|
||||
)}
|
||||
</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
{name}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</WidgetWrapper>
|
||||
|
||||
@ -13,7 +13,7 @@ import Stats from '~/components/widgets/Stats.astro';
|
||||
import CallToAction from '~/components/widgets/CallToAction.astro';
|
||||
|
||||
const metadata = {
|
||||
title: "AstroWind — Free template for create a website with Astro + Tailwind CSS",
|
||||
title: 'AstroWind — Free template for create a website with Astro + Tailwind CSS',
|
||||
dontUseTitleTemplate: true,
|
||||
};
|
||||
---
|
||||
@ -28,15 +28,16 @@ const metadata = {
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Free template for <span class="hidden xl:inline">creating websites with</span>
|
||||
<span class="text-accent dark:text-white highlight"> Astro 2.0</span> + Tailwind CSS </Fragment>
|
||||
<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="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.
|
||||
<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>
|
||||
</Hero>
|
||||
|
||||
@ -120,8 +121,8 @@ const metadata = {
|
||||
>
|
||||
<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.
|
||||
Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
|
||||
euismod tacimates.
|
||||
</Fragment>
|
||||
</Content>
|
||||
|
||||
@ -311,11 +312,11 @@ const metadata = {
|
||||
<!-- Stats Widget ****************** -->
|
||||
|
||||
<Stats
|
||||
items={[
|
||||
{ name: 'Downloads', value: '132K' },
|
||||
{ name: 'Stars', value: '24.8K' },
|
||||
{ name: 'Forks', value: '10.3K' },
|
||||
{ name: 'Users', value: '48.4K' },
|
||||
stats={[
|
||||
{ title: 'Downloads', amount: '132K' },
|
||||
{ title: 'Stars', amount: '24.8K' },
|
||||
{ title: 'Forks', amount: '10.3K' },
|
||||
{ title: 'Users', amount: '48.4K' },
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@ 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',
|
||||
@ -178,6 +179,16 @@ const metadata = {
|
||||
</Fragment>
|
||||
</Content>
|
||||
|
||||
<!-- Stats Widget ****************** -->
|
||||
|
||||
<Stats
|
||||
stats={[
|
||||
{ amount: '20K', icon: 'tabler:download' },
|
||||
{ amount: '18.5K', icon: 'tabler:users' },
|
||||
{ amount: '4.7', icon: 'tabler:user-star' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- Testimonials Widget *********** -->
|
||||
|
||||
<Testimonials
|
||||
|
||||
@ -57,11 +57,11 @@ const metadata = {
|
||||
<!-- Stats Widget ****************** -->
|
||||
|
||||
<Stats
|
||||
items={[
|
||||
{ name: 'Templates', value: '56' },
|
||||
{ name: 'Downloads', value: '182K' },
|
||||
{ name: 'User Ratings', value: '4.8' },
|
||||
{ name: 'Satisfied Clients', value: '116K' },
|
||||
stats={[
|
||||
{ title: 'Templates', amount: '56' },
|
||||
{ title: 'Downloads', amount: '182K' },
|
||||
{ title: 'User Ratings', amount: '4.8' },
|
||||
{ title: 'Satisfied Clients', amount: '116K' },
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user