Update src/app/rewards/page.tsx

Merge version_1 into main

src/app/employees/page.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Plus, Trash2, Edit2, Users } from 'lucide-react';
+
+interface Employee {
+  id: string;
+  name: string;
+  email: string;
+  department: string;
+  points: number;
+}
+
+export default function EmployeesPage() {
+  const [employees, setEmployees] = useState<Employee[]>([
+    { id: "1", name: "Alice Johnson", email: "alice@company.com", department: "Sales", points: 250 },
+    { id: "2", name: "Bob Smith", email: "bob@company.com", department: "Engineering", points: 180 },
+    { id: "3", name: "Carol Davis", email: "carol@company.com", department: "Marketing", points: 320 }
+  ]);
+
+  const [showForm, setShowForm] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [formData, setFormData] = useState({ name: "", email: "", department: "", points: "0" });
+
+  const handleAddEmployee = () => {
+    setEditingId(null);
+    setFormData({ name: "", email: "", department: "", points: "0" });
+    setShowForm(true);
+  };
+
+  const handleEditEmployee = (employee: Employee) => {
+    setEditingId(employee.id);
+    setFormData({ name: employee.name, email: employee.email, department: employee.department, points: String(employee.points) });
+    setShowForm(true);
+  };
+
+  const handleSaveEmployee = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (editingId) {
+      setEmployees(employees.map(emp => emp.id === editingId ? { ...emp, name: formData.name, email: formData.email, department: formData.department, points: parseInt(formData.points) } : emp));
+    } else {
+      setEmployees([...employees, { id: String(Date.now()), name: formData.name, email: formData.email, department: formData.department, points: parseInt(formData.points) }]);
+    }
+    setShowForm(false);
+  };
+
+  const handleDeleteEmployee = (id: string) => {
+    setEmployees(employees.filter(emp => emp.id !== id));
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="blurBottom"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="PointsHub"
+          navItems={[
+            { name: "Dashboard", id: "/points-dashboard" },
+            { name: "Employees", id: "/employees" },
+            { name: "Home", id: "/" }
+          ]}
+        />
+      </div>
+
+      <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 pt-32 pb-20 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex items-center gap-3">
+              <Users className="w-8 h-8 text-blue-400" />
+              <h1 className="text-4xl font-bold text-white">Employee Directory</h1>
+            </div>
+            <button
+              onClick={handleAddEmployee}
+              className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors"
+            >
+              <Plus className="w-5 h-5" />
+              Add Employee
+            </button>
+          </div>
+
+          {showForm && (
+            <div className="bg-gray-700 rounded-lg p-6 mb-8 border border-gray-600">
+              <h2 className="text-2xl font-bold text-white mb-4">{editingId ? "Edit Employee" : "Add New Employee"}</h2>
+              <form onSubmit={handleSaveEmployee} className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <input
+                    type="text"
+                    placeholder="Full Name"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    required
+                    className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
+                  />
+                  <input
+                    type="email"
+                    placeholder="Email"
+                    value={formData.email}
+                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                    required
+                    className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
+                  />
+                  <input
+                    type="text"
+                    placeholder="Department"
+                    value={formData.department}
+                    onChange={(e) => setFormData({ ...formData, department: e.target.value })}
+                    required
+                    className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
+                  />
+                  <input
+                    type="number"
+                    placeholder="Points"
+                    value={formData.points}
+                    onChange={(e) => setFormData({ ...formData, points: e.target.value })}
+                    required
+                    className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
+                  />
+                </div>
+                <div className="flex gap-3">
+                  <button
+                    type="submit"
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded transition-colors"
+                  >
+                    Save
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowForm(false)}
+                    className="bg-gray-600 hover:bg-gray-500 text-white px-6 py-2 rounded transition-colors"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </form>
+            </div>
+          )}
+
+          <div className="bg-gray-700 rounded-lg overflow-hidden border border-gray-600">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-600 border-b border-gray-500">
+                  <tr>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Name</th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Email</th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Department</th>
+                    <th className="px-6 py-4 text-center text-white font-semibold">Points</th>
+                    <th className="px-6 py-4 text-center text-white font-semibold">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {employees.map((employee, idx) => (
+                    <tr key={employee.id} className={idx % 2 === 0 ? "bg-gray-700" : "bg-gray-750"}>
+                      <td className="px-6 py-4 text-gray-100">{employee.name}</td>
+                      <td className="px-6 py-4 text-gray-300">{employee.email}</td>
+                      <td className="px-6 py-4 text-gray-300">{employee.department}</td>
+                      <td className="px-6 py-4 text-center">
+                        <span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">{employee.points}</span>
+                      </td>
+                      <td className="px-6 py-4 text-center">
+                        <div className="flex gap-2 justify-center">
+                          <button
+                            onClick={() => handleEditEmployee(employee)}
+                            className="text-blue-400 hover:text-blue-300 transition-colors"
+                            title="Edit employee"
+                          >
+                            <Edit2 className="w-5 h-5" />
+                          </button>
+                          <button
+                            onClick={() => handleDeleteEmployee(employee.id)}
+                            className="text-red-400 hover:text-red-300 transition-colors"
+                            title="Delete employee"
+                          >
+                            <Trash2 className="w-5 h-5" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div className="mt-6 text-gray-300 text-sm">
+            <p>Total Employees: <span className="font-bold text-blue-400">{employees.length}</span></p>
+            <p>Total Points Distributed: <span className="font-bold text-blue-400">{employees.reduce((sum, emp) => sum + emp.points, 0)}</span></p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="PointsHub"
+          columns={[
+            {
+              items: [
+                { label: "Dashboard", href: "/points-dashboard" },
+                { label: "Employees", href: "/employees" },
+                { label: "Home", href: "/" }
+              ]
+            },
+            {
+              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Security", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Support", href: "#" },
+                { label: "Contact", href: "#" },
+                { label: "Status Page", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/leaderboard/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Trophy, Medal, Target, Zap } from 'lucide-react';
+
+export default function LeaderboardPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="blurBottom"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="PointsHub"
+          navItems={[
+            { name: "How It Works", id: "features" },
+            { name: "Features", id: "about" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Leaderboard", id: "/leaderboard" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="leaderboard" data-section="leaderboard">
+        <MetricCardOne
+          title="Top Performers"
+          description="See who's leading the way with the most points and highest achievements"
+          tag="Leaderboard"
+          tagIcon={Trophy}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            { id: "1", icon: Medal, title: "Sarah Chen", value: "2,450 pts", description: "First place" },
+            { id: "2", icon: Target, title: "Marcus Johnson", value: "2,180 pts", description: "Second place" },
+            { id: "3", icon: Zap, title: "Emily Rodriguez", value: "1,950 pts", description: "Third place" },
+            { id: "4", icon: Trophy, title: "David Kim", value: "1,820 pts", description: "Fourth place" }
+          ]}
+          gridVariant="uniform-all-items-equal"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="PointsHub"
+          columns={[
+            {
+              items: [
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "#pricing" },
+                { label: "How It Works", href: "#features" }
+              ]
+            },
+            {
+              items: [
+                { label: "About Us", href: "#about" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Security", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Support", href: "#contact" },
+                { label: "Contact", href: "#contact" },
+                { label: "Status Page", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -34,6 +34,8 @@ export default function LandingPage() {
             { name: "How It Works", id: "features" },
             { name: "Features", id: "about" },
             { name: "Pricing", id: "pricing" },
+            { name: "Leaderboard", id: "/leaderboard" },
+            { name: "Rewards", id: "/rewards" },
             { name: "FAQ", id: "faq" },
             { name: "Contact", id: "contact" }
           ]}

src/app/points-dashboard/page.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { TrendingUp, Award, Users, Zap, Target, BarChart3 } from 'lucide-react';
+
+export default function PointsDashboardPage() {
+  const [employees] = useState([
+    { id: "1", name: "Alice Johnson", department: "Sales", points: 250, salary: 75000 },
+    { id: "2", name: "Bob Smith", department: "Engineering", points: 180, salary: 95000 },
+    { id: "3", name: "Carol Davis", department: "Marketing", points: 320, salary: 65000 },
+    { id: "4", name: "David Lee", department: "Sales", points: 420, salary: 80000 },
+    { id: "5", name: "Emma Wilson", department: "Engineering", points: 290, salary: 100000 }
+  ]);
+
+  const totalPoints = employees.reduce((sum, emp) => sum + emp.points, 0);
+  const avgPoints = Math.round(totalPoints / employees.length);
+  const totalSalaryIncrease = employees.reduce((sum, emp) => sum + (emp.salary * (emp.points / 100) * 0.001), 0);
+  const topPerformer = employees.reduce((prev, current) => current.points > prev.points ? current : prev);
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="blurBottom"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="PointsHub"
+          navItems={[
+            { name: "Dashboard", id: "/points-dashboard" },
+            { name: "Employees", id: "/employees" },
+            { name: "Home", id: "/" }
+          ]}
+        />
+      </div>
+
+      <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 pt-32 pb-20 px-4">
+        <div className="max-w-6xl mx-auto">
+          <h1 className="text-4xl font-bold text-white mb-12">Points Dashboard</h1>
+
+          {/* KPI Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+            <div className="bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg p-6 border border-blue-500">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-blue-100 text-sm font-medium">Total Points</p>
+                  <p className="text-4xl font-bold text-white mt-2">{totalPoints}</p>
+                </div>
+                <TrendingUp className="w-12 h-12 text-blue-200 opacity-30" />
+              </div>
+            </div>
+
+            <div className="bg-gradient-to-br from-purple-600 to-purple-700 rounded-lg p-6 border border-purple-500">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-purple-100 text-sm font-medium">Average Points</p>
+                  <p className="text-4xl font-bold text-white mt-2">{avgPoints}</p>
+                </div>
+                <Award className="w-12 h-12 text-purple-200 opacity-30" />
+              </div>
+            </div>
+
+            <div className="bg-gradient-to-br from-emerald-600 to-emerald-700 rounded-lg p-6 border border-emerald-500">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-emerald-100 text-sm font-medium">Active Employees</p>
+                  <p className="text-4xl font-bold text-white mt-2">{employees.length}</p>
+                </div>
+                <Users className="w-12 h-12 text-emerald-200 opacity-30" />
+              </div>
+            </div>
+
+            <div className="bg-gradient-to-br from-orange-600 to-orange-700 rounded-lg p-6 border border-orange-500">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-orange-100 text-sm font-medium">Total Salary Increase</p>
+                  <p className="text-3xl font-bold text-white mt-2">${totalSalaryIncrease.toFixed(2)}</p>
+                </div>
+                <Zap className="w-12 h-12 text-orange-200 opacity-30" />
+              </div>
+            </div>
+          </div>
+
+          {/* Performance Metrics */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
+            <div className="bg-gray-700 rounded-lg p-8 border border-gray-600">
+              <div className="flex items-center gap-3 mb-6">
+                <Target className="w-6 h-6 text-blue-400" />
+                <h2 className="text-2xl font-bold text-white">Top Performer</h2>
+              </div>
+              <div className="bg-gray-600 rounded-lg p-6">
+                <p className="text-gray-300 text-sm mb-2">Employee with Most Points</p>
+                <p className="text-3xl font-bold text-blue-400 mb-4">{topPerformer.name}</p>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-gray-400 text-xs">Points</p>
+                    <p className="text-2xl font-bold text-white">{topPerformer.points}</p>
+                  </div>
+                  <div>
+                    <p className="text-gray-400 text-xs">Salary Increase</p>
+                    <p className="text-2xl font-bold text-green-400">+{((topPerformer.points / 100) * 0.1).toFixed(2)}%</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-gray-700 rounded-lg p-8 border border-gray-600">
+              <div className="flex items-center gap-3 mb-6">
+                <BarChart3 className="w-6 h-6 text-purple-400" />
+                <h2 className="text-2xl font-bold text-white">Distribution</h2>
+              </div>
+              <div className="space-y-4">
+                <div>
+                  <p className="text-gray-300 text-sm mb-2">Points per Employee (Average)</p>
+                  <div className="w-full bg-gray-600 rounded-full h-3">
+                    <div
+                      className="bg-gradient-to-r from-blue-500 to-purple-500 h-3 rounded-full"
+                      style={{ width: `${(avgPoints / 500) * 100}%` }}
+                    />
+                  </div>
+                  <p className="text-gray-400 text-xs mt-1">{avgPoints} / 500 target</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Employee Leaderboard */}
+          <div className="bg-gray-700 rounded-lg overflow-hidden border border-gray-600">
+            <div className="bg-gray-600 px-6 py-4 border-b border-gray-500">
+              <h2 className="text-2xl font-bold text-white flex items-center gap-3">
+                <BarChart3 className="w-6 h-6 text-blue-400" />
+                Employee Leaderboard
+              </h2>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-600 border-b border-gray-500">
+                  <tr>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Rank</th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Name</th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Department</th>
+                    <th className="px-6 py-4 text-center text-white font-semibold">Points</th>
+                    <th className="px-6 py-4 text-center text-white font-semibold">Salary Increase</th>
+                    <th className="px-6 py-4 text-center text-white font-semibold">Milestones</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[...employees].sort((a, b) => b.points - a.points).map((employee, idx) => {
+                    const milestones = Math.floor(employee.points / 100);
+                    return (
+                      <tr key={employee.id} className={idx % 2 === 0 ? "bg-gray-700" : "bg-gray-750"}>
+                        <td className="px-6 py-4">
+                          <span className="inline-flex items-center justify-center w-8 h-8 bg-blue-600 text-white font-bold rounded-full text-sm">
+                            {idx + 1}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-white font-medium">{employee.name}</td>
+                        <td className="px-6 py-4 text-gray-300">{employee.department}</td>
+                        <td className="px-6 py-4 text-center">
+                          <span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">{employee.points}</span>
+                        </td>
+                        <td className="px-6 py-4 text-center">
+                          <span className="bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium">+{((employee.points / 100) * 0.1).toFixed(2)}%</span>
+                        </td>
+                        <td className="px-6 py-4 text-center">
+                          <span className="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">{milestones}</span>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="PointsHub"
+          columns={[
+            {
+              items: [
+                { label: "Dashboard", href: "/points-dashboard" },
+                { label: "Employees", href: "/employees" },
+                { label: "Home", href: "/" }
+              ]
+            },
+            {
+              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Security", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Support", href: "#" },
+                { label: "Contact", href: "#" },
+                { label: "Status Page", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/rewards/page.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Gift, Star, Award, Trophy } from 'lucide-react';
+
+export default function RewardsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="blurBottom"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="PointsHub"
+          navItems={[
+            { name: "How It Works", id: "features" },
+            { name: "Features", id: "about" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Rewards", id: "/rewards" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="rewards" data-section="rewards">
+        <PricingCardTwo
+          title="Reward Tiers"
+          description="Unlock amazing rewards as you accumulate points"
+          tag="Rewards System"
+          tagIcon={Gift}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          plans={[
+            {
+              id: "bronze",              badge: "Bronze Tier",              badgeIcon: Award,
+              price: "100 pts",              subtitle: "Entry-level rewards",              buttons: [
+                { text: "Claim Reward", href: "#" }
+              ],
+              features: [
+                "Extra break day",                "Discount voucher ($25)",                "Recognition certificate",                "Priority parking spot"
+              ]
+            },
+            {
+              id: "silver",              badge: "Silver Tier",              badgeIcon: Star,
+              price: "250 pts",              subtitle: "Growing rewards",              buttons: [
+                { text: "Claim Reward", href: "#" }
+              ],
+              features: [
+                "Two extra break days",                "Discount voucher ($75)",                "Team lunch paid",                "Reserved parking spot",                "Professional development course"
+              ]
+            },
+            {
+              id: "gold",              badge: "Gold Tier",              badgeIcon: Trophy,
+              price: "500 pts",              subtitle: "Premium rewards",              buttons: [
+                { text: "Claim Reward", href: "#" }
+              ],
+              features: [
+                "Full week off (5 days)",                "Discount voucher ($200)",                "Company travel fund",                "Executive parking",                "Advanced training program",                "Salary bonus (0.25%)"
+              ]
+            }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="PointsHub"
+          columns={[
+            {
+              items: [
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "#pricing" },
+                { label: "How It Works", href: "#features" }
+              ]
+            },
+            {
+              items: [
+                { label: "About Us", href: "#about" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Security", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Support", href: "#contact" },
+                { label: "Contact", href: "#contact" },
+                { label: "Status Page", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}