feat: Enhance HomePage and SiteList with new UI components and improved loading overlay

2026-01-16 17:17:31 +01:00
parent d6140181ea
commit 0fb982a4d9
3 changed files with 123 additions and 51 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,9 +4,13 @@ import { useAuth } from '@/lib/auth/context'
 import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
 import LoadingOverlay from '@/components/LoadingOverlay'
 import SiteList from '@/components/sites/SiteList'
+import { Button } from '@ciphera-net/ui'
+import { BarChartIcon, LockClosedIcon, LightningBoltIcon } from '@radix-ui/react-icons'
+import { useRouter } from 'next/navigation'

 export default function HomePage() {
  const { user, loading } = useAuth()
+  const router = useRouter()

  if (loading) {
    return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
@@ -14,27 +18,72 @@ export default function HomePage() {

  if (!user) {
    return (
-      <div className="container mx-auto px-4 py-8">
-        <div className="max-w-2xl mx-auto text-center py-16">
-          <h1 className="text-4xl font-bold text-neutral-900 dark:text-white mb-4">
-            Welcome to Ciphera Analytics
+      <div className="flex flex-col items-center justify-center min-h-[calc(100vh-200px)] py-12 px-4">
+        {/* Hero Section */}
+        <div className="max-w-4xl mx-auto text-center space-y-8">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-orange/10 text-brand-orange text-sm font-medium mb-4">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-orange opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-brand-orange"></span>
+            </span>
+            Privacy-First Analytics
+          </div>
+          
+          <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900 dark:text-white">
+            Simple analytics for <br />
+            <span className="text-brand-orange">privacy-conscious</span> apps.
          </h1>
-          <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8">
-            Privacy-first web analytics. No cookies, no tracking. GDPR compliant.
+          
+          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+            Respect your users' privacy while getting the insights you need. 
+            No cookies, no IP tracking, fully GDPR compliant.
          </p>
-          <div className="flex gap-4 justify-center">
-            <button
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
+            <Button
              onClick={() => initiateOAuthFlow()}
-              className="btn-primary"
+              className="px-8 py-6 text-lg min-w-[200px]"
            >
-              Sign In
-            </button>
-            <button
+              Get Started
+            </Button>
+            <Button
+              variant="secondary"
              onClick={() => initiateSignupFlow()}
-              className="btn-secondary"
+              className="px-8 py-6 text-lg min-w-[200px]"
            >
-              Sign Up
-            </button>
+              Create Account
+            </Button>
+          </div>
+
+          {/* Features Grid */}
+          <div className="grid md:grid-cols-3 gap-8 pt-16 text-left">
+            <div className="p-6 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
+              <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
+                <LockClosedIcon className="w-6 h-6" />
+              </div>
+              <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Privacy First</h3>
+              <p className="text-neutral-600 dark:text-neutral-400">
+                We don't track personal data. No IP addresses, no fingerprints, no cookies.
+              </p>
+            </div>
+            <div className="p-6 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
+              <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
+                <BarChartIcon className="w-6 h-6" />
+              </div>
+              <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Simple Insights</h3>
+              <p className="text-neutral-600 dark:text-neutral-400">
+                Get the metrics that matter without the clutter. Page views, visitors, and sources.
+              </p>
+            </div>
+            <div className="p-6 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
+              <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
+                <LightningBoltIcon className="w-6 h-6" />
+              </div>
+              <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Lightweight</h3>
+              <p className="text-neutral-600 dark:text-neutral-400">
+                Our script is less than 1kb. It won't slow down your site or affect your SEO.
+              </p>
+            </div>
          </div>
        </div>
      </div>
@@ -43,13 +92,18 @@ export default function HomePage() {

  return (
    <div className="container mx-auto px-4 py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
-          Your Sites
-        </h1>
-        <p className="text-neutral-600 dark:text-neutral-400">
-          Manage your analytics sites and view insights
-        </p>
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
+            Your Sites
+          </h1>
+          <p className="text-neutral-600 dark:text-neutral-400">
+            Manage your analytics sites and view insights
+          </p>
+        </div>
+        <Button onClick={() => router.push('/sites/new')}>
+          + Add New Site
+        </Button>
      </div>
      <SiteList />
    </div>
--- a/components/LoadingOverlay.tsx
+++ b/components/LoadingOverlay.tsx
@@ -1,28 +1,42 @@
 'use client'

-import Image from 'next/image'
+import React, { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'

 interface LoadingOverlayProps {
-  logoSrc: string
-  title: string
+  logoSrc?: string
+  title?: string
 }

-export default function LoadingOverlay({ logoSrc, title }: LoadingOverlayProps) {
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 dark:bg-neutral-950/80 backdrop-blur-sm">
-      <div className="text-center">
-        <div className="mb-4 flex justify-center">
-          <Image
-            src={logoSrc}
-            alt={title}
-            width={64}
-            height={64}
-            className="animate-pulse"
+export default function LoadingOverlay({ 
+  logoSrc = "/ciphera_icon_no_margins.png", 
+  title = "Ciphera Analytics" 
+}: LoadingOverlayProps) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    return () => setMounted(false)
+  }, [])
+
+  if (!mounted) return null
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-white dark:bg-neutral-950 animate-in fade-in duration-200">
+      <div className="flex flex-col items-center gap-6">
+        <div className="flex items-center gap-3">
+          <img 
+            src={logoSrc} 
+            alt={title} 
+            className="h-12 w-auto object-contain"
          />
+          <span className="text-3xl font-bold tracking-tight text-neutral-900 dark:text-white">
+            {title}
+          </span>
        </div>
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-brand-orange mx-auto mb-4"></div>
-        <p className="text-neutral-600 dark:text-neutral-400">Loading...</p>
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-brand-orange dark:border-neutral-800 dark:border-t-brand-orange" />
      </div>
-    </div>
+    </div>,
+    document.body
  )
 }
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -5,6 +5,8 @@ import { useRouter } from 'next/navigation'
 import { listSites, deleteSite, type Site } from '@/lib/api/sites'
 import { toast } from 'sonner'
 import LoadingOverlay from '../LoadingOverlay'
+import { Button } from '@ciphera-net/ui'
+import { BarChartIcon, TrashIcon, PlusIcon } from '@radix-ui/react-icons'

 export default function SiteList() {
  const [sites, setSites] = useState<Site[]>([])
@@ -50,12 +52,12 @@ export default function SiteList() {
    return (
      <div className="text-center py-12">
        <p className="text-neutral-600 dark:text-neutral-400 mb-4">No sites yet. Create your first site to get started.</p>
-        <button
+        <Button
          onClick={() => router.push('/sites/new')}
-          className="btn-primary"
        >
+          <PlusIcon className="w-4 h-4 mr-2" />
          Create Site
-        </button>
+        </Button>
      </div>
    )
  }
@@ -74,27 +76,29 @@ export default function SiteList() {
            {site.domain}
          </p>
          <div className="flex gap-2">
-            <button
+            <Button
              onClick={() => router.push(`/sites/${site.id}`)}
-              className="btn-primary flex-1 text-sm"
+              className="flex-1 text-sm"
            >
+              <BarChartIcon className="w-4 h-4 mr-2" />
              View Dashboard
-            </button>
-            <button
+            </Button>
+            <Button
+              variant="secondary"
              onClick={() => handleDelete(site.id)}
-              className="btn-secondary text-sm px-4"
+              className="text-sm px-4"
            >
-              Delete
-            </button>
+              <TrashIcon className="w-4 h-4" />
+            </Button>
          </div>
        </div>
      ))}
      <button
        onClick={() => router.push('/sites/new')}
-        className="bg-white dark:bg-neutral-900 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-xl p-6 hover:border-brand-orange transition-colors text-neutral-600 dark:text-neutral-400"
+        className="bg-white dark:bg-neutral-900 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-xl p-6 hover:border-brand-orange transition-colors text-neutral-600 dark:text-neutral-400 w-full h-full min-h-[160px] flex items-center justify-center"
      >
        <div className="text-center">
-          <div className="text-2xl mb-2">+</div>
+          <div className="text-2xl mb-2 mx-auto w-8 h-8 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">+</div>
          <div>Add New Site</div>
        </div>
      </button>