added: public sans

alvarofc · Dec 19, 2022 · b2fb3f6 · b2fb3f6
1 parent 3eb5507
commit b2fb3f6
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 92 deletions.
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -48,7 +48,7 @@ import "../styles/global.css";
 <!-- Neue Power font -->
 <link href="https://fonts.cdnfonts.com/css/neue-power" rel="stylesheet" />
 <!-- Manrope font -->
-<link href="https://fonts.cdnfonts.com/css/manrope" rel="stylesheet" />
+<link href="https://fonts.cdnfonts.com/css/public-sans" rel="stylesheet">
 
 <!---- Alpine  -->
 <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
diff --git a/src/components/Forms/Login.astro b/src/components/Forms/Login.astro
@@ -25,7 +25,8 @@
         class="w-full lg:h-full max-w-md md:max-w-sm md:px-0 md:w-96 mx-auto sm:px-4">
         <div class="flex flex-col">
           <div>
-            <h2 class="font-medium leading-tight text-black text-xl">
+            <h2
+              class="font-medium leading-tight text-black text-xl font-display">
               Log in to AstroSaaS
             </h2><div class="py-3">
               <span class="w-full inline-flex relative mt-3 z-0"
@@ -70,19 +71,15 @@
           <input name="_redirect" type="hidden" value="#" /><div
             class="space-y-6">
             <div>
-              <label
-                class="font-medium text-sm block mb-3 text-gray-500"
-                name="name">User name or email Adress</label
+              <label class="sr-only" name="name"
+                >User name or email Adress</label
               >
               <input
                 class="w-full focus:outline-none border py-3 appearance-none bg-gray-50 block border-gray-200 focus:bg-white focus:border-accent-500 focus:ring-accent-500 placeholder-gray-400 px-3 rounded-xl sm:text-sm text-accent-500"
                 placeholder="Type here..."
               />
             </div><div class="col-span-full">
-              <label
-                class="font-medium text-sm block mb-3 text-gray-500"
-                name="company">Password</label
-              >
+              <label class="sr-only" name="company">Password</label>
               <input
                 class="w-full focus:outline-none border py-3 appearance-none bg-gray-50 block border-gray-200 focus:bg-white focus:border-accent-500 focus:ring-accent-500 placeholder-gray-400 px-3 rounded-xl sm:text-sm text-accent-500"
                 placeholder="Type password here..."

diff --git a/src/components/Forms/Signup.astro b/src/components/Forms/Signup.astro
@@ -21,12 +21,13 @@
         >
       </div>
     </div><div
-      class="flex relative bg-white flex-1 flex-col h-screen md:flex-none md:px-28 px-4 py-16 shadow-2xl sm:justify-center z-10">
+      class="bg-white px-4 relative flex flex-1 flex-col h-screen lg:py-24 md:flex-none md:px-28 py-10 shadow-2xl sm:justify-center xl:py-36 z-10">
       <div
         class="w-full lg:h-full max-w-md md:max-w-sm md:px-0 md:w-96 mx-auto sm:px-4">
         <div class="flex flex-col">
           <div>
-            <h2 class="font-medium leading-tight text-black text-xl">
+            <h2
+              class="font-medium leading-tight text-black text-xl font-display">
               Sign up to AstroSaaS
             </h2><div class="py-3">
               <span class="w-full inline-flex relative mt-3 z-0"
@@ -66,16 +67,14 @@
               </div>
             </div>
           </div>
-        </div><form action="https://submit-form.com/r4PIGvAB">
+        </div>
+        <form action="https://submit-form.com/r4PIGvAB">
           <input name="hidden" autocomplete="false" style="display:none" />
           <input name="_redirect" type="hidden" value="#" /><div
             class="space-y-6">
             <div class="w-full flex flex-row gap-3">
               <div class="w-full">
-                <label
-                  class="font-medium text-sm block mb-3 text-gray-700"
-                  for="first_name">First name</label
-                >
+                <label class="sr-only" for="first_name">First name</label>
                 <input
                   class="w-full focus:outline-none border py-3 appearance-none bg-gray-50 block border-gray-200 focus:bg-white focus:border-accent-500 focus:ring-accent-500 placeholder-gray-400 px-3 rounded-xl sm:text-sm text-accent-500"
                   id="first_name"
@@ -84,10 +83,7 @@
                   required=""
                 />
               </div><div class="w-full">
-                <label
-                  class="font-medium text-sm block mb-3 text-gray-700"
-                  for="last_name">Last name</label
-                ><input
+                <label class="sr-only" for="last_name">Last name</label><input
                   class="w-full focus:outline-none border py-3 appearance-none bg-gray-50 block border-gray-200 focus:bg-white focus:border-accent-500 focus:ring-accent-500 placeholder-gray-400 px-3 rounded-xl sm:text-sm text-accent-500"
                   id="last_name"
                   name="last_name"
@@ -96,19 +92,15 @@
                 />
               </div>
             </div><div>
