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

Create basic structure

Browse Source
This commit is contained in:
PrototypeArea
2022-06-25 05:53:08 -04:00
parent 26118a62ec
commit 8821d08a60
17 changed files with 556 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -18,3 +18,5 @@ pnpm-debug.log*
# macOS-specific files # macOS-specific files
.DS_Store .DS_Store
package-lock.json

15
astro.config.mjs
View File

@ -1,8 +1,17 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind"; import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [tailwind()] // 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 },
}),
sitemap({}),
],
});

45
package-lock.json generated
View File

@ -1,5 +1,5 @@
{ {
"name": "tailwind-astro", "name": "@onwidget/astrowind",
"version": "0.0.1", "version": "0.0.1",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
@ -95,6 +95,16 @@
"integrity": "sha512-JxkrXFiFhfunOFBI2Xxwru9t4IzrLw+nfA7RkNnV8qP65BLidrwWS+NfZhOSVGTrbf+cQfF8QNe6O4gAX8wQHw==", "integrity": "sha512-JxkrXFiFhfunOFBI2Xxwru9t4IzrLw+nfA7RkNnV8qP65BLidrwWS+NfZhOSVGTrbf+cQfF8QNe6O4gAX8wQHw==",
"dev": true "dev": true
}, },
"@astrojs/sitemap": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-0.2.1.tgz",
"integrity": "sha512-ZdUDqTtBOtkY9srN0dBL1BNB5/luv8I7LyEtv9l6jco5JF6fyY9/4OpWgiA2n6zGWzkuEw0WynWKK08uEvAxHQ==",
"dev": true,
"requires": {
"sitemap": "^7.1.1",
"zod": "^3.17.3"
}
},
"@astrojs/svelte-language-integration": { "@astrojs/svelte-language-integration": {
"version": "0.1.6", "version": "0.1.6",
"resolved": "https://registry.npmjs.org/@astrojs/svelte-language-integration/-/svelte-language-integration-0.1.6.tgz", "resolved": "https://registry.npmjs.org/@astrojs/svelte-language-integration/-/svelte-language-integration-0.1.6.tgz",
@ -577,6 +587,12 @@
"@types/unist": "*" "@types/unist": "*"
} }
}, },
"@types/node": {
"version": "17.0.45",
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
"integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
"dev": true
},
"@types/parse5": { "@types/parse5": {
"version": "6.0.3", "version": "6.0.3",
"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
@ -589,6 +605,15 @@
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
"dev": true "dev": true
}, },
"@types/sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.4.tgz",
"integrity": "sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==",
"dev": true,
"requires": {
"@types/node": "*"
}
},
"@types/unist": { "@types/unist": {
"version": "2.0.6", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@ -3923,6 +3948,12 @@
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
"dev": true "dev": true
}, },
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true
},
"section-matter": { "section-matter": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@ -4010,6 +4041,18 @@
"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==", "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
"dev": true "dev": true
}, },
"sitemap": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
"integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
"dev": true,
"requires": {
"@types/node": "^17.0.5",
"@types/sax": "^1.2.1",
"arg": "^5.0.0",
"sax": "^1.2.4"
}
},
"slash": { "slash": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",

5
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "tailwind-astro", "name": "@onwidget/astrowind",
"version": "0.0.1", "version": "0.0.2",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
@ -9,6 +9,7 @@
"preview": "astro preview" "preview": "astro preview"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/sitemap": "^0.2.1",
"@astrojs/tailwind": "^0.2.1", "@astrojs/tailwind": "^0.2.1",
"astro": "^1.0.0-beta.53" "astro": "^1.0.0-beta.53"
} }

BIN
public/images/hero-astro.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 KiB

2
public/robots.txt Normal file
View File

@ -0,0 +1,2 @@
User-agent: *
Disallow:

14
src/components/astro/ctas/BasicCTA.astro Normal file
View File

@ -0,0 +1,14 @@
---
---
<section class="relative">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<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
rhoncus viverra nibh cras pulvinar mattis blandit libero cursus mattis.</p>
</div>
</div>
</div>
</section>

144
src/components/astro/features/BasicFeatures.astro Normal file
View File

@ -0,0 +1,144 @@
---
---
<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="relative max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-4 sm:py-6 lg:py-8 lg:pt-12">
<div class="mb-8 text-center">
<p class="text-base text-blue-500 font-semibold tracking-wide uppercase">
Features
</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
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">
<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>
<div class="ml-4 text-xl font-bold">
Headers
</div>
</div>
<p class="text-gray-500 dark:text-gray-200 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">
<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>
<div class="ml-4 text-xl font-bold">
Footers
</div>
</div>
<p class="text-gray-500 dark:text-gray-200 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">
<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>
<div class="ml-4 text-xl font-bold">
Features
</div>
</div>
<p class="text-gray-500 dark:text-gray-200 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">
<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>
<div class="ml-4 text-xl font-bold">
Call-to-Action
</div>
</div>
<p class="text-gray-500 dark:text-gray-200 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">
<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>
<div class="ml-4 text-xl font-bold">
Pricing
</div>
</div>
<p class="text-gray-500 dark:text-gray-200 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">
<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>
<div class="ml-4 text-xl font-bold">
Testimonial
</div>
</div>
<p class="text-gray-500 dark:text-gray-200 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
</div>
</div>
</div>
</section>

81
src/components/astro/features/StepsFeatures.astro Normal file
View File

