feat: fixed dyamic component issue

Author: 4darsh-Dev

optiblogai-site/package-lock.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.5",
-    "lottie-react": "^2.4.1",
     "lucide-react": "^0.525.0",
     "next": "15.4.1",
     "react": "19.1.0",

optiblogai-site/package.json

@@ -5,13 +5,19 @@ import { Card, CardContent } from "@/app/components/ui/card";
 import { ChevronLeft, ChevronRight, Play, Pause } from "lucide-react";
 import { cn } from "@/app/lib/utils";
 
+import LiveEditorPreview from "@/app/components/FeaturePreviews/LiveEditorPreview";
+import PerformanceAnalyticsPreview from "@/app/components/FeaturePreviews/PerformanceAnalyticsPreview";
+import TeamCollaborationPreview from "@/app/components/FeaturePreviews/TeamCollaborationPreview";
+import SEOOptimizationPreview from "@/app/components/FeaturePreviews/SEOOptimizationPreview";
+
 interface Feature {
   id: string;
   title: string;
   description: string;
   image: string;
   points: string[];
   color: string;
+  Component : React.FC;
 }
 
 const FeatureHighlights: React.FC = () => {
@@ -32,6 +38,7 @@ const FeatureHighlights: React.FC = () => {
         "Plagiarism detection",
       ],
       color: "bg-gradient-to-br from-[var(--color-primary)] to-blue-600",
+      Component: LiveEditorPreview,
     },
     {
       id: "seo-optimization",
@@ -46,6 +53,7 @@ const FeatureHighlights: React.FC = () => {
         "SERP preview",
       ],
       color: "bg-gradient-to-br from-[var(--color-secondary)] to-green-600",
+      Component: SEOOptimizationPreview,
     },
     {
       id: "analytics",
@@ -60,6 +68,7 @@ const FeatureHighlights: React.FC = () => {
         "Growth insights",
       ],
       color: "bg-gradient-to-br from-[var(--color-accent)] to-orange-600",
+      Component: PerformanceAnalyticsPreview,
     },
     {
       id: "collaboration",
@@ -74,6 +83,7 @@ const FeatureHighlights: React.FC = () => {
         "Role-based permissions",
       ],
       color: "bg-gradient-to-br from-purple-600 to-pink-600",
+      Component: TeamCollaborationPreview,
     },
   ];
 
@@ -94,7 +104,7 @@ const FeatureHighlights: React.FC = () => {
     if (!isPlaying) return;
     const interval = setInterval(() => {
       nextFeature();
-    }, 5000);
+    }, 10000);
     return () => clearInterval(interval);
   }, [isPlaying]);
 
@@ -180,21 +190,22 @@ const FeatureHighlights: React.FC = () => {
               </button>
             </div>
           </div>
-
+          
           {/* Feature Image */}
           <div className="order-1 lg:order-2">
-            <Card className="shadow-xl overflow-hidden">
-              <CardContent className="p-0">
-                <img
-                  src={features[activeFeature].image}
-                  alt={features[activeFeature].title}
-                  className="w-full h-auto object-cover"
-                />
-              
-              </CardContent>
-            </Card>
+            {(() => {
+              const DynamicPreview = features[activeFeature].Component;
+              return (
+                <Card className="shadow-xl overflow-hidden">
+                  <CardContent className="p-0">
+                    <DynamicPreview />
+                  </CardContent>
+                </Card>
+              );
+            })()}
           </div>
-        </div>
+          </div>
+
       </div>
     </section>
   );

optiblogai-site/src/app/components/homepage/FeatureHighlights.tsx

@@ -134,17 +134,17 @@ const GettingStartedCTA: React.FC = () => {
               </div>
             </div>
 
-            <div className="bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] rounded-xl p-8 text-center">
-              <div className="text-4xl font-bold text-primary mb-2">100%</div>
-              <div className="text-lg font-semibold text-gray-900 mb-2">Free & Open Source</div>
-              <p className="text-gray-600 mb-6">
+            <div className="bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] rounded-xl text-white p-8 text-center">
+              <div className="text-4xl text-white font-bold  mb-2">100%</div>
+              <div className="text-lg font-semibold text-white mb-2">Free & Open Source</div>
+              <p className="text-gray-white mb-6">
                 No hidden costs, no vendor lock-in. Use OptiBlogAi however you want, whenever you want.
               </p>
               <a
                 href={SITE_CONFIG.links.github}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center text-primary hover:text-primary/80 font-medium"
+                className="inline-flex items-center text-white font-medium"
               >
                 Star us on GitHub
                 <ArrowRight className="w-4 h-4 ml-2" />