mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve design

Browse Source
This commit is contained in:
prototypa
2023-01-21 20:21:00 -05:00
parent 79283511d9
commit 8e702e6ee5
11 changed files with 53 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/blog/HighlightedPosts.astro
View File

@ -23,7 +23,7 @@ const {
const posts = await findPostsByIds(postIds);
---
<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
<section class="px-4 py-16 mx-auto max-w-screen-xl lg:py-20">
<div class="flex flex-col lg:justify-between lg:flex-row mb-8">
<div class="md:max-w-sm">
{

12
src/components/common/ToggleTheme.astro
View File

@ -1,6 +1,8 @@
---
import { Icon } from 'astro-icon';
import { SITE } from '~/config.mjs';
export interface Props {
label?: string;
class?: string;
@ -17,6 +19,10 @@ const {
} = Astro.props;
---
<button type="button" class={className} aria-label={label} data-aw-toggle-color-scheme>
<Icon name={iconName} class={iconClass} />
</button>
{
!(SITE?.defaultTheme && SITE.defaultTheme.endsWith(':only')) && (
<button type="button" class={className} aria-label={label} data-aw-toggle-color-scheme>
<Icon name={iconName} class={iconClass} />
</button>
)
}

4
src/components/widgets/Content.astro
View File

@ -56,7 +56,7 @@ const {
)
}
</div>
<div class="mx-auto max-w-6xl p-4 md:px-8">
<div class="mx-auto max-w-screen-xl p-4 md:px-8">
<div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
<div class="md:basis-1/2 self-center">
{content && <div class="mb-12 text-lg text-gray-600 dark:text-slate-400" set:html={content} />}
@ -67,7 +67,7 @@ const {
{items.map(({ title: title2, description, icon }) => (
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-blue-800 text-gray-50">
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary-800 text-gray-50">
<Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5" />
</div>
</div>

2
src/components/widgets/Features2.astro
View File

@ -24,7 +24,7 @@ const {
<section class="relative">
<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div class="relative max-w-6xl mx-auto px-4 sm:px-6 -mb-12">
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 -mb-12">
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
{
(title || subtitle || highlight) && (

26
src/components/widgets/Hero.astro
View File

@ -19,26 +19,29 @@ export interface Props {
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
content = await Astro.slots.render('content'),
callToAction = await Astro.slots.render('callToAction'),
callToAction2 = await Astro.slots.render('callToAction2'),
image = await Astro.slots.render('image'),
} = Astro.props;
---
<section>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<section class="relative md:-mt-[76px]">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6">
<div class="pt-0 md:pt-[76px]"></div>
<div class="py-12 md:py-20">
<div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">
<div class="text-center pb-10 md:pb-16 max-w-screen-lg mx-auto">
{
title && (
<h1
class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading"
class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
set:html={title}
/>
)
}
<div class="max-w-3xl mx-auto">
{subtitle && <p class="text-xl font-medium text-gray-500 mb-8 dark:text-slate-400" set:html={subtitle} />}
{subtitle && <p class="text-xl text-gray-600 mb-6 dark:text-slate-300" set:html={subtitle} />}
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
{
callToAction && (
@ -78,22 +81,23 @@ const {
}
</div>
</div>
{content && <Fragment set:html={content} />}
</div>
<div>
{
image && (
<div class="relative m-auto max-w-4xl">
<div class="relative m-auto max-w-5xl">
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Picture
class="mx-auto rounded-md w-full"
widths={[400, 768, 1480]}
sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
aspectRatio={1480 / 833}
widths={[400, 768, 1024, 2040]}
sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
aspectRatio={1024 / 576}
loading="eager"
width={1480}
height={833}
width={1024}
height={576}
{...image}
/>
)}

274
src/components/widgets/Pricing.astro
View File

@ -1,274 +0,0 @@
---
---
<!-- Pricing -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Pricing</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">
Whatever your status, our offers evolve according to your needs.
</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:items-center">
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Free</h4>
<span class="mt-7 font-bold text-5xl text-gray-800 dark:text-gray-200">Free</span>
<p class="mt-2 text-sm text-gray-500">Forever free</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 1 user</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border-2 border-blue-600 text-center shadow-xl rounded-xl p-8 dark:border-blue-500">
<p class="mb-3">
<span
class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs uppercase font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-white"
>Most popular</span
>
</p>
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Startup</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
39
</span>
<p class="mt-2 text-sm text-gray-500">All the basics for starting a new business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 2 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Team</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
89
</span>
<p class="mt-2 text-sm text-gray-500">Everything you need for a growing business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 5 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Enterprise</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
149
</span>
<p class="mt-2 text-sm text-gray-500">Advanced features for scaling your business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 10 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Pricing -->