From 64f3f8929d839cd0de7cf7adeec6c32432a09005 Mon Sep 17 00:00:00 2001 From: Jesica Date: Wed, 31 May 2023 18:35:32 +0700 Subject: [PATCH 01/29] add industries grid component --- components/IndustriesGrid.js | 72 ++++++++++++++++++++++++++++ components/IndustriesGrid.module.css | 47 ++++++++++++++++++ components/MastHead.js | 3 +- 3 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 components/IndustriesGrid.js create mode 100644 components/IndustriesGrid.module.css diff --git a/components/IndustriesGrid.js b/components/IndustriesGrid.js new file mode 100644 index 0000000..a66fa48 --- /dev/null +++ b/components/IndustriesGrid.js @@ -0,0 +1,72 @@ +import styles from './IndustriesGrid.module.css'; + +export default function IndustriesGrid() { + const gridData = [ + { + title: 'HR', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + { + title: 'Law', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + { + title: 'Insurance', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + { + title: 'Healthcare', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + { + title: 'Freight', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + { + title: 'Pharmacy', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + { + title: 'Customer Support', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + { + title: 'Sales Development', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + { + title: 'Let us build for you', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + { + title: 'Developers', + checkpoints: ['1', '2', '3'], + buttonLabel: 'Join Waitlist', + }, + ]; + + return ( +
+ {gridData.map((grid, index) => ( +
+

{grid.title}

+
    + {grid.checkpoints.map((checkpoint, checkpointIndex) => ( +
  • {checkpoint}
    • + ))} +
+ +
+ ))} +
+ ); +} diff --git a/components/IndustriesGrid.module.css b/components/IndustriesGrid.module.css new file mode 100644 index 0000000..555ede0 --- /dev/null +++ b/components/IndustriesGrid.module.css @@ -0,0 +1,47 @@ +.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; +} + +.card { + background-color: #ffffff; + border-radius: 10px; + padding: 20px; + text-align: center; +} + +.title { + color: #000000; +} + +.description { + color: #000000; + margin-bottom: 10px; + font-size:small +} + +.button { + background-color: purple; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} +.checkpoints { + text-align: left; + margin: 0; + padding: 0; +} + +.checkpoints li { + margin-bottom: 5px; + list-style-type: none; +} + +.checkpoints li:before { + content: "✓"; + color: black; + margin-right: 5px; +} \ No newline at end of file diff --git a/components/MastHead.js b/components/MastHead.js index 42b22f4..dce0336 100644 --- a/components/MastHead.js +++ b/components/MastHead.js @@ -5,7 +5,7 @@ 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' export default function Home() { @@ -79,6 +79,7 @@ export default function Home() { +