changed buttons

src/components/Events.tsx

@@ -203,7 +203,7 @@ export function Events() {
               <Button variant="secondary" size="lg" onClick={() => setShowContactForm(true)}>
                 Send Melding
               </Button>
-              <Button variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+              <Button variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary bg-white/10 backdrop-blur-sm">
                 Bli Medlem
               </Button>
             </div>

src/components/Header.tsx

@@ -25,12 +25,14 @@ export function Header() {
             <Button variant="secondary" size="sm">Join Club</Button>
           </nav>
 
-          <button 
+          <Button 
+            variant="ghost"
+            size="icon"
             className="md:hidden"
             onClick={() => setIsMenuOpen(!isMenuOpen)}
           >
             {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button>
+          </Button>
         </div>
 
         {isMenuOpen && (

src/components/Hero.tsx

@@ -26,10 +26,10 @@ export function Hero() {
           </p>
 
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-8">
-            <Button size="lg" variant="secondary" className="text-lg px-8 py-4">
+            <Button size="lg" variant="secondary">
               Join the Club
             </Button>
-            <Button size="lg" variant="outline" className="text-lg px-8 py-4 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            <Button size="lg" variant="outline" className="text-lg px-8 py-4 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary bg-white/10 backdrop-blur-sm">
               View Events
             </Button>
           </div>

src/components/MerchShop.tsx

@@ -55,7 +55,7 @@ export function MerchShop() {
                 <p className="text-sm text-muted-foreground mb-3">{item.description}</p>
                 <div className="flex items-center justify-between">
                   <span className="text-lg font-bold">{item.price}</span>
-                  <Button size="sm" className="bg-primary text-primary-foreground hover:bg-primary/90">
+                  <Button size="sm">
                     Add to Cart
                   </Button>
                 </div>
@@ -65,7 +65,7 @@ export function MerchShop() {
         </div>
 
         <div className="text-center mt-12">
-          <Button size="lg" variant="outline" className="border-primary text-primary hover:bg-primary hover:text-primary-foreground">
+          <Button size="lg" variant="outline">
             View All Products
           </Button>
         </div>

src/components/Navigation.tsx

@@ -17,7 +17,7 @@ export function Navigation() {
           <a href="#contact" className="hover:text-primary transition-colors">Contact</a>
         </div>
 
-        <Button className="bg-primary text-primary-foreground hover:bg-primary/90">
+        <Button>
           Join Now
         </Button>
       </div>

src/components/Shop.tsx

@@ -272,9 +272,13 @@ export function Shop() {
                     Sale
                   </Badge>
                 )}
-                <button className="absolute top-3 right-3 z-10 p-2 bg-white/80 hover:bg-white rounded-full transition-colors">
+                <Button 
+                  variant="ghost" 
+                  size="icon"
+                  className="absolute top-3 right-3 z-10 bg-white/80 hover:bg-white"
+                >
                   <Heart className="w-4 h-4" />
-                </button>
+                </Button>
                 <ImageWithFallback
                   src={product.image}
                   alt={product.name}

src/components/StravaIntegration.tsx

@@ -249,7 +249,7 @@ export function StravaIntegration() {
               <Button variant="secondary" size="lg" onClick={handleJoinClub}>
                 Join Strava Club
               </Button>
-              <Button variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+              <Button variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary bg-white/10 backdrop-blur-sm">
                 Learn More About Benefits
               </Button>
             </div>

src/components/UpcomingEvents.tsx

@@ -1,4 +1,5 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
 import { Calendar, MapPin, Users } from "lucide-react";
 
@@ -70,9 +71,9 @@ export function UpcomingEvents() {
                     <span>{event.location}</span>
                   </div>
                 </div>
-                <button className="w-full mt-4 bg-primary text-primary-foreground py-2 rounded-md hover:bg-primary/90 transition-colors">
+                <Button className="w-full mt-4">
                   Join Event
-                </button>
+                </Button>
               </CardContent>
             </Card>
           ))}

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "./utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all !cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -50,6 +50,7 @@ function Button({
     <Comp
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
+      style={{ cursor: 'pointer' }}
       {...props}
     />
   );