diff --git a/CLAUDE.md b/CLAUDE.md
deleted file mode 100644
index be1ba1f..0000000
--- a/CLAUDE.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Commands
-
-```bash
-npm run dev # Start development server
-npm run build # Production build
-npm run lint # Run ESLint
-npm run lint:fix # Auto-fix ESLint issues
-```
-
-Pre-commit hooks run ESLint automatically via Husky + lint-staged on all staged `*.{js,jsx,ts,tsx}` files.
-
-## Architecture
-
-**Next.js App Router** site with Chakra UI, Emotion (CSS-in-JS), and TypeScript strict mode. No backend, no CMS — all content is static TypeScript constants.
-
-### Key principle
-
-Most updates should only touch two places:
-- `/public/` — images (team photos, project logos, company logos, etc.)
-- `/src/utils/constants/` — all site content as typed TypeScript data
-
-### Content data files (`/src/utils/constants/`)
-
-| File | What it controls |
-|------|-----------------|
-| `Settings.ts` | `RECRUITMENT_OPEN` toggle, form URLs, impact stats, school year |
-| `project-data.ts` | Current projects (CLCHC, GCF, ELDR) and historical projects |
-| `team-data.ts` | Board member profiles; project-team members are in separate arrays |
-| `alumni-testimonials.ts` | Alumni profiles, testimonials, featured companies |
-| `company-logos.ts` | Company logos shown on Career page |
-| `recruitment-events.ts` | Recruitment timeline events |
-| `gallary-photos.ts` | Gallery photo references (note: intentional misspelling in filename) |
-
-### Component organization (`/src/utils/components/`)
-
-- `PageX/` directories contain page-specific components (e.g., `PageTeam/`, `PageLanding/`)
-- Shared utilities: `AnimationUtils/`, `CardUtils/`, `GridUtils/`, `TextUtils/`
-- Top-level: `Navbar.tsx`, `Footer.tsx`, `Hero.tsx`, `ParallaxHero.tsx`
-- Team display system is documented in `/src/utils/components/README.md` — read it before modifying team components
-
-### Component conventions
-
-- **Each page section is its own component.** When adding or editing a section of a page, extract it into a dedicated component file in the appropriate `PageX/` directory rather than inlining it in `page.tsx`.
-- **Reusable first.** Before building a new component, check whether an existing one in `CardUtils/`, `GridUtils/`, `AnimationUtils/`, or `TextUtils/` can be reused or extended. If a component could reasonably appear in more than one place, create it as a shared component in one of those utility directories (or a new one if no existing category fits) rather than putting it inside a `PageX/` folder.
-
-### Styling
-
-- Chakra UI with a custom purple theme (`/src/theme/index.ts`) — no Tailwind
-- Brand primary color: `#6331D8` (purple)
-- Custom breakpoints: `xs` (475px), `sm` (640px), `md` (768px), `mdlg` (900px), `lg` (1024px), `xl` (1280px), `2xl` (1536px)
-- Custom button variants: `"purple"` and `"purple.outline"`
-- Emotion is compiled via `next.config.ts` (`compiler: { emotion: true }`)
-
-### Path alias
-
-`@/*` maps to `./src/*` — use this for all internal imports.
-
-### ESLint rules to know
-
-- Imports must be ordered: builtin → external → internal → parent → sibling → index
-- Imports within each group must be alphabetized
-- Unused imports are errors (auto-fixed by lint-staged on commit)
diff --git a/public/assets/desktop.png b/public/assets/desktop.png
new file mode 100644
index 0000000..0cbb380
Binary files /dev/null and b/public/assets/desktop.png differ
diff --git a/public/assets/pencil.png b/public/assets/pencil.png
new file mode 100644
index 0000000..1d82188
Binary files /dev/null and b/public/assets/pencil.png differ
diff --git a/src/app/Recruitment/page.tsx b/src/app/Recruitment/page.tsx
index 3852ce0..ef90ca6 100644
--- a/src/app/Recruitment/page.tsx
+++ b/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 (
-
-
-
-
- Recruitment
-
- {RECRUITMENT_OPEN ? (
-
- Applications are currently open!
-
- ) : (
-
- Applications are currently closed and will reopen in the Fall.{" "}
- Follow us on{" "}
-
-
- social media
-
- {" "}
- to stay up to date!
-
- )}
+ return (
+
+
+
+
+ Recruitment
+
+ {RECRUITMENT_OPEN ? (
+
+ Applications are currently open!
+
+ ) : (
+
+ Applications are currently closed and will reopen in the Fall.{" "}
+ Follow us on{" "}
+
+
+ social media
+
+ {" "}
+ to stay up to date!
+
+ )}
+
+
+
+
+
+
+
+
-
-
-
-
-
- );
+ );
}
diff --git a/src/utils/components/PageRecruitment/FlippableCard.tsx b/src/utils/components/PageRecruitment/FlippableCard.tsx
new file mode 100644
index 0000000..3253a08
--- /dev/null
+++ b/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 (
+ setIsFlipped(!isFlipped)}
+ flexShrink={0}
+ m={{ base: 2, md: 3 }}
+ style={{ perspective: "1000px" }}
+ >
+
+ {/* Front */}
+
+ {frontImage && (
+
+ )}
+ {label && (
+
+ {label}
+
+ )}
+
+
+ {/* Back */}
+
+ {backImage && (
+
+ )}
+ {backTitle && (
+
+ {backTitle}
+
+ )}
+ {backBullets && backBullets.length > 0 && (
+
+ {backBullets.map((bullet, index) => (
+
+ {bullet}
+
+ ))}
+
+ )}
+ {backText && !backTitle && !backBullets && (
+
+ {backText}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/utils/components/PageRecruitment/LookingForSection.tsx b/src/utils/components/PageRecruitment/LookingForSection.tsx
new file mode 100644
index 0000000..b4314c2
--- /dev/null
+++ b/src/utils/components/PageRecruitment/LookingForSection.tsx
@@ -0,0 +1,61 @@
+"use client";
+import { Box, HStack, Text, VStack } from "@chakra-ui/react";
+
+import FlippableCard from "./FlippableCard";
+
+export default function LookingForSection() {
+ return (
+
+ {/* Header */}
+
+
+ We're looking for...
+
+
+
+ {/* Cards Container */}
+
+
+
+
+
+ );
+}
diff --git a/src/utils/components/PageRecruitment/index.ts b/src/utils/components/PageRecruitment/index.ts
new file mode 100644
index 0000000..3debf13
--- /dev/null
+++ b/src/utils/components/PageRecruitment/index.ts
@@ -0,0 +1,2 @@
+export { default as LookingForSection } from "./LookingForSection";
+export { default as FlippableCard } from "./FlippableCard";