My community theme inspired by buddyboss
export default function HybridCommunityTheme() {
  const menu = [
    'Home',
    'Community',
    'Groups',
    'Courses',
    'Media',
    'Books',
    'Members',
  ];

  const cards = [
    {
      title: 'Faith Communities',
      text: 'Create private or public groups for discussion, prayer, teaching, and fellowship.',
    },
    {
      title: 'Author Platform',
      text: 'Highlight books, PDFs, sermons, podcasts, and ministry resources in one place.',
    },
    {
      title: 'Social Feed',
      text: 'A modern social timeline with reactions, comments, bookmarks, and media sharing.',
    },
    {
      title: 'Learning Hub',
      text: 'Offer online courses, Bible studies, and downloadable learning materials.',
    },
  ];

  const feed = [
    {
      author: 'Joshua Salva',
      content:
        'Welcome to the new faith-centered community platform where readers, authors, and believers connect.',
    },
    {
      author: 'Community Member',
      content:
        'Started a new discussion group about modern Christian outreach and ministry online.',
    },
  ];

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      {/* Hero Header */}
      <header className="relative overflow-hidden border-b border-white/10 bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-950">
        <div className="absolute inset-0 opacity-20">
          <div className="absolute left-0 top-0 h-72 w-72 rounded-full bg-indigo-500 blur-3xl" />
          <div className="absolute bottom-0 right-0 h-72 w-72 rounded-full bg-cyan-500 blur-3xl" />
        </div>

        <div className="relative mx-auto flex max-w-7xl items-center justify-between px-6 py-5">
          <div>
            <h1 className="text-2xl font-bold tracking-wide">
              Hybrid Community Theme
            </h1>
            <p className="text-sm text-slate-300">
              Social network + author platform + ministry hub
            </p>
          </div>

          <nav className="hidden gap-6 lg:flex">
            {menu.map((item) => (
              <a
                key={item}
                href="#"
                className="text-sm text-slate-200 transition hover:text-cyan-300"
              >
                {item}
              </a>
            ))}
          </nav>

          <button className="rounded-2xl bg-cyan-500 px-5 py-2 text-sm font-semibold text-slate-950 shadow-lg transition hover:scale-105">
            Join Community
          </button>
        </div>

        <div className="relative mx-auto grid max-w-7xl gap-10 px-6 py-16 lg:grid-cols-2 lg:items-center">
          <div>
            <div className="mb-4 inline-flex rounded-full border border-cyan-400/30 bg-cyan-400/10 px-4 py-1 text-sm text-cyan-300">
              Inspired by modern social community platforms
            </div>

            <h2 className="max-w-2xl text-5xl font-black leading-tight tracking-tight">
              A Hybrid Website Theme Built For Community, Content, and Connection.
            </h2>

            <p className="mt-6 max-w-xl text-lg leading-relaxed text-slate-300">
              This design combines a modern social network layout with an
              author platform, online learning system, and interactive member
              communities.
            </p>

            <div className="mt-8 flex flex-wrap gap-4">
              <button className="rounded-2xl bg-cyan-400 px-6 py-3 font-semibold text-slate-950 shadow-xl transition hover:scale-105">
                Explore Platform
              </button>

              <button className="rounded-2xl border border-white/20 bg-white/5 px-6 py-3 font-semibold backdrop-blur transition hover:bg-white/10">
                View Demo
              </button>
            </div>
          </div>

          <div className="rounded-3xl border border-white/10 bg-white/5 p-5 shadow-2xl backdrop-blur-xl">
            <div className="mb-4 flex items-center justify-between border-b border-white/10 pb-4">
              <div>
                <h3 className="text-lg font-semibold">Community Feed</h3>
                <p className="text-sm text-slate-400">
                  Real-time interaction and member activity
                </p>
              </div>

              <div className="rounded-full bg-cyan-400/20 px-3 py-1 text-xs text-cyan-300">
                Live
              </div>
            </div>

            <div className="space-y-4">
              {feed.map((post, index) => (
                <div
                  key={index}
                  className="rounded-2xl border border-white/10 bg-slate-900/70 p-4"
                >
                  <div className="mb-2 flex items-center gap-3">
                    <div className="h-10 w-10 rounded-full bg-gradient-to-br from-cyan-400 to-indigo-500" />
                    <div>
                      <h4 className="font-semibold">{post.author}</h4>
                      <p className="text-xs text-slate-400">2 minutes ago</p>
                    </div>
                  </div>

                  <p className="text-sm leading-relaxed text-slate-300">
                    {post.content}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </header>

      {/* Features */}
      <section className="mx-auto max-w-7xl px-6 py-20">
        <div className="mb-14 text-center">
          <h2 className="text-4xl font-black">
            Hybrid Features
          </h2>
          <p className="mx-auto mt-4 max-w-3xl text-slate-400">
            Designed for social networking, publishing, ministry outreach, and
            online communities.
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {cards.map((card) => (
            <div
              key={card.title}
              className="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-xl backdrop-blur-lg transition hover:-translate-y-1 hover:bg-white/10"
            >
              <div className="mb-4 h-12 w-12 rounded-2xl bg-gradient-to-br from-cyan-400 to-indigo-500" />
              <h3 className="mb-3 text-xl font-bold">{card.title}</h3>
              <p className="text-sm leading-relaxed text-slate-400">
                {card.text}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Layout Preview */}
      <section className="border-t border-white/10 bg-slate-900/50 px-6 py-20">
        <div className="mx-auto grid max-w-7xl gap-8 lg:grid-cols-[260px_1fr_320px]">
          <aside className="rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-lg">
            <h3 className="mb-4 text-lg font-bold">Sidebar Navigation</h3>
            <div className="space-y-3">
              {['News Feed', 'Messages', 'Events', 'Courses', 'Books', 'Downloads'].map((item) => (
                <div
                  key={item}
                  className="rounded-2xl bg-slate-900/70 px-4 py-3 text-sm text-slate-300"
                >
                  {item}
                </div>
              ))}
            </div>
          </aside>

          <main className="rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-lg">
            <div className="mb-6 flex items-center justify-between">
              <h3 className="text-2xl font-bold">Activity Timeline</h3>
              <button className="rounded-2xl bg-cyan-400 px-4 py-2 text-sm font-semibold text-slate-950">
                Create Post
              </button>
            </div>

            <div className="space-y-5">
              {[1, 2, 3].map((item) => (
                <div
                  key={item}
                  className="rounded-3xl border border-white/10 bg-slate-900/70 p-5"
                >
                  <div className="mb-4 flex items-center gap-3">
                    <div className="h-12 w-12 rounded-full bg-gradient-to-br from-indigo-400 to-cyan-400" />
                    <div>
                      <h4 className="font-semibold">Featured Member</h4>
                      <p className="text-xs text-slate-400">Shared a new article</p>
                    </div>
                  </div>

                  <p className="text-slate-300">
                    This area can display social posts, media content, book
                    updates, discussions, and downloadable resources.
                  </p>
                </div>
              ))}
            </div>
          </main>

          <aside className="space-y-6">
            <div className="rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-lg">
              <h3 className="mb-4 text-lg font-bold">Trending Topics</h3>
              <div className="space-y-3 text-sm text-slate-300">
                <div>#ChristianAuthors</div>
                <div>#FaithCommunity</div>
                <div>#BibleStudy</div>
                <div>#DigitalMinistry</div>
              </div>
            </div>

            <div className="rounded-3xl border border-white/10 bg-gradient-to-br from-cyan-500/20 to-indigo-500/20 p-5 backdrop-blur-lg">
              <h3 className="mb-3 text-lg font-bold">Premium Membership</h3>
              <p className="mb-5 text-sm text-slate-300">
                Unlock courses, private groups, media libraries, and exclusive
                downloadable content.
              </p>

              <button className="w-full rounded-2xl bg-white px-4 py-3 font-semibold text-slate-950">
                Upgrade Now
              </button>
            </div>
          </aside>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-white/10 px-6 py-10 text-center text-sm text-slate-500">
        Hybrid Community Theme Concept • Designed for modern social platforms,
        ministries, authors, and online communities.
      </footer>
    </div>
  );
}