feat(site): add discord widget section with community logo

show the create awesome brand mark and official discord embed on the homepage

Author: ulises-jeremias

public/community/create-awesome-community-logo.png

@@ -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/app/page.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/community-logo.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/discord-community-section.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/components/discord-icon.tsx

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