Feature/sc 561/refactor components

__tests__/components/Footer.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Footer from "../../components/Footer";
+
+describe("Footer", () => {
+  it("should render the component", () => {
+    render(<Footer />);
+  });
+});

__tests__/components/Sections/Considerations.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Considerations from "../../../components/Footer";
+
+describe("Considerations", () => {
+  it("should render the component", () => {
+    render(<Considerations />);
+  });
+});

__tests__/components/Sections/FAQ.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import FAQ from "../../../components/Sections/FAQ";
+
+describe("FAQ", () => {
+  it("should render the component", () => {
+    render(<FAQ />);
+  });
+});

__tests__/components/Sections/FactCards.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import FactCards from "../../../components/Sections/FactCards";
+
+describe("FactCards", () => {
+  it("should render the component", () => {
+    render(<FactCards />);
+  });
+});

__tests__/components/Sections/FactSnippets.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import FactSnippets from "../../../components/Sections/FactSnippets";
+
+describe("FactSnippets", () => {
+  it("should render the component", () => {
+    render(<FactSnippets />);
+  });
+});

__tests__/components/Sections/InfoCarousel.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import InfoCarousel from "../../../components/Sections/InfoCarousel";
+
+describe("InfoCarousel", () => {
+  it("should render the component", () => {
+    render(<InfoCarousel />);
+  });
+});

__tests__/components/Sections/NavigationHero.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import NavigationHero from "../../../components/Sections/NavigationHero";
+
+describe("NavigationHero", () => {
+  it("should render the component", () => {
+    render(<NavigationHero />);
+  });
+});

__tests__/components/Sections/Stats1.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Stats1 from "../../../components/Sections/Stats1";
+
+describe("Stats1", () => {
+  it("should render the component", () => {
+    render(<Stats1 />);
+  });
+});

__tests__/components/Sections/Stats2.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Stats2 from "../../../components/Sections/Stats2";
+
+describe("Stats2", () => {
+  it("should render the component", () => {
+    render(<Stats2 />);
+  });
+});

__tests__/components/Sections/Team.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Team from "../../../components/Sections/Team";
+
+describe("Team", () => {
+  it("should render the component", () => {
+    render(<Team />);
+  });
+});

__tests__/components/Sections/WhyInvest1.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import WhyInvest1 from "../../../components/Sections/WhyInvest1";
+
+describe("WhyInvest1", () => {
+  it("should render the component", () => {
+    render(<WhyInvest1 />);
+  });
+});

__tests__/components/Sections/WhyInvest2.test.jsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import WhyInvest2 from "../../../components/Sections/WhyInvest2";
+
+describe("WhyInvest2", () => {
+  it("should render the component", () => {
+    render(<WhyInvest2 />);
+  });
+});

components/Footer.jsx

@@ -0,0 +1,173 @@
+export default function Footer({ entityTitle, logoSrc }) {
+  return (
+    <section id="footer" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="flex flex-wrap">
+          <div className="w-full lg:w-3/5 flex flex-wrap">
+            <div className="w-1/2 lg:w-1/4 mb-8">
+              <h3 className="mb-4 text-lg font-bold font-heading">Company</h3>
+              <ul className="text-sm">
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    About Us
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Careers
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Press
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Blog
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div className="w-1/2 lg:w-1/4 mb-8">
+              <h3 className="mb-4 text-lg font-bold font-heading">Pages</h3>
+              <ul className="text-sm">
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Login
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Register
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Add list
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Contact
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div className="w-1/2 lg:w-1/4 mb-8">
+              <h3 className="mb-4 text-lg font-bold font-heading">Legal</h3>
+              <ul className="text-sm">
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Terms
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    About Us
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Team
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Privacy
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div className="w-1/2 lg:w-1/4 mb-8">
+              <h3 className="mb-4 text-lg font-bold font-heading">Resources</h3>
+              <ul className="text-sm">
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Blog
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Service
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Product
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Pricing
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="order-first lg:order-last mb-10 lg:mb-0 w-full lg:w-2/5">
+            <h3 className="mb-4 text-lg font-bold font-heading">Subscribe</h3>
+            <p className="mb-5 text-gray-500">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </p>
+            <input
+              className="w-full lg:w-2/3 mb-4 pl-4 py-3 mr-4 border border-2 rounded"
+              type="email"
+              placeholder="Type your e-mail"
+            />
+            <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">
+              Action
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 lg:mt-16 mb-8 border-b border-indigo-50" />
+      <div className="container px-4 mx-auto">
+        <div className="flex flex-wrap items-center">
+          <div className="w-full lg:w-1/2 mb-6 lg:mb-0">
+            <a className="text-gray-600 text-2xl leading-none" href="#">
+              <img
+                className="h-16"
+                src={logoSrc}
+                alt={`${entityTitle} logo`}
+                width="auto"
+                height="4rem"
+              />
+            </a>
+            <p className="hidden lg:block mt-3 text-sm text-gray-500">
+              {`All rights reserved. © ${entityTitle} 2022`}
+            </p>
+          </div>
+          <div className="w-full lg:w-1/2 mb-4 lg:mb-0">
+            <div className="mb-4 flex lg:justify-end">
+              <a className="inline-block mr-8" href="#">
+                <img
+                  alt="Facebook (Meta) social link icon"
+                  src="/socials/facebook.svg"
+                />
+              </a>
+              <a className="inline-block mr-8" href="#">
+                <img
+                  src="/socials/twitter.svg"
+                  alt="Twitter social link icon"
+                />
+              </a>
+              <a className="inline-block mr-8" href="#">
+                <img src="/socials/github.svg" alt="Github link icon" />
+              </a>
+              <a className="inline-block mr-8" href="#">
+                <img src="/socials/instagram.svg" alt="Instagram link icon" />
+              </a>
+              <a className="inline-block" href="#">
+                <img src="/socials/linkedin.svg" alt="LinkedIn link icon" />
+              </a>
+            </div>
+          </div>
+          <p className="lg:hidden text-sm text-gray-500">
+            {`All rights reserved. © ${entityTitle} 2022`}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

components/Hero.jsx

@@ -0,0 +1,51 @@
+export default function Hero({ heading, subHeading, cta1, cta2, imageSrc }) {
+  return (
+    <div className="flex flex-wrap items-center -mx-4 mt-10 lg:my-10 pb-10 lg:pb-16">
+      <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}
+        </h2>
+        <p className="max-w-lg mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+          {subHeading}
+        </p>
+        <div>
+          <a
+            className="block lg:inline-block px-5 py-3 lg:mr-3 mb-3 lg:mb-0 text-sm text-center bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+            href="#"
+          >
+            {cta1}
+          </a>
+          <a
+            className="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"
+            href="#"
+          >
+            {cta2}
+          </a>
+        </div>
+      </div>
+      <div className="w-full md:w-1/2 px-4">
+        <img
+          className="object-cover w-full rounded-xl"
+          src={imageSrc || "/images/indigo-600-square.png"}
+          alt="Hero image"
+        />
+      </div>
+      <button className="block mt-10 lg:mt-20 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100">
+        <svg
+          className="mx-auto text-indigo-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}