Skip to content

Commit

Permalink
Merge pull request #217 from widgeter/main
Browse files Browse the repository at this point in the history 
Fill out pricing page
  • Loading branch information
@prototypa
prototypa authored Aug 10, 2023
2 parents b48ff27 + b9da7cf commit 3b22a49
Show file tree
Hide file tree
Showing 5 changed files with 257 additions and 147 deletions.
26 changes: 11 additions & 15 deletions src/components/widgets/FAQs.astro
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,33 @@
---
import Headline from "~/components/ui/Headline.astro";
import ItemGrid from "~/components/ui/ItemGrid.astro";
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
import type { Faqs } from "~/types";
import Headline from '~/components/ui/Headline.astro';
import ItemGrid from '~/components/ui/ItemGrid.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import type { Faqs } from '~/types';
const {
title = "",
subtitle = "",
tagline = "",
title = '',
subtitle = '',
tagline = '',
items = [],
columns = 2,
id,
isDark = false,
classes = {},
bg = await Astro.slots.render("bg"),
bg = await Astro.slots.render('bg'),
} = Astro.props as Faqs;
---

<WidgetWrapper
id={id}
isDark={isDark}
containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ""}`}
bg={bg}
>
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
<Headline title={title} subtitle={subtitle} tagline={tagline} />
<ItemGrid
items={items}
columns={columns}
defaultIcon="tabler:chevron-right"
classes={{
container: `${columns === 1 ? 'max-w-4xl' : ''} gap-y-8 md:gap-y-12`,
panel: 'max-w-none',
icon: "flex-shrink-0 mt-1 w-6 h-6 text-primary",
icon: 'flex-shrink-0 mt-1 w-6 h-6 text-primary',
}}
/>
</WidgetWrapper>
120 changes: 52 additions & 68 deletions src/components/widgets/Pricing.astro
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,81 @@
---
import { Icon } from "astro-icon/components";
import CTA from "~/components/ui/CTA.astro";
import Headline from "~/components/ui/Headline.astro";
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
import type { Pricing } from "~/types";
import { Icon } from 'astro-icon/components';
import CTA from '~/components/ui/CTA.astro';
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import type { Pricing } from '~/types';
const {
title = "",
subtitle = "",
tagline = "",
title = '',
subtitle = '',
tagline = '',
prices = [],
id,
isDark = false,
classes = {},
bg = await Astro.slots.render("bg"),
bg = await Astro.slots.render('bg'),
} = Astro.props as Pricing;
---

<WidgetWrapper
id={id}
isDark={isDark}
containerClass={`max-w-6xl mx-auto ${classes?.container ?? ""}`}
bg={bg}
>
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
<Headline title={title} subtitle={subtitle} tagline={tagline} />
<div class="flex items-stretch justify-center">
<div
class="grid grid-cols-3 gap-3 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"
>
<div class="grid grid-cols-3 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
{
prices &&
prices.map(
({
title,
price,
period,
items,
callToAction,
hasRibbon = false,
ribbonTitle,
}) => (
<div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
<div class="rounded-md border-gray-200 bg-white px-6 pt-10 pb-8 shadow-xl transition duration-300 ease-in-out dark:border dark:border-slate-800 dark:bg-slate-900 relative flex w-full max-w-sm flex-col justify-between text-center">
prices.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
<div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
{price && period && (
<div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center">
{hasRibbon && ribbonTitle && (
<div class="absolute right-[-5px] top-[-5px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
<span class="absolute top-[19px] right-[-21px] block w-full rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
{ribbonTitle}
</span>
</div>
)}
<ul class="px-2 py-0">
<li class="text-center text-xl font-medium uppercase leading-6 tracking-wider text-gray-800 dark:text-slate-400">
{title}
</li>
<li class="mt-5 mb-2.5 flex items-center justify-center text-center font-semibold">
<span class="text-5xl">$</span>
<span class="text-6xl">{price}</span>
</li>
<li class="mb-7 text-center text-base font-medium capitalize leading-6 text-gray-600 dark:text-slate-400">
{period}
</li>
{items &&
items.map(({ description, icon }) => (
<li class="mb-1.5 flex items-start text-left text-base leading-7">
<div class="mt-1.5 mr-1.5 flex h-4 w-4 items-center justify-center rounded-full border-2 border-primary bg-primary">
{icon && (
<Icon
name={icon}
class="w-5 h-5 font-bold text-white"
/>
)}
</div>
{description}
</li>
))}
</ul>
<div class="px-2 py-0">
{title && (
<h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">{title}</h3>
)}
{subtitle && <p class="font-light sm:text-lg text-gray-600 dark:text-slate-400">{subtitle}</p>}
<div class="my-8">
<div class="flex items-center justify-center text-center mb-1">
<span class="text-5xl">$</span>
<span class="text-6xl font-extrabold">{price}</span>
</div>
<span class="text-base leading-6 lowercase text-gray-600 dark:text-slate-400">{period}</span>
</div>
{items && (
<ul role="list" class="my-8 md:my-10 space-y-2 text-left">
{items.map(
({ description, icon }) =>
description && (
<li class="mb-1.5 flex items-start space-x-3 leading-7">
<div class="rounded-full bg-primary mt-1">
<Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5 font-bold p-1 text-white" />
</div>
<span>{description}</span>
</li>
)
)}
</ul>
)}
</div>
{callToAction && (
<div class="flex justify-center">
<CTA
callToAction={callToAction}
class={`mt-8 ${
hasRibbon
? "border-primary-600 bg-primary-600 font-semibold text-white hover:border-primary-800 hover:bg-primary-800 hover:text-white dark:border-primary-700 dark:bg-primary-700 dark:text-white dark:hover:border-primary-900 dark:hover:bg-primary-900"
: ""
}`}
/>
<div class={`flex justify-center btn ${hasRibbon ? 'btn-primary' : ''}`}>
{typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />
) : (
callToAction && callToAction.text && callToAction.href && <CTA callToAction={callToAction} />
)}
</div>
)}
</div>
</div>
)
)
)}
</div>
))
}
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion src/components/widgets/Steps2.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ const {
title={title}
subtitle={subtitle}
tagline={tagline}
callToAction={callToAction}
classes={{
container: 'text-center md:text-left mb-4 md:mb-8',
title: 'mb-4 text-3xl lg:text-4xl font-bold font-heading',
Expand Down
Loading

0 comments on commit 3b22a49

Please sign in to comment.