diff --git a/public/community/create-awesome-community-logo.png b/public/community/create-awesome-community-logo.png
new file mode 100644
index 0000000..6c0a52a
Binary files /dev/null and b/public/community/create-awesome-community-logo.png differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e6e1812..487469f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,9 +3,10 @@ import Link from 'next/link';
 import { AnimatedGradient } from '@/components/animated-gradient';
 import { AnimatedTerminal } from '@/components/animated-terminal';
 import { AnnouncementBanner } from '@/components/announcement-banner';
+import { CommunityLogo } from '@/components/community-logo';
 import { ContributorsSection } from '@/components/contributors-section';
 import { CopyButton } from '@/components/copy-button';
-import { DiscordIcon } from '@/components/discord-icon';
+import { DiscordCommunitySection } from '@/components/discord-community-section';
 import { EcosystemSection } from '@/components/ecosystem-section';
 import { FeaturedTemplate } from '@/components/featured-template';
 import { HeroSection } from '@/components/hero-section';
@@ -33,7 +34,7 @@ export default async function Home() {
     <div className="flex min-h-screen flex-col">
       <main className="flex-1">
         <AnnouncementBanner
-          icon={<DiscordIcon className="h-5 w-5 shrink-0 text-yellow-200" />}
+          icon={<CommunityLogo size={20} className="shrink-0 rounded" />}
           label="NEW"
           message={
             <>Join Create Awesome on Discord — chat, good first issues, and collaboration across Node / Python / V.</>
@@ -213,6 +214,8 @@ export default async function Home() {
 
         <ContributorsSection />
 
+        <DiscordCommunitySection />
+
         <EcosystemSection />
 
         <section className="w-full py-12 md:py-24 lg:py-32 relative overflow-hidden">
diff --git a/src/components/community-logo.tsx b/src/components/community-logo.tsx
new file mode 100644
index 0000000..1bb2035
--- /dev/null
+++ b/src/components/community-logo.tsx
@@ -0,0 +1,24 @@
+import Image from 'next/image';
+import { COMMUNITY_LOGO_SRC } from '@/lib/community';
+import { cn } from '@/lib/utils';
+
+export function CommunityLogo({
+  className,
+  size = 40,
+  priority = false,
+}: {
+  className?: string;
+  size?: number;
+  priority?: boolean;
+}) {
+  return (
+    <Image
+      src={COMMUNITY_LOGO_SRC}
+      alt="Create Awesome community"
+      width={size}
+      height={size}
+      priority={priority}
+      className={cn('rounded-md object-cover', className)}
+    />
+  );
+}
diff --git a/src/components/discord-community-section.tsx b/src/components/discord-community-section.tsx
new file mode 100644
index 0000000..925ee0a
--- /dev/null
+++ b/src/components/discord-community-section.tsx
@@ -0,0 +1,80 @@
+import { ArrowRight, MessagesSquare, Sparkles } from 'lucide-react';
+import { AnimatedGradient } from '@/components/animated-gradient';
+import { CommunityLogo } from '@/components/community-logo';
+import { Button } from '@/components/ui/button';
+import { DISCORD_INVITE_URL, DISCORD_WIDGET_SRC } from '@/lib/community';
+
+const highlights = [
+  { icon: MessagesSquare, label: 'Chat across Node, Python, and V' },
+  { icon: Sparkles, label: 'Good first issues and contributor help' },
+];
+
+export function DiscordCommunitySection() {
+  return (
+    <section className="w-full py-12 md:py-20 lg:py-28 relative overflow-hidden bg-gradient-to-br from-slate-950 via-slate-900 to-indigo-950/70">
+      <div className="absolute inset-0 z-0 opacity-35">
+        <AnimatedGradient />
+      </div>
+      <div className="absolute inset-0 bg-grid-white/5 bg-[size:30px_30px] [mask-image:radial-gradient(white,transparent_80%)] z-0" />
+
+      <div className="container px-4 md:px-6 relative z-10">
+        <div className="grid gap-10 lg:grid-cols-2 lg:gap-16 items-center">
+          <div className="space-y-6">
+            <CommunityLogo size={88} className="rounded-2xl border border-white/10 shadow-lg shadow-teal-900/30" />
+
+            <div className="inline-flex items-center gap-2 rounded-full border border-teal-400/30 bg-teal-500/10 px-4 py-1.5 text-sm font-medium text-teal-100 backdrop-blur-sm">
+              <span>Community</span>
+            </div>
+
+            <div className="space-y-3">
+              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-amber-300 leading-tight">
+                Hang out on Discord
+              </h2>
+              <p className="text-lg text-slate-300 max-w-lg">
+                Join Create Awesome for live chat, good first issues, and collaboration across the Node, Python, and V
+                ecosystems.
+              </p>
+            </div>
+
+            <ul className="space-y-2">
+              {highlights.map(({ icon: Icon, label }) => (
+                <li key={label} className="flex items-center gap-2 text-sm text-slate-200">
+                  <Icon className="h-4 w-4 shrink-0 text-amber-400" aria-hidden />
+                  <span>{label}</span>
+                </li>
+              ))}
+            </ul>
+
+            <div className="pt-2">
+              <Button
+                size="lg"
+                className="bg-gradient-to-r from-teal-500 to-amber-500 hover:from-teal-400 hover:to-amber-400 text-slate-950 font-semibold shadow-lg shadow-teal-900/40 transition-all duration-300"
+                asChild
+              >
+                <a href={DISCORD_INVITE_URL} target="_blank" rel="noreferrer">
+                  Join Discord
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </a>
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-center lg:justify-end">
+            <div className="rounded-xl border border-white/10 bg-slate-950/60 p-2 shadow-2xl shadow-indigo-950/40 backdrop-blur-sm">
+              <iframe
+                src={DISCORD_WIDGET_SRC}
+                width={350}
+                height={500}
+                allowTransparency
+                frameBorder={0}
+                sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+                title="Create Awesome Discord server widget"
+                className="max-w-full rounded-lg bg-slate-950"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/discord-icon.tsx b/src/components/discord-icon.tsx
deleted file mode 100644
index 7bd7e35..0000000
--- a/src/components/discord-icon.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { cn } from '@/lib/utils';
-
-/** Discord brand mark (simple-icons path). */
-export function DiscordIcon({ className }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={cn('h-5 w-5', className)}>
-      <path d="M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.3 18.3 0 0 0-5.487 0 12.6 12.6 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.7 19.7 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14 14 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.8 19.8 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.548-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
-    </svg>
-  );
-}
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index 8da3318..46cd8ff 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -4,7 +4,7 @@ import { Gauge, Github, Menu, Package, Search } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { DiscordIcon } from '@/components/discord-icon';
+import { CommunityLogo } from '@/components/community-logo';
 import { usePerformanceMode } from '@/components/performance-provider';
 import { ThemeToggle } from '@/components/theme-toggle';
 import { Button } from '@/components/ui/button';
@@ -143,7 +143,7 @@ export function SiteHeader({ onOpenCommand }: { onOpenCommand?: () => void }) {
           </Link>
           <Link href={DISCORD_INVITE_URL} target="_blank" rel="noreferrer" aria-label="Discord Community">
             <Button variant="ghost" size="icon" className="hidden sm:inline-flex">
-              <DiscordIcon className="h-5 w-5" />
+              <CommunityLogo size={20} className="rounded" />
             </Button>
           </Link>
           <Link href="https://github.com/Create-Python-App" target="_blank" aria-label="GitHub">
diff --git a/src/lib/community.ts b/src/lib/community.ts
index 2e2ca90..c98a420 100644
--- a/src/lib/community.ts
+++ b/src/lib/community.ts
@@ -1,2 +1,10 @@
 /** Canonical Create Awesome Discord invite (shared across CNA / CPA / CVA). */
 export const DISCORD_INVITE_URL = 'https://discord.gg/bR5VyATgka';
+
+/** Discord server snowflake — used by the official embed widget. */
+export const DISCORD_SERVER_ID = '1527933660764831825';
+
+export const DISCORD_WIDGET_SRC = `https://discord.com/widget?id=${DISCORD_SERVER_ID}&theme=dark`;
+
+/** Community brand mark (Create Awesome CA logo). */
+export const COMMUNITY_LOGO_SRC = '/community/create-awesome-community-logo.png';