Run prettier in all files
This commit is contained in:
prototypa
@ -23,7 +23,6 @@ A template to make your website using Astro + Tailwind CSS.
|
|||||||
- 100 SEO
|
- 100 SEO
|
||||||
- Production ready Google PageSpeed Insights
|
- Production ready Google PageSpeed Insights
|
||||||
|
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
## 🚀 Project Structure
|
## 🚀 Project Structure
|
||||||
@ -64,7 +63,7 @@ Any static assets, like images, can be placed in the `public/` directory.
|
|||||||
All commands are run from the root of the project, from a terminal:
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
| Command | Action |
|
| Command | Action |
|
||||||
|:---------------- |:-------------------------------------------- |
|
| :---------------- | :------------------------------------------- |
|
||||||
| `npm install` | Installs dependencies |
|
| `npm install` | Installs dependencies |
|
||||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||||
| `npm run build` | Build your production site to `./dist/` |
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
|||||||
@ -8,9 +8,13 @@ import image from "@astrojs/image";
|
|||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// Astro uses this full URL to generate your sitemap and canonical URLs in your final build
|
// Astro uses this full URL to generate your sitemap and canonical URLs in your final build
|
||||||
site: "https://astrowind.vercel.app/",
|
site: "https://astrowind.vercel.app/",
|
||||||
integrations: [tailwind({
|
integrations: [
|
||||||
|
tailwind({
|
||||||
config: {
|
config: {
|
||||||
applyBaseStyles: false
|
applyBaseStyles: false,
|
||||||
}
|
},
|
||||||
}), sitemap({}), image()]
|
}),
|
||||||
|
sitemap({}),
|
||||||
|
image(),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
243
package-lock.json
generated
243
package-lock.json
generated
@ -1,17 +1,19 @@
|
|||||||
{
|
{
|
||||||
"name": "@onwidget/astrowind",
|
"name": "@onwidget/astrowind",
|
||||||
"version": "0.0.9",
|
"version": "0.0.10",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@onwidget/astrowind",
|
"name": "@onwidget/astrowind",
|
||||||
"version": "0.0.9",
|
"version": "0.0.10",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@astrojs/image": "^0.3.3",
|
"@astrojs/image": "^0.3.3",
|
||||||
"@astrojs/sitemap": "^1.0.0",
|
"@astrojs/sitemap": "^1.0.0",
|
||||||
"@astrojs/tailwind": "^1.0.0",
|
"@astrojs/tailwind": "^1.0.0",
|
||||||
"astro": "^1.0.0",
|
"astro": "^1.0.0",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
|
"prettier-plugin-astro": "^0.5.0",
|
||||||
"subfont": "^6.9.0"
|
"subfont": "^6.9.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -744,6 +746,26 @@
|
|||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@pkgr/utils": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-7dIJ9CRVzBnqyEl7diUHPUFJf/oty2SeoVzcMocc5PeOUDK9KGzvgIBjGRRzzlRDaOjh3ADwH0WeibQvi3ls2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"cross-spawn": "^7.0.3",
|
||||||
|
"is-glob": "^4.0.3",
|
||||||
|
"open": "^8.4.0",
|
||||||
|
"picocolors": "^1.0.0",
|
||||||
|
"tiny-glob": "^0.2.9",
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^12.20.0 || ^14.18.0 || >=16.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://opencollective.com/unts"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@polka/url": {
|
"node_modules/@polka/url": {
|
||||||
"version": "1.0.0-next.21",
|
"version": "1.0.0-next.21",
|
||||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
|
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
|
||||||
@ -2525,6 +2547,15 @@
|
|||||||
"clone": "^1.0.2"
|
"clone": "^1.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/define-lazy-prop": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
|
||||||
|
"dev": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/define-properties": {
|
"node_modules/define-properties": {
|
||||||
"version": "1.1.4",
|
"version": "1.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
|
||||||
@ -6641,6 +6672,38 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/open": {
|
||||||
|
"version": "8.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
|
||||||
|
"integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"define-lazy-prop": "^2.0.0",
|
||||||
|
"is-docker": "^2.1.1",
|
||||||
|
"is-wsl": "^2.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/open/node_modules/is-docker": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
|
||||||
|
"dev": true,
|
||||||
|
"bin": {
|
||||||
|
"is-docker": "cli.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/optionator": {
|
"node_modules/optionator": {
|
||||||
"version": "0.8.3",
|
"version": "0.8.3",
|
||||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
|
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
|
||||||
@ -7577,6 +7640,43 @@
|
|||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/prettier": {
|
||||||
|
"version": "2.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
|
||||||
|
"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
|
||||||
|
"dev": true,
|
||||||
|
"bin": {
|
||||||
|
"prettier": "bin-prettier.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/prettier-plugin-astro": {
|
||||||
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-wBDZs0hlPWQDc7P7VmGe8pImci6F434Wd/otfLJwvCSXRb9J7AhmAigXhm5WPgCJuBA509Ovo/Ed+LAgZy4KWg==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/compiler": "^0.19.0",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
|
"sass-formatter": "^0.7.2",
|
||||||
|
"synckit": "^0.7.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^14.15.0 || >=16.0.0",
|
||||||
|
"npm": ">=6.14.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": {
|
||||||
|
"version": "0.19.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.19.0.tgz",
|
||||||
|
"integrity": "sha512-8nvyxZTfCXLyRmYfTttpJT6EPhfBRg0/q4J/Jj3/pNPLzp+vs05ZdktsY6QxAREaOMAnNEtSqcrB4S5DsXOfRg==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/pretty-bytes": {
|
"node_modules/pretty-bytes": {
|
||||||
"version": "5.6.0",
|
"version": "5.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
||||||
@ -8376,6 +8476,12 @@
|
|||||||
"queue-microtask": "^1.2.2"
|
"queue-microtask": "^1.2.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/s.color": {
|
||||||
|
"version": "0.0.15",
|
||||||
|
"resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
|
||||||
|
"integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/sade": {
|
"node_modules/sade": {
|
||||||
"version": "1.8.1",
|
"version": "1.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
|
||||||
@ -8414,6 +8520,15 @@
|
|||||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/sass-formatter": {
|
||||||
|
"version": "0.7.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",
|
||||||
|
"integrity": "sha512-NKFP8ddjhUYi6A/iD1cEtzkEs91U61kzqe3lY9SVNuvX7LGc88xnEN0mmsWL7Ol//YTi2GL/ol7b9XZ2+hgXuA==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"suf-log": "^2.5.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/sax": {
|
"node_modules/sax": {
|
||||||
"version": "1.2.4",
|
"version": "1.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||||
@ -9056,6 +9171,15 @@
|
|||||||
"p-limit": "^3.1.0"
|
"p-limit": "^3.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/suf-log": {
|
||||||
|
"version": "2.5.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
|
||||||
|
"integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"s.color": "0.0.15"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/supports-color": {
|
"node_modules/supports-color": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||||
@ -9125,6 +9249,22 @@
|
|||||||
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
|
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/synckit": {
|
||||||
|
"version": "0.7.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.7.3.tgz",
|
||||||
|
"integrity": "sha512-jNroMv7Juy+mJ/CHW5H6TzsLWpa1qck6sCHbkv8YTur+irSq2PjbvmGnm2gy14BUQ6jF33vyR4DPssHqmqsDQw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@pkgr/utils": "^2.3.0",
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^12.20.0 || ^14.18.0 || >=16.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://opencollective.com/unts"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/tailwindcss": {
|
"node_modules/tailwindcss": {
|
||||||
"version": "3.1.4",
|
"version": "3.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
|
||||||
@ -11342,6 +11482,20 @@
|
|||||||
"fastq": "^1.6.0"
|
"fastq": "^1.6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@pkgr/utils": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-7dIJ9CRVzBnqyEl7diUHPUFJf/oty2SeoVzcMocc5PeOUDK9KGzvgIBjGRRzzlRDaOjh3ADwH0WeibQvi3ls2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"cross-spawn": "^7.0.3",
|
||||||
|
"is-glob": "^4.0.3",
|
||||||
|
"open": "^8.4.0",
|
||||||
|
"picocolors": "^1.0.0",
|
||||||
|
"tiny-glob": "^0.2.9",
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@polka/url": {
|
"@polka/url": {
|
||||||
"version": "1.0.0-next.21",
|
"version": "1.0.0-next.21",
|
||||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
|
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
|
||||||
@ -12746,6 +12900,12 @@
|
|||||||
"clone": "^1.0.2"
|
"clone": "^1.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"define-lazy-prop": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"define-properties": {
|
"define-properties": {
|
||||||
"version": "1.1.4",
|
"version": "1.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
|
||||||
@ -15605,6 +15765,25 @@
|
|||||||
"mimic-fn": "^4.0.0"
|
"mimic-fn": "^4.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"open": {
|
||||||
|
"version": "8.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
|
||||||
|
"integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"define-lazy-prop": "^2.0.0",
|
||||||
|
"is-docker": "^2.1.1",
|
||||||
|
"is-wsl": "^2.2.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"is-docker": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
|
||||||
|
"dev": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"optionator": {
|
"optionator": {
|
||||||
"version": "0.8.3",
|
"version": "0.8.3",
|
||||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
|
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
|
||||||
@ -16220,6 +16399,32 @@
|
|||||||
"integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
|
"integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"prettier": {
|
||||||
|
"version": "2.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
|
||||||
|
"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"prettier-plugin-astro": {
|
||||||
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-wBDZs0hlPWQDc7P7VmGe8pImci6F434Wd/otfLJwvCSXRb9J7AhmAigXhm5WPgCJuBA509Ovo/Ed+LAgZy4KWg==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@astrojs/compiler": "^0.19.0",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
|
"sass-formatter": "^0.7.2",
|
||||||
|
"synckit": "^0.7.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/compiler": {
|
||||||
|
"version": "0.19.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.19.0.tgz",
|
||||||
|
"integrity": "sha512-8nvyxZTfCXLyRmYfTttpJT6EPhfBRg0/q4J/Jj3/pNPLzp+vs05ZdktsY6QxAREaOMAnNEtSqcrB4S5DsXOfRg==",
|
||||||
|
"dev": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"pretty-bytes": {
|
"pretty-bytes": {
|
||||||
"version": "5.6.0",
|
"version": "5.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
||||||
@ -16806,6 +17011,12 @@
|
|||||||
"queue-microtask": "^1.2.2"
|
"queue-microtask": "^1.2.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"s.color": {
|
||||||
|
"version": "0.0.15",
|
||||||
|
"resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
|
||||||
|
"integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"sade": {
|
"sade": {
|
||||||
"version": "1.8.1",
|
"version": "1.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
|
||||||
@ -16827,6 +17038,15 @@
|
|||||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"sass-formatter": {
|
||||||
|
"version": "0.7.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",
|
||||||
|
"integrity": "sha512-NKFP8ddjhUYi6A/iD1cEtzkEs91U61kzqe3lY9SVNuvX7LGc88xnEN0mmsWL7Ol//YTi2GL/ol7b9XZ2+hgXuA==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"suf-log": "^2.5.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"sax": {
|
"sax": {
|
||||||
"version": "1.2.4",
|
"version": "1.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||||
@ -17323,6 +17543,15 @@
|
|||||||
"p-limit": "^3.1.0"
|
"p-limit": "^3.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"suf-log": {
|
||||||
|
"version": "2.5.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
|
||||||
|
"integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"s.color": "0.0.15"
|
||||||
|
}
|
||||||
|
},
|
||||||
"supports-color": {
|
"supports-color": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||||
@ -17376,6 +17605,16 @@
|
|||||||
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
|
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"synckit": {
|
||||||
|
"version": "0.7.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.7.3.tgz",
|
||||||
|
"integrity": "sha512-jNroMv7Juy+mJ/CHW5H6TzsLWpa1qck6sCHbkv8YTur+irSq2PjbvmGnm2gy14BUQ6jF33vyR4DPssHqmqsDQw==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@pkgr/utils": "^2.3.0",
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"tailwindcss": {
|
"tailwindcss": {
|
||||||
"version": "3.1.4",
|
"version": "3.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
|
||||||
|
|||||||
@ -1,19 +1,22 @@
|
|||||||
{
|
{
|
||||||
"name": "@onwidget/astrowind",
|
"name": "@onwidget/astrowind",
|
||||||
"description": "A template to make your website using Astro + Tailwind CSS.",
|
"description": "A template to make your website using Astro + Tailwind CSS.",
|
||||||
"version": "0.0.9",
|
"version": "0.0.10",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"start": "astro dev",
|
"start": "astro dev",
|
||||||
"build": "astro build && subfont -ir --no-fallbacks --root dist",
|
"build": "astro build && subfont -ir --no-fallbacks --root dist",
|
||||||
"preview": "astro preview"
|
"preview": "astro preview",
|
||||||
|
"pretty": "prettier --write ."
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@astrojs/image": "^0.3.3",
|
"@astrojs/image": "^0.3.3",
|
||||||
"@astrojs/sitemap": "^1.0.0",
|
"@astrojs/sitemap": "^1.0.0",
|
||||||
"@astrojs/tailwind": "^1.0.0",
|
"@astrojs/tailwind": "^1.0.0",
|
||||||
"astro": "^1.0.0",
|
"astro": "^1.0.0",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
|
"prettier-plugin-astro": "^0.5.0",
|
||||||
"subfont": "^6.9.0"
|
"subfont": "^6.9.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -6,9 +6,15 @@
|
|||||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||||
<div class="py-12 md:py-20">
|
<div class="py-12 md:py-20">
|
||||||
<div class="max-w-3xl mx-auto text-center pb-12">
|
<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>
|
<h2
|
||||||
<p class="text-xl text-gray-600 dark:text-slate-400">Arcu cursus vitae congue mauris
|
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
|
||||||
rhoncus viverra nibh cras pulvinar mattis blandit libero cursus mattis.</p>
|
>
|
||||||
|
Astro + Tailwind CSS
|
||||||
|
</h2>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,143 +3,240 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
<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">
|
<p
|
||||||
|
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
|
||||||
|
>
|
||||||
Features
|
Features
|
||||||
</p>
|
</p>
|
||||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
|
<h2
|
||||||
|
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
|
||||||
|
>
|
||||||
Most used Sections
|
Most used Sections
|
||||||
</h2><p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
</h2><p
|
||||||
dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.</p>
|
class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<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 dark:border dark:border-slate-800">
|
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 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">
|
<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">
|
<g fill="none" fill-rule="evenodd">
|
||||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
<rect
|
||||||
|
class="fill-current text-blue-600"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
rx="32"></rect>
|
||||||
<g stroke-linecap="square" stroke-width="2">
|
<g stroke-linecap="square" stroke-width="2">
|
||||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
<path
|
||||||
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
|
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>
|
</path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="ml-4 text-xl font-bold">
|
<div class="ml-4 text-xl font-bold">Headers</div>
|
||||||
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 dolore.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800">
|
<div
|
||||||
|
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
<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">
|
<g fill="none" fill-rule="evenodd">
|
||||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
<rect
|
||||||
|
class="fill-current text-blue-600"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
rx="32"></rect>
|
||||||
<g stroke-linecap="square" stroke-width="2">
|
<g stroke-linecap="square" stroke-width="2">
|
||||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
<path
|
||||||
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
|
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>
|
</path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div class="ml-4 text-xl font-bold">
|
<div class="ml-4 text-xl font-bold">Footers</div>
|
||||||
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 dolore.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800">
|
<div
|
||||||
|
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
<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">
|
<g fill="none" fill-rule="evenodd">
|
||||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
<rect
|
||||||
|
class="fill-current text-blue-600"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
rx="32"></rect>
|
||||||
<g stroke-linecap="square" stroke-width="2">
|
<g stroke-linecap="square" stroke-width="2">
|
||||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
<path
|
||||||
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
|
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>
|
</path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="ml-4 text-xl font-bold">
|
<div class="ml-4 text-xl font-bold">Features</div>
|
||||||
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 dolore.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800">
|
<div
|
||||||
|
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
<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">
|
<g fill="none" fill-rule="evenodd">
|
||||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
<rect
|
||||||
|
class="fill-current text-blue-600"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
rx="32"></rect>
|
||||||
<g stroke-linecap="square" stroke-width="2">
|
<g stroke-linecap="square" stroke-width="2">
|
||||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
<path
|
||||||
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
|
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>
|
</path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div class="ml-4 text-xl font-bold">
|
<div class="ml-4 text-xl font-bold">Call-to-Action</div>
|
||||||
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 dolore.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800">
|
<div
|
||||||
|
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
<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">
|
<g fill="none" fill-rule="evenodd">
|
||||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
<rect
|
||||||
|
class="fill-current text-blue-600"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
rx="32"></rect>
|
||||||
<g stroke-linecap="square" stroke-width="2">
|
<g stroke-linecap="square" stroke-width="2">
|
||||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
<path
|
||||||
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
|
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>
|
</path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="ml-4 text-xl font-bold">
|
<div class="ml-4 text-xl font-bold">Pricing</div>
|
||||||
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 dolore.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800">
|
<div
|
||||||
|
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
<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">
|
<g fill="none" fill-rule="evenodd">
|
||||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
<rect
|
||||||
|
class="fill-current text-blue-600"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
rx="32"></rect>
|
||||||
<g stroke-linecap="square" stroke-width="2">
|
<g stroke-linecap="square" stroke-width="2">
|
||||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
<path
|
||||||
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
|
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>
|
</path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="ml-4 text-xl font-bold">
|
<div class="ml-4 text-xl font-bold">Testimonial</div>
|
||||||
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 dolore.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||||
|
eiusmod tempor incididunt ut labore et dolore.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -5,21 +5,25 @@
|
|||||||
<section>
|
<section>
|
||||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||||
<div class="py-12 md:py-20">
|
<div class="py-12 md:py-20">
|
||||||
|
|
||||||
<div class="py-4 sm:py-6 lg:py-8">
|
<div class="py-4 sm:py-6 lg:py-8">
|
||||||
<div class="w-full flex flex-wrap -mx-8">
|
<div class="w-full flex flex-wrap -mx-8">
|
||||||
<div class="w-full lg:w-1/2 px-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">
|
<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">
|
<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.
|
Sed ac magna sit amet risus tristique interdum, at vel velit in
|
||||||
|
hac habitasse platea dictumst.
|
||||||
</h2>
|
</h2>
|
||||||
<p class="mb-8 text-xl text-gray-600 dark:text-gray-400">
|
<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
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||||
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.
|
sagittis, quam nec venenatis lobortis, mi risus tempus nulla,
|
||||||
Fusce sit amet dui tellus.
|
sed porttitor est nibh at nulla. Praesent placerat enim ut ex
|
||||||
|
tincidunt vehicula. Fusce sit amet dui tellus.
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full md:w-1/3">
|
<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 ">
|
<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
|
Get started
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -29,7 +33,9 @@
|
|||||||
<ul class="space-y-12">
|
<ul class="space-y-12">
|
||||||
<li class="flex -mx-4">
|
<li class="flex -mx-4">
|
||||||
<div class="px-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">
|
<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
|
1
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -38,37 +44,40 @@
|
|||||||
Responsive Elements
|
Responsive Elements
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
<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 !
|
All elements are responsive and provide the best display in
|
||||||
|
all screen size. It's magic !
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex -mx-4">
|
<li class="flex -mx-4">
|
||||||
<div class="px-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">
|
<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
|
2
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-4">
|
<div class="px-4">
|
||||||
<h3 class="my-4 text-xl font-semibold">
|
<h3 class="my-4 text-xl font-semibold">Flexible Team</h3>
|
||||||
Flexible Team
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
<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.
|
Flexibility is the key. All team is available 24/24 and
|
||||||
|
joinable every day on our hotline.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex -mx-4">
|
<li class="flex -mx-4">
|
||||||
<div class="px-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">
|
<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
|
3
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-4">
|
<div class="px-4">
|
||||||
<h3 class="my-4 text-xl font-semibold">
|
<h3 class="my-4 text-xl font-semibold">Ecologic Software</h3>
|
||||||
Ecologic Software
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
<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.
|
Our Software are ecologic and responsable. Green is not just
|
||||||
|
a color, it's a way of life.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@ -76,7 +85,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,116 +1,193 @@
|
|||||||
---
|
---
|
||||||
import { IconTwitter, IconInstagram, IconFacebook, IconArrowRight } from "~/components/astro/icons";
|
import {
|
||||||
|
IconTwitter,
|
||||||
|
IconInstagram,
|
||||||
|
IconFacebook,
|
||||||
|
IconArrowRight,
|
||||||
|
} from "~/components/astro/icons";
|
||||||
const {} = Astro.props;
|
const {} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
<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 dark:border-slate-800">
|
<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="sm:col-span-12 lg:col-span-3">
|
||||||
<div class="mb-2"><a class="inline-block font-bold" href="#">AstroWind</a></div>
|
<div class="mb-2">
|
||||||
|
<a class="inline-block font-bold" href="#">AstroWind</a>
|
||||||
|
</div>
|
||||||
<div class="text-sm text-gray-600">
|
<div class="text-sm text-gray-600">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Terms</a> ·
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
href="#"
|
||||||
href="#">Privacy Policy</a>
|
>Terms
|
||||||
|
</a> ·
|
||||||
|
<a
|
||||||
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Privacy Policy
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
||||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Products</div>
|
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||||
|
Products
|
||||||
|
</div>
|
||||||
<ul class="text-sm">
|
<ul class="text-sm">
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Web
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
Studio</a>
|
href="#"
|
||||||
|
>Web Studio
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">DynamicBox
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
Flex</a>
|
href="#"
|
||||||
|
>DynamicBox Flex
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Programming
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
Forms</a>
|
href="#"
|
||||||
|
>Programming Forms
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Integrations</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Integrations
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Command-line</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Command-line
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
||||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Resources</div>
|
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||||
|
Resources
|
||||||
|
</div>
|
||||||
<ul class="text-sm">
|
<ul class="text-sm">
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Documentation</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Documentation
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Tutorials &
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
Guides</a>
|
href="#"
|
||||||
|
>Tutorials & Guides
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Blog</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Blog
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Support Center</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Support Center
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Partners</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Partners
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
||||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Company</div>
|
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||||
|
Company
|
||||||
|
</div>
|
||||||
<ul class="text-sm">
|
<ul class="text-sm">
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Home</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Home
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">About us</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>About us
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Company values</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Company values
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Pricing</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Pricing
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-2">
|
<li class="mb-2">
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
<a
|
||||||
href="#">Privacy Policy</a>
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||||
|
href="#"
|
||||||
|
>Privacy Policy
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-3">
|
<div class="sm:col-span-6 md:col-span-3 lg:col-span-3">
|
||||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Subscribe</div>
|
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Get the latest news and articles to your inbox every
|
Subscribe
|
||||||
month.</p>
|
</div>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Get the latest news and articles to your inbox every month.
|
||||||
|
</p>
|
||||||
<form>
|
<form>
|
||||||
<div class="flex flex-wrap mb-4">
|
<div class="flex flex-wrap mb-4">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<label class="block text-sm sr-only" for="newsletter">Email</label>
|
<label class="block text-sm sr-only" for="newsletter"
|
||||||
|
>Email
|
||||||
|
</label>
|
||||||
<div class="relative flex items-center max-w-xs">
|
<div class="relative flex items-center max-w-xs">
|
||||||
<input id="newsletter" type="email"
|
<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 dark:border-slate-600 dark:text-gray-400"
|
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 dark:text-gray-400"
|
||||||
placeholder="Your email">
|
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 dark:bg-slate-600"
|
<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 dark:bg-slate-600"
|
||||||
aria-hidden="true"></span>
|
aria-hidden="true"></span>
|
||||||
|
|
||||||
<IconArrowRight className="w-5 h-5 text-blue-600 mx-3 flex-shrink-0" />
|
<IconArrowRight
|
||||||
|
className="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -121,29 +198,39 @@ const { } = Astro.props;
|
|||||||
<div class="md:flex md:items-center md:justify-between py-4 md:py-8">
|
<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">
|
<ul class="flex mb-4 md:order-1 md:ml-4 md:mb-0">
|
||||||
<li>
|
<li>
|
||||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
<a
|
||||||
aria-label="Twitter" href="#">
|
class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||||
|
aria-label="Twitter"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
<IconTwitter />
|
<IconTwitter />
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="ml-4">
|
<li class="ml-4">
|
||||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
<a
|
||||||
aria-label="Instagram" href="#">
|
class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||||
|
aria-label="Instagram"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
<IconInstagram />
|
<IconInstagram />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="ml-4">
|
<li class="ml-4">
|
||||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
<a
|
||||||
aria-label="Facebook" href="#">
|
class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||||
|
aria-label="Facebook"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
<IconFacebook />
|
<IconFacebook />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
|
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
|
||||||
Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/">onWidget</a>.
|
Made by <a
|
||||||
All rights reserved.
|
class="text-blue-600 hover:underline dark:text-gray-200"
|
||||||
|
href="https://onwidget.com/"
|
||||||
|
>onWidget
|
||||||
|
</a>. All rights reserved.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,53 +4,82 @@ const { } = Astro.props;
|
|||||||
---
|
---
|
||||||
|
|
||||||
<header
|
<header
|
||||||
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900 backdrop-blur-sm border-b dark:border-b-0">
|
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-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="py-3 px-3 mx-auto w-full lg:flex lg:justify-between max-w-6xl lg:px-4"
|
||||||
|
>
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
<a class="flex items-center" href="/">
|
<a class="flex items-center" href="/">
|
||||||
<span
|
<span
|
||||||
class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">AstroWind</span>
|
class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white"
|
||||||
|
>AstroWind
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex items-center lg:hidden">
|
<div class="flex items-center lg:hidden">
|
||||||
<button type="button"
|
<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"
|
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="Toggle between Dark and Light mode" onclick="window.toggleDarkMode()">
|
aria-label="Toggle between Dark and Light mode"
|
||||||
|
onclick="window.toggleDarkMode()"
|
||||||
|
>
|
||||||
<IconSun />
|
<IconSun />
|
||||||
</button>
|
</button>
|
||||||
<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"
|
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"
|
||||||
aria-label="Toggle Menu" onclick="toggleMenu()">
|
aria-label="Toggle Menu"
|
||||||
|
onclick="toggleMenu()"
|
||||||
|
>
|
||||||
<IconMenu />
|
<IconMenu />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="items-center w-full lg:w-auto hidden lg:flex text-gray-600 dark:text-slate-200" id="menu">
|
<div
|
||||||
<ul class="flex flex-col py-2 lg:py-0 lg:flex-row lg:self-center collapse w-full lg:w-auto collapsed">
|
class="items-center w-full lg:w-auto hidden lg:flex text-gray-600 dark:text-slate-200"
|
||||||
|
id="menu"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="flex flex-col py-2 lg:py-0 lg:flex-row lg:self-center collapse w-full lg:w-auto collapsed"
|
||||||
|
>
|
||||||
<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"
|
<a
|
||||||
href="#">Products</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>
|
||||||
<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"
|
<a
|
||||||
href="#">Docs</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>
|
||||||
<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"
|
<a
|
||||||
href="#">Resources</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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="lg:self-center flex items-center mb-4 lg:mb-0 collapse collapsed">
|
<div
|
||||||
|
class="lg:self-center flex items-center mb-4 lg:mb-0 collapse collapsed"
|
||||||
|
>
|
||||||
<div class="hidden items-center mr-3 lg:flex">
|
<div class="hidden items-center mr-3 lg:flex">
|
||||||
<button type="button"
|
<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"
|
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="Toggle between Dark and Light mode"
|
aria-label="Toggle between Dark and Light mode"
|
||||||
onclick="window.toggleDarkMode()">
|
onclick="window.toggleDarkMode()"
|
||||||
|
>
|
||||||
<IconSun />
|
<IconSun />
|
||||||
</button>
|
</button>
|
||||||
<a href="https://github.com/onwidget/astrowind"
|
<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"
|
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 />
|
<IconGithub />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
import { Picture } from '@astrojs/image/components';
|
import { Picture } from "@astrojs/image/components";
|
||||||
const {} = Astro.props;
|
const {} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -7,25 +7,40 @@ const { } = Astro.props;
|
|||||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
<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="pt-32 pb-12 md:pt-40 md:pb-20">
|
||||||
<div class="text-center pb-12 md:pb-16">
|
<div class="text-center pb-12 md:pb-16">
|
||||||
<h1 class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 ">
|
<h1
|
||||||
|
class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4"
|
||||||
|
>
|
||||||
Your website with
|
Your website with
|
||||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro</span> +
|
<span
|
||||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Tailwind</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>
|
</h1>
|
||||||
<div class="max-w-3xl mx-auto">
|
<div class="max-w-3xl mx-auto">
|
||||||
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
||||||
A template to make your website using Astro + Tailwind CSS. Ready to start a new project and designed taking
|
A template to make your website using Astro + Tailwind CSS. Ready to
|
||||||
into account best practices for SEO, great page speed, accessibility, dark mode, image
|
start a new project and designed taking into account best practices
|
||||||
|
for SEO, great page speed, accessibility, dark mode, image
|
||||||
optimization and automatic sitemap generation.
|
optimization and automatic sitemap generation.
|
||||||
</p>
|
</p>
|
||||||
<div class="max-w-xs max-w-none flex justify-center">
|
<div class="max-w-xs max-w-none flex justify-center">
|
||||||
<div>
|
<div>
|
||||||
<a class="btn text-white bg-blue-600 hover:bg-blue-700 mb-4 sm:mb-0" href="#0">Get
|
<a
|
||||||
started</a>
|
class="btn text-white bg-blue-600 hover:bg-blue-700 mb-4 sm:mb-0"
|
||||||
|
href="#0"
|
||||||
|
>Get started
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 ml-4"
|
<a
|
||||||
href="#0">Learn more</a>
|
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 ml-4"
|
||||||
|
href="#0"
|
||||||
|
>Learn more
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -33,8 +48,14 @@ const { } = Astro.props;
|
|||||||
<div>
|
<div>
|
||||||
<div class="relative flex justify-center mb-8">
|
<div class="relative flex justify-center mb-8">
|
||||||
<div class="flex flex-col justify-center">
|
<div class="flex flex-col justify-center">
|
||||||
<Picture src={import('~/assets/hero-astro.jpg')} class="mx-auto rounded-md" widths={[400, 768]}
|
<Picture
|
||||||
sizes="(max-width: 768px) 100vw, 768px" alt="Hero Image" aspectRatio="16:9" />
|
src={import("~/assets/hero-astro.jpg")}
|
||||||
|
class="mx-auto rounded-md"
|
||||||
|
widths={[400, 768]}
|
||||||
|
sizes="(max-width: 768px) 100vw, 768px"
|
||||||
|
alt="Hero Image"
|
||||||
|
aspectRatio="16:9"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,8 +2,18 @@
|
|||||||
const { className = "w-5 h-5" } = Astro.props;
|
const { 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"
|
<svg
|
||||||
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||||
<line x1="13" y1="18" x2="19" y2="12"></line>
|
<line x1="13" y1="18" x2="19" y2="12"></line>
|
||||||
|
|||||||
@ -2,8 +2,20 @@
|
|||||||
const { className = "w-5 h-5" } = Astro.props;
|
const { 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"
|
<svg
|
||||||
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
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 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>
|
<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>
|
</svg>
|
||||||
@ -2,11 +2,21 @@
|
|||||||
const { className = "w-5 h-5" } = Astro.props;
|
const { className = "w-5 h-5" } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class={className} width="24" height="24"
|
<svg
|
||||||
viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
stroke-linejoin="round">
|
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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<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">
|
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>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
@ -2,8 +2,18 @@
|
|||||||
const { className = "w-5 h-5" } = Astro.props;
|
const { 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"
|
<svg
|
||||||
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<rect x="4" y="4" width="16" height="16" rx="4"></rect>
|
<rect x="4" y="4" width="16" height="16" rx="4"></rect>
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
<circle cx="12" cy="12" r="3"></circle>
|
||||||
|
|||||||
@ -2,7 +2,18 @@
|
|||||||
const { className = "w-5 h-5" } = Astro.props;
|
const { 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">
|
<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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<line x1="4" y1="8" x2="20" y2="8"></line>
|
<line x1="4" y1="8" x2="20" y2="8"></line>
|
||||||
<line x1="4" y1="16" x2="20" y2="16"></line>
|
<line x1="4" y1="16" x2="20" y2="16"></line>
|
||||||
|
|||||||
@ -2,9 +2,21 @@
|
|||||||
const { className = "w-5 h-5" } = Astro.props;
|
const { 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"
|
<svg
|
||||||
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<circle cx="12" cy="12" r="4"></circle>
|
<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>
|
<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>
|
</svg>
|
||||||
@ -2,10 +2,21 @@
|
|||||||
const { className = "w-5 h-5" } = Astro.props;
|
const { 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"
|
<svg
|
||||||
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<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">
|
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>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
@ -1,10 +1,10 @@
|
|||||||
import IconSun from "./IconSun.astro"
|
import IconSun from "./IconSun.astro";
|
||||||
import IconGithub from "./IconGithub.astro"
|
import IconGithub from "./IconGithub.astro";
|
||||||
import IconTwitter from "./IconTwitter.astro"
|
import IconTwitter from "./IconTwitter.astro";
|
||||||
import IconFacebook from "./IconFacebook.astro"
|
import IconFacebook from "./IconFacebook.astro";
|
||||||
import IconInstagram from "./IconInstagram.astro"
|
import IconInstagram from "./IconInstagram.astro";
|
||||||
import IconArrowRight from "./IconArrowRight.astro"
|
import IconArrowRight from "./IconArrowRight.astro";
|
||||||
import IconMenu from "./IconMenu.astro"
|
import IconMenu from "./IconMenu.astro";
|
||||||
|
|
||||||
export {
|
export {
|
||||||
IconSun,
|
IconSun,
|
||||||
@ -13,5 +13,5 @@ export {
|
|||||||
IconFacebook,
|
IconFacebook,
|
||||||
IconInstagram,
|
IconInstagram,
|
||||||
IconArrowRight,
|
IconArrowRight,
|
||||||
IconMenu
|
IconMenu,
|
||||||
}
|
};
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
import "~/styles/base.css"
|
import "~/styles/base.css";
|
||||||
|
|
||||||
import Header from "~/components/astro/headers/BasicHeader.astro"
|
import Header from "~/components/astro/headers/BasicHeader.astro";
|
||||||
import Footer from "~/components/astro/footers/BasicFooter.astro";
|
import Footer from "~/components/astro/footers/BasicFooter.astro";
|
||||||
|
|
||||||
const { title = "", description = "", withHeader = true } = Astro.props;
|
const { title = "", description = "", withHeader = true } = Astro.props;
|
||||||
@ -9,32 +9,36 @@
|
|||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width" />
|
||||||
<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.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<link
|
||||||
<meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="google-site-verification"
|
||||||
|
content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
|
||||||
|
/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="antialiased text-gray-900 dark:text-slate-300 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 />
|
<Header />
|
||||||
<slot />
|
<slot />
|
||||||
<Footer />
|
<Footer />
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {}
|
:root {
|
||||||
|
}
|
||||||
|
|
||||||
:global(body) {
|
:global(body) {
|
||||||
font-family: 'IBM Plex Sans', sans-serif;
|
font-family: "IBM Plex Sans", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.btn, .btn-sm) {
|
:global(.btn, .btn-sm) {
|
||||||
@ -46,33 +50,51 @@
|
|||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.375;
|
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, fill, stroke,
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
|
||||||
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;
|
-webkit-backdrop-filter;
|
||||||
transition-duration: .15s;
|
transition-property: color, background-color, border-color,
|
||||||
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
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: 0.15s;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
padding: 0.75rem 1.5rem;
|
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: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
|
||||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
|
0 4px 6px -2px rgba(0, 0, 0, 0.02);
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
--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>
|
<script is:inline>
|
||||||
function toggleDarkMode() {
|
function toggleDarkMode() {
|
||||||
document.documentElement.classList.toggle("dark");
|
document.documentElement.classList.toggle("dark");
|
||||||
localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"
|
localStorage.theme = document.documentElement.classList.contains("dark")
|
||||||
|
? "dark"
|
||||||
|
: "light";
|
||||||
}
|
}
|
||||||
window.toggleDarkMode = toggleDarkMode
|
window.toggleDarkMode = toggleDarkMode;
|
||||||
|
|
||||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
if (
|
||||||
document.documentElement.classList.add('dark')
|
localStorage.theme === "dark" ||
|
||||||
|
(!("theme" in localStorage) &&
|
||||||
|
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||||
|
) {
|
||||||
|
document.documentElement.classList.add("dark");
|
||||||
} else {
|
} else {
|
||||||
document.documentElement.classList.remove('dark')
|
document.documentElement.classList.remove("dark");
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleMenu() {
|
function toggleMenu() {
|
||||||
document.getElementById("menu").classList.toggle("hidden");
|
document.getElementById("menu").classList.toggle("hidden");
|
||||||
}
|
}
|
||||||
window.toggleMenu = toggleMenu
|
window.toggleMenu = toggleMenu;
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
---
|
---
|
||||||
import Layout from '~/layouts/Layout.astro';
|
import Layout from "~/layouts/Layout.astro";
|
||||||
|
|
||||||
import BasicCTA from '~/components/astro/ctas/BasicCTA.astro';
|
import BasicCTA from "~/components/astro/ctas/BasicCTA.astro";
|
||||||
import BasicFeatures from '~/components/astro/features/BasicFeatures.astro';
|
import BasicFeatures from "~/components/astro/features/BasicFeatures.astro";
|
||||||
import StepsFeatures from '~/components/astro/features/StepsFeatures.astro';
|
import StepsFeatures from "~/components/astro/features/StepsFeatures.astro";
|
||||||
import HeroWithImage from '~/components/astro/hero/HeroWithImage.astro';
|
import HeroWithImage from "~/components/astro/hero/HeroWithImage.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}'],
|
content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
darkMode: 'class',
|
darkMode: "class",
|
||||||
}
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user