Looking for section

src/app/Recruitment/page.tsx

@@ -1,65 +1,69 @@
 "use client";
-import { VStack, Text } from "@chakra-ui/react";
+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 RecruitmentFAQ from "@/utils/components/PageRecruitment/RecruitmentFAQ";
 import { RecruitmentTimeline } from "@/utils/components/PageRecruitment/RecruitmentTimeline";
 import BreakText from "@/utils/components/TextUtils/BreakText";
 import { RECRUITMENT_OPEN } from "@/utils/constants/Settings";
 
 export default function RecruitmentPage() {
- return (
-  <VStack spacing={0}>
-   <Hero>
-    <VStack alignItems="center" spacing={{ base: 3, md: 5 }} zIndex={1}>
-     <Text
-      fontSize={{ base: "4xl", md: "6xl", lg: "7xl" }}
-      fontWeight="semibold"
-      fontFamily="Inter, sans-serif"
-     >
-      Recruitment
-     </Text>
-     {RECRUITMENT_OPEN ? (
-      <Text
-       fontSize={{ base: "sm", md: "xl", lg: "2xl" }}
-       paddingX={{ base: 3, md: 0 }}
-       textAlign="center"
-      >
-       Applications are currently open!
-      </Text>
-     ) : (
-      <Text
-       fontSize={{ base: "sm", md: "xl", lg: "2xl" }}
-       paddingX={{ base: 3, md: 0 }}
-       textAlign="center"
-      >
-       Applications are currently closed and will reopen in the Fall.{" "}
-       <BreakText /> Follow us on{" "}
-       <a
-        href="https://www.instagram.com/ctc.uci/"
-        target="_blank"
-        rel="noopener noreferrer"
-       >
-        <Text
-         as="span"
-         color="ctc.purple"
-         textDecoration="underline"
-         fontWeight="bold"
-         _hover={{ color: "purple.500" }}
-         transition="color 0.3s ease-out"
-        >
-         social media
-        </Text>
-       </a>{" "}
-       to stay up to date!
-      </Text>
-     )}
+  return (
+    <VStack spacing={0}>
+      <Hero>
+        <VStack alignItems="center" spacing={{ base: 3, md: 5 }} zIndex={1}>
+          <Text
+            fontSize={{ base: "4xl", md: "6xl", lg: "7xl" }}
+            fontWeight="semibold"
+            fontFamily="Inter, sans-serif"
+          >
+            Recruitment
+          </Text>
+          {RECRUITMENT_OPEN ? (
+            <Text
+              fontSize={{ base: "sm", md: "xl", lg: "2xl" }}
+              paddingX={{ base: 3, md: 0 }}
+              textAlign="center"
+            >
+              Applications are currently open!
+            </Text>
+          ) : (
+            <Text
+              fontSize={{ base: "sm", md: "xl", lg: "2xl" }}
+              paddingX={{ base: 3, md: 0 }}
+              textAlign="center"
+            >
+              Applications are currently closed and will reopen in the Fall.{" "}
+              <BreakText /> Follow us on{" "}
+              <a
+                href="https://www.instagram.com/ctc.uci/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Text
+                  as="span"
+                  color="ctc.purple"
+                  textDecoration="underline"
+                  fontWeight="bold"
+                  _hover={{ color: "purple.500" }}
+                  transition="color 0.3s ease-out"
+                >
+                  social media
+                </Text>
+              </a>{" "}
+              to stay up to date!
+            </Text>
+          )}
+        </VStack>
+      </Hero>
+      <LookingForSection />
+      <Box bg="white" w="100%">
+        <RecruitmentTimeline />
+      </Box>
+      <RecruitmentFAQ />
+      <Footer />
     </VStack>
-   </Hero>
-   <RecruitmentTimeline />
-   <RecruitmentFAQ />
-   <Footer />
-  </VStack>
- );
+  );
 }

src/utils/components/PageRecruitment/FlippableCard.tsx

@@ -0,0 +1,167 @@
+"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
+   w="480px"
+   maxW="100%"
+   h="404px"
+   cursor="pointer"
+   onClick={() => setIsFlipped(!isFlipped)}
+   flexShrink={0}
+   m={{ base: 2, md: 3 }}
+   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={8}
+     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="184px"
+       height="189px"
+       objectFit="contain"
+       opacity={1}
+       mb={label ? 4 : 0}
+      />
+     )}
+     {label && (
+      <Text
+       fontFamily="Inter, sans-serif"
+       fontWeight="semibold"
+       fontSize="3xl"
+       lineHeight="36px"
+       letterSpacing="0%"
+       textAlign="center"
+       verticalAlign="middle"
+      >
+       {label}
+      </Text>
+     )}
+    </Box>
+
+    {/* Back */}
+    <Box
+     position="absolute"
+     width="100%"
+     height="100%"
+     borderRadius="2xl"
+     padding={8}
+     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="184px"
+       height="189px"
+       objectFit="contain"
+       opacity={1}
+       mb={4}
+      />
+     )}
+     {backTitle && (
+      <Text
+       fontFamily="Inter, sans-serif"
+       fontWeight="semibold"
+       fontSize="3xl"
+       lineHeight="36px"
+       letterSpacing="0%"
+       textAlign="center"
+       verticalAlign="middle"
+       mb={4}
+      >
+       {backTitle}
+      </Text>
+     )}
+     {backBullets && backBullets.length > 0 && (
+      <List spacing={2.5} px={4} textAlign="left" width="100%">
+       {backBullets.map((bullet, index) => (
+        <ListItem
+         key={index}
+         fontFamily="Inter, sans-serif"
+         fontWeight="normal"
+         fontSize="md"
+         lineHeight="22px"
+         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>
+ );
+}