-              <label
-                class="font-medium text-sm block mb-3 text-gray-500"
-                name="name">User name or email Adress</label
+              <label class="sr-only" name="name"
+                >User name or email Adress</label
               >
               <input
                 class="w-full focus:outline-none border py-3 appearance-none bg-gray-50 block border-gray-200 focus:bg-white focus:border-accent-500 focus:ring-accent-500 placeholder-gray-400 px-3 rounded-xl sm:text-sm text-accent-500"
                 placeholder="Type here..."
               />
             </div><div class="col-span-full">
-              <label
-                class="font-medium text-sm block mb-3 text-gray-500"
-                name="company">Password</label
-              >
+              <label class="sr-only" name="company">Password</label>
               <input
                 class="w-full focus:outline-none border py-3 appearance-none bg-gray-50 block border-gray-200 focus:bg-white focus:border-accent-500 focus:ring-accent-500 placeholder-gray-400 px-3 rounded-xl sm:text-sm text-accent-500"
                 placeholder="Type password here..."
@@ -123,7 +115,7 @@
                   type="checkbox"
                 />
                 <label
-                  class="font-medium text-sm block leading-tight ml-2 text-black"
+                  class="font-medium text-xs block leading-tight ml-2 text-gray-500"
                   for="remember-me"
                   >Creating an account means you’re okay with our <a
                     class="text-accent-500 hover:text-accent-400"
@@ -150,7 +142,7 @@
                   class="text-accent-500 hover:text-accent-400 ml-3"
                   href="/login">Sign in</a
                 >
-              </p><p class="font-medium text-sm leading-tight text-black">
+              </p><p class="font-medium text-xs leading-tight text-gray-500">
                 This site is protected by reCAPTCHA and the Google Privacy
                 Policy and Terms of Service apply.
               </p>

diff --git a/src/components/landing/Pricing.astro b/src/components/landing/Pricing.astro
@@ -1,13 +1,7 @@
 <section aria-labelledby="pricing" id="pricing">
   <div class="lg:px-16 max-w-7xl md:px-12 mx-auto px-8 py-24 scroll-mt-12">
     <div class="sm:text-center">
-      <span class="inline-flex items-center text-accent-500">
-        <span class="font-mono text-sm" aria-hidden="true">2</span><span
-          class="ml-3 h-3.5 w-px bg-accent-500"></span><span
-          class="ml-3 text-base font-medium tracking-tight">Pricing</span
-        >
-      </span>
-      <p class="font-extrabold text-5xl text-black font-display mt-8"></p>
+      <p class="font-extrabold text-5xl text-black font-display"></p>
       <h2
         class="mt-6 text-4xl font-extrabold text-black font-display lg:mx-auto">
         Always know what you’ll pay,
@@ -132,7 +126,7 @@
       <section
         class="flex flex-col order-first px-6 py-8 rounded-3xl sm:px-8 bg-black lg:-mt-24 lg:order-none">
         <h3 class="mt-5 text-lg text-white font-display">Indie Hacker</h3>
-        <p class="mt-2 text-sm text-accent-200">
+        <p class="mt-2 text-sm text-accent-100">
           Perfect for those leaving 9-5 and working 24/7.
         </p>
         <p

diff --git a/src/components/landing/SectionOne.astro b/src/components/landing/SectionOne.astro
@@ -3,12 +3,7 @@
     class="mx-auto w-full lg:px-16 max-w-7xl md:px-12 items-center px-8 py-24 scroll-mt-12">
     <div class="mx-auto max-w-2xl lg:p-10 lg:text-center">
       <div>
-        <span class="items-center inline-flex text-accent-500"
-          ><span class="text-sm font-mono" aria-hidden="true">01</span><span
-            class="ml-3 bg-accent-500 h-3.5 w-px"></span><span
-            class="font-medium text-base ml-3 tracking-tight">Features</span
-          >
-        </span><p class="font-extrabold text-5xl text-black font-display mt-8">
+        <p class="font-extrabold text-5xl text-black font-display">
           I am a slightly longer heading than the others
         </p><p class="mt-4 text-lg max-w-xl tracking-tight text-gray-500">
           If you could kick the person in the pants responsible for most of your
@@ -24,15 +19,15 @@
             <div>
               <div>
                 <div
-                  class="items-center justify-center text-black bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
+                  class="items-center justify-center text-accent-500 bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
                   <ion-icon
                     aria-label="scan outline"
                     class="hydrated md h-5 w-5"
                     name="scan-outline"
                     role="img"
                   />
                 </div><p
-                  class="mt-4 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
+                  class="mt-8 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
                   Built with Astro.js.
                 </p>
               </div><div class="mt-4 text-gray-500 text-sm">
@@ -42,15 +37,15 @@
             </div><div>
               <div>
                 <div
-                  class="items-center justify-center text-black bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
+                  class="items-center justify-center text-accent-500 bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
                   <ion-icon
                     aria-label="scan outline"
                     class="hydrated md h-5 w-5"
                     name="scan-outline"
                     role="img"
                   />
                 </div><p
