Update src/providers/themeProvider/ThemeProvider.tsx

src/providers/themeProvider/ThemeProvider.tsx

@@ -1,23 +1,19 @@
 'use client';
 
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, ReactNode } from 'react';
 
-interface SocialLink {
-  platform: string;
-  url: string;
-  icon: string;
-}
-
-interface TeamMember {
-  id: string;
-  name: string;
-  role: string;
-  image: string;
-  socialLinks: SocialLink[];
-}
-
-interface TeamCardProps {
-  member: TeamMember;
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultButtonVariant?: string;
+  defaultTextAnimation?: string;
+  borderRadius?: 'soft' | 'medium' | 'sharp';
+  contentWidth?: 'small' | 'medium' | 'large';
+  sizing?: string;
+  background?: string;
+  cardStyle?: string;
+  primaryButtonStyle?: string;
+  secondaryButtonStyle?: string;
+  headingFontWeight?: string;
 }
 
 interface ThemeContextType {
@@ -35,141 +31,19 @@ interface ThemeContextType {
 
 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);
-
-  return (
-    <div
-      className="h-80 w-full cursor-pointer perspective bg-glass-elevated rounded-lg border border-accent/20"
-      onMouseEnter={() => setIsFlipped(true)}
-      onMouseLeave={() => setIsFlipped(false)}
-    >
-      <div
-        className="relative w-full h-full transition-transform duration-500 transform-gpu"
-        style={{
-          transformStyle: 'preserve-3d',
-          transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
-        }}
-      >
-        {/* Front Side */}
-        <div
-          className="absolute w-full h-full bg-gradient-to-br from-slate-900 to-slate-800 rounded-lg p-6 flex flex-col items-center justify-center border border-slate-700"
-          style={{ backfaceVisibility: 'hidden' }}
-        >
-          <div className="w-24 h-24 rounded-full bg-slate-700 mb-4 overflow-hidden flex items-center justify-center">
-            <img
-              src={member.image}
-              alt={member.name}
-              className="w-full h-full object-cover"
-            />
-          </div>
-          <h3 className="text-xl font-semibold text-white text-center">
-            {member.name}
-          </h3>
-          <p className="text-sm text-slate-400 text-center mt-2">
-            {member.role}
-          </p>
-        </div>
-
-        {/* Back Side */}
-        <div
-          className="absolute w-full h-full bg-gradient-to-br from-blue-900 to-blue-800 rounded-lg p-6 flex flex-col items-center justify-center border border-blue-700"
-          style={{
-            backfaceVisibility: 'hidden',
-            transform: 'rotateY(180deg)',
-          }}
-        >
-          <h4 className="text-white font-semibold mb-4 text-center">
-            Connect
-          </h4>
-          <div className="flex flex-wrap gap-3 justify-center">
-            {member.socialLinks.map((link) => (
-              <a
-                key={link.platform}
-                href={link.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="w-10 h-10 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 flex items-center justify-center transition-all duration-300 text-white text-sm font-bold"
-                title={link.platform}
-              >
-                {link.icon}
-              </a>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-interface ThemeProviderProps {
-  children: React.ReactNode;
-  defaultButtonVariant?: string;
-  defaultTextAnimation?: string;
-  borderRadius?: string;
-  contentWidth?: string;
-  sizing?: string;
-  background?: string;
-  cardStyle?: string;
-  primaryButtonStyle?: string;
-  secondaryButtonStyle?: string;
-  headingFontWeight?: string;
-}
-
 export function ThemeProvider({
   children,
-  defaultButtonVariant,
-  defaultTextAnimation,
-  borderRadius,
-  contentWidth,
-  sizing,
-  background,
-  cardStyle,
-  primaryButtonStyle,
-  secondaryButtonStyle,
-  headingFontWeight,
+  defaultButtonVariant = 'default',
+  defaultTextAnimation = 'none',
+  borderRadius = 'medium',
+  contentWidth = 'medium',
+  sizing = 'medium',
+  background = 'light',
+  cardStyle = 'solid',
+  primaryButtonStyle = 'solid',
+  secondaryButtonStyle = 'outline',
+  headingFontWeight = 'bold',
 }: ThemeProviderProps) {
-  const backgroundClasses = {
-    aurora: 'bg-gradient-to-br from-slate-950 via-purple-900 to-slate-950',
-    light: 'bg-white',
-    dark: 'bg-slate-900',
-  };
-
-  const borderRadiusClasses = {
-    soft: 'rounded-lg',
-    sharp: 'rounded-none',
-    smooth: 'rounded-2xl',
-  };
-
-  const contentWidthClasses = {
-    small: 'max-w-2xl',
-    medium: 'max-w-6xl',
-    large: 'max-w-7xl',
-  };
-
-  const bgClass = backgroundClasses[background as keyof typeof backgroundClasses] || backgroundClasses.aurora;
-  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,
@@ -183,20 +57,30 @@ export function ThemeProvider({
     headingFontWeight,
   };
 
+  const borderRadiusClass = {
+    soft: 'rounded-2xl',
+    medium: 'rounded-lg',
+    sharp: 'rounded-none',
+  }[borderRadius] || 'rounded-lg';
+
+  const contentWidthClass = {
+    small: 'max-w-2xl',
+    medium: 'max-w-4xl',
+    large: 'max-w-6xl',
+  }[contentWidth] || 'max-w-4xl';
+
+  const backgroundClass = {
+    aurora: 'bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900',
+    light: 'bg-white',
+    dark: 'bg-gray-900',
+  }[background] || 'bg-white';
+
   return (
     <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}
+        className={`${backgroundClass} ${borderRadiusClass} min-h-screen transition-colors duration-300`}
       >
-        <div className={`${widthClass} mx-auto px-4 sm:px-6 lg:px-8`}>
+        <div className={`${contentWidthClass} mx-auto px-4 sm:px-6 lg:px-8`}>
           {children}
         </div>
       </div>
@@ -204,12 +88,10 @@ export function ThemeProvider({
   );
 }
 
-export function TeamCardGrid({ members }: { members: TeamMember[] }) {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 py-12">
-      {members.map((member) => (
-        <TeamCard key={member.id} member={member} />
-      ))}
-    </div>
-  );
+export function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
 }