diff --git a/FrontEnd/my-app/app/page.tsx b/FrontEnd/my-app/app/page.tsx
index db3696b..c7fa5d3 100644
--- a/FrontEnd/my-app/app/page.tsx
+++ b/FrontEnd/my-app/app/page.tsx
@@ -1,63 +1,26 @@
"use client";
-import FeaturedQuests from "@/components/homepage/FeaturedQuests";
-import Link from "next/link";
import { motion } from "framer-motion";
+import Link from "next/link";
+import HeroSection from "@/components/homepage/HeroSection";
import { HowItWorks } from "@/components/homepage/HowItWorks";
-import { FAQAccordion } from "@/components/homepage/FAQAccordion";
import FeaturedQuests from "@/components/homepage/FeaturedQuests";
+import { FAQAccordion } from "@/components/homepage/FAQAccordion";
export default function Home() {
return (
{/* Hero */}
-
-
- Turn Work Into{" "}
-
- On-Chain Achievements
-
-
-
- Complete quests, earn rewards, and build your reputation on the
- Stellar blockchain. Fast settlements, low fees, global reach.
-
-
-
-
+
+
- Join thousands of contributors completing quests and building
- their on-chain reputation. Connect your wallet to get started.
+ Join thousands of contributors completing quests and building their
+ on-chain reputation. Connect your wallet to get started.
-
-
-
-
- {/* Featured Quests */}
-
+
+ Explore Quests
+
+
+
+
+ Connect Wallet
+
+
+ {/* Background grid */}
+
+
+ {/* Ambient glow */}
+
+
+
+
+ {/* "Built on Stellar & Soroban" badge */}
+
+ ⭐
+
+ Built on Stellar & Soroban
+
+
+
+ {/* Headline */}
+
+ Turn Work Into{" "}
+
+ On-Chain {ROTATING_WORDS[wordIndex]}
+
+
+
+ {/* Subtext */}
+
+ Complete quests, earn rewards, and build your reputation on the
+ Stellar blockchain. Fast settlements, low fees, global reach.
+
+
+ {/* CTA Buttons */}
+
+
+
+ {/* Stats */}
+
+
+
+ {/* Trust indicator pills */}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/FrontEnd/my-app/components/homepage/NetworkVisualization.tsx b/FrontEnd/my-app/components/homepage/NetworkVisualization.tsx
new file mode 100644
index 0000000..8074cbe
--- /dev/null
+++ b/FrontEnd/my-app/components/homepage/NetworkVisualization.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface Node {
+ x: number;
+ y: number;
+ vx: number;
+ vy: number;
+ radius: number;
+ pulse: number;
+ pulseSpeed: number;
+}
+
+export default function NetworkVisualization() {
+ const canvasRef = useRef(null);
+ const animRef = useRef(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ const setSize = () => {
+ canvas.width = canvas.offsetWidth;
+ canvas.height = canvas.offsetHeight;
+ };
+ setSize();
+
+ const NODE_COUNT = Math.max(
+ 12,
+ Math.floor((canvas.width * canvas.height) / 16000)
+ );
+ const MAX_DIST = 120;
+ // Cyan palette matching the project
+ const COLORS = ["#22d3ee", "#06b6d4", "#67e8f9", "#a5f3fc", "#0891b2"];
+
+ const nodes: Node[] = Array.from({ length: NODE_COUNT }, () => ({
+ x: Math.random() * canvas.width,
+ y: Math.random() * canvas.height,
+ vx: (Math.random() - 0.5) * 0.5,
+ vy: (Math.random() - 0.5) * 0.5,
+ radius: 2 + Math.random() * 2.5,
+ pulse: Math.random() * Math.PI * 2,
+ pulseSpeed: 0.018 + Math.random() * 0.015,
+ }));
+
+ // Store colors separately so they don't reset each frame
+ const nodeColors = nodes.map(
+ () => COLORS[Math.floor(Math.random() * COLORS.length)]
+ );
+
+ const draw = () => {
+ const W = canvas.width;
+ const H = canvas.height;
+ ctx.clearRect(0, 0, W, H);
+
+ // Update
+ nodes.forEach((n) => {
+ n.x += n.vx;
+ n.y += n.vy;
+ n.pulse += n.pulseSpeed;
+ if (n.x < 0 || n.x > W) n.vx *= -1;
+ if (n.y < 0 || n.y > H) n.vy *= -1;
+ });
+
+ // Edges
+ for (let i = 0; i < nodes.length; i++) {
+ for (let j = i + 1; j < nodes.length; j++) {
+ const dx = nodes[i].x - nodes[j].x;
+ const dy = nodes[i].y - nodes[j].y;
+ const dist = Math.sqrt(dx * dx + dy * dy);
+ if (dist < MAX_DIST) {
+ const alpha = (1 - dist / MAX_DIST) * 0.4;
+ ctx.beginPath();
+ ctx.moveTo(nodes[i].x, nodes[i].y);
+ ctx.lineTo(nodes[j].x, nodes[j].y);
+ ctx.strokeStyle = `rgba(34, 211, 238, ${alpha})`;
+ ctx.lineWidth = 0.8;
+ ctx.stroke();
+ }
+ }
+ }
+
+ // Nodes
+ nodes.forEach((n, i) => {
+ const r = n.radius * (1 + 0.2 * Math.sin(n.pulse));
+ const color = nodeColors[i];
+
+ // Glow
+ const grd = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, r * 4);
+ grd.addColorStop(0, color + "99");
+ grd.addColorStop(1, color + "00");
+ ctx.beginPath();
+ ctx.arc(n.x, n.y, r * 4, 0, Math.PI * 2);
+ ctx.fillStyle = grd;
+ ctx.fill();
+
+ // Core dot
+ ctx.beginPath();
+ ctx.arc(n.x, n.y, r, 0, Math.PI * 2);
+ ctx.fillStyle = color;
+ ctx.fill();
+ });
+
+ animRef.current = requestAnimationFrame(draw);
+ };
+
+ draw();
+
+ const handleResize = () => {
+ setSize();
+ };
+ window.addEventListener("resize", handleResize);
+
+ return () => {
+ if (animRef.current) cancelAnimationFrame(animRef.current);
+ window.removeEventListener("resize", handleResize);
+ };
+ }, []);
+
+ return (
+
+
+ {/* Fade out bottom edge to blend with section */}
+
+
(null);
+
+ useEffect(() => {
+ if (!active) return;
+ const duration = 1800;
+ const start = performance.now();
+
+ const step = (now: number) => {
+ const progress = Math.min((now - start) / duration, 1);
+ const eased = 1 - Math.pow(1 - progress, 3);
+ setCount(parseFloat((eased * target).toFixed(decimals)));
+ if (progress < 1) rafRef.current = requestAnimationFrame(step);
+ };
+
+ rafRef.current = requestAnimationFrame(step);
+ return () => {
+ if (rafRef.current) cancelAnimationFrame(rafRef.current);
+ };
+ }, [target, decimals, active]);
+
+ return count;
+}
+
+function StatItem({ stat, active }: { stat: Stat; active: boolean }) {
+ const count = useCountUp(stat.target, stat.decimals ?? 0, active);
+ const display = stat.decimals
+ ? count.toFixed(stat.decimals)
+ : Math.round(count).toLocaleString();
+
+ return (
+
+
+ {stat.prefix}
+ {display}
+ {stat.suffix}
+
+ {stat.label}
+
+ );
+}
+
+export default function StatsCounter() {
+ const ref = useRef(null);
+ const [active, setActive] = useState(false);
+
+ useEffect(() => {
+ const el = ref.current;
+ if (!el) return;
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setActive(true);
+ observer.disconnect();
+ }
+ },
+ { threshold: 0.3 }
+ );
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+ {STATS.map((stat) => (
+
+ );
+}
\ No newline at end of file
diff --git a/FrontEnd/my-app/components/homepage/TrustIndicators.tsx b/FrontEnd/my-app/components/homepage/TrustIndicators.tsx
new file mode 100644
index 0000000..1e900d7
--- /dev/null
+++ b/FrontEnd/my-app/components/homepage/TrustIndicators.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+const INDICATORS = [
+ { icon: "⚡", label: "5-Second Settlement" },
+ { icon: "✅", label: "On-Chain Verification" },
+ { icon: "🏆", label: "Earn XP & Badges" },
+];
+
+export default function TrustIndicators() {
+ return (
+
+ {INDICATORS.map(({ icon, label }) => (
+
+ {icon}
+ {label}
+
+ ))}
+
Playwright Test Report
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FrontEnd/my-app/test-results/.last-run.json b/FrontEnd/my-app/test-results/.last-run.json
new file mode 100644
index 0000000..cbcc1fb
--- /dev/null
+++ b/FrontEnd/my-app/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+ "status": "passed",
+ "failedTests": []
+}
\ No newline at end of file
diff --git a/FrontEnd/my-app/tests/e2e/homepage-hero.spec.ts b/FrontEnd/my-app/tests/e2e/homepage-hero.spec.ts
new file mode 100644
index 0000000..5088197
--- /dev/null
+++ b/FrontEnd/my-app/tests/e2e/homepage-hero.spec.ts
@@ -0,0 +1,134 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Homepage Hero Section", () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto("/");
+ });
+
+ // ── Visibility ────────────────────────────────────────────
+
+ test("renders the hero section", async ({ page }) => {
+ await expect(page.getByRole("region", { name: "Hero" })).toBeVisible();
+ });
+
+ test("shows Built on Stellar & Soroban badge", async ({ page }) => {
+ await expect(
+ page.getByText(/built on stellar & soroban/i)
+ ).toBeVisible();
+ });
+
+ test("shows the main headline", async ({ page }) => {
+ await expect(
+ page.getByRole("heading", { level: 1 })
+ ).toContainText(/turn work into/i);
+ });
+
+ test("shows the subtext description", async ({ page }) => {
+ await expect(
+ page.getByText(/complete quests, earn rewards/i)
+ ).toBeVisible();
+ });
+
+ // ── Rotating headline ─────────────────────────────────────
+
+ test("headline contains an animated word", async ({ page }) => {
+ const hero = page.getByRole("region", { name: "Hero" });
+ const animated = hero.locator("[aria-live='polite']");
+ await expect(animated).toBeVisible();
+ const firstWord = await animated.textContent();
+ expect(firstWord?.trim().length).toBeGreaterThan(0);
+ });
+
+ // ── CTA Buttons ───────────────────────────────────────────
+
+ test("Explore Quests button is visible and clickable", async ({ page }) => {
+ // Match by aria-label set on the link
+ const btn = page.getByRole("link", {
+ name: /explore all available quests/i,
+ });
+ await expect(btn).toBeVisible();
+ await expect(btn).toHaveAttribute("href", "/quests");
+ });
+
+ test("Connect Wallet button is visible and clickable", async ({ page }) => {
+ // Match by aria-label set on the link
+ const btn = page.getByRole("link", {
+ name: /connect your wallet/i,
+ });
+ await expect(btn).toBeVisible();
+ await expect(btn).toHaveAttribute("href", "/dashboard");
+ });
+
+ test("CTA buttons are keyboard focusable", async ({ page }) => {
+ await page.keyboard.press("Tab");
+ const focused = page.locator(":focus");
+ await expect(focused).toBeVisible();
+ });
+
+ // ── Stats ─────────────────────────────────────────────────
+
+ test("stats region is present", async ({ page }) => {
+ await expect(
+ page.getByRole("region", { name: /platform statistics/i })
+ ).toBeVisible();
+ });
+
+ test("shows XLM Distributed stat label", async ({ page }) => {
+ await expect(page.getByText(/xlm distributed/i)).toBeVisible();
+ });
+
+ test("shows Quests Completed stat label", async ({ page }) => {
+ await expect(page.getByText(/quests completed/i)).toBeVisible();
+ });
+
+ test("shows Active Quests stat label", async ({ page }) => {
+ await expect(page.getByText(/active quests/i)).toBeVisible();
+ });
+
+ // ── Trust Indicators ──────────────────────────────────────
+
+ test("shows trust indicators", async ({ page }) => {
+ await expect(page.getByText(/5-second settlement/i)).toBeVisible();
+ await expect(page.getByText(/on-chain verification/i)).toBeVisible();
+ await expect(page.getByText(/earn xp & badges/i)).toBeVisible();
+ });
+
+ // ── Responsive ────────────────────────────────────────────
+
+ test("hero looks correct on mobile", async ({ page }) => {
+ await page.setViewportSize({ width: 375, height: 812 });
+ await expect(
+ page.getByRole("heading", { level: 1 })
+ ).toBeVisible();
+ await expect(
+ page.getByRole("link", { name: /explore all available quests/i })
+ ).toBeVisible();
+ });
+
+ test("hero looks correct on tablet", async ({ page }) => {
+ await page.setViewportSize({ width: 768, height: 1024 });
+ await expect(
+ page.getByRole("region", { name: "Hero" })
+ ).toBeVisible();
+ });
+
+ // ── Accessibility ─────────────────────────────────────────
+
+ test("hero section has correct aria-label", async ({ page }) => {
+ await expect(
+ page.locator("section[aria-label='Hero']")
+ ).toBeVisible();
+ });
+
+ test("stats region has aria-label", async ({ page }) => {
+ await expect(
+ page.locator("[aria-label='Platform statistics']")
+ ).toBeVisible();
+ });
+
+ test("trust indicators have aria-label", async ({ page }) => {
+ await expect(
+ page.locator("[aria-label='Trust indicators']")
+ ).toBeVisible();
+ });
+});
\ No newline at end of file