Add more components and theming

Add new components and implement free/premium tier separation. Focus on sleek design and premium features for the paid version.

Author: lovable-dev[bot]

src/App.tsx

@@ -26,20 +26,25 @@ import DashboardWidgets from "./pages/showcase/DashboardWidgets";
 import ModernGallery from "./pages/showcase/ModernGallery";
 import AnimationShowcase from "./pages/showcase/AnimationShowcase";
 import UniqueComponents from "./pages/showcase/UniqueComponents";
+import EcommerceShowcase from "./pages/showcase/EcommerceShowcase";
+import CryptoFinance from "./pages/showcase/CryptoFinance";
+import SocialMedia from "./pages/showcase/SocialMedia";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
 import NotFound from "./pages/NotFound";
 import { HelmetProvider } from "react-helmet-async";
 import { ThemeProvider } from "./contexts/ThemeContext";
 import { LanguageProvider } from "./contexts/LanguageContext";
+import { PremiumProvider } from "./contexts/PremiumContext";
 
 const queryClient = new QueryClient();
 
 const App = () => (
   <HelmetProvider>
     <ThemeProvider>
       <LanguageProvider>
-        <QueryClientProvider client={queryClient}>
+        <PremiumProvider>
+          <QueryClientProvider client={queryClient}>
           <TooltipProvider>
             <Toaster />
             <Sonner />
@@ -72,7 +77,9 @@ const App = () => (
                   <Route path="/showcase/gallery" element={<ModernGallery />} />
                   <Route path="/showcase/animations" element={<AnimationShowcase />} />
                   <Route path="/showcase/unique" element={<UniqueComponents />} />
-                  <Route path="/showcase/unique" element={<UniqueComponents />} />
+                  <Route path="/showcase/ecommerce" element={<EcommerceShowcase />} />
+                  <Route path="/showcase/crypto-finance" element={<CryptoFinance />} />
+                  <Route path="/showcase/social-media" element={<SocialMedia />} />
                   <Route path="/old-showcase" element={<ComponentShowcase />} />
                 </Route>
                 {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
@@ -81,6 +88,7 @@ const App = () => (
             </BrowserRouter>
           </TooltipProvider>
         </QueryClientProvider>
+      </PremiumProvider>
       </LanguageProvider>
     </ThemeProvider>
   </HelmetProvider>

src/contexts/PremiumContext.tsx

@@ -0,0 +1,61 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface PremiumContextType {
+  isPremiumUser: boolean;
+  upgradeUser: () => void;
+  downgradeUser: () => void;
+  premiumFeatures: string[];
+}
+
+const PremiumContext = createContext<PremiumContextType | undefined>(undefined);
+
+export const usePremium = () => {
+  const context = useContext(PremiumContext);
+  if (context === undefined) {
+    throw new Error('usePremium must be used within a PremiumProvider');
+  }
+  return context;
+};
+
+interface PremiumProviderProps {
+  children: ReactNode;
+}
+
+export const PremiumProvider: React.FC<PremiumProviderProps> = ({ children }) => {
+  const [isPremiumUser, setIsPremiumUser] = useState(false);
+
+  const premiumFeatures = [
+    'Advanced Charts & Analytics',
+    'E-commerce Components',
+    'Crypto & Finance Dashboard',
+    'Social Media Interface',
+    'Premium UI Components',
+    'Export Code Functionality',
+    'Priority Support',
+    'Custom Themes',
+    'Advanced Animations',
+    'Real-time Features'
+  ];
+
+  const upgradeUser = () => {
+    setIsPremiumUser(true);
+    // Here you would typically integrate with your payment system
+  };
+
+  const downgradeUser = () => {
+    setIsPremiumUser(false);
+  };
+
+  const value: PremiumContextType = {
+    isPremiumUser,
+    upgradeUser,
+    downgradeUser,
+    premiumFeatures
+  };
+
+  return (
+    <PremiumContext.Provider value={value}>
+      {children}
+    </PremiumContext.Provider>
+  );
+};

src/pages/showcase/ComponentShowcaseIndex.tsx

@@ -14,8 +14,10 @@ import {
 } from "lucide-react";
 import { Link } from "react-router-dom";
 import { useLanguage } from "@/contexts/LanguageContext";
+import { usePremium } from "@/contexts/PremiumContext";
 
 export default function ComponentShowcaseIndex() {
+  const { isPremiumUser, upgradeUser } = usePremium();
   const { t } = useLanguage();
 
   const showcasePages = [