-                  class="mt-4 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
+                  class="mt-8 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
                   Styled with Tailwind CSS.
                 </p>
               </div><div class="mt-4 text-gray-500 text-sm">
@@ -62,15 +57,15 @@
             </div><div>
               <div>
                 <div
-                  class="items-center justify-center text-black bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
+                  class="items-center justify-center text-accent-500 bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
                   <ion-icon
                     aria-label="scan outline"
                     class="hydrated md h-5 w-5"
                     name="scan-outline"
                     role="img"
                   />
                 </div><p
-                  class="mt-4 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
+                  class="mt-8 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
                   Relived with Alpine.js
                 </p>
               </div><div class="mt-4 text-gray-500 text-sm">
@@ -81,15 +76,15 @@
             </div><div>
               <div>
                 <div
-                  class="items-center justify-center text-black bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
+                  class="items-center justify-center text-accent-500 bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
                   <ion-icon
                     aria-label="scan outline"
                     class="hydrated md h-5 w-5"
                     name="scan-outline"
                     role="img"
                   />
                 </div><p
-                  class="mt-4 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
+                  class="mt-8 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
                   Keyboard accessible.
                 </p>
               </div><div class="mt-4 text-gray-500 text-sm">
@@ -100,15 +95,15 @@
             </div><div>
               <div>
                 <div
-                  class="items-center justify-center text-black bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
+                  class="items-center justify-center text-accent-500 bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
                   <ion-icon
                     aria-label="scan outline"
                     class="hydrated md h-5 w-5"
                     name="scan-outline"
                     role="img"
                   />
                 </div><p
-                  class="mt-4 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
+                  class="mt-8 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
                   Production-ready
                 </p>
               </div><div class="mt-4 text-gray-500 text-sm">
@@ -118,15 +113,15 @@
             </div><div>
               <div>
                 <div
-                  class="items-center justify-center text-black bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
+                  class="items-center justify-center text-accent-500 bg-gray-100 rounded-xl flex h-12 w-12 lg:mx-auto">
                   <ion-icon
                     aria-label="scan outline"
                     class="hydrated md h-5 w-5"
                     name="scan-outline"
                     role="img"
                   />
                 </div><p
-                  class="mt-4 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
+                  class="mt-8 text-lg font-medium leading-6 text-black font-display lg:text-2xl">
                   Simple deploys
                 </p>
               </div><div class="mt-4 text-gray-500 text-sm">

diff --git a/src/components/landing/SectionTwo.astro b/src/components/landing/SectionTwo.astro
@@ -3,13 +3,7 @@
     class="mx-auto w-full lg:px-16 max-w-7xl md:px-12 items-center px-8 py-24">
     <div class="mx-auto max-w-2xl lg:p-10 lg:text-center">
       <div>
-        <span class="items-center inline-flex text-accent-500"
-          ><span class="text-sm font-mono" aria-hidden="true">02</span><span
-            class="ml-3 bg-accent-500 h-3.5 w-px"></span><span
-            class="font-medium text-base ml-3 tracking-tight"
-            >More features</span
-          >
-        </span><p class="font-extrabold text-5xl text-black font-display mt-8">
+        <p class="font-extrabold text-5xl text-black font-display">
           I am a slightly longer heading than the others
         </p><p class="mt-4 text-lg max-w-xl tracking-tight text-gray-500">
           If you could kick the person in the pants responsible for most of your

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -2,7 +2,7 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
 const colors = require("tailwindcss/colors");
 module.exports = {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     fontSize: {
       xs: [
@@ -90,39 +90,24 @@ module.exports = {
       }),
       colors: {
         black: "#141521",
-        "accent": {
-          50: "#E8E6FE",
-          100: "#D1CDFE",
-          200: "#A49CFC",
-          300: "#7265FB",
-          400: "#4434F9",
-          500: "#1A07F2",
-          600: "#1506C1",
-          700: "#100490",
-          800: "#0B0363",
-          900: "#050132"
-        },
-        orange: {
-          50: "#FFECE5",
-          100: "#FFD9CC",
-          200: "#FFB69E",
-          300: "#FF906B",
-          400: "#FF6A38",
-          500: "#FF4507",
-          600: "#D13400",
-          700: "#9E2800",
-          800: "#6B1B00",
-          900: "#330D00",
+        accent: {
+          50: "#CDADFF",
+          100: "#C198FF",
+          200: "#A86FFF",
+          300: "#9047FF",
+          400: "#771EFF",
+          500: "#6100F4",
+          600: "#4B00BC",
+          700: "#340084",
+          800: "#1E004C",
+          900: "#080014",
         },
       },
       fontFamily: {
-        sans: ["Manrope", ...defaultTheme.fontFamily.sans],
+        sans: ["Public Sans", ...defaultTheme.fontFamily.sans],
         display: ["Neue Power", ...defaultTheme.fontFamily.sans],
       },
     },
   },
-  plugins: [
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/forms'),
-  ],
-}
+  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
+};