feat: implement Supabase authentication with Google OAuth

Add Supabase client, middleware, and auth pages; update header for auth state.

Co-authored-by: ASOwnerYT <[email protected]>

components/header.tsx

@@ -2,12 +2,16 @@
 
 import { useState, useEffect } from "react"
 import Link from "next/link"
-import { Menu, X, Cloud } from "lucide-react"
+import { Menu, X, Cloud, User, LogOut } from "lucide-react"
 import { Button } from "@/components/ui/button"
+import { createClient } from "@/lib/supabase/client"
+import type { User as SupabaseUser } from "@supabase/supabase-js"
 
 export function Header() {
   const [isScrolled, setIsScrolled] = useState(false)
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const [user, setUser] = useState<SupabaseUser | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
     const handleScroll = () => {
@@ -17,6 +21,29 @@ export function Header() {
     return () => window.removeEventListener("scroll", handleScroll)
   }, [])
 
+  useEffect(() => {
+    const supabase = createClient()
+    
+    // Get initial session
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      setUser(user)
+      setIsLoading(false)
+    })
+    
+    // Listen for auth changes
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null)
+    })
+    
+    return () => subscription.unsubscribe()
+  }, [])
+
+  const handleSignOut = async () => {
+    const supabase = createClient()
+    await supabase.auth.signOut()
+    setUser(null)
+  }
+
   const navLinks = [
     { href: "#services", label: "Services" },
     { href: "#features", label: "Why Us" },
@@ -59,14 +86,49 @@ export function Header() {
             ))}
           </div>
 
-          {/* CTA Button */}
-          <div className="hidden md:block">
-            <Button
-              asChild
-              className="bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-primary/25"
-            >
-              <Link href="#contact">Get in Touch</Link>
-            </Button>
+          {/* CTA Button / Auth */}
+          <div className="hidden md:flex items-center gap-3">
+            {isLoading ? (
+              <div className="w-24 h-10 bg-muted animate-pulse rounded-md" />
+            ) : user ? (
+              <>
+                <Button
+                  asChild
+                  variant="outline"
+                  className="transition-all duration-300"
+                >
+                  <Link href="/dashboard" className="flex items-center gap-2">
+                    <User className="w-4 h-4" />
+                    Dashboard
+                  </Link>
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleSignOut}
+                  className="text-muted-foreground hover:text-foreground"
+                  aria-label="Sign out"
+                >
+                  <LogOut className="w-4 h-4" />
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button
+                  asChild
+                  variant="ghost"
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <Link href="/auth/login">Sign in</Link>
+                </Button>
+                <Button
+                  asChild
+                  className="bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-primary/25"
+                >
+                  <Link href="#contact">Get in Touch</Link>
+                </Button>
+              </>
+            )}
           </div>
 
           {/* Mobile Menu Button */}
@@ -109,14 +171,48 @@ export function Header() {
               {link.label}
             </Link>
           ))}
-          <Button
-            asChild
-            className="w-full mt-4 bg-primary text-primary-foreground hover:bg-primary/90"
-          >
-            <Link href="#contact" onClick={() => setIsMobileMenuOpen(false)}>
-              Get in Touch
-            </Link>
-          </Button>
+          {user ? (
+            <>
+              <Button
+                asChild
+                className="w-full mt-4 bg-primary text-primary-foreground hover:bg-primary/90"
+              >
+                <Link href="/dashboard" onClick={() => setIsMobileMenuOpen(false)}>
+                  Dashboard
+                </Link>
+              </Button>
+              <Button
+                variant="outline"
+                className="w-full mt-2"
+                onClick={() => {
+                  handleSignOut()
+                  setIsMobileMenuOpen(false)
+                }}
+              >
+                Sign out
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                asChild
+                variant="outline"
+                className="w-full mt-4"
+              >
+                <Link href="/auth/login" onClick={() => setIsMobileMenuOpen(false)}>
+                  Sign in
+                </Link>
+              </Button>
+              <Button
+                asChild
+                className="w-full mt-2 bg-primary text-primary-foreground hover:bg-primary/90"
+              >
+                <Link href="#contact" onClick={() => setIsMobileMenuOpen(false)}>
+                  Get in Touch
+                </Link>
+              </Button>
+            </>
+          )}
         </div>
       </div>
     </header>