From 86072cdffadc8a316adbd7e21b91dbc0fb43b712 Mon Sep 17 00:00:00 2001
From: Artem <la.artem.ser@gmail.com>
Date: Sun, 19 Oct 2025 17:24:04 +0300
Subject: [PATCH 1/5] feat: fix background styling to use correct bg-background
 variant

---
 .../TechnologyDemosSection/TechnologyDemosSection.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
index b1fab71..ee9bba0 100644
--- a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
+++ b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
@@ -61,7 +61,7 @@ const TechnologyDemosSection: React.FC<TechnologyDemosSectionProps> = () => {
   ];
 
   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">

From b61c162ce7e24ca6c493903e6b7d424bd6395400 Mon Sep 17 00:00:00 2001
From: Artem <la.artem.ser@gmail.com>
Date: Sun, 19 Oct 2025 17:39:36 +0300
Subject: [PATCH 2/5] feat: change section title font size and weight

---
 .../TechnologyDemosSection/TechnologyDemosSection.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
index ee9bba0..87e1996 100644
--- a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
+++ b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
@@ -64,10 +64,10 @@ const TechnologyDemosSection: React.FC<TechnologyDemosSectionProps> = () => {
     <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 text-muted-foreground max-w-108 mx-auto">
             Experience the power of our Ivy Framework through interactive
             demonstrations
           </p>

From 75da617bc27b39b4efb1b202e7b1ec3d0fea9ccd Mon Sep 17 00:00:00 2001
From: Artem <la.artem.ser@gmail.com>
Date: Sun, 19 Oct 2025 17:46:43 +0300
Subject: [PATCH 3/5] feat: remove card borders and update background colors

---
 .../TechnologyDemosSection/TechnologyDemosSection.tsx           | 2 +-
 src/components/ui/card.tsx                                      | 2 +-
 src/index.css                                                   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
index 87e1996..b2800c1 100644
--- a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
+++ b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
@@ -12,7 +12,7 @@ const TechDemoCard: React.FC<TechDemoCardProps> = ({
   description,
 }) => {
   return (
-    <Card className="bg-card border-border hover:bg-accent/50 transition-colors">
+    <Card>
       <CardContent className="p-6 text-center">
         <div className="mb-4 flex justify-center">
           <div className="p-3 rounded-full bg-primary/10 text-primary">
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 113d66c..058abd8 100644
--- a/src/components/ui/card.tsx
+++ b/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 rounded-xl py-6 shadow-sm",
         className,
       )}
       {...props}
diff --git a/src/index.css b/src/index.css
index 3b2334e..965d639 100644
--- a/src/index.css
+++ b/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.1398 0 0);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);

From d8408243766b5c5ad6dc899dbd55713715ad4392 Mon Sep 17 00:00:00 2001
From: Artem <la.artem.ser@gmail.com>
Date: Sun, 19 Oct 2025 18:04:38 +0300
Subject: [PATCH 4/5] feat: improve better styling and colors

---
 .../TechnologyDemosSection.tsx                | 24 +++++++++----------
 src/components/ui/card.tsx                    |  2 +-
 src/index.css                                 |  2 +-
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
index b2800c1..9dfc247 100644
--- a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
+++ b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
@@ -13,14 +13,12 @@ const TechDemoCard: React.FC<TechDemoCardProps> = ({
 }) => {
   return (
     <Card>
-      <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>
+      <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,32 +27,32 @@ 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",
     },
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 058abd8..3adac87 100644
--- a/src/components/ui/card.tsx
+++ b/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 py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 py-6 shadow-sm",
         className,
       )}
       {...props}
diff --git a/src/index.css b/src/index.css
index 965d639..225bde1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -85,7 +85,7 @@
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.1398 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);

From 590db2b88ab321c3337b2c22367d3cb23da8477b Mon Sep 17 00:00:00 2001
From: Artem <la.artem.ser@gmail.com>
Date: Sun, 19 Oct 2025 18:11:30 +0300
Subject: [PATCH 5/5] feat: set font as semibold for sub header text

---
 .../TechnologyDemosSection/TechnologyDemosSection.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
index 9dfc247..8760f8b 100644
--- a/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
+++ b/src/components/TechnologyDemosSection/TechnologyDemosSection.tsx
@@ -65,7 +65,7 @@ const TechnologyDemosSection: React.FC<TechnologyDemosSectionProps> = () => {
           <h2 className="text-3xl font-semibold text-foreground mb-2">
             Technology Demonstrations
           </h2>
-          <p className="text-lg text-muted-foreground max-w-108 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>