beautify: added waves bg

2026-01-14 01:22:08 +01:00 · 2026-01-14 01:22:08 +01:00 · 7defd9e596
commit 7defd9e596
parent 94fbd080d3
4 changed files with 337 additions and 240 deletions
--- a/src/app/admin/page.tsx
+++ b/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">
-        <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
+      <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">
+          <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>
  )
 }
--- a/src/app/affiliate-links/page.tsx
+++ b/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">
-        <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
+      <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">
+          <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>
  )
 }
--- a/src/app/components/curvedLoop.tsx
+++ b/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',
--- a/src/app/dashboard/page.tsx
+++ b/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)}
-                  className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow text-left group"
+                  onClick={() => {
+                    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>
  )
 }