Use icons from astro-icon
This commit is contained in:
prototypa
@ -44,7 +44,6 @@ Inside AstroWind template, you'll see the following folders and files:
|
|||||||
| | └── ...
|
| | └── ...
|
||||||
│ ├── components/
|
│ ├── components/
|
||||||
│ │ ├── core/
|
│ │ ├── core/
|
||||||
| | ├── icons/
|
|
||||||
| | └── widgets/
|
| | └── widgets/
|
||||||
| | ├── Header.astro
|
| | ├── Header.astro
|
||||||
| | ├── Footer.astro
|
| | ├── Footer.astro
|
||||||
|
|||||||
@ -17,6 +17,7 @@
|
|||||||
"@astrojs/tailwind": "^1.0.0",
|
"@astrojs/tailwind": "^1.0.0",
|
||||||
"@tailwindcss/typography": "^0.5.4",
|
"@tailwindcss/typography": "^0.5.4",
|
||||||
"astro": "^1.0.0",
|
"astro": "^1.0.0",
|
||||||
|
"astro-icon": "^0.7.3",
|
||||||
"prettier": "^2.7.1",
|
"prettier": "^2.7.1",
|
||||||
"prettier-plugin-astro": "^0.5.0",
|
"prettier-plugin-astro": "^0.5.0",
|
||||||
"reading-time": "^1.5.0",
|
"reading-time": "^1.5.0",
|
||||||
|
|||||||
@ -6,4 +6,12 @@
|
|||||||
.btn {
|
.btn {
|
||||||
@apply inline-flex items-center justify-center rounded border border-transparent font-medium text-center text-base leading-snug transition py-3 px-6 shadow-lg ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2;
|
@apply inline-flex items-center justify-center rounded border border-transparent font-medium text-center text-base leading-snug transition py-3 px-6 shadow-lg ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[astro-icon] > * {
|
||||||
|
stroke-width: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
[astro-icon].icon-bold > * {
|
||||||
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
@ -1,20 +0,0 @@
|
|||||||
---
|
|
||||||
const { class: className = "w-5 h-5" } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class={className}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.75"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<line x1="7" y1="7" x2="17" y2="17"></line>
|
|
||||||
<polyline points="17 8 17 17 8 17"></polyline>
|
|
||||||
</svg>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
---
|
|
||||||
const { class: className = "w-5 h-5" } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class={className}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.75"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
||||||
<line x1="13" y1="18" x2="19" y2="12"></line>
|
|
||||||
<line x1="13" y1="6" x2="19" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
---
|
|
||||||
const { class: className = "w-5 h-5" } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class={className}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.75"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path
|
|
||||||
d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
---
|
|
||||||
const { class: className = "w-5 h-5" } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class={className}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.75"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path
|
|
||||||
d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
---
|
|
||||||
const { class: className = "w-5 h-5" } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class={className}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.75"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<rect x="4" y="4" width="16" height="16" rx="4"></rect>
|
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
|
||||||
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
|
|
||||||
</svg>
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
---
|
|
||||||
const { class: className = "w-5 h-5" } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class={className}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.75"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<line class="line1 transition" x1="4" y1="8" x2="20" y2="8"></line>
|
|
||||||
<line class="line2 transition" x1="4" y1="16" x2="20" y2="16"></line>
|
|
||||||
</svg>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
---
|
|
||||||
const { class: className = "w-5 h-5" } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class={className}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<circle cx="5" cy="19" r="1"></circle>
|
|
||||||
<path d="M4 4a16 16 0 0 1 16 16"></path>
|
|
||||||
<path d="M4 11a9 9 0 0 1 9 9"></path>
|
|
||||||
</svg>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
---
|
|
||||||
const { class: className = "w-5 h-5" } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class={className}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.75"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<circle cx="12" cy="12" r="4"></circle>
|
|
||||||
<path
|
|
||||||
d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
---
|
|
||||||
const { class: className = "w-5 h-5" } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class={className}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.75"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path
|
|
||||||
d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import IconSun from "./IconSun.astro";
|
|
||||||
import IconGithub from "./IconGithub.astro";
|
|
||||||
import IconTwitter from "./IconTwitter.astro";
|
|
||||||
import IconFacebook from "./IconFacebook.astro";
|
|
||||||
import IconInstagram from "./IconInstagram.astro";
|
|
||||||
import IconArrowRight from "./IconArrowRight.astro";
|
|
||||||
import IconMenu from "./IconMenu.astro";
|
|
||||||
import IconArrowDownRight from "./IconArrowDownRight.astro";
|
|
||||||
import IconRSS from "./IconRSS.astro";
|
|
||||||
|
|
||||||
export {
|
|
||||||
IconSun,
|
|
||||||
IconGithub,
|
|
||||||
IconTwitter,
|
|
||||||
IconFacebook,
|
|
||||||
IconInstagram,
|
|
||||||
IconArrowRight,
|
|
||||||
IconMenu,
|
|
||||||
IconArrowDownRight,
|
|
||||||
IconRSS,
|
|
||||||
};
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
import { IconArrowDownRight } from "~/components/icons";
|
import { Icon } from "astro-icon";
|
||||||
const {} = Astro.props;
|
const {} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -18,7 +18,10 @@ const {} = Astro.props;
|
|||||||
<div class="space-y-8">
|
<div class="space-y-8">
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-4 text-xl font-bold">
|
<p class="mb-4 text-xl font-bold">
|
||||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
<Icon
|
||||||
|
name="tabler:arrow-down-right"
|
||||||
|
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||||
|
/>
|
||||||
What do I need to start?
|
What do I need to start?
|
||||||
</p>
|
</p>
|
||||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||||
@ -32,7 +35,10 @@ const {} = Astro.props;
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-4 text-xl font-bold">
|
<p class="mb-4 text-xl font-bold">
|
||||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
<Icon
|
||||||
|
name="tabler:arrow-down-right"
|
||||||
|
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||||
|
/>
|
||||||
How to install the Astro + Tailwind CSS template?
|
How to install the Astro + Tailwind CSS template?
|
||||||
</p>
|
</p>
|
||||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||||
@ -49,7 +55,10 @@ const {} = Astro.props;
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-4 text-xl font-bold">
|
<p class="mb-4 text-xl font-bold">
|
||||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
<Icon
|
||||||
|
name="tabler:arrow-down-right"
|
||||||
|
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||||
|
/>
|
||||||
What's something that you completely don't understand?
|
What's something that you completely don't understand?
|
||||||
</p>
|
</p>
|
||||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||||
@ -62,7 +71,10 @@ const {} = Astro.props;
|
|||||||
<div class="space-y-8">
|
<div class="space-y-8">
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-4 text-xl font-bold">
|
<p class="mb-4 text-xl font-bold">
|
||||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
<Icon
|
||||||
|
name="tabler:arrow-down-right"
|
||||||
|
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||||
|
/>
|
||||||
What's an example of when you changed your mind?
|
What's an example of when you changed your mind?
|
||||||
</p>
|
</p>
|
||||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||||
@ -74,7 +86,10 @@ const {} = Astro.props;
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-4 text-xl font-bold">
|
<p class="mb-4 text-xl font-bold">
|
||||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
<Icon
|
||||||
|
name="tabler:arrow-down-right"
|
||||||
|
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||||
|
/>
|
||||||
What is something that you would really like to try again?
|
What is something that you would really like to try again?
|
||||||
</p>
|
</p>
|
||||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||||
@ -88,7 +103,10 @@ const {} = Astro.props;
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-4 text-xl font-bold">
|
<p class="mb-4 text-xl font-bold">
|
||||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
<Icon
|
||||||
|
name="tabler:arrow-down-right"
|
||||||
|
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||||
|
/>
|
||||||
If you could only ask one question to each person you meet, what would
|
If you could only ask one question to each person you meet, what would
|
||||||
that question be?
|
that question be?
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -1,145 +1,111 @@
|
|||||||
---
|
---
|
||||||
|
import { Icon } from "astro-icon";
|
||||||
const {} = Astro.props;
|
const {} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="relative">
|
<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="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="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
||||||
<div class="mb-8 text-center">
|
<div class="mb-8 text-center">
|
||||||
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">Components</p>
|
<p
|
||||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">Most used widgets</h2>
|
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
|
||||||
<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
|
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>
|
</p>
|
||||||
</div>
|
</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
|
<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"
|
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">
|
<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">
|
<Icon name="flat-color-icons:home" class="w-12 h-12" />
|
||||||
<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>
|
|
||||||
<div class="ml-4 text-xl font-bold">Headers</div>
|
<div class="ml-4 text-xl font-bold">Headers</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
<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
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
dolore.
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<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"
|
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">
|
<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">
|
<Icon name="flat-color-icons:faq" class="w-12 h-12" />
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="ml-4 text-xl font-bold">Footers</div>
|
<div class="ml-4 text-xl font-bold">Footers</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
<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
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
dolore.
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<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"
|
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">
|
<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">
|
<Icon name="flat-color-icons:video-projector" class="w-12 h-12" />
|
||||||
<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>
|
|
||||||
<div class="ml-4 text-xl font-bold">Features</div>
|
<div class="ml-4 text-xl font-bold">Features</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
<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
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
dolore.
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<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"
|
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">
|
<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">
|
<Icon name="flat-color-icons:in-transit" class="w-12 h-12" />
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="ml-4 text-xl font-bold">Call-to-Action</div>
|
<div class="ml-4 text-xl font-bold">Call-to-Action</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
<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
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
dolore.
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<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"
|
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">
|
<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">
|
<Icon name="flat-color-icons:calculator" class="w-12 h-12" />
|
||||||
<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>
|
|
||||||
<div class="ml-4 text-xl font-bold">Pricing</div>
|
<div class="ml-4 text-xl font-bold">Pricing</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
<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
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
dolore.
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<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"
|
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">
|
<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">
|
<Icon name="flat-color-icons:voice-presentation" class="w-12 h-12"
|
||||||
<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>
|
|
||||||
<div class="ml-4 text-xl font-bold">Testimonial</div>
|
<div class="ml-4 text-xl font-bold">Testimonial</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
<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
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
dolore.
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,11 +1,6 @@
|
|||||||
---
|
---
|
||||||
import {
|
import { Icon } from "astro-icon";
|
||||||
IconTwitter,
|
|
||||||
IconInstagram,
|
|
||||||
IconFacebook,
|
|
||||||
IconArrowRight,
|
|
||||||
IconRSS,
|
|
||||||
} from "~/components/icons";
|
|
||||||
const {} = Astro.props;
|
const {} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -186,7 +181,8 @@ const {} = Astro.props;
|
|||||||
class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
|
class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
|
||||||
aria-hidden="true"></span>
|
aria-hidden="true"></span>
|
||||||
|
|
||||||
<IconArrowRight
|
<Icon
|
||||||
|
name="tabler:arrow-right"
|
||||||
class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
|
class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
@ -204,7 +200,7 @@ const {} = Astro.props;
|
|||||||
aria-label="Twitter"
|
aria-label="Twitter"
|
||||||
href="#"
|
href="#"
|
||||||
>
|
>
|
||||||
<IconTwitter />
|
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="ml-4">
|
<li class="ml-4">
|
||||||
@ -213,7 +209,7 @@ const {} = Astro.props;
|
|||||||
aria-label="Instagram"
|
aria-label="Instagram"
|
||||||
href="#"
|
href="#"
|
||||||
>
|
>
|
||||||
<IconInstagram />
|
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="ml-4">
|
<li class="ml-4">
|
||||||
@ -222,7 +218,7 @@ const {} = Astro.props;
|
|||||||
aria-label="Facebook"
|
aria-label="Facebook"
|
||||||
href="#"
|
href="#"
|
||||||
>
|
>
|
||||||
<IconFacebook />
|
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="ml-4">
|
<li class="ml-4">
|
||||||
@ -231,7 +227,7 @@ const {} = Astro.props;
|
|||||||
aria-label="Twitter"
|
aria-label="Twitter"
|
||||||
href="/rss.xml"
|
href="/rss.xml"
|
||||||
>
|
>
|
||||||
<IconRSS />
|
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
import { IconSun, IconGithub, IconMenu, IconRSS } from "~/components/icons";
|
import { Icon } from "astro-icon";
|
||||||
import Logo from "~/components/widgets/Logo.astro";
|
import Logo from "~/components/widgets/Logo.astro";
|
||||||
|
|
||||||
const {} = Astro.props;
|
const {} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -21,14 +22,14 @@ const {} = Astro.props;
|
|||||||
aria-label="Toggle between Dark and Light mode"
|
aria-label="Toggle between Dark and Light mode"
|
||||||
data-aw-toggle-color-scheme
|
data-aw-toggle-color-scheme
|
||||||
>
|
>
|
||||||
<IconSun class="w-6 h-6" />
|
<Icon name="tabler:sun" class="w-6 h-6" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition"
|
class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition"
|
||||||
aria-label="Toggle Menu"
|
aria-label="Toggle Menu"
|
||||||
data-aw-toggle-menu
|
data-aw-toggle-menu
|
||||||
>
|
>
|
||||||
<IconMenu class="w-6 h-6" />
|
<Icon name="tabler:menu" class="w-6 h-6" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -80,21 +81,21 @@ const {} = Astro.props;
|
|||||||
aria-label="Toggle between Dark and Light mode"
|
aria-label="Toggle between Dark and Light mode"
|
||||||
data-aw-toggle-color-scheme
|
data-aw-toggle-color-scheme
|
||||||
>
|
>
|
||||||
<IconSun />
|
<Icon name="tabler:sun" class="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
<a
|
<a
|
||||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||||
aria-label="RSS Feed"
|
aria-label="RSS Feed"
|
||||||
href="/rss.xml"
|
href="/rss.xml"
|
||||||
>
|
>
|
||||||
<IconRSS />
|
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://github.com/onwidget/astrowind"
|
href="https://github.com/onwidget/astrowind"
|
||||||
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1"
|
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1"
|
||||||
aria-label="Astrowind Github"
|
aria-label="Astrowind Github"
|
||||||
>
|
>
|
||||||
<IconGithub />
|
<Icon name="tabler:brand-github" class="w-5 h-5" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,5 +1,7 @@
|
|||||||
---
|
---
|
||||||
|
import { Icon } from "astro-icon";
|
||||||
import Picture from "~/components/core/Picture.astro";
|
import Picture from "~/components/core/Picture.astro";
|
||||||
|
|
||||||
const {} = Astro.props;
|
const {} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -12,24 +14,10 @@ const {} = Astro.props;
|
|||||||
<div
|
<div
|
||||||
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
||||||
>
|
>
|
||||||
<svg
|
<Icon
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
name="tabler:arrow-down"
|
||||||
class="w-5 h-5 text-gray-600 dark:text-slate-200"
|
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
||||||
width="24"
|
/>
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path
|
|
||||||
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||||
@ -52,24 +40,10 @@ const {} = Astro.props;
|
|||||||
<div
|
<div
|
||||||
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
||||||
>
|
>
|
||||||
<svg
|
<Icon
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
name="tabler:arrow-down"
|
||||||
class="w-5 h-5 text-gray-600 dark:text-slate-200"
|
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
||||||
width="24"
|
/>
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path
|
|
||||||
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||||
@ -91,24 +65,10 @@ const {} = Astro.props;
|
|||||||
<div
|
<div
|
||||||
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
||||||
>
|
>
|
||||||
<svg
|
<Icon
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
name="tabler:arrow-down"
|
||||||
class="w-5 h-5 text-gray-600 dark:text-slate-200"
|
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
||||||
width="24"
|
/>
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path
|
|
||||||
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||||
@ -130,21 +90,10 @@ const {} = Astro.props;
|
|||||||
<div
|
<div
|
||||||
class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2"
|
class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2"
|
||||||
>
|
>
|
||||||
<svg
|
<Icon
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
name="tabler:check"
|
||||||
class="w-6 text-gray-600 dark:text-slate-200"
|
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
||||||
width="24"
|
/>
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path d="M5 12l5 5l10 -10"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user