Make dark mode work
This commit is contained in:
PrototypeArea
4
.gitignore
vendored
4
.gitignore
vendored
@ -17,6 +17,4 @@ pnpm-debug.log*
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
package-lock.json
|
||||
.DS_Store
|
||||
@ -1,5 +1,4 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
|
||||
@ -7,10 +6,11 @@ import sitemap from "@astrojs/sitemap";
|
||||
export default defineConfig({
|
||||
// Astro uses this full URL to generate your sitemap and canonical URLs in your final build
|
||||
site: "https://tailwind-astro.vercel.app",
|
||||
|
||||
integrations: [
|
||||
tailwind({
|
||||
config: { applyBaseStyles: false },
|
||||
config: {
|
||||
applyBaseStyles: false,
|
||||
},
|
||||
}),
|
||||
sitemap({}),
|
||||
],
|
||||
|
||||
6989
package-lock.json
generated
6989
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,5 @@
|
||||
---
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
@ -6,7 +7,7 @@
|
||||
<div class="py-12 md:py-20">
|
||||
<div class="max-w-3xl mx-auto text-center pb-12">
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">Astro + Tailwind CSS</h2>
|
||||
<p class="text-xl text-gray-600 ">Arcu cursus vitae congue mauris
|
||||
<p class="text-xl text-gray-600 dark:text-slate-400">Arcu cursus vitae congue mauris
|
||||
rhoncus viverra nibh cras pulvinar mattis blandit libero cursus mattis.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
@ -11,12 +12,12 @@
|
||||
</p>
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
|
||||
Most used Sections
|
||||
</h2><p class="max-w-3xl mx-auto text-center text-xl text-gray-600">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
</h2><p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.</p>
|
||||
</div>
|
||||
<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">
|
||||
<div class="flex items-center mb-6">
|
||||
<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>
|
||||
@ -31,12 +32,12 @@
|
||||
Headers
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-200 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 dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
|
||||
<div class="flex items-center mb-6">
|
||||
<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>
|
||||
@ -52,12 +53,12 @@
|
||||
Footers
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-200 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 dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
|
||||
<div class="flex items-center mb-6">
|
||||
<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>
|
||||
@ -72,12 +73,12 @@
|
||||
Features
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-200 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 dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
|
||||
<div class="flex items-center mb-6">
|
||||
<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>
|
||||
@ -93,12 +94,12 @@
|
||||
Call-to-Action
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-200 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 dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
|
||||
<div class="flex items-center mb-6">
|
||||
<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>
|
||||
@ -113,12 +114,12 @@
|
||||
Pricing
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-200 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 dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl">
|
||||
<div class="flex items-center mb-6">
|
||||
<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>
|
||||
@ -133,7 +134,7 @@
|
||||
Testimonial
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-200 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 dolore.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section>
|
||||
@ -9,10 +10,10 @@
|
||||
<div class="flex flex-wrap -mx-8">
|
||||
<div class="w-full lg:w-1/2 px-8">
|
||||
<div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
|
||||
<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading dark:text-white">
|
||||
<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
|
||||
Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
|
||||
</h2>
|
||||
<p class="mb-8 text-xl text-gray-600 dark:text-gray-300">
|
||||
<p class="mb-8 text-xl text-gray-600 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.
|
||||
Fusce sit amet dui tellus.
|
||||
@ -33,10 +34,10 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="px-4">
|
||||
<h3 class="my-4 text-xl font-semibold dark:text-white">
|
||||
<h3 class="my-4 text-xl font-semibold">
|
||||
Responsive Elements
|
||||
</h3>
|
||||
<p class="text-gray-500 dark:text-gray-300 ">
|
||||
<p class="text-gray-500 dark:text-gray-400 ">
|
||||
All elements are responsive and provide the best display in all screen size. It's magic !
|
||||
</p>
|
||||
</div>
|
||||
@ -48,10 +49,10 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="px-4">
|
||||
<h3 class="my-4 text-xl font-semibold dark:text-white">
|
||||
<h3 class="my-4 text-xl font-semibold">
|
||||
Flexible Team
|
||||
</h3>
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Flexibility is the key. All team is available 24/24 and joinable every day on our hotline.
|
||||
</p>
|
||||
</div>
|
||||
@ -63,10 +64,10 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="px-4">
|
||||
<h3 class="my-4 text-xl font-semibold dark:text-white">
|
||||
<h3 class="my-4 text-xl font-semibold">
|
||||
Ecologic Software
|
||||
</h3>
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Our Software are ecologic and responsable. Green is not just a color, it's a way of life.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -4,62 +4,82 @@
|
||||
|
||||
<footer>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-gray-200">
|
||||
<div class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
|
||||
<div class="sm:col-span-12 lg:col-span-3">
|
||||
<div class="mb-2"><a class="inline-block font-bold" aria-label="Tailwind Astro" href="/">AstroWind</a></div>
|
||||
<div class="text-sm text-gray-600"><a
|
||||
class="text-gray-600 hover:text-gray-900 hover:underline transition duration-150 ease-in-out"
|
||||
href="/">Terms</a> · <a
|
||||
class="text-gray-600 hover:text-gray-900 hover:underline transition duration-150 ease-in-out"
|
||||
href="/">Privacy Policy</a></div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<a class="text-gray-600 hover:text-gray-700 hover:underline transition duration-150 ease-in-out"
|
||||
href="/">Terms</a> ·
|
||||
<a class="text-gray-600 hover:text-gray-700 hover:underline transition duration-150 ease-in-out"
|
||||
href="/">Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<h6 class="text-gray-800 font-medium mb-2">Products</h6>
|
||||
<h6 class="text-gray-800 dark:text-gray-500 font-medium mb-2">Products</h6>
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out" href="/">Web
|
||||
Studio</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">DynamicBox Flex</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Programming Forms</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Integrations</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Command-line</a></li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Web
|
||||
Studio</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">DynamicBox
|
||||
Flex</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Programming
|
||||
Forms</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Integrations</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Command-line</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<h6 class="text-gray-800 font-medium mb-2">Resources</h6>
|
||||
<h6 class="text-gray-800 dark:text-gray-500 font-medium mb-2">Resources</h6>
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Documentation</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Tutorials & Guides</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Blog</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Support Center</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Partners</a></li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Documentation</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Tutorials &
|
||||
Guides</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Blog</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Support Center</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Partners</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<h6 class="text-gray-800 font-medium mb-2">Company</h6>
|
||||
<h6 class="text-gray-800 dark:text-gray-500 font-medium mb-2">Company</h6>
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Home</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">About us</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Company values</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Pricing</a></li>
|
||||
<li class="mb-2"><a class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
href="/">Privacy Policy</a></li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Home</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">About us</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Company values</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Pricing</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 transition duration-150 ease-in-out" href="/">Privacy Policy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-3">
|
||||
<h6 class="text-gray-800 font-medium mb-2">Subscribe</h6>
|
||||
<h6 class="text-gray-800 dark:text-gray-500 font-medium mb-2">Subscribe</h6>
|
||||
<p class="text-sm text-gray-600 mb-4">Get the latest news and articles to your inbox every month.</p>
|
||||
<form>
|
||||
<div class="flex flex-wrap mb-4">
|
||||
@ -67,10 +87,11 @@
|
||||
<label class="block text-sm sr-only" for="newsletter">Email</label>
|
||||
<div class="relative flex items-center max-w-xs">
|
||||
<input id="newsletter" type="email"
|
||||
class="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm border rounded-sm dark:bg-slate-900"
|
||||
class="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm border rounded-sm dark:bg-slate-900 dark:border-slate-600"
|
||||
placeholder="Your email">
|
||||
<button type="submit" class="absolute inset-0 left-auto" aria-label="Subscribe">
|
||||
<span class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300" aria-hidden="true"></span>
|
||||
<span class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
|
||||
aria-hidden="true"></span>
|
||||
<svg class="w-3 h-3 fill-current text-blue-600 mx-3 flex-shrink-0" viewBox="0 0 12 12"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z"
|
||||
@ -85,33 +106,40 @@
|
||||
</div>
|
||||
<div class="md:flex md:items-center md:justify-between py-4 md:py-8">
|
||||
<ul class="flex mb-4 md:order-1 md:ml-4 md:mb-0">
|
||||
<li><a
|
||||
class="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out"
|
||||
<li>
|
||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-white"
|
||||
aria-label="Twitter" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24 11.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H8c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z">
|
||||
</path>
|
||||
</svg></a></li>
|
||||
<li class="ml-4"><a
|
||||
class="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out"
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ml-4">
|
||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-white"
|
||||
aria-label="Github" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16 8.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V22c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z">
|
||||
</path>
|
||||
</svg></a></li>
|
||||
<li class="ml-4"><a
|
||||
class="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out"
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ml-4">
|
||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-white"
|
||||
aria-label="Facebook" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M14.023 24L14 17h-3v-3h3v-2c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V14H21l-1 3h-2.72v7h-3.257z">
|
||||
</path>
|
||||
</svg></a></li>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-sm text-gray-600 mr-4">Made by <a class="text-blue-600 hover:underline"
|
||||
href="https://onwidget.com/">onWidget</a>. All rights reserved.</div>
|
||||
<div class="text-sm text-gray-600 mr-4 dark:text-slate-500">
|
||||
Made by <a class="text-blue-600 hover:underline" href="https://onwidget.com/">onWidget</a>. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@ -2,20 +2,27 @@
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<header class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-gray-900 backdrop-blur-sm border-b dark:border-b-0">
|
||||
|
||||
<header
|
||||
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-gray-900 backdrop-blur-sm border-b dark:border-b-0">
|
||||
|
||||
<div class="py-3 px-3 mx-auto w-full lg:flex lg:justify-between max-w-6xl lg:px-4">
|
||||
<div class="flex justify-between">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">AstroWind</span>
|
||||
<span
|
||||
class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">AstroWind</span>
|
||||
</a>
|
||||
<div class="flex items-center lg:hidden">
|
||||
<button type="button" 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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5">
|
||||
<button type="button"
|
||||
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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
|
||||
class="w-5 h-5">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ml-1 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"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="w-6 h-6">
|
||||
<button
|
||||
class="ml-1 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"><svg
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
|
||||
aria-hidden="true" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@ -24,28 +31,38 @@
|
||||
<div class="items-center w-full lg:w-auto hidden lg:flex text-gray-600 dark:text-slate-200">
|
||||
<ul class="flex flex-col py-2 lg:py-0 lg:flex-row lg:self-center collapse w-full lg:w-auto collapsed">
|
||||
<li>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out" href="#">Products</a>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#">Products</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out" href="#">Docs</a>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out" href="#">Resources</a>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#">Resources</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="lg:self-center flex items-center mb-4 lg:mb-0 collapse collapsed">
|
||||
<div class="hidden items-center mr-3 lg:flex">
|
||||
<button type="button" 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"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5">
|
||||
<button type="button"
|
||||
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"
|
||||
onclick="window.toggleDarkMode()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
|
||||
class="w-5 h-5">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<a 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">
|
||||
<svg class="w-5 h-5" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
|
||||
<a 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">
|
||||
<svg class="w-5 h-5" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path fill="currentColor"
|
||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
|
||||
<!-- <a class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-center ml-3 btn-sm" href="/login/">Get started
|
||||
</a> -->
|
||||
</div>
|
||||
|
||||
@ -1,31 +1,38 @@
|
||||
---
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="pt-32 pb-12 md:pt-40 md:pb-20">
|
||||
<div class="text-center pb-12 md:pb-16">
|
||||
<h1 class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 ">Your
|
||||
website with <span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro</span> + <span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Tailwind</span>
|
||||
<h1 class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 ">
|
||||
Your website with
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro</span> +
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Tailwind</span>
|
||||
</h1>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<p class="text-xl text-gray-600 mb-8 ">Lorem ipsum dolor sit amet, consectetur
|
||||
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
||||
Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
||||
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
<div class="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center ">
|
||||
<div><a class="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="#0">Get
|
||||
started</a></div>
|
||||
<div><a class="btn text-white bg-gray-900 hover:bg-gray-800 w-full sm:w-auto sm:ml-4" href="#0">Learn
|
||||
more</a></div>
|
||||
<div>
|
||||
<a class="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="#0">Get
|
||||
started</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 w-full sm:w-auto sm:ml-4"
|
||||
href="#0">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative flex justify-center mb-8 ">
|
||||
<div class="flex flex-col justify-center"><img class="mx-auto rounded-md" src="/images/hero-astro.jpg"
|
||||
width="768" height="432" alt="Hero">
|
||||
<div class="flex flex-col justify-center">
|
||||
<img class="mx-auto rounded-md" src="/images/hero-astro.jpg" width="768" height="432" alt="Hero">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body class="antialiased text-gray-900 dark:text-slate-400 tracking-tight bg-white dark:bg-slate-900">
|
||||
<body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900">
|
||||
<Header />
|
||||
<slot />
|
||||
<Footer />
|
||||
@ -30,33 +30,12 @@
|
||||
</html>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
||||
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
||||
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
||||
|
||||
--color-text: hsl(12, 5%, 4%);
|
||||
--color-bg: #fff;
|
||||
--color-border: hsl(17, 24%, 90%);
|
||||
|
||||
--astro-gradient: linear-gradient(0deg, #4F39FA, #DA62C4);
|
||||
}
|
||||
:root {}
|
||||
|
||||
:global(body) {
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
:global(.text-gradient) {
|
||||
font-weight: 900;
|
||||
background-image: var(--astro-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 100% 200%;
|
||||
background-position-y: 100%;
|
||||
border-radius: 0.4rem;
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
:global(.btn, .btn-sm) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -76,4 +55,18 @@
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
function toggleDarkMode() {
|
||||
document.documentElement.classList.toggle("dark");
|
||||
localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"
|
||||
}
|
||||
window.toggleDarkMode = toggleDarkMode
|
||||
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user