Feature/sc 645/pre release cleanup 1.0.0

cms.data.js

@@ -10,6 +10,12 @@ export const navigationLinks =
 export const navigationHrefs = [ "#why-invest", "#why-invest", "#why-invest" ];
 export const cta = "Invest";
 export const logoSrc = undefined;
+export const newsletterContent = {
+  newsletterTitle : 'Subscribe',
+  newsletterSubtitle : 'Say informed with updates from our blog ',
+  newsletterHref : 'https://slightlysharpe.com',
+  newsletterName : 'Slightly Sharpe',
+};
 export const stats1Data = [
   {
     icon : "",

components/FAQCard.jsx

@@ -1,6 +1,6 @@
 export default function FAQCard({ title, listItems }) {
   return (
-    <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
+    <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4 lg:px-2">
       <div>
         <span className="mx-auto mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-700 rounded-full">
           <svg
@@ -17,10 +17,10 @@ export default function FAQCard({ title, listItems }) {
             />
           </svg>
         </span>
-        <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
+        <h3 className="mx-auto text-center mb-2 text-lg lg:text-2xl font-bold font-heading">
           {title}
         </h3>
-        <ul className="list-inside list-disc leading-loose text-gray-600 pl-4">
+        <ul className="list-inside list-disc leading-loose text-gray-600 py-1">
           {listItems?.map(({ text, href }, index) => (
             <li className="text-indigo-500" key={`${index}-faq-card`}>
               <a

components/Footer.jsx

@@ -1,42 +1,18 @@
 import FooterColumn from "./FooterColumn";
 import Image from "next/image";
 import Logo from "./Logo";
-import { useState, useRef } from "react";
-
-export default function Footer({ entityTitle, logoSrc, footerItems, socials }) {
-  const inputEl = useRef(null);
-  const [inputError, setInputError] = useState(false);
-  const [message, setMessage] = useState("");
-  const [subscribed, setSubscribed] = useState(false);
-
-  const subscribe = async (e) => {
-    e.preventDefault();
-
-    const res = await fetch(`/api/convertkit`, {
-      body: JSON.stringify({
-        email: inputEl.current.value,
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-    });
-
-    const { error } = await res.json();
-    if (error) {
-      setInputError(true);
-      setMessage(
-        "Your e-mail address is invalid or you are already subscribed!"
-      );
-      return;
-    }
-
-    inputEl.current.value = "";
-    setInputError(false);
-    setSubscribed(true);
-    setMessage("Successfully! 🎉 You are now subscribed.");
-  };
+import Newsletter from "./Newsletter";
 
+export default function Footer({
+  entityTitle,
+  logoSrc,
+  footerItems,
+  socials,
+  newsletterTitle,
+  newsletterSubtitle,
+  newsletterName,
+  newsletterHref,
+}) {
   return (
     <section id="footer" className="py-20">
       <div className="container px-4 mx-auto">
@@ -46,52 +22,12 @@ export default function Footer({ entityTitle, logoSrc, footerItems, socials }) {
               <FooterColumn {...props} key={`${index}-footer-column`} />
             ))}
           </div>
-          <div className="order-first lg:order-last mb-10 lg:mb-0 w-full lg:w-2/5 lg:text-right">
-            <h3 className="mb-4 text-lg font-bold font-heading">Subscribe</h3>
-            <p className="mb-5 text-gray-500">
-              Stay informed with our updates via our blog,{" "}
-              <a
-                className="text-gray-700 hover:font-bold hover:underline hover:text-indigo-700"
-                href="https://slightlysharpe.com"
-              >
-                Slighly Sharpe
-              </a>
-              .
-            </p>
-            <form onSubmit={subscribe}>
-              <label htmlFor="email-input" className="sr-only">
-                Email address
-              </label>
-              <input
-                className="w-full lg:w-2/3 mb-4 pl-4 py-3 mr-4 border border-2 rounded"
-                id="email-input"
-                name="email"
-                placeholder={
-                  subscribed ? "You're subscribed !  🎉" : "Enter your email"
-                }
-                ref={inputEl}
-                required
-                type="email"
-                disabled={subscribed}
-              />
-              <button
-                className={`inline-block px-5 py-3 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200 ${
-                  subscribed
-                    ? "cursor-default"
-                    : "hover:bg-indigo-700 dark:hover:bg-indigo-300"
-                } focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 dark:ring-offset-black`}
-                type="submit"
-                disabled={subscribed}
-              >
-                {subscribed ? "Thank you!" : "Sign up"}
-              </button>
-              {inputError && (
-                <div className="pt-2 text-sm text-red-500 w-72 sm:w-96 dark:text-red-400">
-                  {message}
-                </div>
-              )}
-            </form>
-          </div>
+          <Newsletter
+            newsletterHref={newsletterHref}
+            newsletterTitle={newsletterTitle}
+            newsletterSubtitle={newsletterSubtitle}
+            newsletterName={newsletterName}
+          />
         </div>
       </div>
       <div className="mt-4 lg:mt-16 mb-8 border-b border-indigo-50" />
@@ -111,7 +47,7 @@ export default function Footer({ entityTitle, logoSrc, footerItems, socials }) {
                 <a
                   className="flex leading-loose my-4 block text-sm text-gray-700 transform hover:scale-110 mr-4 lg:ml-4"
                   href={href}
-                  key={href}
+                  key={`${href}-${index}`}
                   rel="noopener noreferrer"
                 >
                   <div className="ml-auto md:m-auto text-center relative h-8 w-8">

components/Hero.jsx

@@ -9,7 +9,7 @@ export default function Hero({
   session,
 }) {
   return (
-    <div className="flex flex-wrap items-center -mx-4 mt-10 lg:my-10 pb-10 lg:pb-16">
+    <div className="flex flex-wrap items-center -mx-4 mt-10 lg:my-10">
       <div className="w-full md:w-1/2 px-4 mb-12 md:mb-0">
         <h2 className="max-w-sm mb-8 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
           {heading}
@@ -32,12 +32,12 @@ export default function Hero({
               Log in
             </button>
           ) : (
-            <button
+            <a
               className="w-full lg:w-1/2 block lg:inline-block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-              onClick={() => signOut()}
+              href="#why-invest"
             >
-              Log out
-            </button>
+              Invest
+            </a>
           )}
         </div>
       </div>

components/MobileNavbar.jsx

@@ -83,7 +83,7 @@ export default function MobileNavbar({
             <div className="mt-auto">
               <div className="pt-6">
                 <a
-                  className="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+                  className="block px-5 py-3 text-sm text-center font-semibold text-white bg-indigo-500 hover:bg-indigo-600 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
                   href="#"
                   onClick={() => setMobileMenuIsClicked(!mobileMenuIsClicked)}
                 >

components/Newsletter.jsx

@@ -0,0 +1,95 @@
+import { useState, useRef } from "react";
+
+export default function Newsletter({
+  newsletterTitle,
+  newsletterSubtitle,
+  newsletterName,
+  newsletterHref,
+}) {
+  const inputEl = useRef(null);
+  const [inputError, setInputError] = useState(false);
+  const [message, setMessage] = useState("");
+  const [subscribed, setSubscribed] = useState(false);
+
+  const subscribe = async (e) => {
+    e.preventDefault();
+
+    const res = await fetch(`/api/convertkit`, {
+      body: JSON.stringify({
+        email: inputEl.current.value,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+
+    const { error } = await res.json();
+    if (error) {
+      setInputError(true);
+      setMessage(
+        "Your e-mail address is invalid or you are already subscribed!"
+      );
+      return;
+    }
+
+    inputEl.current.value = "";
+    setInputError(false);
+    setSubscribed(true);
+    setMessage("Successfully! 🎉 You are now subscribed.");
+  };
+
+  return (
+    <div
+      className="order-first lg:order-last mb-10 lg:mb-0 w-full lg:w-2/5 lg:text-right"
+      id="newsletter-signup"
+    >
+      <h3 className="mb-4 text-lg font-bold font-heading">
+        {newsletterTitle || "Subscribe"}
+      </h3>
+      <p className="mb-5 text-gray-500">
+        {newsletterSubtitle || "Stay informed with updates from our blog "}
+        <a
+          className="text-gray-700 hover:font-bold hover:underline hover:text-indigo-700"
+          href={newsletterHref || "https://slightlysharpe.com"}
+        >
+          {newsletterName || "Slighly Sharpe"}
+        </a>
+        .
+      </p>
+      <form onSubmit={subscribe}>
+        <label htmlFor="email-input" className="sr-only">
+          Email address
+        </label>
+        <input
+          className="w-2/3 mb-4 pl-4 py-3 mr-4 border border-1 rounded border-indigo-200 hover:border-indigo-500 focus:border-indigo-800"
+          id="email-input"
+          name="email"
+          placeholder={
+            subscribed ? "You're subscribed !  🎉" : "Enter your email"
+          }
+          ref={inputEl}
+          required
+          type="email"
+          disabled={subscribed}
+        />
+        <button
+          className={`w-1/4 inline-block px-5 py-3 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200 ${
+            subscribed
+              ? "cursor-default"
+              : "hover:bg-indigo-700 dark:hover:bg-indigo-300"
+          } focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 dark:ring-offset-black`}
+          type="submit"
+          disabled={subscribed}
+        >
+          {subscribed ? "Thank you!" : "Sign up"}
+        </button>
+        {inputError && (
+          <div className="pt-2 text-sm text-red-500 w-72 sm:w-96 dark:text-red-400">
+            {message}
+          </div>
+        )}
+      </form>
+    </div>
+  );
+}

components/Sections/FactCards.jsx

@@ -10,7 +10,7 @@ export default function FactCards({ factCardsContent }) {
                   <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
                     {index + 1}
                   </span>
-                  <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                  <h3 className="mb-4 h-36 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
                     {title}
                   </h3>
                   <p className="text-lg text-gray-500 leading-loose">

components/Sections/FactSnippets.jsx

@@ -23,7 +23,7 @@ export default function FactSnippets({
           cta1Href={cta1Href}
           cta2Href={cta2Href}
         />
-        <div className="flex flex-wrap items-center justify-around -m-4">
+        <div className="flex flex-wrap items-center justify-around -m-4 text-center">
           {factSnippetsCardContent?.map(
             ({ description, imageSrc, title, subTitle }, index) => {
               return (
@@ -36,9 +36,9 @@ export default function FactSnippets({
                       {description}
                     </p>
                     <img
-                      className="mb-2 h-12 w-12 object-cover rounded-full"
+                      className="mb-2 h-12 w-12 object-cover rounded-full mx-auto"
                       src={imageSrc}
-                      alt="Avatar image"
+                      alt={`${title} fact snippet heading object`}
                     />
                     <p className="text-2xl font-bold font-heading">{title}</p>
                     <p className="text-lg text-gray-400">{subTitle}</p>

components/Sections/Stats1.jsx

@@ -4,7 +4,7 @@ export default function Stats1({ data }) {
   return (
     <section id="stats-1" className="py-20">
       <div className="container px-4 mx-auto">
-        <div className="flex flex-wrap items-center -mx-4 -mb-8">
+        <div className="flex flex-wrap items-start -mx-4 -mb-8">
           {data?.map((props, index) => {
             return <StatNumberCard {...props} key={`${index}` + "stats1"} />;
           })}

components/Sections/WhyInvest.jsx

@@ -11,15 +11,15 @@ export default function WhyInvest({
   return (
     <section id="why-invest" className="py-20">
       <div className="container px-4 mx-auto">
-        <div className="flex flex-wrap -mx-4">
+        <div className="flex flex-wrap text-center lg:text-left">
           <WhyInvestHero
             subTitle={subTitle}
             title={title}
             description={description}
             cta={cta}
           />
           <div className="w-full lg:w-1/2 px-4">
-            <div className="flex flex-wrap px-2 py-6 md:px-8 md:py-12 bg-gray-50 rounded-lg">
+            <div className="flex flex-wrap px-2 py-6 md:px-8 md:py-12 bg-gray-50 rounded-lg items-start">
               {whyInvestCardData?.map((description, index) => {
                 return (
                   <WhyInvestCard

components/WhyInvestCard.jsx

@@ -1,11 +1,13 @@
 export default function WhyInvest1Card({ label, description }) {
   return (
-    <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4 mb-8 lg:mb-6">
-      <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+    <div className="w-full md:w-1/2 lg:w-full flex items-center justify-center lg:justify-start flex-col lg:flex-row px-4 mb-8 lg:mb-6 ">
+      <span className="mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
         {label}
       </span>
       <div className="max-w-xs">
-        <p className="text-lg text-gray-500 leading-loose">{description}</p>
+        <p className="text-lg text-gray-500 leading-loose py-2 lg:pl-4 ">
+          {description}
+        </p>
       </div>
     </div>
   );

components/WhyInvestHero.jsx

@@ -1,7 +1,7 @@
-export default function WhyInvest1Hero({ subTitle, title, description, cta }) {
+export default function WhyInvestHero({ subTitle, title, description, cta }) {
   return (
-    <div className="w-full lg:w-1/2 px-4">
-      <div className="max-w-lg lg:mx-auto mb-10 lg:mb-0">
+    <div className="w-full lg:w-1/2 px-4 text-center lg:text-left">
+      <div className="lg:mx-auto mb-10 lg:mb-0">
         <span className="text-xs font-semibold text-indigo-500 uppercase">
           {subTitle}
         </span>

pages/index.jsx

@@ -36,6 +36,7 @@ import {
   hostname,
   teamContent,
   factSnippetsContent,
+  newsletterContent,
 } from "../cms.data";
 
 export default function Funded() {
@@ -184,6 +185,7 @@ export default function Funded() {
           logoSrc={logoSrc}
           footerItems={footerItems}
           socials={socials}
+          {...newsletterContent}
         />
       </div>
     </div>