From 7e64dc87e655a4142307d4a03a8df4038acab587 Mon Sep 17 00:00:00 2001 From: Surjith S M Date: Sat, 5 Nov 2022 21:25:04 +0530 Subject: [PATCH] finish homepage --- package.json | 2 + pnpm-lock.yaml | 132 ++++++++++++++++++++++++++++++++++ src/components/Card.astro | 62 ---------------- src/components/cta.astro | 15 ++++ src/components/features.astro | 24 +++++-- src/components/footer.astro | 14 ++++ src/components/hero.astro | 6 +- src/components/logos.astro | 16 +++++ src/components/ui/link.astro | 3 +- src/layouts/Layout.astro | 16 ++--- src/pages/index.astro | 7 +- 11 files changed, 217 insertions(+), 80 deletions(-) delete mode 100644 src/components/Card.astro create mode 100644 src/components/cta.astro create mode 100644 src/components/footer.astro create mode 100644 src/components/logos.astro diff --git a/package.json b/package.json index 79b5001..05780d1 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "@types/alpinejs": "^3.0.0", "alpinejs": "^3.0.0", "astro": "^1.6.0", + "astro-feather-icons": "^1.0.2", + "astro-icon": "^0.8.0", "tailwindcss": "^3.0.24" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0277d7e..c80aac2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,8 @@ specifiers: '@types/alpinejs': ^3.0.0 alpinejs: ^3.0.0 astro: ^1.6.0 + astro-feather-icons: ^1.0.2 + astro-icon: ^0.8.0 tailwindcss: ^3.0.24 dependencies: @@ -18,6 +20,8 @@ dependencies: '@types/alpinejs': 3.7.1 alpinejs: 3.10.5 astro: 1.6.2 + astro-feather-icons: 1.0.2 + astro-icon: 0.8.0 tailwindcss: 3.2.1 packages: @@ -544,6 +548,11 @@ packages: tsm: 2.2.2 dev: false + /@trysound/sax/0.2.0: + resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} + engines: {node: '>=10.13.0'} + dev: false + /@types/acorn/4.0.6: resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} dependencies: @@ -787,6 +796,18 @@ packages: tslib: 2.4.1 dev: false + /astro-feather-icons/1.0.2: + resolution: {integrity: sha512-3goz21oOAdMtISBRUvVvNY2V9WcOo67FH+US/G7BUfhLlmhVE8bBpNYRrc+v5dloGCQIzXlKryWNDZLapaHmlw==} + dev: false + + /astro-icon/0.8.0: + resolution: {integrity: sha512-sCzhZcl46BIyLJVg89hq5J4uQABn2psmGvK4cUaxib+M/kBI3TrPy1w3g2O5h/WcrTHLVN9LyxjgkD4lEJJFpw==} + dependencies: + node-fetch: 3.2.10 + resolve-pkg: 2.0.0 + svgo: 2.8.0 + dev: false + /astro/1.6.2: resolution: {integrity: sha512-UHbzQ3Q7iU2a0XBY6Dzh/Hksoa7svmkWZ3ABRGgSOT765GXIGZkErgeNAsjsBW7RsTUKVLqVxD2LK3NzZL5EKA==} engines: {node: ^14.18.0 || >=16.12.0, npm: '>=6.14.0'} @@ -901,6 +922,10 @@ packages: readable-stream: 3.6.0 dev: false + /boolbase/1.0.0: + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} + dev: false + /boolean/3.2.0: resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==} dev: false @@ -1066,6 +1091,11 @@ packages: resolution: {integrity: sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==} dev: false + /commander/7.2.0: + resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} + engines: {node: '>= 10'} + dev: false + /common-ancestor-path/1.0.1: resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==} dev: false @@ -1088,12 +1118,42 @@ packages: which: 2.0.2 dev: false + /css-select/4.3.0: + resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==} + dependencies: + boolbase: 1.0.0 + css-what: 6.1.0 + domhandler: 4.3.1 + domutils: 2.8.0 + nth-check: 2.1.1 + dev: false + + /css-tree/1.1.3: + resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==} + engines: {node: '>=8.0.0'} + dependencies: + mdn-data: 2.0.14 + source-map: 0.6.1 + dev: false + + /css-what/6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + dev: false + /cssesc/3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true dev: false + /csso/4.2.0: + resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==} + engines: {node: '>=8.0.0'} + dependencies: + css-tree: 1.1.3 + dev: false + /data-uri-to-buffer/4.0.0: resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==} engines: {node: '>= 12'} @@ -1182,6 +1242,33 @@ packages: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} dev: false + /dom-serializer/1.4.1: + resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==} + dependencies: + domelementtype: 2.3.0 + domhandler: 4.3.1 + entities: 2.2.0 + dev: false + + /domelementtype/2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + dev: false + + /domhandler/4.3.1: + resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==} + engines: {node: '>= 4'} + dependencies: + domelementtype: 2.3.0 + dev: false + + /domutils/2.8.0: + resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==} + dependencies: + dom-serializer: 1.4.1 + domelementtype: 2.3.0 + domhandler: 4.3.1 + dev: false + /dset/3.1.2: resolution: {integrity: sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==} engines: {node: '>=4'} @@ -1210,6 +1297,10 @@ packages: resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} dev: false + /entities/2.2.0: + resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==} + dev: false + /eol/0.9.1: resolution: {integrity: sha512-Ds/TEoZjwggRoz/Q2O7SE3i4Jm66mqTDfmdHdq/7DKVk3bro9Q8h6WdXKdPqFLMoqxrDK5SVRzHVPOS6uuGtrg==} dev: false @@ -2411,6 +2502,10 @@ packages: resolution: {integrity: sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==} dev: false + /mdn-data/2.0.14: + resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==} + dev: false + /merge-stream/2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} dev: false @@ -2805,6 +2900,12 @@ packages: path-key: 4.0.0 dev: false + /nth-check/2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + dependencies: + boolbase: 1.0.0 + dev: false + /object-hash/3.0.0: resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} engines: {node: '>= 6'} @@ -3197,6 +3298,18 @@ packages: unist-util-visit: 4.1.1 dev: false + /resolve-from/5.0.0: + resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==} + engines: {node: '>=8'} + dev: false + + /resolve-pkg/2.0.0: + resolution: {integrity: sha512-+1lzwXehGCXSeryaISr6WujZzowloigEofRB+dj75y9RRa/obVcYgbHJd53tdYw8pvZj8GojXaaENws8Ktw/hQ==} + engines: {node: '>=8'} + dependencies: + resolve-from: 5.0.0 + dev: false + /resolve/1.22.1: resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==} hasBin: true @@ -3406,6 +3519,11 @@ packages: resolution: {integrity: sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==} dev: false + /stable/0.1.8: + resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==} + deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility' + dev: false + /string-width/4.2.3: resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} engines: {node: '>=8'} @@ -3508,6 +3626,20 @@ packages: engines: {node: '>= 0.4'} dev: false + /svgo/2.8.0: + resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==} + engines: {node: '>=10.13.0'} + hasBin: true + dependencies: + '@trysound/sax': 0.2.0 + commander: 7.2.0 + css-select: 4.3.0 + css-tree: 1.1.3 + csso: 4.2.0 + picocolors: 1.0.0 + stable: 0.1.8 + dev: false + /synckit/0.7.3: resolution: {integrity: sha512-jNroMv7Juy+mJ/CHW5H6TzsLWpa1qck6sCHbkv8YTur+irSq2PjbvmGnm2gy14BUQ6jF33vyR4DPssHqmqsDQw==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} diff --git a/src/components/Card.astro b/src/components/Card.astro deleted file mode 100644 index ee57d4d..0000000 --- a/src/components/Card.astro +++ /dev/null @@ -1,62 +0,0 @@ ---- -export interface Props { - title: string; - body: string; - href: string; -} - -const { href, title, body } = Astro.props; ---- - -
  • - -

    - {title} - → -

    -

    - {body} -

    -     -
    • - diff --git a/src/components/cta.astro b/src/components/cta.astro new file mode 100644 index 0000000..c8ca368 --- /dev/null +++ b/src/components/cta.astro @@ -0,0 +1,15 @@ +--- +import Link from "./ui/link.astro"; +--- + +
    +

    Build faster websites.

    +

    + Pull content from anywhere and serve it fast with Astro's next-gen island + architecture. +

    +
    + Get Started +
    +
    diff --git a/src/components/features.astro b/src/components/features.astro index 365666d..45b46f1 100644 --- a/src/components/features.astro +++ b/src/components/features.astro @@ -1,40 +1,49 @@ --- +// @ts-ignore +import { Icon } from "astro-icon"; + const features = [ { title: "Bring Your Own Framework", description: "Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.", + icon: "bx:bxs-briefcase", }, { title: "100% Static HTML, No JS", description: "Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.", + icon: "bx:bxs-window-alt", }, { title: "On-Demand Components", description: "Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.", + icon: "bx:bxs-data", }, { title: "Broad Integration", description: "Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.", + icon: "bx:bxs-bot", }, { title: "SEO Enabled", description: "Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.", + icon: "bx:bxs-file-find", }, { title: "Community", description: "Astro is an open source project powered by hundreds of contributors making thousands of individual contributions.", + icon: "bx:bxs-user", }, ]; --- -
    -

    +
    +

    Everything you need to start a website

    @@ -46,9 +55,14 @@ const features = [

    { features.map((item) => ( -
    -

    {item.title}

    {" "} -

    {item.description}

    +
    +
    + +
    +
    +

    {item.title}

    {" "} +

    {item.description}

    +
    )) } diff --git a/src/components/footer.astro b/src/components/footer.astro new file mode 100644 index 0000000..b8226fe --- /dev/null +++ b/src/components/footer.astro @@ -0,0 +1,14 @@ +
    +

    + Copyright © {new Date().getFullYear()} Astroship. All rights reserved. +

    +

    + Made by + Web3Templates + +

    +
    diff --git a/src/components/hero.astro b/src/components/hero.astro index d869c5b..3c41b2d 100644 --- a/src/components/hero.astro +++ b/src/components/hero.astro @@ -4,8 +4,8 @@ import heroImage from "assets/hero.png"; import Link from "@components/ui/link.astro"; --- -
    -
    +
    +
    -

    +

    Marketing website done with Astro

    diff --git a/src/components/logos.astro b/src/components/logos.astro new file mode 100644 index 0000000..11db8dd --- /dev/null +++ b/src/components/logos.astro @@ -0,0 +1,16 @@ +--- +// @ts-ignore +import { Icon } from "astro-icon"; +--- + +

    +

    Works with your technologies

    +
    + + + + + + +
    +
    diff --git a/src/components/ui/link.astro b/src/components/ui/link.astro index c6680f2..cddf4f2 100644 --- a/src/components/ui/link.astro +++ b/src/components/ui/link.astro @@ -2,7 +2,7 @@ interface Props { href: string; size?: string; - style?: string; + style?: "outline" | "primary" | "inverted"; class?: string; [x: string]: any; } @@ -24,6 +24,7 @@ const styles = { outline: "border-2 border-black hover:bg-black text-black hover:text-white", primary: "bg-black text-white hover:bg-slate-900 border-2 border-transparent", + inverted: "bg-white text-black border-2 border-transparent", }; --- diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 9dac656..3e4c966 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -6,13 +6,13 @@ import "@fontsource/inter/variable.css"; export interface Props { title: string; } -const { src } = await getImage({ - src: "../../assets/hero.png", - width: 800, - height: 742, - format: "avif", -}); -console.log(src); +// const { src } = await getImage({ +// src: "../../assets/hero.png", +// width: 800, +// height: 742, +// format: "avif", +// }); +// console.log(src); const { title } = Astro.props; --- @@ -25,7 +25,7 @@ const { title } = Astro.props; - + {title} {title && "|"} Astro Ship diff --git a/src/pages/index.astro b/src/pages/index.astro index 17e1056..cd99380 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,8 +1,10 @@ --- -import Card from "@components/Card.astro"; import Container from "@components/container.astro"; +import Cta from "@components/cta.astro"; import Features from "@components/features.astro"; +import Footer from "@components/footer.astro"; import Hero from "@components/hero.astro"; +import Logos from "@components/logos.astro"; import Layout from "@layouts/Layout.astro"; --- @@ -10,5 +12,8 @@ import Layout from "@layouts/Layout.astro"; + + +