beautify: added waves bg

src/app/admin/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import PageLayout from '../components/PageLayout'
+import Waves from '../components/waves'
 import {
   UsersIcon,
   ExclamationTriangleIcon,
@@ -84,10 +85,30 @@ export default function AdminDashboardPage() {
 
   return (
     <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
+      <div
-        <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
+        className="relative w-full flex flex-col min-h-screen overflow-hidden"
+        style={{ backgroundImage: 'none', background: 'none' }}
+      >
+        <Waves
+          className="pointer-events-none"
+          lineColor="#0f172a"
+          backgroundColor="rgba(245, 245, 240, 1)"
+          waveSpeedX={0.02}
+          waveSpeedY={0.01}
+          waveAmpX={40}
+          waveAmpY={20}
+          friction={0.9}
+          tension={0.01}
+          maxCursorMove={120}
+          xGap={12}
+          yGap={36}
+        />
+
+        <div className="relative z-10 min-h-screen flex flex-col">
+          <main className="flex-1 max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8 w-full">
+            <div className="rounded-3xl bg-white/70 backdrop-blur-md border border-white/60 shadow-lg p-6 sm:p-8">
               {/* Header */}
-          <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
+              <header className="flex flex-col gap-4 mb-8">
                 <div>
                   <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Admin Dashboard</h1>
                   <p className="text-lg text-blue-700 mt-2">
@@ -375,9 +396,10 @@ export default function AdminDashboardPage() {
                   </div>
                 </div>
               </div>
-
+            </div>
           </main>
         </div>
+      </div>
     </PageLayout>
   )
 }

src/app/affiliate-links/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useMemo } from 'react'
 import PageLayout from '../components/PageLayout'
+import Waves from '../components/waves'
 
 type Affiliate = {
   id: string
@@ -89,10 +90,30 @@ export default function AffiliateLinksPage() {
 
   return (
     <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
+      <div
-        <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
+        className="relative w-full flex flex-col min-h-screen overflow-hidden"
+        style={{ backgroundImage: 'none', background: 'none' }}
+      >
+        <Waves
+          className="pointer-events-none"
+          lineColor="#0f172a"
+          backgroundColor="rgba(245, 245, 240, 1)"
+          waveSpeedX={0.02}
+          waveSpeedY={0.01}
+          waveAmpX={40}
+          waveAmpY={20}
+          friction={0.9}
+          tension={0.01}
+          maxCursorMove={120}
+          xGap={12}
+          yGap={36}
+        />
+
+        <div className="relative z-10 min-h-screen flex flex-col">
+          <main className="flex-1 max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8 w-full">
+            <div className="rounded-3xl bg-white/70 backdrop-blur-md border border-white/60 shadow-lg p-6 sm:p-8">
               {/* Header (aligned with management pages) */}
-          <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
+              <header className="flex flex-col gap-4 mb-8">
                 <div>
                   <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Affiliate Partners</h1>
                   <p className="text-lg text-blue-700 mt-2">
@@ -187,8 +208,10 @@ export default function AffiliateLinksPage() {
                   })}
                 </div>
               )}
+            </div>
           </main>
         </div>
+      </div>
     </PageLayout>
   )
 }

src/app/components/curvedLoop.tsx

