Ethos Guild Music Production Curriculum Skeleton

cgen-a6279f4a230a4069a9addfc184b92375

client/pages/docs/DocsCurriculumEthos.tsx

@@ -0,0 +1,580 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Link } from "react-router-dom";
+import {
+  ArrowRight,
+  BookOpenCheck,
+  Music,
+  Sparkles,
+  Target,
+  Waveform,
+  Zap,
+  Layers,
+  CheckCircle,
+} from "lucide-react";
+
+interface CurriculumModule {
+  id: string;
+  title: string;
+  description: string;
+  level: "foundation" | "builder" | "advanced";
+  duration: string;
+  focus: string[];
+  lessons: {
+    title: string;
+    summary: string;
+    status: "coming_soon" | "draft" | "live";
+  }[];
+}
+
+const curriculumModules: CurriculumModule[] = [
+  {
+    id: "synthwave-foundations",
+    title: "Synthwave Foundations",
+    description:
+      "Master the core sound design and production techniques that define AeThex audio.",
+    level: "foundation",
+    duration: "4 hrs",
+    focus: [
+      "Synthwave aesthetics",
+      "Synthesis basics",
+      "Drum programming",
+    ],
+    lessons: [
+      {
+        title: "The Synthwave Sound: History & Vibes",
+        summary:
+          "Understand the '80s-inspired, retro-futuristic sound that defines Ethos and AeThex.",
+        status: "coming_soon",
+      },
+      {
+        title: "DAW Setup & Workflow",
+        summary:
+          "Configure your digital audio workstation (Ableton, FL Studio, Logic) for Ethos production.",
+        status: "coming_soon",
+      },
+      {
+        title: "Synth Basics: Oscillators & Filters",
+        summary:
+          "Learn subtractive synthesis to create classic synthwave leads and pads.",
+        status: "coming_soon",
+      },
+      {
+        title: "Drum Programming in Synthwave",
+        summary:
+          "Program punchy 808s, snares, and hi-hats that sit in the mix.",
+        status: "coming_soon",
+      },
+      {
+        title: "Your First Synthwave Track",
+        summary:
+          "Build a 16-bar synthwave loop from scratch. This is your capstone.",
+        status: "coming_soon",
+      },
+    ],
+  },
+  {
+    id: "game-audio-sfx",
+    title: "Game Audio & SFX Design",
+    description:
+      "Create high-quality sound effects and interactive audio for GameForge projects.",
+    level: "builder",
+    duration: "5 hrs",
+    focus: [
+      "Sound effects design",
+      "Interactive audio",
+      "Spatial audio",
+      "Game audio optimization",
+    ],
+    lessons: [
+      {
+        title: "SFX Categories for Games",
+        summary:
+          "Master UI clicks, impact hits, ambience layers, and foley for game interactions.",
+        status: "coming_soon",
+      },
+      {
+        title: "Layering & Processing Techniques",
+        summary:
+          "Learn compression, EQ, reverb, and delay to polish SFX and make them punchy.",
+        status: "coming_soon",
+      },
+      {
+        title: "Procedural Audio with SFX Tools",
+        summary:
+          "Use synthesizers and samplers to generate infinite variations of sounds.",
+        status: "coming_soon",
+      },
+      {
+        title: "Spatial Audio & 3D Sound Panning",
+        summary:
+          "Position sounds in 3D space for immersive game environments.",
+        status: "coming_soon",
+      },
+      {
+        title: "Audio Implementation in Game Engines",
+        summary:
+          "Integrate your SFX into Unity, Unreal, and Godot with proper metadata.",
+        status: "coming_soon",
+      },
+      {
+        title: "Capstone: Design an SFX Pack",
+        summary:
+          "Create 12 high-quality SFX (UI, impact, ambience) ready for a game.",
+        status: "coming_soon",
+      },
+    ],
+  },
+  {
+    id: "composition-scoring",
+    title: "Composition & Scoring",
+    description:
+      "Compose original music and scores for games, films, and commercial projects.",
+    level: "advanced",
+    duration: "6 hrs",
+    focus: [
+      "Music theory",
+      "Melody & harmony",
+      "Orchestration",
+      "Emotional pacing",
+      "Licensing-ready delivery",
+    ],
+    lessons: [
+      {
+        title: "Music Theory Essentials",
+        summary:
+          "Understand chords, progressions, and scales. Apply them to synthwave.",
+        status: "coming_soon",
+      },
+      {
+        title: "Writing Memorable Melodies",
+        summary:
+          "Craft hooks and themes that stick with players and audiences.",
+        status: "coming_soon",
+      },
+      {
+        title: "Arranging & Orchestration",
+        summary:
+          "Layer synths, basses, drums, and strings to create depth and emotion.",
+        status: "coming_soon",
+      },
+      {
+        title: "Adaptive Music for Games",
+        summary:
+          "Create stems and variations that respond to gameplay states.",
+        status: "coming_soon",
+      },
+      {
+        title: "Mastering & Final Delivery",
+        summary:
+          "Polish your track for streaming, games, and commercial licensing.",
+        status: "coming_soon",
+      },
+      {
+        title: "Capstone: Compose a 2-Minute Original Score",
+        summary:
+          "Write, arrange, and master a complete track for a game or film scenario.",
+        status: "coming_soon",
+      },
+    ],
+  },
+  {
+    id: "licensing-monetization",
+    title: "Licensing & Monetization",
+    description:
+      "Understand how to license your music and build a sustainable income as an Ethos artist.",
+    level: "advanced",
+    duration: "3 hrs",
+    focus: [
+      "Ecosystem licensing",
+      "Commercial contracts",
+      "Rights management",
+      "Income streams",
+    ],
+    lessons: [
+      {
+        title: "The Ethos Ecosystem License",
+        summary:
+          "Grant free use of your tracks for non-commercial AeThex projects.",
+        status: "coming_soon",
+      },
+      {
+        title: "Commercial Licensing Basics",
+        summary:
+          "When a CORP client wants your track, how to negotiate and sign a contract.",
+        status: "coming_soon",
+      },
+      {
+        title: "Rights Management & Royalties",
+        summary:
+          "Understand PROs, sync rights, and how to track your music usage.",
+        status: "coming_soon",
+      },
+      {
+        title: "Building Your Artist Brand",
+        summary:
+          "Create a portfolio, set your rates, and market yourself on NEXUS.",
+        status: "coming_soon",
+      },
+      {
+        title: "Multi-Platform Distribution",
+        summary:
+          "Sell your music on Spotify, Bandcamp, and streaming platforms while building your Ethos presence.",
+        status: "coming_soon",
+      },
+    ],
+  },
+];
+
+export default function DocsCurriculumEthos() {
+  const curriculumStats = [
+    { label: "Total modules", value: "4", icon: Layers },
+    { label: "Lessons (planned)", value: "20+", icon: BookOpenCheck },
+    { label: "Certifications", value: "2", icon: CheckCircle },
+  ];
+
+  const highlights = [
+    {
+      title: "Synthwave-focused",
+      description: "All lessons aligned to AeThex sound and the '80s aesthetic.",
+      icon: Music,
+    },
+    {
+      title: "Project-based",
+      description:
+        "Each module ends with a capstone track or asset pack you can showcase.",
+      icon: Target,
+    },
+    {
+      title: "Industry-ready",
+      description:
+        "Learn production, mixing, mastering, and licensing like a professional.",
+      icon: Sparkles,
+    },
+  ];
+
+  return (
+    <div className="space-y-8">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden rounded-3xl border border-pink-500/40 bg-gradient-to-br from-pink-500/10 to-purple-500/10 p-8">
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.2),transparent_60%)]" />
+        <div className="relative z-10 flex flex-col gap-6">
+          <div className="flex flex-col gap-3">
+            <Badge className="w-fit bg-gradient-to-r from-pink-600 to-purple-600 text-white">
+              Ethos Guild Curriculum
+            </Badge>
+            <h1 className="text-3xl font-semibold text-white sm:text-4xl">
+              Master music production for the sound of AeThex
+            </h1>
+            <p className="max-w-3xl text-base text-gray-200 sm:text-lg">
+              Learn synthwave, game audio, composition, and licensing from the
+              ground up. Build your portfolio, join the Ethos Guild, and get
+              your music into real games and commercial projects.
+            </p>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-3">
+            {curriculumStats.map((stat) => {
+              const Icon = stat.icon;
+              return (
+                <Card
+                  key={stat.label}
+                  className="border-pink-500/30 bg-black/50 backdrop-blur"
+                >
+                  <CardHeader className="flex flex-row items-center gap-3 pb-2">
+                    <span className="rounded-full bg-pink-500/10 p-2 text-pink-300">
+                      <Icon className="h-5 w-5" />
+                    </span>
+                    <CardTitle className="text-white text-lg">
+                      {stat.label}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="pt-0 text-2xl font-semibold text-pink-400">
+                    {stat.value}
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Curriculum Roadmap */}
+      <section className="grid gap-6 lg:grid-cols-[minmax(0,2.2fr)_minmax(0,1fr)]">
+        <Card className="border-pink-500/30 bg-black/50 backdrop-blur">
+          <CardHeader className="space-y-4">
+            <CardTitle className="flex items-center gap-3 text-2xl text-white">
+              <Waveform className="h-6 w-6 text-pink-400" /> Curriculum Roadmap
+            </CardTitle>
+            <CardDescription className="text-gray-300">
+              Four progressive modules from foundational synthwave to advanced
+              composition and licensing. Content coming soon—led by the community
+              under AeThex Foundation.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <Accordion type="single" collapsible className="space-y-3">
+              {curriculumModules.map((module) => (
+                <AccordionItem
+                  key={module.id}
+                  value={module.id}
+                  className="overflow-hidden rounded-2xl border border-pink-500/20 bg-black/70"
+                >
+                  <AccordionTrigger className="px-5 py-4 text-left hover:no-underline data-[state=open]:bg-pink-500/10">
+                    <div className="flex w-full flex-col gap-2 text-left">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <Badge
+                          variant="outline"
+                          className={
+                            module.level === "foundation"
+                              ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-200"
+                              : module.level === "builder"
+                                ? "border-sky-500/40 bg-sky-500/10 text-sky-200"
+                                : "border-purple-500/40 bg-purple-500/10 text-purple-200"
+                          }
+                        >
+                          {module.level === "foundation"
+                            ? "Foundation"
+                            : module.level === "builder"
+                              ? "Builder"
+                              : "Advanced"}
+                        </Badge>
+                        <Badge
+                          variant="outline"
+                          className="border-pink-500/40 bg-pink-500/10 text-pink-300"
+                        >
+                          {module.duration}
+                        </Badge>
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-white sm:text-xl">
+                          {module.title}
+                        </h3>
+                        <p className="text-sm text-gray-300">
+                          {module.description}
+                        </p>
+                      </div>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-5 pb-6 pt-2">
+                    <div className="space-y-4">
+                      <div>
+                        <h4 className="text-sm font-semibold uppercase tracking-wide text-pink-300">
+                          Learning Focus
+                        </h4>
+                        <div className="mt-2 flex flex-wrap gap-2">
+                          {module.focus.map((focusItem) => (
+                            <Badge
+                              key={focusItem}
+                              variant="outline"
+                              className="border-pink-500/40 bg-pink-500/5 text-xs text-pink-200"
+                            >
+                              {focusItem}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="rounded-2xl border border-pink-500/20 bg-black/60 p-4">
+                        <h4 className="text-sm font-semibold uppercase tracking-wide text-pink-300">
+                          Lesson Sequence
+                        </h4>
+                        <div className="mt-3 space-y-3">
+                          {module.lessons.map((lesson, index) => (
+                            <div
+                              key={lesson.title}
+                              className="rounded-xl border border-pink-500/20 bg-black/80 p-4"
+                            >
+                              <div className="flex flex-wrap items-center justify-between gap-3">
+                                <div>
+                                  <p className="text-xs uppercase text-gray-400">
+                                    Lesson {index + 1}
+                                  </p>
+                                  <h5 className="text-base font-semibold text-white">
+                                    {lesson.title}
+                                  </h5>
+                                </div>
+                                <Badge
+                                  className={
+                                    lesson.status === "live"
+                                      ? "bg-emerald-600/50 text-emerald-100"
+                                      : lesson.status === "draft"
+                                        ? "bg-blue-600/50 text-blue-100"
+                                        : "bg-gray-600/50 text-gray-100"
+                                  }
+                                >
+                                  {lesson.status === "live"
+                                    ? "Live"
+                                    : lesson.status === "draft"
+                                      ? "In Progress"
+                                      : "Coming Soon"}
+                                </Badge>
+                              </div>
+                              <p className="mt-2 text-sm text-gray-300">
+                                {lesson.summary}
+                              </p>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </CardContent>
+        </Card>
+
+        {/* Sidebar: Why This Curriculum */}
+        <div className="space-y-6">
+          <Card className="border-pink-500/30 bg-black/50 backdrop-blur">
+            <CardHeader className="space-y-2">
+              <CardTitle className="text-xl text-white">
+                Why This Curriculum Works
+              </CardTitle>
+              <CardDescription className="text-gray-300">
+                Structured learning aligned to real-world Ethos production.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {highlights.map((highlight) => {
+                const Icon = highlight.icon;
+                return (
+                  <div
+                    key={highlight.title}
+                    className="flex items-start gap-3 rounded-2xl border border-pink-500/20 bg-black/70 p-4"
+                  >
+                    <span className="rounded-lg bg-pink-500/10 p-2 text-pink-300">
+                      <Icon className="h-5 w-5" />
+                    </span>
+                    <div className="space-y-1">
+                      <p className="text-sm font-semibold text-white">
+                        {highlight.title}
+                      </p>
+                      <p className="text-sm text-gray-300">
+                        {highlight.description}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </CardContent>
+          </Card>
+
+          <Card className="border-pink-500/30 bg-black/50 backdrop-blur">
+            <CardHeader>
+              <CardTitle className="text-xl text-white">
+                Development Status
+              </CardTitle>
+              <CardDescription className="text-gray-300">
+                Phase 1: Foundation complete. Content coming in Phase 3.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="flex items-start gap-3">
+                <Zap className="mt-1 h-5 w-5 text-pink-400" />
+                <div>
+                  <p className="text-sm font-semibold text-white">
+                    Database & Structure Ready
+                  </p>
+                  <p className="text-sm text-gray-400">
+                    Ethos tracks table, artist profiles, and licensing
+                    agreements are built and tested.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <Music className="mt-1 h-5 w-5 text-purple-400" />
+                <div>
+                  <p className="text-sm font-semibold text-white">
+                    Content Writing (Phase 3)
+                  </p>
+                  <p className="text-sm text-gray-400">
+                    AeThex Foundation community will write and curate all
+                    lessons and assignments.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <CheckCircle className="mt-1 h-5 w-5 text-cyan-400" />
+                <div>
+                  <p className="text-sm font-semibold text-white">
+                    Live Launch Coming
+                  </p>
+                  <p className="text-sm text-gray-400">
+                    Expect first lessons in Q1 2025 as founding artists join.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-pink-500/30 bg-gradient-to-br from-pink-500/10 to-purple-500/10">
+            <CardHeader>
+              <CardTitle className="text-lg text-white">Get Started</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-gray-300 mb-4">
+                The curriculum will come to life soon. For now, explore the
+                Ethos Guild community group and prepare your setup.
+              </p>
+              <Button
+                asChild
+                className="w-full gap-2 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500"
+              >
+                <Link to="/community/groups/ethos">
+                  Join the Guild <ArrowRight className="h-4 w-4" />
+                </Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      <Separator className="border-pink-500/20" />
+
+      {/* CTA Section */}
+      <section className="rounded-3xl border border-pink-500/40 bg-gradient-to-r from-pink-500/10 to-purple-500/10 p-8 text-center">
+        <h2 className="text-2xl font-semibold text-white">
+          Ready to Create the Sound of AeThex?
+        </h2>
+        <p className="mx-auto mt-3 max-w-2xl text-sm text-gray-300">
+          The Ethos Guild is being built right now. Soon you'll be able to
+          upload tracks, get feedback from mentors, and list your services on
+          the NEXUS marketplace. The community team is writing the curriculum.
+        </p>
+        <div className="mt-6 flex flex-wrap justify-center gap-3">
+          <Button
+            asChild
+            className="gap-2 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500"
+          >
+            <Link to="/community/groups/ethos">
+              Join the Ethos Guild <ArrowRight className="h-4 w-4" />
+            </Link>
+          </Button>
+          <Button
+            asChild
+            variant="outline"
+            className="gap-2 border-pink-500/60 text-pink-300 hover:bg-pink-500/10"
+          >
+            <Link to="/nexus">
+              Explore NEXUS Marketplace <ArrowRight className="h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+      </section>
+    </div>
+  );
+}