Create comprehensive landing page for Stacks Quest Boards

.github/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+        cache: 'npm'
+    - name: Install dependencies
+      run: npm install
+    - name: Check contracts
+      run: npx clarinet check
+    - name: Run tests
+      run: npm test

README.md

@@ -0,0 +1 @@
+# Stacks Quest Boards

config.js

@@ -0,0 +1 @@
+module.exports = { appName: 'stacks-quest-boards' };

constants.js

@@ -0,0 +1 @@
+module.exports = { ACTIVE: 'active', COMPLETED: 'completed' };

frontend/app/layout.tsx

@@ -13,8 +13,15 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Stacks Quest Boards - Learn Stacks Blockchain Development",
+  description: "Comprehensive learning platform for Stacks blockchain development. Master smart contracts, DeFi protocols, NFTs, and frontend integration with hands-on tutorials and documentation.",
+  keywords: ["Stacks", "Blockchain", "Smart Contracts", "Clarity", "DeFi", "NFT", "Web3", "Cryptocurrency"],
+  authors: [{ name: "Stacks Community" }],
+  openGraph: {
+    title: "Stacks Quest Boards - Learn Stacks Blockchain Development",
+    description: "Your comprehensive learning platform for Stacks blockchain development",
+    type: "website",
+  },
 };
 
 export default function RootLayout({

frontend/app/page.tsx

@@ -1,65 +1,210 @@
-import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
+  const learningPaths = [
+    {
+      title: "Stacks Fundamentals",
+      description: "Learn the basics of Stacks blockchain, transactions, and smart contracts",
+      modules: ["What is Stacks?", "Transactions", "Clarity Language", "Smart Contracts"],
+      color: "from-blue-500 to-purple-600"
+    },
+    {
+      title: "DeFi Development",
+      description: "Build decentralized finance applications on Stacks",
+      modules: ["Token Standards", "DEX Integration", "Lending Protocols", "Yield Farming"],
+      color: "from-green-500 to-teal-600"
+    },
+    {
+      title: "NFT Creation",
+      description: "Create and manage non-fungible tokens on Stacks",
+      modules: ["SIP-009 Standard", "Badge NFTs", "Metadata Management", "Marketplaces"],
+      color: "from-orange-500 to-red-600"
+    },
+    {
+      title: "Frontend Integration",
+      description: "Connect web applications to Stacks blockchain",
+      modules: ["Wallet Connection", "@stacks/connect", "@stacks/transactions", "React Hooks"],
+      color: "from-indigo-500 to-blue-600"
+    }
+  ];
+
+  const featuredResources = [
+    {
+      title: "Badge NFT Contract",
+      description: "Complete SIP-009 compliant NFT implementation with admin controls",
+      link: "/docs/badge-nft",
+      type: "Contract Documentation"
+    },
+    {
+      title: "Clarity 4 Features",
+      description: "Latest Clarity language features including stacks-block-time and post-conditions",
+      link: "/stacks/stacks-shards/082_clarity_4_is_now_live",
+      type: "Technical Guide"
+    },
+    {
+      title: "Frontend Integration",
+      description: "Complete guide to building Stacks-connected web applications",
+      link: "/stacks/stacks-essentials/078_build_a_frontend",
+      type: "Tutorial"
+    }
+  ];
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-indigo-50">
+      {/* Hero Section */}
+      <div className="mx-auto max-w-7xl px-6 py-16">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-6xl">
+            Stacks Quest Boards
           </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+          <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-slate-600">
+            Your comprehensive learning platform for Stacks blockchain development.
+            Master smart contracts, DeFi protocols, NFTs, and frontend integration through
+            hands-on tutorials and documentation.
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <Link
+              href="#learning-paths"
+              className="rounded-md bg-indigo-600 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
             >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+              Start Learning
+            </Link>
+            <Link
+              href="#resources"
+              className="text-base font-semibold leading-6 text-slate-900 hover:text-indigo-600"
             >
-              Learning
-            </a>{" "}
-            center.
+              View Resources <span aria-hidden="true">→</span>
+            </Link>
+          </div>
+        </div>
+
+        {/* Learning Paths */}
+        <div id="learning-paths" className="mt-24">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-slate-900">
+              Learning Paths
+            </h2>
+            <p className="mt-4 text-lg text-slate-600">
+              Structured learning journeys to master Stacks development
+            </p>
+          </div>
+
+          <div className="mt-12 grid gap-8 md:grid-cols-2">
+            {learningPaths.map((path, index) => (
+              <div
+                key={index}
+                className="relative overflow-hidden rounded-2xl bg-white p-8 shadow-lg ring-1 ring-slate-200"
+              >
+                <div className={`absolute inset-0 bg-gradient-to-r ${path.color} opacity-5`} />
+                <div className="relative">
+                  <h3 className="text-xl font-semibold text-slate-900">{path.title}</h3>
+                  <p className="mt-2 text-slate-600">{path.description}</p>
+                  <ul className="mt-4 space-y-2">
+                    {path.modules.map((module, moduleIndex) => (
+                      <li key={moduleIndex} className="flex items-center text-sm text-slate-500">
+                        <div className="mr-2 h-1.5 w-1.5 rounded-full bg-indigo-600" />
+                        {module}
+                      </li>
+                    ))}
+                  </ul>
+                  <button className="mt-6 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">
+                    Start Path
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Featured Resources */}
+        <div id="resources" className="mt-24">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-slate-900">
+              Featured Resources
+            </h2>
+            <p className="mt-4 text-lg text-slate-600">
+              Essential documentation and guides for Stacks developers
+            </p>
+          </div>
+
+          <div className="mt-12 grid gap-6 md:grid-cols-3">
+            {featuredResources.map((resource, index) => (
+              <div
+                key={index}
+                className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow"
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-medium text-indigo-600 bg-indigo-50 px-2 py-1 rounded">
+                    {resource.type}
+                  </span>
+                </div>
+                <h3 className="mt-3 text-lg font-semibold text-slate-900">
+                  {resource.title}
+                </h3>
+                <p className="mt-2 text-sm text-slate-600">
+                  {resource.description}
+                </p>
+                <Link
+                  href={resource.link}
+                  className="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-500"
+                >
+                  Read more →
+                </Link>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="mt-24 rounded-2xl bg-indigo-600 px-6 py-12 text-center text-white">
+          <h2 className="text-2xl font-bold">Join the Stacks Community</h2>
+          <p className="mt-4 text-indigo-100">
+            Connect with developers building the future of decentralized applications
           </p>
+          <div className="mt-8 flex justify-center gap-8">
+            <div>
+              <div className="text-3xl font-bold">500+</div>
+              <div className="text-sm text-indigo-200">Learning Modules</div>
+            </div>
+            <div>
+              <div className="text-3xl font-bold">50+</div>
+              <div className="text-sm text-indigo-200">Smart Contracts</div>
+            </div>
+            <div>
+              <div className="text-3xl font-bold">10K+</div>
+              <div className="text-sm text-indigo-200">Developers</div>
+            </div>
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+
+        {/* Call to Action */}
+        <div className="mt-24 text-center">
+          <h2 className="text-3xl font-bold tracking-tight text-slate-900">
+            Ready to Start Building?
+          </h2>
+          <p className="mt-4 text-lg text-slate-600">
+            Dive into our comprehensive documentation and start your Stacks development journey today.
+          </p>
+          <div className="mt-8 flex justify-center gap-4">
+            <Link
+              href="https://docs.stacks.co"
+              className="rounded-md bg-slate-900 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-slate-800"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Official Docs
+            </Link>
+            <Link
+              href="https://github.com/stacks-network/stacks-blockchain"
+              className="rounded-md border border-slate-300 bg-white px-6 py-3 text-base font-semibold text-slate-900 shadow-sm hover:bg-slate-50"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub
+            </Link>
+          </div>
         </div>
-      </main>
+      </div>
     </div>
   );
 }

lib/constants.ts

@@ -0,0 +1 @@
+export const APP_NAME = 'Quest Boards';

lib/reward.ts

@@ -0,0 +1 @@
+export function calculateReward(points: number, multiplier: number): number { return points * multiplier; }

lib/types.ts

@@ -0,0 +1 @@
+export interface Quest { id: string; reward: number; }

lib/validate.ts

@@ -0,0 +1 @@
+export function validateQuest(quest: Quest): boolean { return quest.id.length > 0; }

quests.js

@@ -0,0 +1 @@
+module.exports = { quests: ['daily', 'weekly'] };

utils/progress.js

@@ -0,0 +1 @@
+module.exports = { checkProgress: (q) => q.completed };