feat-tech-stack-section

src/app/tech/page.tsx

@@ -1,26 +1,30 @@
 import HeroSection from "@/components/tech/HeroSection";
+import { TechStackSection } from "@/components/tech/TechStackSection";
 import { Box, Flex } from "@radix-ui/themes";
 
 const page = () => {
   return (
-    <Flex
-      position="relative"
-      width="100%"
-      direction="column"
-      align="center"
-      justify="start"
-      gap={{ initial: "4", lg: "6", xl: "9" }}
-    >
-      <Box
+    <>
+      <Flex
+        position="relative"
         width="100%"
-        position="absolute"
-        inset="0"
-        height="450px"
-        className="bg-navy-900 -z-10"
-      />
+        direction="column"
+        align="center"
+        justify="start"
+        gap={{ initial: "4", lg: "6", xl: "9" }}
+      >
+        <Box
+          width="100%"
+          position="absolute"
+          inset="0"
+          height="450px"
+          className="bg-navy-900 -z-10"
+        />
 
-      <HeroSection />
-    </Flex>
+        <HeroSection />
+      </Flex>
+      <TechStackSection />
+    </>
   );
 };
 

src/components/tech/TechStackSection.tsx

@@ -0,0 +1,78 @@
+import {
+  Box,
+  Flex,
+  Grid,
+  Heading,
+  Link,
+  Section,
+  Separator,
+  Text,
+} from "@radix-ui/themes";
+import Image from "next/image";
+import React from "react";
+
+const technologies = [
+  "TypeScript",
+  "NextJS",
+  "React",
+  "RadixUI",
+  "Tailwind",
+  "Postgres",
+  "NodeJS",
+  "Strapi",
+  "Jest",
+  "Supertest",
+  "Mintlify",
+];
+
+export const TechStackSection = () => {
+  return (
+    <Section mx={{ md: "94px", sm: "9", initial: "2" }}>
+      <Separator orientation="horizontal" className="w-full bg-navy-900" />
+      <Grid gap="5" my="7" columns={{ md: "2", initial: "1" }}>
+        <Flex gap="4" direction="column">
+          <Heading size="8" className="text-navy-900">
+            Our Tech Stack
+          </Heading>
+          <Text size="5" className="text-navy-900">
+            We use the following technologies (and more). No need for deep
+            familiarity with each — this just gives you an idea of what to
+            expect.
+          </Text>
+          <Box>
+            {technologies.map((item, index) => (
+              <li
+                key={index}
+                className="text-navy-900 font-medium leading-7 text-2xl"
+              >
+                {item}
+              </li>
+            ))}
+          </Box>
+          <Text size="4" className="text-navy-900">
+            Check out our{" "}
+            <Link href="https://github.com/distributeaid">Github</Link> for more
+            info!
+          </Text>
+        </Flex>
+        <Box
+          className="bg-[var(--green-9)] rounded-ss-3xl rounded-es-3xl"
+          px="8"
+          py="7"
+        >
+          <Image
+            src="/images/tech/tech-stack-image.png"
+            alt="Tech stack image"
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+            width={537}
+            height={357}
+          />
+        </Box>
+      </Grid>
+      <Separator orientation="horizontal" className="w-full bg-navy-900" />
+    </Section>
+  );
+};