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
|
||||
- Production ready Google PageSpeed Insights
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
## 🚀 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:
|
||||
|
||||
| Command | Action |
|
||||
|:---------------- |:-------------------------------------------- |
|
||||
| :---------------- | :------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
|
||||
@ -8,9 +8,13 @@ import image from "@astrojs/image";
|
||||
export default defineConfig({
|
||||
// Astro uses this full URL to generate your sitemap and canonical URLs in your final build
|
||||
site: "https://astrowind.vercel.app/",
|
||||
integrations: [tailwind({
|
||||
config: {
|
||||
applyBaseStyles: false
|
||||
}
|
||||
}), sitemap({}), image()]
|
||||
});
|
||||
integrations: [
|
||||
tailwind({
|
||||
config: {
|
||||
applyBaseStyles: false,
|
||||
},
|
||||
}),
|
||||
sitemap({}),
|
||||
image(),
|
||||
],
|
||||
});
|
||||
|
||||
243
package-lock.json
generated
243
package-lock.json
generated
@ -1,17 +1,19 @@
|
||||
{
|
||||
"name": "@onwidget/astrowind",
|
||||
"version": "0.0.9",
|
||||
"version": "0.0.10",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@onwidget/astrowind",
|
||||
"version": "0.0.9",
|
||||
"version": "0.0.10",
|
||||
"devDependencies": {
|
||||
"@astrojs/image": "^0.3.3",
|
||||
"@astrojs/sitemap": "^1.0.0",
|
||||
"@astrojs/tailwind": "^1.0.0",
|
||||
"astro": "^1.0.0",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-astro": "^0.5.0",
|
||||
"subfont": "^6.9.0"
|
||||
}
|
||||
},
|
||||
@ -744,6 +746,26 @@
|
||||
"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": {
|
||||
"version": "1.0.0-next.21",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
|
||||
@ -2525,6 +2547,15 @@
|
||||
"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": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
|
||||
@ -6641,6 +6672,38 @@
|
||||
"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": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
|
||||
@ -7577,6 +7640,43 @@
|
||||
"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": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
||||
@ -8376,6 +8476,12 @@
|
||||
"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": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
|
||||
@ -8414,6 +8520,15 @@
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"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": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||
@ -9056,6 +9171,15 @@
|
||||
"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": {
|
||||
"version": "5.5.0",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
|
||||
@ -11342,6 +11482,20 @@
|
||||
"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": {
|
||||
"version": "1.0.0-next.21",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
|
||||
@ -12746,6 +12900,12 @@
|
||||
"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": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
|
||||
@ -15605,6 +15765,25 @@
|
||||
"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": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
|
||||
@ -16220,6 +16399,32 @@
|
||||
"integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
|
||||
"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": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
||||
@ -16806,6 +17011,12 @@
|
||||
"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": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
|
||||
@ -16827,6 +17038,15 @@
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"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": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||
@ -17323,6 +17543,15 @@
|
||||
"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": {
|
||||
"version": "5.5.0",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
|
||||
|
||||
@ -1,19 +1,22 @@
|
||||
{
|
||||
"name": "@onwidget/astrowind",
|
||||
"description": "A template to make your website using Astro + Tailwind CSS.",
|
||||
"version": "0.0.9",
|
||||
"version": "0.0.10",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build && subfont -ir --no-fallbacks --root dist",
|
||||
"preview": "astro preview"
|
||||
"preview": "astro preview",
|
||||
"pretty": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/image": "^0.3.3",
|
||||
"@astrojs/sitemap": "^1.0.0",
|
||||
"@astrojs/tailwind": "^1.0.0",
|
||||
"astro": "^1.0.0",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-astro": "^0.5.0",
|
||||
"subfont": "^6.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,21 @@
|
||||
---
|
||||
const { } = Astro.props;
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<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 dark:text-slate-400">Arcu cursus vitae congue mauris
|
||||
rhoncus viverra nibh cras pulvinar mattis blandit libero cursus mattis.</p>
|
||||
<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 dark:text-slate-400">
|
||||
Arcu cursus vitae congue mauris rhoncus viverra nibh cras pulvinar
|
||||
mattis blandit libero cursus mattis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@ -1,145 +1,242 @@
|
||||
---
|
||||
const { } = Astro.props;
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
<div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
|
||||
<div
|
||||
class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</div>
|
||||
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
||||
<div class="mb-8 text-center">
|
||||
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">
|
||||
<p
|
||||
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
|
||||
>
|
||||
Features
|
||||
</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
|
||||
</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
|
||||
dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.</p>
|
||||
</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
|
||||
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 dark:border dark:border-slate-800">
|
||||
<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 dark:border dark:border-slate-800"
|
||||
>
|
||||
<div class="flex items-center mb-4">
|
||||
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<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>
|
||||
<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
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ml-4 text-xl font-bold">
|
||||
Headers
|
||||
</div>
|
||||
<div class="ml-4 text-xl font-bold">Headers</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="ml-4 text-xl font-bold">
|
||||
Footers
|
||||
</div>
|
||||
<div class="ml-4 text-xl font-bold">Footers</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ml-4 text-xl font-bold">
|
||||
Features
|
||||
</div>
|
||||
<div class="ml-4 text-xl font-bold">Features</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="ml-4 text-xl font-bold">
|
||||
Call-to-Action
|
||||
</div>
|
||||
<div class="ml-4 text-xl font-bold">Call-to-Action</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ml-4 text-xl font-bold">
|
||||
Pricing
|
||||
</div>
|
||||
<div class="ml-4 text-xl font-bold">Pricing</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl 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">
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ml-4 text-xl font-bold">
|
||||
Testimonial
|
||||
</div>
|
||||
<div class="ml-4 text-xl font-bold">Testimonial</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@ -1,25 +1,29 @@
|
||||
---
|
||||
const { } = Astro.props;
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<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="w-full 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">
|
||||
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>
|
||||
<p class="mb-8 text-xl text-gray-600 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.
|
||||
Fusce sit amet dui tellus.
|
||||
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 ">
|
||||
<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>
|
||||
@ -29,7 +33,9 @@
|
||||
<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">
|
||||
<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>
|
||||
@ -37,38 +43,41 @@
|
||||
<h3 class="my-4 text-xl font-semibold">
|
||||
Responsive Elements
|
||||
</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400 ">
|
||||
All elements are responsive and provide the best display in all screen size. It's magic !
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
All elements are responsive and provide the best display in
|
||||
all screen size. It's magic !
|
||||
</p>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
Flexible Team
|
||||
</h3>
|
||||
<h3 class="my-4 text-xl font-semibold">Flexible Team</h3>
|
||||
<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>
|
||||
</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">
|
||||
<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">
|
||||
Ecologic Software
|
||||
</h3>
|
||||
<h3 class="my-4 text-xl font-semibold">Ecologic Software</h3>
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
@ -76,7 +85,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,116 +1,193 @@
|
||||
---
|
||||
import { IconTwitter, IconInstagram, IconFacebook, IconArrowRight } from "~/components/astro/icons";
|
||||
const { } = Astro.props;
|
||||
import {
|
||||
IconTwitter,
|
||||
IconInstagram,
|
||||
IconFacebook,
|
||||
IconArrowRight,
|
||||
} from "~/components/astro/icons";
|
||||
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 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="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">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||
href="#">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>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>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 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">
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Web
|
||||
Studio</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Web Studio
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">DynamicBox
|
||||
Flex</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>DynamicBox Flex
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Programming
|
||||
Forms</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Programming Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Integrations</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Integrations
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Command-line</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 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">
|
||||
<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">
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Documentation</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Tutorials &
|
||||
Guides</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Tutorials & Guides
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Blog</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Support Center</a>
|
||||
<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 class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Partners</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 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">
|
||||
<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">
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Home</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">About us</a>
|
||||
<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 class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Company values</a>
|
||||
<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 class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Pricing</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Privacy Policy</a>
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 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">
|
||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Subscribe</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>
|
||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||
Subscribe
|
||||
</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>
|
||||
<div class="flex flex-wrap mb-4">
|
||||
<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">
|
||||
<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"
|
||||
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"
|
||||
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"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@ -121,30 +198,40 @@ const { } = Astro.props;
|
||||
<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-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="#">
|
||||
<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"
|
||||
aria-label="Twitter"
|
||||
href="#"
|
||||
>
|
||||
<IconTwitter />
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<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"
|
||||
aria-label="Instagram" href="#">
|
||||
<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"
|
||||
aria-label="Instagram"
|
||||
href="#"
|
||||
>
|
||||
<IconInstagram />
|
||||
</a>
|
||||
</li>
|
||||
<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"
|
||||
aria-label="Facebook" href="#">
|
||||
<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"
|
||||
aria-label="Facebook"
|
||||
href="#"
|
||||
>
|
||||
<IconFacebook />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<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>.
|
||||
All rights reserved.
|
||||
Made by <a
|
||||
class="text-blue-600 hover:underline dark:text-gray-200"
|
||||
href="https://onwidget.com/"
|
||||
>onWidget
|
||||
</a>. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
@ -1,56 +1,85 @@
|
||||
---
|
||||
import { IconSun, IconGithub, IconMenu } from "~/components/astro/icons";
|
||||
const { } = Astro.props;
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<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">
|
||||
|
||||
<div class="py-3 px-3 mx-auto w-full lg:flex lg:justify-between max-w-6xl lg:px-4">
|
||||
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="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>
|
||||
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"
|
||||
<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"
|
||||
aria-label="Toggle between Dark and Light mode" onclick="window.toggleDarkMode()">
|
||||
aria-label="Toggle between Dark and Light mode"
|
||||
onclick="window.toggleDarkMode()"
|
||||
>
|
||||
<IconSun />
|
||||
</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"
|
||||
aria-label="Toggle Menu" onclick="toggleMenu()">
|
||||
aria-label="Toggle Menu"
|
||||
onclick="toggleMenu()"
|
||||
>
|
||||
<IconMenu />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div 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">
|
||||
<div
|
||||
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>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#">Products</a>
|
||||
<a
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#">Docs</a>
|
||||
<a
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Docs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#">Resources</a>
|
||||
<a
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Resources
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="lg:self-center flex items-center mb-4 lg:mb-0 collapse collapsed">
|
||||
<div
|
||||
class="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"
|
||||
<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"
|
||||
aria-label="Toggle between Dark and Light mode"
|
||||
onclick="window.toggleDarkMode()">
|
||||
aria-label="Toggle between Dark and Light mode"
|
||||
onclick="window.toggleDarkMode()"
|
||||
>
|
||||
<IconSun />
|
||||
</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"
|
||||
aria-label="Astrowind Github">
|
||||
aria-label="Astrowind Github"
|
||||
>
|
||||
<IconGithub />
|
||||
</a>
|
||||
|
||||
@ -60,4 +89,4 @@ const { } = Astro.props;
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
@ -1,31 +1,46 @@
|
||||
---
|
||||
import { Picture } from '@astrojs/image/components';
|
||||
const { } = Astro.props;
|
||||
import { Picture } from "@astrojs/image/components";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<section>
|
||||
<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 ">
|
||||
<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>
|
||||
<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 dark:text-slate-400">
|
||||
A template to make your website using Astro + Tailwind CSS. Ready to start a new project and designed taking
|
||||
into account best practices for SEO, great page speed, accessibility, dark mode, image
|
||||
A template to make your website using Astro + Tailwind CSS. Ready to
|
||||
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.
|
||||
</p>
|
||||
<div class="max-w-xs max-w-none flex justify-center ">
|
||||
<div class="max-w-xs max-w-none flex justify-center">
|
||||
<div>
|
||||
<a class="btn text-white bg-blue-600 hover:bg-blue-700 mb-4 sm:mb-0" href="#0">Get
|
||||
started</a>
|
||||
<a
|
||||
class="btn text-white bg-blue-600 hover:bg-blue-700 mb-4 sm:mb-0"
|
||||
href="#0"
|
||||
>Get started
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 ml-4"
|
||||
href="#0">Learn more</a>
|
||||
<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>
|
||||
@ -33,11 +48,17 @@ const { } = Astro.props;
|
||||
<div>
|
||||
<div class="relative flex justify-center mb-8">
|
||||
<div class="flex flex-col justify-center">
|
||||
<Picture 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" />
|
||||
<Picture
|
||||
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>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@ -1,11 +1,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"
|
||||
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>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<line x1="13" y1="18" x2="19" y2="12"></line>
|
||||
<line x1="13" y1="6" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
@ -1,9 +1,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"
|
||||
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 d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
|
||||
</svg>
|
||||
<path
|
||||
d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
@ -1,12 +1,22 @@
|
||||
---
|
||||
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
|
||||
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>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
@ -1,11 +1,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"
|
||||
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>
|
||||
<rect x="4" y="4" width="16" height="16" rx="4"></rect>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
@ -1,9 +1,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" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<line x1="4" y1="8" x2="20" y2="8"></line>
|
||||
<line x1="4" y1="16" x2="20" y2="16"></line>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={className}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.75"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<line x1="4" y1="8" x2="20" y2="8"></line>
|
||||
<line x1="4" y1="16" x2="20" y2="16"></line>
|
||||
</svg>
|
||||
|
||||
@ -1,10 +1,22 @@
|
||||
---
|
||||
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>
|
||||
<circle cx="12" cy="12" r="4"></circle>
|
||||
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
|
||||
</svg>
|
||||
<path
|
||||
d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
@ -1,11 +1,22 @@
|
||||
---
|
||||
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
|
||||
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>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import IconSun from "./IconSun.astro"
|
||||
import IconGithub from "./IconGithub.astro"
|
||||
import IconTwitter from "./IconTwitter.astro"
|
||||
import IconFacebook from "./IconFacebook.astro"
|
||||
import IconInstagram from "./IconInstagram.astro"
|
||||
import IconArrowRight from "./IconArrowRight.astro"
|
||||
import IconMenu from "./IconMenu.astro"
|
||||
import IconSun from "./IconSun.astro";
|
||||
import IconGithub from "./IconGithub.astro";
|
||||
import IconTwitter from "./IconTwitter.astro";
|
||||
import IconFacebook from "./IconFacebook.astro";
|
||||
import IconInstagram from "./IconInstagram.astro";
|
||||
import IconArrowRight from "./IconArrowRight.astro";
|
||||
import IconMenu from "./IconMenu.astro";
|
||||
|
||||
export {
|
||||
IconSun,
|
||||
@ -13,5 +13,5 @@ export {
|
||||
IconFacebook,
|
||||
IconInstagram,
|
||||
IconArrowRight,
|
||||
IconMenu
|
||||
}
|
||||
IconMenu,
|
||||
};
|
||||
|
||||
@ -1,78 +1,100 @@
|
||||
---
|
||||
import "~/styles/base.css"
|
||||
import "~/styles/base.css";
|
||||
|
||||
import Header from "~/components/astro/headers/BasicHeader.astro"
|
||||
import Footer from "~/components/astro/footers/BasicFooter.astro";
|
||||
import Header from "~/components/astro/headers/BasicHeader.astro";
|
||||
import Footer from "~/components/astro/footers/BasicFooter.astro";
|
||||
|
||||
const { title = "", description = "", withHeader = true } = Astro.props;
|
||||
const { title = "", description = "", withHeader = true } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<title>{title}</title>
|
||||
<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"
|
||||
/>
|
||||
<meta
|
||||
name="google-site-verification"
|
||||
content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<title>{title}</title>
|
||||
<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">
|
||||
<meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
|
||||
</head>
|
||||
<body
|
||||
class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900"
|
||||
>
|
||||
<Header />
|
||||
<slot />
|
||||
<Footer />
|
||||
<style>
|
||||
:root {
|
||||
}
|
||||
|
||||
<body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900">
|
||||
<Header />
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
:global(body) {
|
||||
font-family: "IBM Plex Sans", sans-serif;
|
||||
}
|
||||
|
||||
: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: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0.75rem 1.5rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
|
||||
0 4px 6px -2px rgba(0, 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>
|
||||
|
||||
<script is:inline>
|
||||
function toggleDarkMode() {
|
||||
document.documentElement.classList.toggle("dark");
|
||||
localStorage.theme = document.documentElement.classList.contains("dark")
|
||||
? "dark"
|
||||
: "light";
|
||||
}
|
||||
window.toggleDarkMode = toggleDarkMode;
|
||||
|
||||
if (
|
||||
localStorage.theme === "dark" ||
|
||||
(!("theme" in localStorage) &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
document.getElementById("menu").classList.toggle("hidden");
|
||||
}
|
||||
window.toggleMenu = toggleMenu;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
:root {}
|
||||
|
||||
:global(body) {
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
: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>
|
||||
|
||||
<script is:inline>
|
||||
function toggleDarkMode() {
|
||||
document.documentElement.classList.toggle("dark");
|
||||
localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"
|
||||
}
|
||||
window.toggleDarkMode = toggleDarkMode
|
||||
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
document.getElementById("menu").classList.toggle("hidden");
|
||||
}
|
||||
window.toggleMenu = toggleMenu
|
||||
</script>
|
||||
@ -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 BasicFeatures from '~/components/astro/features/BasicFeatures.astro';
|
||||
import StepsFeatures from '~/components/astro/features/StepsFeatures.astro';
|
||||
import HeroWithImage from '~/components/astro/hero/HeroWithImage.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
|
||||
@ -12,9 +12,9 @@ import HeroWithImage from '~/components/astro/hero/HeroWithImage.astro';
|
||||
description="Performance and accessible template to make your website using Astro + Tailwind CSS."
|
||||
>
|
||||
<main>
|
||||
<HeroWithImage />
|
||||
<BasicFeatures />
|
||||
<StepsFeatures />
|
||||
<BasicCTA />
|
||||
<HeroWithImage />
|
||||
<BasicFeatures />
|
||||
<StepsFeatures />
|
||||
<BasicCTA />
|
||||
</main>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind utilities;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
darkMode: 'class',
|
||||
}
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
darkMode: "class",
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user