From f3d1592ab66bb299e2eded719f5f1ef7952aa308 Mon Sep 17 00:00:00 2001
From: Artem <la.artem.ser@gmail.com>
Date: Sun, 19 Oct 2025 19:07:20 +0300
Subject: [PATCH 1/3] feat: add Section CommunityInvolvementSection

---
 .../CommunityInvolvementSection.ts            |  8 ++
 .../CommunityInvolvementSection.tsx           | 79 +++++++++++++++++++
 .../CommunityInvolvementSection/index.ts      |  5 ++
 src/pages/Portfolio.tsx                       |  2 +
 4 files changed, 94 insertions(+)
 create mode 100644 src/components/CommunityInvolvementSection/CommunityInvolvementSection.ts
 create mode 100644 src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx
 create mode 100644 src/components/CommunityInvolvementSection/index.ts

diff --git a/src/components/CommunityInvolvementSection/CommunityInvolvementSection.ts b/src/components/CommunityInvolvementSection/CommunityInvolvementSection.ts
new file mode 100644
index 0000000..142868e
--- /dev/null
+++ b/src/components/CommunityInvolvementSection/CommunityInvolvementSection.ts
@@ -0,0 +1,8 @@
+export interface ContributionItemProps {
+  title: string;
+  description: string;
+}
+
+export interface CommunityInvolvementSectionProps {
+  // No props needed for now, but keeping for future extensibility
+}
diff --git a/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx b/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx
new file mode 100644
index 0000000..e555f6d
--- /dev/null
+++ b/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { CheckCircle } from "lucide-react";
+import {
+  CommunityInvolvementSectionProps,
+  ContributionItemProps,
+} from "./CommunityInvolvementSection.ts";
+
+const ContributionItem: React.FC<ContributionItemProps> = ({
+  title,
+  description,
+}) => {
+  return (
+    <div className="flex items-start gap-4">
+      <CheckCircle className="h-6 w-6 text-white flex-shrink-0 mt-0.5" />
+      <div>
+        <h3 className="text-white font-semibold mb-1">{title}</h3>
+        <p className="text-gray-400 text-sm">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+const CommunityInvolvementSection: React.FC<
+  CommunityInvolvementSectionProps
+> = () => {
+  const contributions: ContributionItemProps[] = [
+    {
+      title: "Framework optimizations and plugins",
+      description: "Performance improvements and extended functionality",
+    },
+    {
+      title: "Development automation tools",
+      description: "CI/CD pipelines and deployment automation",
+    },
+    {
+      title: "Security and compliance utilities",
+      description: "Open-source security scanning and compliance tools",
+    },
+    {
+      title: "Documentation and best practices",
+      description: "Comprehensive guides and development standards",
+    },
+  ];
+
+  return (
+    <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 font-bold text-foreground mb-6">
+            Community Involvement
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
+            The SpaceCorps team actively contributes to the open-source
+            community, sharing tools, libraries, and frameworks that benefit
+            developers worldwide.
+          </p>
+        </div>
+
+        <div className="text-center mb-12">
+          <h3 className="text-xl font-semibold text-foreground">
+            Our Contributions:
+          </h3>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+          {contributions.map((contribution, index) => (
+            <ContributionItem
+              key={index}
+              title={contribution.title}
+              description={contribution.description}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { CommunityInvolvementSection };
diff --git a/src/components/CommunityInvolvementSection/index.ts b/src/components/CommunityInvolvementSection/index.ts
new file mode 100644
index 0000000..1bc277d
--- /dev/null
+++ b/src/components/CommunityInvolvementSection/index.ts
@@ -0,0 +1,5 @@
+export { CommunityInvolvementSection } from "./CommunityInvolvementSection.tsx";
+export type {
+  CommunityInvolvementSectionProps,
+  ContributionItemProps,
+} from "./CommunityInvolvementSection.ts";
diff --git a/src/pages/Portfolio.tsx b/src/pages/Portfolio.tsx
index 1e3f119..7f5ba7c 100644
--- a/src/pages/Portfolio.tsx
+++ b/src/pages/Portfolio.tsx
@@ -4,6 +4,7 @@ import { OpenSourceSection } from "../components/OpenSourceSection";
 import { FeaturedProjectsSection } from "../components/FeaturedProjectsSection";
 import { TechnologyDemosSection } from "../components/TechnologyDemosSection";
 import { FrameworkDetailsSection } from "../components/FrameworkDetailsSection";
+import { CommunityInvolvementSection } from "../components/CommunityInvolvementSection";
 
 const Portfolio: React.FC = () => {
   return (
@@ -14,6 +15,7 @@ const Portfolio: React.FC = () => {
         <FeaturedProjectsSection />
         <TechnologyDemosSection />
         <FrameworkDetailsSection />
+        <CommunityInvolvementSection />
       </main>
     </div>
   );

From 2eed25725a397b25335e33a55355fd9d33e3b073 Mon Sep 17 00:00:00 2001
From: Artem <la.artem.ser@gmail.com>
Date: Sun, 19 Oct 2025 19:36:34 +0300
Subject: [PATCH 2/3] feat: improve CommunityInvolvementSection layout and
 typography

---
 .../CommunityInvolvementSection.tsx           | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx b/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx
index e555f6d..0799280 100644
--- a/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx
+++ b/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx
@@ -10,11 +10,11 @@ const ContributionItem: React.FC<ContributionItemProps> = ({
   description,
 }) => {
   return (
-    <div className="flex items-start gap-4">
-      <CheckCircle className="h-6 w-6 text-white flex-shrink-0 mt-0.5" />
+    <div className="flex items-center gap-4">
+      <CheckCircle className="h-6 w-6 text-white flex-shrink-0 stroke-3" />
       <div>
-        <h3 className="text-white font-semibold mb-1">{title}</h3>
-        <p className="text-gray-400 text-sm">{description}</p>
+        <h3 className="text-white mb-1">{title}</h3>
+        <p className="text-gray-400 text-xs">{description}</p>
       </div>
     </div>
   );
@@ -28,14 +28,14 @@ const CommunityInvolvementSection: React.FC<
       title: "Framework optimizations and plugins",
       description: "Performance improvements and extended functionality",
     },
-    {
-      title: "Development automation tools",
-      description: "CI/CD pipelines and deployment automation",
-    },
     {
       title: "Security and compliance utilities",
       description: "Open-source security scanning and compliance tools",
     },
+    {
+      title: "Development automation tools",
+      description: "CI/CD pipelines and deployment automation",
+    },
     {
       title: "Documentation and best practices",
       description: "Comprehensive guides and development standards",
@@ -46,10 +46,10 @@ const CommunityInvolvementSection: React.FC<
     <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 font-bold text-foreground mb-6">
+          <h2 className="text-3xl font-semibold text-foreground mb-6">
             Community Involvement
           </h2>
-          <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
+          <p className="text-lg font-semibold text-muted-foreground max-w-170 mx-auto">
             The SpaceCorps team actively contributes to the open-source
             community, sharing tools, libraries, and frameworks that benefit
             developers worldwide.
@@ -57,12 +57,12 @@ const CommunityInvolvementSection: React.FC<
         </div>
 
         <div className="text-center mb-12">
-          <h3 className="text-xl font-semibold text-foreground">
+          <h3 className="text-2xl font-semibold text-foreground">
             Our Contributions:
           </h3>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-60 gap-y-8 max-w-6xl mx-auto">
           {contributions.map((contribution, index) => (
             <ContributionItem
               key={index}

From 4f03def2b44adeb313bc515bb2d772218fd2f5b3 Mon Sep 17 00:00:00 2001
From: Artem <la.artem.ser@gmail.com>
Date: Sun, 19 Oct 2025 20:19:04 +0300
Subject: [PATCH 3/3] feat: add card Get Involved Card

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

diff --git a/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx b/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx
index 0799280..4521a04 100644
--- a/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx
+++ b/src/components/CommunityInvolvementSection/CommunityInvolvementSection.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { CheckCircle } from "lucide-react";
+import { Card, CardContent } from "../ui/card";
 import {
   CommunityInvolvementSectionProps,
   ContributionItemProps,
@@ -71,6 +72,33 @@ const CommunityInvolvementSection: React.FC<
             />
           ))}
         </div>
+
+        {/* Get Involved Card */}
+        <div className="py-30 bg-background">
+          <Card>
+            <CardContent className="pt-12 pb-12 text-center">
+              <h3 className="text-3xl font-semibold text-foreground mb-6">
+                Get Involved
+              </h3>
+              <p className="text-lg font-semibold text-muted-foreground mb-8 max-w-3xl mx-auto">
+                Join our growing community of developers and contributors.
+                Whether you're looking to use our tools or contribute to their
+                development, we welcome collaboration.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-x-10 gap-y-4 justify-center items-center">
+                <a href="https://github.com/spacecorps">
+                  <button className="bg-white text-black px-11 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
+                    Explore GitHub
+                  </button>
+                </a>
+
+                <a href="#" className="text-primary">
+                  Join Our Community
+                </a>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </section>
   );
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 113d66c..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 border 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 3b2334e..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.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);