sc 6803 responsive footer

.vscode/settings.json

@@ -1,6 +1,8 @@
 {
 	"cSpell.words": [
+    "fortawesome",
     "frontmatter",
+    "lpignore",
     "Roboto",
     "tailwindcss"
   ],
@@ -23,5 +25,8 @@
     "titleBar.inactiveBackground": "#36206699",
     "titleBar.inactiveForeground": "#e7e7e799"
   },
-  "peacock.color": "#362066"
+  "peacock.color": "#362066",
+  "files.associations": {
+    "*.css": "postcss"
+  }
 }

package.json

@@ -23,6 +23,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@mdx-js/react": "^2.3.0",

src/components/layout/Footer.tsx

@@ -1,71 +1,86 @@
 import React from "react"
-import "./css/footer.css"
 import { LaunchWareLogoLight } from "./LaunchWareLogoLight"
 import { Link } from "gatsby"
+import { companySocialProfiles, getCompanySocialProfile } from "../../configuration/getCompanySocialProfile"
+import { CompanySocialIcon } from "../social/CompanySocialIcon"
+import { companyContactInformation } from "../../configuration/companyContactInformation"
+
+import "./css/footer.css"
 
 const Footer = () => {
+  const socialListItems = Object.keys(companySocialProfiles).map((network: string) => {
+    return <li key={network}><CompanySocialIcon network={network} /></li>
+  })
+
   return (
     <footer className="footer">
       <div className="footer_container">
         <div className="footer_logo-container">
           <LaunchWareLogoLight className="footer_logo" />
         </div>
         <div className="footer_grid">
-          <nav className="footer_group">
+          <nav className="footer_group footer_group__serve">
             <h3 className="footer_headline">How we serve</h3>
             <ul className="footer_link-list">
-              <li>
+              <li className="footer_link-list-item">
                 <Link to="/services">Services</Link>
               </li>
-              <li>
+              <li className="footer_link-list-item">
                 <Link to="/capabilities">Capabilities</Link>
               </li>
-              <li>
+              <li className="footer_link-list-item">
                 <Link to="/case-studies">Case Studies</Link>
               </li>
-              <li>
+              <li className="footer_link-list-item">
                 <a href="#">Book Your Launch Call</a>
               </li>
             </ul>
           </nav>
 
-          <nav className="footer_group">
+          <nav className="footer_group footer_group__who">
             <h3 className="footer_headline">Who we are</h3>
             <ul className="footer_link-list">
-              <li>
+              <li className="footer_link-list-item">
                 <Link to="/about">About</Link>
               </li>
-              <li>
+              <li className="footer_link-list-item">
                 <Link to="/careers">Careers</Link>
               </li>
-              <li>
+              <li className="footer_link-list-item">
                 <Link to="/blog">Insight</Link>
               </li>
-              <li>
+              <li className="footer_link-list-item">
                 <a href="#">Book Your Launch Call</a>
               </li>
             </ul>
           </nav>
 
-          <div className="footer_group">
+          <div className="footer_group footer_group__connect">
             <h3 className="footer_headline">Connect</h3>
-            <p><a href="tel:50855555555">Change Phone Number</a></p>
-            <p><a href="mailto:[email protected]">[email protected]</a></p>
+            <p><a href={`tel:${companyContactInformation.phone}`}> {companyContactInformation.phone}</a></p>
+            <p><a href={`mailto:${companyContactInformation.email}`}>{companyContactInformation.email}</a></p>
             <ul className="footer_social-list">
-              <li></li>
+              {socialListItems}
             </ul>
           </div>
 
-          <form className="footer_group">
+          <form className="footer_group footer_group__last">
             <h3 className="footer_headline">Stay in our orbit</h3>
-            <input type="email" placeholder="Email" />
-            <input type="submit" className="button button__full-width" value="Submit" data-lpignore="true" />
-            <p>By submitting this form, you confirm that you have read and agree to the Terms & Conditions.</p>
+            <input type="email" placeholder="Email" className="footer_opt-in-email" />
+            <input type="submit" className="button button__full-width footer_button" value="Submit" data-lpignore="true" />
+            <p className="footer_opt-in-terms">By submitting this form, you confirm that you have read and agree to the Terms & Conditions.</p>
           </form>
         </div>
-        <p className="footer_copyright-notice">&copy; {new Date().getFullYear()} LaunchWare. All rights reserved.</p>
+
+        <div className="footer_legal">
+          <p className="footer_copyright-notice">&copy; {new Date().getFullYear()} LaunchWare. All rights reserved.</p>
+          <ul className="footer_legal-links">
+            <li><Link to="/disclaimer">Disclaimer</Link></li>
+            <li><Link to="/cookies">Cookies</Link></li>
+          </ul>
+        </div>
       </div>
-    </footer>
+    </footer >
   )
 }
 

src/components/layout/css/footer.css

@@ -6,14 +6,82 @@
   @apply pad-container;
 }
 
