From 1df1eb1b7f709fa73e19bea2ba3ed4294d2c0e51 Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Tue, 14 Oct 2025 04:08:24 +0000 Subject: [PATCH] Add Opportunities page for contributors and careers cgen-b07f15a6610f44a29159020c714dd495 --- client/pages/Opportunities.tsx | 981 +++++++++++++++++++++++++++++++++ 1 file changed, 981 insertions(+) create mode 100644 client/pages/Opportunities.tsx diff --git a/client/pages/Opportunities.tsx b/client/pages/Opportunities.tsx new file mode 100644 index 00000000..ff9309fd --- /dev/null +++ b/client/pages/Opportunities.tsx @@ -0,0 +1,981 @@ +import Layout from "@/components/Layout"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Textarea } from "@/components/ui/textarea"; +import { useAethexToast } from "@/hooks/use-aethex-toast"; +import { useAuth } from "@/contexts/AuthContext"; +import { + aethexApplicationService, + type AethexApplicationSubmission, +} from "@/lib/aethex-database-adapter"; +import { + ArrowRight, + Briefcase, + CheckCircle2, + Clock, + Lightbulb, + Loader2, + Rocket, + ShieldCheck, + Sparkles, + Users, +} from "lucide-react"; +import { useEffect, useState } from "react"; + +interface ContributorFormState { + fullName: string; + email: string; + location: string; + primarySkill: string; + availability: string; + portfolioUrl: string; + interests: string[]; + message: string; +} + +interface CareerFormState { + fullName: string; + email: string; + location: string; + roleInterest: string; + experienceLevel: string; + portfolioUrl: string; + resumeUrl: string; + message: string; +} + +const contributorInterestOptions = [ + "Open Source Systems", + "Education & Curriculum", + "Community Programs", + "Design Systems", + "Docs & Technical Writing", + "Research & Experiments", + "Developer Tooling", +]; + +const contributorAvailabilityOptions = [ + "1-5 hours / week", + "5-10 hours / week", + "10-20 hours / week", + "Full-time contributor", +]; + +const contributorPrimarySkills = [ + "Frontend Engineering", + "Backend Engineering", + "Full-stack Engineering", + "Game Development", + "Product Design", + "Technical Writing", + "Community Building", + "Operations & Program Management", +]; + +const careerRoleOptions = [ + "Software Engineer", + "Game Designer", + "Product Manager", + "Developer Advocate", + "Technical Writer", + "Community Manager", + "Creative Producer", + "Research Scientist", +]; + +const careerExperienceLevels = [ + "Emerging (0-2 years)", + "Intermediate (3-5 years)", + "Senior (6-9 years)", + "Staff & Principal (10+ years)", +]; + +const openOpportunities = [ + { + title: "Senior Gameplay Engineer", + type: "Full-time · Remote", + summary: + "Shape immersive gameplay experiences across AeThex Labs and partner studios.", + tags: ["Unreal", "C++", "Multiplayer", "Systems"], + }, + { + title: "Developer Experience Lead", + type: "Full-time · Hybrid", + summary: + "Own the contributor journey, from onboarding to high-impact delivery.", + tags: ["DX", "Community", "Strategy"], + }, + { + title: "Product Storyteller", + type: "Contract · Remote", + summary: + "Craft compelling narratives, docs, and launch campaigns for AeThex platforms.", + tags: ["Content", "Docs", "Product"], + }, +]; + +const applicationMilestones = [ + { + icon: Users, + title: "Connect", + description: + "Share your background, interests, and the kind of problems you want to help solve.", + }, + { + icon: Rocket, + title: "Collaborate", + description: + "Chat with our team, explore active initiatives, and scope out your first project or role.", + }, + { + icon: ShieldCheck, + title: "Launch", + description: + "Join a cross-functional squad, ship impact in your first 30 days, and grow with AeThex.", + }, +]; + +const faqs = [ + { + question: "How quickly will I hear back after applying?", + answer: + "We review contributor and career applications every week. Expect a response within 7-10 days, often sooner if new initiatives are staffing up.", + }, + { + question: "Can I apply as both a contributor and a full-time candidate?", + answer: + "Absolutely. Many AeThex teammates started as contributors. Let us know in your application if you want to explore both paths.", + }, + { + question: "Do I need prior Web3 or game development experience?", + answer: + "No. We're looking for builders, storytellers, and systems thinkers. Tell us how your experience can unlock new value for the AeThex community.", + }, + { + question: "How do contributors get matched to projects?", + answer: + "We pair contributors with squads based on domain expertise, time commitment, and squad needs. You'll collaborate with a mentor or lead during your first sprint.", + }, +]; + +const validateEmail = (value: string) => /.+@.+\..+/.test(value.trim()); + +const Opportunities = () => { + const { user, profile } = useAuth(); + const toast = useAethexToast(); + const [submittingContributor, setSubmittingContributor] = useState(false); + const [submittingCareer, setSubmittingCareer] = useState(false); + + const [contributorForm, setContributorForm] = useState({ + fullName: "", + email: "", + location: "", + primarySkill: "", + availability: "", + portfolioUrl: "", + interests: [], + message: "", + }); + + const [careerForm, setCareerForm] = useState({ + fullName: "", + email: "", + location: "", + roleInterest: "", + experienceLevel: "", + portfolioUrl: "", + resumeUrl: "", + message: "", + }); + + useEffect(() => { + setContributorForm((prev) => ({ + ...prev, + fullName: prev.fullName || profile?.full_name || user?.email?.split("@")[0] || "", + email: prev.email || user?.email || "", + location: prev.location || profile?.location || "", + portfolioUrl: prev.portfolioUrl || (profile as any)?.website_url || "", + })); + + setCareerForm((prev) => ({ + ...prev, + fullName: prev.fullName || profile?.full_name || user?.email?.split("@")[0] || "", + email: prev.email || user?.email || "", + location: prev.location || profile?.location || "", + portfolioUrl: prev.portfolioUrl || (profile as any)?.website_url || "", + })); + }, [profile, user]); + + const toggleContributorInterest = (value: string) => { + setContributorForm((prev) => { + const exists = prev.interests.includes(value); + return { + ...prev, + interests: exists + ? prev.interests.filter((interest) => interest !== value) + : [...prev.interests, value], + }; + }); + }; + + const submitApplication = async ( + payload: Omit & { type: "contributor" | "career" }, + ) => { + await aethexApplicationService.submitApplication(payload); + }; + + const handleContributorSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + if (!contributorForm.fullName.trim()) { + toast.error({ title: "Name required", description: "Please tell us who you are." }); + return; + } + if (!validateEmail(contributorForm.email)) { + toast.error({ title: "Valid email required", description: "Share an email so we can follow up." }); + return; + } + if (!contributorForm.primarySkill) { + toast.error({ title: "Select your primary skill", description: "Choose the area where you create the most impact." }); + return; + } + setSubmittingContributor(true); + try { + await submitApplication({ + type: "contributor", + full_name: contributorForm.fullName, + email: contributorForm.email, + location: contributorForm.location, + primary_skill: contributorForm.primarySkill, + availability: contributorForm.availability, + portfolio_url: contributorForm.portfolioUrl, + message: contributorForm.message, + interests: contributorForm.interests, + }); + toast.success({ + title: "Application received", + description: "Thank you! Our contributor success team will reach out shortly.", + }); + setContributorForm({ + fullName: profile?.full_name || contributorForm.email.split("@")[0] || "", + email: contributorForm.email, + location: profile?.location || "", + primarySkill: "", + availability: "", + portfolioUrl: profile ? (profile as any).website_url || "" : contributorForm.portfolioUrl, + interests: [], + message: "", + }); + } catch (error: any) { + toast.error({ + title: "Submission failed", + description: error?.message || "We could not submit your contributor application.", + }); + } finally { + setSubmittingContributor(false); + } + }; + + const handleCareerSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + if (!careerForm.fullName.trim()) { + toast.error({ title: "Name required", description: "Please add your full name." }); + return; + } + if (!validateEmail(careerForm.email)) { + toast.error({ + title: "Valid email required", + description: "We need a reachable email to move forward.", + }); + return; + } + if (!careerForm.roleInterest) { + toast.error({ + title: "Choose a role focus", + description: "Select the type of role you're most excited about.", + }); + return; + } + setSubmittingCareer(true); + try { + await submitApplication({ + type: "career", + full_name: careerForm.fullName, + email: careerForm.email, + location: careerForm.location, + role_interest: careerForm.roleInterest, + experience_level: careerForm.experienceLevel, + portfolio_url: careerForm.portfolioUrl, + resume_url: careerForm.resumeUrl, + message: careerForm.message, + }); + toast.success({ + title: "Thanks for applying", + description: "Our talent team will review your experience and reach out soon.", + }); + setCareerForm({ + fullName: profile?.full_name || careerForm.email.split("@")[0] || "", + email: careerForm.email, + location: profile?.location || "", + roleInterest: "", + experienceLevel: "", + portfolioUrl: profile ? (profile as any).website_url || "" : careerForm.portfolioUrl, + resumeUrl: "", + message: "", + }); + } catch (error: any) { + toast.error({ + title: "Submission failed", + description: error?.message || "We could not submit your career application.", + }); + } finally { + setSubmittingCareer(false); + } + }; + + return ( + +
+
+
+
+
+ + Build the future at AeThex + +

+ Contribute. Collaborate. Craft the next era of AeThex. +

+

+ Whether you are a community contributor or exploring full-time roles, this is your gateway to ship meaningfully with the AeThex team. We unite game makers, storytellers, engineers, and strategists around bold ideas. +

+ +
+ + +
+ Contributor network + Mentors, maintainers, and shipmates. +
+ + + +

4,200+

+ + + + +
+ Teams hiring now + Across Labs, Platform, and Community. +
+ + + +

12 squads

+ + +
+
+ + + + + What makes AeThex different? + + + Cross-functional teams, high-trust culture, and shipped outcomes over vanity metrics. + + + +
+ +
+

Hybrid squads

+

+ Contributors and full-time teammates collaborate inside the same rituals, tooling, and roadmap. +

+
+
+
+ +
+

Impact-first onboarding

+

+ Ship something real during your first sprint with a dedicated mentor or squad lead. +

+
+
+
+ +
+

Transparent growth

+

+ Clear expectations, async updates, and opportunities to move from contributor to core team. +

+
+
+ + +
+
+ +
+
+
+
+ + Explore opportunities + +

+ Contributor paths & immediate hiring needs +

+

+ Choose how you want to collaborate with AeThex. We empower flexible contributor engagements alongside full-time roles across labs, platform, and community. +

+
+
+
+ +
+

Rolling reviews

+

+ Contributor cohorts are evaluated weekly. Urgent hiring roles receive priority outreach within 72 hours. +

+
+
+
+
+
+ + + + + Core Contributors + + + Shape feature roadmaps, ship code, design experiences, or lead community programs. + + + +

Typical commitment: 5-15 hrs / week

+
    +
  • Join a squad shipping AeThex platform, docs, or live services
    • +
  • Collaborate directly with PMs, producers, and staff engineers
    • +
  • Earn AeThex recognition, mentorship, and prioritized hiring pathways
    • +
+ + + + + + + Fellows & Apprentices + + + Guided programs for emerging builders to gain portfolio-ready experience. + + + +

Typical commitment: 10-20 hrs / week for 12 weeks

+
    +
  • Structured mentorship with clear milestones and feedback
    • +
  • Contribute to lab prototypes, live events, or curriculum builds
    • +
  • Ideal for rising professionals breaking into games or platform engineering
    • +
+ + + + + + + Full-time roles + + + Join AeThex as a core teammate with benefits, equity pathways, and ownership of initiatives. + + + +

Immediate needs across engineering, design, product, and community.

+
    +
  • Global-first, remote-friendly culture with async collaboration
    • +
  • Cross-functional squads aligned to measurable player and creator outcomes
    • +
  • Opportunities to incubate new AeThex Labs ventures
    • +
+ + +
+
+ {openOpportunities.map((role) => ( + + +
+
+ {role.title} + {role.type} +
+ + Priority + +
+ + +

{role.summary}

+
+ {role.tags.map((tag) => ( + + {tag} + + ))} +
+ + + ))} +
+
+
+ +
+
+
+
+ + Apply now + +

+ Tell us how you want to build with AeThex +

+

+ Share a snapshot of your experience, interests, and availability. We calibrate opportunities weekly and match you with the best-fit squad or role. +

+
+
+

Need help?

+

+ Email opportunities@aethex.com if you want to talk through the right track before applying. +

+
+
+ + + + Contributor journey + Careers at AeThex + + + + + Contributor application + + Ideal for open-source, part-time, or fellowship-style collaborations. + + + +
+
+
+ + + setContributorForm((prev) => ({ + ...prev, + fullName: event.target.value, + })) + } + required + /> +
+
+ + + setContributorForm((prev) => ({ + ...prev, + email: event.target.value, + })) + } + required + /> +
+
+
+
+ + + setContributorForm((prev) => ({ + ...prev, + location: event.target.value, + })) + } + placeholder="City, Country" + /> +
+
+ + +
+
+
+
+ + +
+
+ + + setContributorForm((prev) => ({ + ...prev, + portfolioUrl: event.target.value, + })) + } + placeholder="https://" + /> +
+
+
+ +
+ {contributorInterestOptions.map((interest) => ( + + ))} +
+
+
+ +