@@ -13,7 +13,7 @@ interface CurvedLoopProps {
 
 const CurvedLoop: FC<CurvedLoopProps> = ({
   marqueeText = '',
-  speed = 2,
+  speed = 1,
   className,
   curveAmount = -50,
   direction = 'left',

src/app/dashboard/page.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
 import useAuthStore from '../store/authStore'
 import Header from '../components/nav/Header'
 import Footer from '../components/Footer'
+import Waves from '../components/waves'
 import { 
   ShoppingBagIcon, 
   UsersIcon, 
@@ -18,6 +19,7 @@ export default function DashboardPage() {
   const router = useRouter()
   const user = useAuthStore(state => state.user)
   const isAuthReady = useAuthStore(state => state.isAuthReady)
+  const isShopEnabled = process.env.NEXT_PUBLIC_SHOW_SHOP !== 'false'
   
   // Redirect if not logged in (only after auth is ready)
   useEffect(() => {
@@ -55,7 +57,9 @@ export default function DashboardPage() {
       description: 'Explore sustainable products',
       icon: ShoppingBagIcon,
       href: '/shop',
-      color: 'bg-blue-500'
+      color: 'bg-blue-500',
+      disabled: !isShopEnabled,
+      disabledText: 'This is currently disabled.'
     },
     {
       title: 'Browse Affiliate Links',
@@ -112,11 +116,31 @@ export default function DashboardPage() {
   ]
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
+    <div
+      className="relative w-full flex flex-col min-h-screen overflow-hidden"
+      style={{ backgroundImage: 'none', background: 'none' }}
+    >
+      <Waves
+        className="pointer-events-none"
+        lineColor="#0f172a"
+        backgroundColor="rgba(245, 245, 240, 1)"
+        waveSpeedX={0.02}
+        waveSpeedY={0.01}
+        waveAmpX={40}
+        waveAmpY={20}
+        friction={0.9}
+        tension={0.01}
+        maxCursorMove={120}
+        xGap={12}
+        yGap={36}
+      />
+
+      <div className="relative z-10 min-h-screen flex flex-col">
         <Header />
 
         <main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
           <div className="max-w-7xl mx-auto">
+            <div className="rounded-3xl bg-white/70 backdrop-blur-md border border-white/60 shadow-lg p-6 sm:p-8">
           {/* Welcome Section */}
           <div className="mb-8">
             <h1 className="text-3xl font-bold text-gray-900">
@@ -172,20 +196,46 @@ export default function DashboardPage() {
               {quickActions.map((action, index) => (
                 <button
                   key={index}
-                  onClick={() => router.push(action.href)}
+                  onClick={() => {
-                  className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow text-left group"
+                    if (!action.disabled) {
+                      router.push(action.href)
+                    }
+                  }}
+                  disabled={Boolean(action.disabled)}
+                  className={`bg-white rounded-lg p-6 border border-gray-200 text-left group transition-all duration-200 ${
+                    action.disabled
+                      ? 'opacity-60 cursor-not-allowed'
+                      : 'shadow-sm hover:shadow-lg hover:-translate-y-1 hover:-translate-y-1 hover:-translate-y-1 transform hover:-translate-y-1'
+                  }`}
                 >
                   <div className="flex items-start">
-                    <div className={`${action.color} rounded-lg p-3 group-hover:scale-105 transition-transform`}>
+                    <div
+                      className={`${action.color} rounded-lg p-3 ${
+                        action.disabled
+                          ? 'grayscale'
+                          : 'group-hover:scale-105 transition-transform'
+                      }`}
+                    >
                       <action.icon className="h-6 w-6 text-white" />
                     </div>
                     <div className="ml-4 flex-1">
-                      <h3 className="text-lg font-medium text-gray-900 group-hover:text-[#8D6B1D] transition-colors">
+                      <h3
+                        className={`text-lg font-medium transition-colors ${
+                          action.disabled
+                            ? 'text-gray-500'
+                            : 'text-gray-900 group-hover:text-[#8D6B1D]'
+                        }`}
+                      >
                         {action.title}
                       </h3>
                       <p className="text-sm text-gray-600 mt-1">
                         {action.description}
                       </p>
+                      {action.disabled && action.disabledText && (
+                        <p className="mt-3 text-xs font-medium text-amber-700">
+                          {action.disabledText}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </button>
@@ -250,9 +300,11 @@ export default function DashboardPage() {
             </div>
             </div>
           </div>
+        </div>
         </main>
 
         <Footer />
       </div>
+    </div>
   )
 }