Refactor TechnologyDemosSection

src/components/TechnologyDemosSection/TechnologyDemosSection.tsx

@@ -12,15 +12,13 @@ const TechDemoCard: React.FC<TechDemoCardProps> = ({
   description,
 }) => {
   return (
-    <Card className="bg-card border-border hover:bg-accent/50 transition-colors">
-      <CardContent className="p-6 text-center">
-        <div className="mb-4 flex justify-center">
-          <div className="p-3 rounded-full bg-primary/10 text-primary">
-            {icon}
-          </div>
+    <Card>
+      <CardContent className="p-6">
+        <div className="mb-4 ">
+          <div className="rounded-full text-primary py-2">{icon}</div>
         </div>
-        <h3 className="text-lg font-semibold text-foreground mb-2">{title}</h3>
-        <p className="text-muted-foreground text-sm">{description}</p>
+        <h3 className="text-xl text-primary mb-2">{title}</h3>
+        <p className="text-muted-foreground text-md mb-4">{description}</p>
       </CardContent>
     </Card>
   );
@@ -29,45 +27,45 @@ const TechDemoCard: React.FC<TechDemoCardProps> = ({
 const TechnologyDemosSection: React.FC<TechnologyDemosSectionProps> = () => {
   const demos: TechDemoCardProps[] = [
     {
-      icon: <Zap className="h-6 w-6" />,
+      icon: <Zap className="h-12 w-12 stroke-[1.5]" />,
       title: "Real-time Application Generation",
       description: "Watch applications come to life in real-time",
     },
     {
-      icon: <Database className="h-6 w-6" />,
+      icon: <Database className="h-12 w-12 stroke-[1.5]" />,
       title: "Database Schema Creation",
       description: "Automated database design and optimization",
     },
     {
-      icon: <Shield className="h-6 w-6" />,
+      icon: <Shield className="h-12 w-12 stroke-[1.5]" />,
       title: "Authentication System Implementation",
       description: "Complete security implementation in minutes",
     },
     {
-      icon: <Code className="h-6 w-6" />,
+      icon: <Code className="h-12 w-12 stroke-[1.5]" />,
       title: "API Development & Documentation",
       description: "Automatic API creation with full documentation",
     },
     {
-      icon: <Upload className="h-6 w-6" />,
+      icon: <Upload className="h-12 w-12 stroke-[1.5]" />,
       title: "Deployment & Hosting Automation",
       description: "One-click deployment to production",
     },
     {
-      icon: <Users className="h-6 w-6" />,
+      icon: <Users className="h-12 w-12 stroke-[1.5]" />,
       title: "User Management Systems",
       description: "Complete user lifecycle management",
     },
   ];
 
   return (
-    <section className="py-20 px-4 sm:px-6 lg:px-8 bg-muted/30">
+    <section className="py-20 px-4 sm:px-6 lg:px-8 bg-background">
       <div className="container mx-auto">
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">
+          <h2 className="text-3xl font-semibold text-foreground mb-2">
             Technology Demonstrations
           </h2>
-          <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
+          <p className="text-lg font-semibold text-muted-foreground max-w-120 mx-auto">
             Experience the power of our Ivy Framework through interactive
             demonstrations
           </p>

src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 py-6 shadow-sm",
         className,
       )}
       {...props}

src/index.css

@@ -85,7 +85,7 @@
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.16 0 0);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);