finish all pages

src/components/features.astro

@@ -18,19 +18,19 @@ const features = [
   {
     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.",
+      "Need some JS? Astro can automatically hydrate interactive components when they become visible on the page.  ",
     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.",
+      "Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any other 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.",
+      "Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication. It just works!",
     icon: "bx:bxs-file-find",
   },
   {
@@ -52,7 +52,7 @@ const features = [
   </p>
 </div>
 
-<div class="grid sm:grid-cols-2 md:grid-cols-3 mt-10 gap-16">
+<div class="grid sm:grid-cols-2 md:grid-cols-3 mt-16 gap-16">
   {
     features.map((item) => (
       <div class="flex gap-4 items-start">

src/components/footer.astro

@@ -2,6 +2,11 @@
   <p class="text-center text-sm text-slate-500">
     Copyright © {new Date().getFullYear()} Astroship. All rights reserved.
   </p>
+  <!--
+    Can we ask you a favor 🙏
+    Please keep this backlink on your website if possible.
+    or Purchase a commercial license from https://web3templates.com
+  -->
   <p class="text-center text-xs text-slate-500 mt-1">
     Made by <a
       href="https://web3templates.com"

src/components/hero.astro

@@ -23,10 +23,16 @@ import Link from "@components/ui/link.astro";
       create any website with this starter.
     </p>
     <div class="mt-6 flex flex-col sm:flex-row gap-3">
-      <Link href="#" class="">Get Started</Link>
+      <Link
+        href="#"
+        href="https://web3templates.com/"
+        target="_blank"
+        rel="noopener">Get Started</Link
+      >
       <Link
         size="lg"
         style="outline"
+        rel="noopener"
         href="https://github.com/surjithctly/astroship"
         target="_blank">View Repo</Link
       >

src/components/pricing.astro

@@ -0,0 +1,45 @@
+---
+import { Tick } from "@components/ui/icons";
+import Link from "@components/ui/link.astro";
+
+const { plan } = Astro.props;
+---
+
+<div>
+  <div
+    class="flex flex-col w-full order-first lg:order-none border-2 border-[#D8DEE9] border-opacity-50 py-5 px-6 rounded-md">
+    <div class="text-center">
+      <h4 class="text-lg font-medium text-gray-400">{plan.name}</h4><p
+        class="mt-3 text-4xl font-bold text-black md:text-4xl">
+        {
+          plan.price && typeof plan.price === "object"
+            ? plan.price.monthly
+            : plan.price
+        }
+      </p>
+      <!-- {
+        plan.price.original && (
+          <p class="mt-1 text-xl font-medium text-gray-400 line-through md:text-2xl">
+            {plan.price.original}
+          </p>
+        )
+      } -->
+    </div><ul class="grid mt-8 text-left gap-y-4">
+      {
+        plan.features.map((item) => (
+          <li class="flex items-start gap-3 text-gray-800">
+            <Tick class="w-6 h-6" />
+            <span>{item}</span>
+          </li>
+        ))
+      }
+    </ul><div class="flex mt-8">
+      <Link
+        href={plan.button.link || "#"}
+        block
+        style={plan.popular ? "primary" : "outline"}>
+        {plan.button.text || "Get Started"}
+      </Link>
+    </div>
+  </div>
+</div>

src/components/ui/button.astro

@@ -1,6 +1,7 @@
 ---
 interface Props {
   size?: "md" | "lg";
+  block?: boolean;
   style?: "outline" | "primary" | "inverted";
   class?: string;
   [x: string]: any;

src/components/ui/icons/index.js

@@ -0,0 +1 @@
+export { default as Tick } from "./tick.astro";

src/components/ui/icons/tick.astro

@@ -0,0 +1,16 @@
+---
+const { class: className } = Astro.props;
+---
+
+<svg
+  class={className}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  ><circle cx="12" cy="12" r="9" fill="currentColor" fill-opacity=".16"
+  ></circle><path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.75 12a8.25 8.25 0 0 1 11.916-7.393.75.75 0 1 0 .668-1.343A9.713 9.713 0 0 0 12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75c0-.366-.02-.727-.06-1.082a.75.75 0 1 0-1.49.164A8.25 8.25 0 1 1 3.75 12Zm17.78-6.47a.75.75 0 0 0-1.06-1.06L12 12.94l-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l9-9Z"
+    fill="currentColor"></path>
+</svg>

src/components/ui/link.astro

@@ -1,7 +1,8 @@
 ---
 interface Props {
   href: string;
-  size?: string;
+  size?: "md" | "lg";
+  block?: boolean;
   style?: "outline" | "primary" | "inverted";
   class?: string;
   [x: string]: any;
@@ -9,6 +10,7 @@ interface Props {
 
 const {
   href,
+  block,
   size = "lg",
   style = "primary",
   class: className,
@@ -21,9 +23,8 @@ const sizes = {
 };
 
 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",
+  outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ",
+  primary: "bg-black text-white hover:bg-gray-800  border-2 border-transparent",
   inverted: "bg-white text-black   border-2 border-transparent",
 };
 ---
@@ -32,7 +33,8 @@ const styles = {
   href={href}
   {...rest}
   class:list={[
-    "  rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
+    "rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
+    block && "w-full",
     sizes[size],
     styles[style],
     className,