src/providers/themeProvider/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 
 interface SocialLink {
   platform: string;
@@ -20,6 +20,40 @@ interface TeamCardProps {
   member: TeamMember;
 }
 
+interface ThemeContextType {
+  defaultButtonVariant?: string;
+  defaultTextAnimation?: string;
+  borderRadius?: string;
+  contentWidth?: string;
+  sizing?: string;
+  background?: string;
+  cardStyle?: string;
+  primaryButtonStyle?: string;
+  secondaryButtonStyle?: string;
+  headingFontWeight?: string;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    return {
+      defaultButtonVariant: 'text-stagger',
+      defaultTextAnimation: 'entrance-slide',
+      borderRadius: 'rounded',
+      contentWidth: 'medium',
+      sizing: 'medium',
+      background: 'circleGradient',
+      cardStyle: 'glass-elevated',
+      primaryButtonStyle: 'gradient',
+      secondaryButtonStyle: 'glass',
+      headingFontWeight: 'normal'
+    };
+  }
+  return context;
+}
+
 function TeamCard({ member }: TeamCardProps) {
   const [isFlipped, setIsFlipped] = useState(false);
 
@@ -136,22 +170,37 @@ export function ThemeProvider({
   const radiusClass = borderRadiusClasses[borderRadius as keyof typeof borderRadiusClasses] || borderRadiusClasses.soft;
   const widthClass = contentWidthClasses[contentWidth as keyof typeof contentWidthClasses] || contentWidthClasses.medium;
 
+  const themeValue: ThemeContextType = {
+    defaultButtonVariant,
+    defaultTextAnimation,
+    borderRadius,
+    contentWidth,
+    sizing,
+    background,
+    cardStyle,
+    primaryButtonStyle,
+    secondaryButtonStyle,
+    headingFontWeight,
+  };
+
   return (
-    <div
-      className={`${bgClass} min-h-screen transition-colors duration-300`}
-      style={{
-        '--default-button-variant': defaultButtonVariant,
-        '--default-text-animation': defaultTextAnimation,
-        '--card-style': cardStyle,
-        '--primary-button-style': primaryButtonStyle,
-        '--secondary-button-style': secondaryButtonStyle,
-        '--heading-font-weight': headingFontWeight,
-      } as React.CSSProperties}
-    >
-      <div className={`${widthClass} mx-auto px-4 sm:px-6 lg:px-8`}>
-        {children}
+    <ThemeContext.Provider value={themeValue}>
+      <div
+        className={`${bgClass} min-h-screen transition-colors duration-300`}
+        style={{
+          '--default-button-variant': defaultButtonVariant,
+          '--default-text-animation': defaultTextAnimation,
+          '--card-style': cardStyle,
+          '--primary-button-style': primaryButtonStyle,
+          '--secondary-button-style': secondaryButtonStyle,
+          '--heading-font-weight': headingFontWeight,
+        } as React.CSSProperties}
+      >
+        <div className={`${widthClass} mx-auto px-4 sm:px-6 lg:px-8`}>
+          {children}
+        </div>
       </div>
-    </div>
+    </ThemeContext.Provider>
   );
 }
 

src/tag/Tag.tsx

@@ -45,18 +45,15 @@ export default function Tag({ members = defaultMembers }: TagProps) {
               <div
                 className="relative w-full h-full transition-transform duration-500 transform-gpu"
                 style={{
-                  transformStyle: "preserve-3d",
-                  transform: flipped[member.id]
+                  transformStyle: "preserve-3d",                  transform: flipped[member.id]
                     ? "rotateY(180deg)"
-                    : "rotateY(0deg)",
-                }}
+                    : "rotateY(0deg)"}}
               >
                 {/* Front Side */}
                 <div
                   className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col items-center justify-center"
                   style={{
-                    backfaceVisibility: "hidden",
-                  }}
+                    backfaceVisibility: "hidden"}}
                 >
                   <div className="w-32 h-32 mb-4 rounded-full overflow-hidden bg-gray-200">
                     <img
@@ -76,9 +73,7 @@ export default function Tag({ members = defaultMembers }: TagProps) {
                 <div
                   className="absolute w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-lg p-6 flex flex-col items-center justify-center"
                   style={{
-                    backfaceVisibility: "hidden",
-                    transform: "rotateY(180deg)",
-                  }}
+                    backfaceVisibility: "hidden",                    transform: "rotateY(180deg)"}}
                 >
                   <h3 className="text-2xl font-bold text-white mb-6 text-center">
                     {member.name}
@@ -139,39 +134,18 @@ export default function Tag({ members = defaultMembers }: TagProps) {
 
 const defaultMembers: TeamMember[] = [
   {
-    id: "1",
-    name: "Sarah Johnson",
-    role: "Lead Designer",
-    image:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop",
-    social: {
-      twitter: "https://twitter.com",
-      linkedin: "https://linkedin.com",
-      email: "sarah@example.com",
-    },
+    id: "1",    name: "Sarah Johnson",    role: "Lead Designer",    image:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop",    social: {
+      twitter: "https://twitter.com",      linkedin: "https://linkedin.com",      email: "sarah@example.com"},
   },
   {
-    id: "2",
-    name: "Michael Chen",
-    role: "Full Stack Developer",
-    image:
-      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop",
-    social: {
-      github: "https://github.com",
-      linkedin: "https://linkedin.com",
-      email: "michael@example.com",
-    },
+    id: "2",    name: "Michael Chen",    role: "Full Stack Developer",    image:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop",    social: {
+      github: "https://github.com",      linkedin: "https://linkedin.com",      email: "michael@example.com"},
   },
   {
-    id: "3",
-    name: "Emma Rodriguez",
-    role: "Product Manager",
-    image:
-      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop",
-    social: {
-      twitter: "https://twitter.com",
-      linkedin: "https://linkedin.com",
-      email: "emma@example.com",
-    },
+    id: "3",    name: "Emma Rodriguez",    role: "Product Manager",    image:
+      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop",    social: {
+      twitter: "https://twitter.com",      linkedin: "https://linkedin.com",      email: "emma@example.com"},
   },
 ];