Looking for section

src/app/Recruitment/page.tsx

@@ -3,6 +3,7 @@ import { VStack, Text, Box } from "@chakra-ui/react";
 
 import { Footer } from "@/utils/components";
 import Hero from "@/utils/components/Hero";
+import LookingForSection from "@/utils/components/PageRecruitment/LookingForSection";
 import { RecruitmentTimeline } from "@/utils/components/PageRecruitment/RecruitmentTimeline";
 import BreakText from "@/utils/components/TextUtils/BreakText";
 import { RECRUITMENT_OPEN } from "@/utils/constants/Settings";
@@ -56,6 +57,7 @@ export default function RecruitmentPage() {
           )}
         </VStack>
       </Hero>
+      <LookingForSection />
       <Box bg="white" w="100%">
         <RecruitmentTimeline />
       </Box>

src/utils/components/PageRecruitment/FlippableCard.tsx

@@ -0,0 +1,166 @@
+"use client";
+import { Box, Image, Text, List, ListItem } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+interface FlippableCardProps {
+ frontImage?: string;
+ backImage?: string;
+ backText?: string;
+ backTitle?: string;
+ backBullets?: string[];
+ label?: string;
+}
+
+export default function FlippableCard({
+ frontImage,
+ backImage,
+ backText,
+ backTitle,
+ backBullets,
+ label,
+}: FlippableCardProps) {
+ const [isFlipped, setIsFlipped] = useState(false);
+
+ return (
+  <Box
+   width="421px"
+   height="354px"
+   cursor="pointer"
+   onClick={() => setIsFlipped(!isFlipped)}
+   flexShrink={0}
+   m="20px"
+   style={{ perspective: "1000px" }}
+  >
+   <motion.div
+    style={{
+     width: "100%",
+     height: "100%",
+     position: "relative",
+     transformStyle: "preserve-3d",
+    }}
+    animate={{ rotateY: isFlipped ? 180 : 0 }}
+    transition={{ duration: 0.6, ease: "easeInOut" }}
+   >
+    {/* Front */}
+    <Box
+     position="absolute"
+     width="100%"
+     height="100%"
+     borderRadius="2xl"
+     padding={7}
+     boxShadow="0px 8px 16px 0px rgba(24, 24, 27, 0.1), 0px 0px 1px 0px rgba(212, 212, 216, 0.3) inset"
+     bg="white"
+     display="flex"
+     flexDirection="column"
+     alignItems="center"
+     justifyContent="center"
+     style={{
+      WebkitBackfaceVisibility: "hidden",
+      backfaceVisibility: "hidden",
+     }}
+    >
+     {frontImage && (
+      <Image
+       src={frontImage}
+       alt="Card front"
+       width="161px"
+       height="166px"
+       objectFit="contain"
+       opacity={1}
+       mb={label ? 4 : 0}
+      />
+     )}
+     {label && (
+      <Text
+       fontFamily="Inter, sans-serif"
+       fontWeight="semibold"
+       fontSize="2xl"
+       lineHeight="32px"
+       letterSpacing="0%"
+       textAlign="center"
+       verticalAlign="middle"
+      >
+       {label}
+      </Text>
+     )}
+    </Box>
+
+    {/* Back */}
+    <Box
+     position="absolute"
+     width="100%"
+     height="100%"
+     borderRadius="2xl"
+     padding={7}
+     boxShadow="0px 8px 16px 0px rgba(24, 24, 27, 0.1), 0px 0px 1px 0px rgba(212, 212, 216, 0.3) inset"
+     bg="white"
+     display="flex"
+     flexDirection="column"
+     alignItems="center"
+     justifyContent="center"
+     style={{
+      WebkitBackfaceVisibility: "hidden",
+      backfaceVisibility: "hidden",
+      transform: "rotateY(180deg)",
+     }}
+    >
+     {backImage && (
+      <Image
+       src={backImage}
+       alt="Card back"
+       width="161px"
+       height="166px"
+       objectFit="contain"
+       opacity={1}
+       mb={4}
+      />
+     )}
+     {backTitle && (
+      <Text
+       fontFamily="Inter, sans-serif"
+       fontWeight="semibold"
+       fontSize="2xl"
+       lineHeight="32px"
+       letterSpacing="0%"
+       textAlign="center"
+       verticalAlign="middle"
+       mb={4}
+      >
+       {backTitle}
+      </Text>
+     )}
+     {backBullets && backBullets.length > 0 && (
+      <List spacing={2} px={4} textAlign="left" width="100%">
+       {backBullets.map((bullet, index) => (
+        <ListItem
+         key={index}
+         fontFamily="Inter, sans-serif"
+         fontWeight="normal"
+         fontSize="sm"
+         lineHeight="20px"
+         letterSpacing="0%"
+         verticalAlign="middle"
+         listStyleType="disc"
+         ml={4}
+        >
+         {bullet}
+        </ListItem>
+       ))}
+      </List>
+     )}
+     {backText && !backTitle && !backBullets && (
+      <Text
+       fontSize="md"
+       textAlign="center"
+       color="gray.700"
+       px={4}
+      >
+       {backText}
+      </Text>
+     )}
+    </Box>
+   </motion.div>
+  </Box>
+ );
+}

src/utils/components/PageRecruitment/LookingForSection.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { Box, HStack, Text, VStack, useBreakpointValue } from "@chakra-ui/react";
+
+import FlippableCard from "./FlippableCard";
+
+export default function LookingForSection() {
+ const isMobile = useBreakpointValue({ base: true, md: false });
+
+ return (
+  <VStack
+   spacing={{ base: 8, md: 12 }}
+   py={{ base: 12, md: 20 }}
+   px={{ base: 4, md: 4 }}
+   maxW="7xl"
+   mx="auto"
+   width="100%"
+  >
+   {/* Header */}
+   <Box textAlign="center">
+    <Text
+     fontFamily="Inter, sans-serif"
+     fontWeight="medium"
+     fontSize={{ base: "3xl", md: "4xl", lg: "5xl" }}
+     lineHeight={{ base: "40px", md: "50px", lg: "60px" }}
+     letterSpacing="0%"
+     textAlign="center"
+     px={{ base: 2, md: 0 }}
+    >
+     We&apos;re looking for...
+    </Text>
+   </Box>
+
+   {/* Cards Container */}
+   <HStack
+    spacing={20}
+    justifyContent="center"
+    flexWrap="wrap"
+    width="100%"
+   >
+    <FlippableCard
+     frontImage="/assets/pencil.png"
+     label="Designers"
+     backTitle="Designers"
+     backBullets={[
+      "work in a cross functional team",
+      "use Figma and the design process (research, wireframing, prototyping, usability testing) to create innovative designs for non-profit organizations",
+      "All levels are welcome",
+     ]}
+    />
+    <FlippableCard
+     frontImage="/assets/desktop.png"
+     label="Developers"
+     backTitle="Developers"
+     backBullets={[
+      "will utilize frontend technologies (React, Javascript/Typescript, HTML, and CSS/SASS)",
+      "work with backend technologies (APIs, databases, & middleware)",
+      "implement real-life applications",
+     ]}
+    />
+   </HStack>
+  </VStack>
+ );
+}

src/utils/components/PageRecruitment/index.ts

@@ -0,0 +1,2 @@
+export { default as LookingForSection } from "./LookingForSection";
+export { default as FlippableCard } from "./FlippableCard";