feat(site): Discord widget section with community logo

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">

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)}
+ />
+ );
+}

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>
+ );
+}

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">

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';