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

Use icons from astro-icon

Browse Source
This commit is contained in:
prototypa
2022-08-26 23:13:09 -04:00
parent 01f4cb2f6f
commit aaac66b82a
18 changed files with 111 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/widgets/BasicFeatures.astro
View File

@ -1,145 +1,111 @@
---
import { Icon } from "astro-icon";
const {} = Astro.props;
---
<section class="relative">
<div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div
class="absolute inset-0 bg-blue-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">
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
<div class="mb-8 text-center">
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">Components</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">Most used widgets</h2>
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
Provides frequently used components for building websites using Tailwind CSS
<p
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
>
Components
</p>
<h2
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
>
Most used widgets
</h2>
<p
class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400"
>
Provides frequently used components for building websites using
Tailwind CSS
</p>
</div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
<div
class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white"
>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:home" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Headers</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:faq" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Footers</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:video-projector" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Features</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:in-transit" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Call-to-Action</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:calculator" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Pricing</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:voice-presentation" class="w-12 h-12"
/>
<div class="ml-4 text-xl font-bold">Testimonial</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
</div>