@ -0,0 +1,81 @@
---
---
<section>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20">
<div class="py-4 sm:py-6 lg:py-8">
<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">
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">
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.
</p>
<div class="w-full md:w-1/3">
<button type="button" class="btn-sm bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 ">
Get started
</button>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-8">
<ul class="space-y-12">
<li class="flex -mx-4">
<div class="px-4">
<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">
1
</span>
</div>
<div class="px-4">
<h3 class="my-4 text-xl font-semibold dark:text-white">
Responsive Elements
</h3>
<p class="text-gray-500 dark:text-gray-300 ">
All elements are responsive and provide the best display in all screen size. It's magic !
</p>
</div>
</li>
<li class="flex -mx-4">
<div class="px-4">
<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">
2
</span>
</div>
<div class="px-4">
<h3 class="my-4 text-xl font-semibold dark:text-white">
Flexible Team
</h3>
<p class="text-gray-500 dark:text-gray-300">
Flexibility is the key. All team is available 24/24 and joinable every day on our hotline.
</p>
</div>
</li>
<li class="flex -mx-4">
<div class="px-4">
<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">
3
</span>
</div>
<div class="px-4">
<h3 class="my-4 text-xl font-semibold dark:text-white">
Ecologic Software
</h3>
<p class="text-gray-500 dark:text-gray-300">
Our Software are ecologic and responsable. Green is not just a color, it's a way of life.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>

117
src/components/astro/footers/BasicFooter.astro Normal file
View File

@ -0,0 +1,117 @@
---
const { } = Astro.props;
---
<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="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>
<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>
<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>
</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>
<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 &amp; 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>
</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>
<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>
</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>
<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">
<div class="w-full">
<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"
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>
<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"
fill-rule="nonzero"></path>
</svg>
</button>
</div>
</div>
</div>
</form>
</div>
</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"
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"
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"
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>
</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>
</div>
</footer>

55
src/components/astro/headers/BasicHeader.astro Normal file
View File

@ -0,0 +1,55 @@
---
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">
<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>
</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">
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<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>
</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>
</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>
</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">
<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">
</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>
</div>
</div>
</div>
</header>

34
src/components/astro/hero/HeroWithImage.astro Normal file
View File

@ -0,0 +1,34 @@
---
---
<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>
<div class="max-w-3xl mx-auto">
<p class="text-xl text-gray-600 mb-8 ">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>
<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>
</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>
</div>
</div>
</div>
</div>
</section>

0
src/components/.gitkeep → src/components/react/.gitkeep
View File

0
src/components/svelte/.gitkeep Normal file
View File

40
src/layouts/Layout.astro
View File

@ -1,5 +1,10 @@
--- ---
const { title = "", description = "" } = Astro.props; import "~/styles/base.css"
import Header from "~/components/astro/headers/BasicHeader.astro"
import Footer from "~/components/astro/footers/BasicFooter.astro";
const { title = "", description = "", withHeader = true } = Astro.props;
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -11,10 +16,15 @@
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{title}</title> <title>{title}</title>
<meta name="description" content={description}> <meta name="description" content={description}>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet">
</head> </head>
<body> <body class="antialiased text-gray-900 dark:text-slate-400 tracking-tight bg-white dark:bg-slate-900">
<Header />
<slot /> <slot />
<Footer />
</body> </body>
</html> </html>
@ -32,10 +42,8 @@
--astro-gradient: linear-gradient(0deg, #4F39FA, #DA62C4); --astro-gradient: linear-gradient(0deg, #4F39FA, #DA62C4);
} }
:global(main) { :global(body) {
margin: auto; font-family: 'IBM Plex Sans', sans-serif;
padding: 1em;
max-width: 60ch;
} }
:global(.text-gradient) { :global(.text-gradient) {
@ -48,4 +56,24 @@
border-radius: 0.4rem; border-radius: 0.4rem;
animation: pulse 4s ease-in-out infinite; animation: pulse 4s ease-in-out infinite;
} }
:global(.btn, .btn-sm) {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border-width: 1px;
border-color: transparent;
font-weight: 500;
line-height: 1.375;
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
padding: 0.75rem 1.5rem;
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .04), 0 4px 6px -2px rgba(0, 0, 0, .02);
--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>

20
src/pages/index.astro
View File

@ -1,15 +1,17 @@
--- ---
import Layout from '~/layouts/Layout.astro'; import Layout from '~/layouts/Layout.astro';
import BasicCTA from '~/components/astro/ctas/BasicCTA.astro';
import BasicFeatures from '~/components/astro/features/BasicFeatures.astro';
import StepsFeatures from '~/components/astro/features/StepsFeatures.astro';
import HeroWithImage from '~/components/astro/hero/HeroWithImage.astro';
--- ---
<Layout title="Tailwind Astro"> <Layout title="AstroWind — Your website with Astro + Tailwind CSS">
<main> <main>
<h1 class="font-extrabold text-4xl sm:text-5xl lg:text-6xl tracking-tight dark:text-white text-gradient">Tailwind Astro</h1> <HeroWithImage />
<p class="mt-6 text-lg text-slate-600 max-w-3xl mx-auto dark:text-slate-400"> <BasicFeatures />
Lorem ipsum lorem <StepsFeatures />
</p> <BasicCTA />
</main> </main>
</Layout> </Layout>
<style>
</style>

3
src/styles/base.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;