+.footer_grid {
+  @apply w-full grid text-center lg:text-left lg:gap-20 lg:grid-cols-5 grid-cols-1;
+}
+
+.footer_group {
+  @apply col-span-1;
+}
+
+.footer_group__serve {
+  @apply order-3 lg:order-1 mb-6 lg:mb-0;
+}
+
+.footer_group__who {
+  @apply order-4 lg:order-2 mb-12 lg:mb-0;
+}
+
+.footer_group__connect {
+  @apply order-1 lg:order-3;
+}
+
+.footer_group__last {
+  @apply lg:col-span-2 col-span-1 order-2 lg:order-4 my-12 lg:my-0 max-w-sm mx-auto;
+}
+
 .footer_headline {
-  @apply font-semibold;
+  @apply font-semibold pb-6;
+}
+
+.footer_link-list-item {
+  @apply mb-3 font-thin block;
 }
 
 .footer_logo {
-  @apply block mb-12;
+  @apply inline-block mb-12;
+}
+
+.footer_logo-container {
+  @apply text-center lg:text-left;
+}
+
+.footer_group__connect li, .footer_group__connect p {
+  @apply mb-3;
+}
+
+.footer_social-list li {
+  @apply inline-block mr-3;
+}
+
+.footer_legal {
+  @apply text-launch-black-50 text-center lg:text-left flex flex-wrap lg:flex-nowrap justify-between mt-8;
 }
 
 .footer_copyright-notice {
-  @apply text-launch-black-30 ;
+  @apply w-full flex-grow-0;
+}
+
+.footer_legal-links {
+  @apply flex-grow lg:w-1/2 lg:text-right;
+}
+
+.footer_legal-links li, .footer_copyright-notice {
+  @apply mb-4 lg:mb-0;
+}
+
+.footer_legal-links li {
+  @apply inline-block mx-2 lg:ml-0 lg:mr-4;
+}
+
+.footer_opt-in-terms {
+  @apply text-launch-black-50;
+}
+
+.footer_opt-in-email {
+  @apply bg-launch-black border-white border rounded-md block w-full py-1 pl-2 focus:ring-white focus:outline-none focus:ring-2;
+}
+
+.footer_button {
+  @apply my-2;
 }

src/components/social/CompanySocialIcon.tsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+import { getCompanySocialProfile } from "../../configuration/getCompanySocialProfile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+export const CompanySocialIcon = ({ network }: { network: string }) => {
+  const { icon, url } = getCompanySocialProfile(network);
+  return <a href={url}><FontAwesomeIcon icon={icon} /></a>
+}

src/configuration/companyContactInformation.ts

@@ -0,0 +1,11 @@
+export const companyContactInformation = {
+  phone: "CHANGE NUMBER",
+  email: "[email protected]",
+  mailingAddress: {
+    streetAddress: "71 Summer Street",
+    streetAddress2: "3rd Floor",
+    city: "Boston",
+    state: "MA",
+    zipCode: "02021",
+  },
+};

src/configuration/getCompanySocialProfile.ts

@@ -0,0 +1,46 @@
+import {
+  faXTwitter,
+  faFacebook,
+  faYoutube,
+  faLinkedin,
+  faInstagram,
+} from "@fortawesome/free-brands-svg-icons";
+
+export class SocialProfileNotFoundError extends Error {
+  constructor(network: string) {
+    super(`Social profile not found for network: ${network}`);
+  }
+}
+
+export const companySocialProfiles = {
+  linkedIn: {
+    icon: faLinkedin,
+    url: "https://www.linkedin.com/company/launchware/",
+  },
+  x: {
+    icon: faXTwitter,
+    url: "https://twitter.com/launchware",
+  },
+  facebook: {
+    icon: faFacebook,
+    url: "https://www.facebook.com/LaunchWare/",
+  },
+  youtube: {
+    icon: faYoutube,
+    url: "https://www.youtube.com/@LaunchWareSoftwareDevelopment",
+  },
+  instagram: {
+    icon: faInstagram,
+    url: "https://www.instagram.com/launchware/",
+  },
+} as Record<string, { icon: any; url: string }>;
+
+export const getCompanySocialProfile = (network: string) => {
+  const result = companySocialProfiles[network];
+
+  if (!result) {
+    throw new SocialProfileNotFoundError(network);
+  }
+
+  return result;
+};

src/css/buttons.css

@@ -1,3 +1,8 @@
-.button {
+.button,
+input.button {
   @apply bg-launch-orange text-white font-bold py-1 px-3 rounded-md hover:text-launch-orange hover:bg-white border-launch-orange border-x-2 border-y-2;
 }
+
+.button__full-width {
+  @apply w-full;
+}

src/css/index.css

@@ -6,7 +6,7 @@
 
 @layer utilities {
   .pad-container {
-    @apply px-2 sm:px-10 max-w-7xl;
+    @apply px-4 sm:px-10 max-w-7xl mx-auto;
   }
 }
 
@@ -47,3 +47,8 @@ body {
   display: block;
   margin: auto;
 }
+
+[data-lastpass-icon-root],
+[data-lastpass-root] {
+  display: none !important;
+}

yarn.lock

@@ -1201,6 +1201,32 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333"
   integrity sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==
 
+"@fortawesome/[email protected]":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
+  integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
+
+"@fortawesome/fontawesome-svg-core@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz#37f4507d5ec645c8b50df6db14eced32a6f9be09"
+  integrity sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/free-brands-svg-icons@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz#9b8e78066ea6dd563da5dfa686615791d0f7cc71"
+  integrity sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@gatsbyjs/parcel-namer-relative-to-cwd@^2.12.0":
   version "2.12.0"
   resolved "https://registry.yarnpkg.com/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-2.12.0.tgz#4bd49fb678e739624d0bc39c3376b4781bf6a0ee"