update masthead illustration

components/IndustriesGrid.js

@@ -0,0 +1,113 @@
+import styles from './IndustriesGrid.module.css';
+import Image from 'next/image';
+
+export default function IndustriesGrid() {
+
+  const gridData = [
+    {
+      title: 'HR',
+      descriptions: 'Transform HR operations and boost team productivity with automation, driving strategic decision-making and talent management.',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-human-resources.svg',
+    },
+    {
+      title: 'Law',
+      descriptions: 'Streamline your legal procedures and amplify case management efficacy by delegating repetitive tasks to our automation solution.',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-law.svg',
+    },
+    {
+      title: 'Insurance',
+      descriptions: 'Optimize operational costs',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-insurance.svg',
+    },
+    {
+      title: 'Healthcare',
+      descriptions: 'Optimize patient care and medical record keeping by integrating our automation tool, freeing healthcare professionals for critical tasks.',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-healthcare.svg',
+    },
+    {
+      title: 'Freight',
+      descriptions: 'Upgrade your logistics, ensure on-time deliveries and increase efficiency by automating repetitive tasks in your freight business.',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-freight.svg',
+    },
+    {
+      title: 'Pharmacy',
+      descriptions: 'Reinforce accuracy, patient safety and efficient inventory management in your pharmacy with our dependable automation product.',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-pharmacy.svg',
+    },
+    {
+      title: 'Customer Support',
+      descriptions: 'Revolutionize customer service by automifying mundane tasks, enhancing response times and fostering superior customer satisfaction.',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-customer-support.svg',
+    },
+    {
+      title: 'Sales Development',
+      descriptions: 'Elevate your sales strategy by automating repetitive tasks, freeing your team to focus on strategic client engagement and revenue growth.',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-sales-development.svg',
+    },
+    {
+      title: 'Let us build for you',
+      descriptions: 'Customize automation solutions',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-build.svg',
+    },
+    {
+      title: 'Developers',
+      descriptions: 'Simplify software development processes',
+      buttonLabel: 'Join Waitlist',
+      logo: '/images/noun-developer.svg',
+    },
+  ];
+
+  return (
+    <div className={styles.background}>
+      <div>
+        <h2 className={styles.heading}>Achieve more with less effort.</h2>
+        <p className={styles.p}>
+          Our technology observes and records your software interactions, automating repetitive tasks.<br />
+          Spend less time on manual processes and more on tasks that truly matter.
+        </p>
+      </div>
+      <br />
+      <h1 className={styles.heading} id="industries">
+        Revolutionizing Industries with AI-First Automation for Growth and Transformation.
+      </h1>
+      <div className={styles.row}>
+        {gridData.map((grid, index) => (
+          <div key={index} className={styles.card}>
+            <div className={styles.logo}>
+              <Image
+                className="invert text-center inline"
+                priority
+                src={grid.logo}
+                height={60}
+                width={60}
+                alt={grid.title}
+              />
+            </div>
+            <h2 className={styles.title}>{grid.title}</h2>
+            <ul className={styles.descriptions}>
+              {grid.descriptions.split('\n').map((description) => (
+                <li>{description}</li>
+              ))}
+            </ul>
+            {grid.title === 'Developers' ? (
+              <a href="#start" className={styles.button}>
+                {grid.buttonLabel}
+              </a>
+            ) : (
+              <button className={styles.button}>{grid.buttonLabel}</button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/IndustriesGrid.module.css

@@ -0,0 +1,78 @@
+.background {
+  background: rgb(10, 27, 96);
+  background: radial-gradient( circle, rgba(10, 27, 96, 1) 19%, rgba(12, 16, 46, 1) 44%, rgba(0, 0, 30, 1) 66% );
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-bottom:25px;
+}
+.card {
+  font-size: medium;
+  width: 380px;
+  height: 330px;
+  margin: 20px;
+  padding: 20px;
+  border-radius: 30px;
+  background: rgba(62, 48, 103, 0.6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+ /* Add this line */
+}
+.title {
+  margin: 10px;
+  color: whitesmoke;
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+}
+.button {
+  background-color: transparent;
+  color: #b58bff;
+  padding: 6px 15px;
+  border: 2px solid #b58bff;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+  margin-top: auto;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  width: 40%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.button:hover {
+  background-color: #661ae6;
+  border: #661ae6;
+  color: white;
+}
+.descriptions {
+  text-align: center;
+  margin-bottom: 10px;
+  padding: 0;
+  font-size: 15px;
+  color: rgb(204, 194, 194);
+}
+.heading {
+  font-size: 30px;
+  font-weight: bold;
+  text-align: center;
+  margin: 10px;
+}
+.p {
+  padding: 30px;
+  font-size: 18px;
+  text-align: center;
+  color: rgb(204, 194, 194);
+}
+.logo {
+  transition: transform 0.3s ease;
+}
+.logo:hover {
+  transform: scale(1.2);
+}

components/MastHead.js

@@ -1,10 +1,9 @@
 import Link from "next/link"
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBoxOpen, faBrain } from '@fortawesome/free-solid-svg-icons'
 import { motion } from "framer-motion"
 import Image from 'next/image';
 
 import EmailForm from '@components/EmailForm'
+import IndustriesGrid from '@components/IndustriesGrid'
 
 import styles from './MastHead.module.css'
 
@@ -33,33 +32,22 @@ export default function Home() {
                                       repeatDelay: 0,
                                     }}
                                 >
-                                    {/*
-                                    <FontAwesomeIcon icon={faBrain} className="text-5xl mb-2" />
-                                    <Image
-                                      className="hue-rotate-90 invert text-center inline absolute -ml-4 -mt-10"
-                                      priority
-                                      src="/images/favicon.svg"
-                                      height={64}
-                                      width={64}
-                                      alt="Large Language Model"
-                                    />
-                                    */}
                                     <Image
                                       className="invert text-center inline"
                                       priority
-                                      src="/images/favicon.svg"
-                                      height={64}
-                                      width={64}
+                                      src="/images/masthead.svg"
+                                      height={100}
+                                      width={100}
                                       alt="Large Language Model"
+                                      style={{ marginLeft: '55px' }}
                                     />
                                 </motion.div>
-                                <FontAwesomeIcon icon={faBoxOpen} className="text-5xl" />
                             </div>
                             <h2 className="text-4xl my-10 font-extralight">
                                 AI for Humans.
                             </h2>
                             <div>
-                                <Link className="btn btn-primary ml-2 mt-2" href="#start">
+                                <Link className="btn btn-primary ml-2 mt-2" href="#industries">
                                     Get Started
                                 </Link>
                             </div>
@@ -102,6 +90,7 @@ export default function Home() {
                     </div>
                 </div>
             </div>
+            <IndustriesGrid />
             {/*
       <Footer />
       */}
@@ -174,4 +163,4 @@ export default function Home() {
           </footer>
         </>
     )
-}
+}

components/MastHead.module.css

@@ -16,4 +16,4 @@
     rgba(0,0,60,1) 75%,
     rgba(0,0,45,1) 100%
   );
-}
+}