WIP: initial setup

.astro/content.d.ts

@@ -180,5 +180,5 @@ declare module 'astro:content' {
 
 	type AnyEntryMap = ContentEntryMap & DataEntryMap;
 
-	export type ContentConfig = typeof import("../src/content.config.js");
+	export type ContentConfig = typeof import("./../src/content.config.js");
 }

package.json

@@ -25,7 +25,7 @@
     "github",
     "template"
   ],
-  "contributors": [ ],
+  "contributors": [],
   "timestamp": {
     "createdOn": "Sun, 07 Jan 2024 00:00:00 +05:30",
     "updatedOn": "Sun,15 June 2025 02:10:39 +05:30"
@@ -81,13 +81,15 @@
     "tailwind-merge": "2.2.0",
     "tailwindcss": "3.4.17",
     "typescript": "5.6.2",
-    "zod": "3.24.1"
+    "zod": "3.22.4",
+    "zod-to-json-schema": "3.22.4"
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/typography": "0.5.10",
     "@types/node": "22.10.2",
-    "@types/react": "19.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "6.13.2",
     "@typescript-eslint/parser": "6.13.2",
     "autoprefixer": "10.4.16",

src/assets/styles/globals.css

@@ -5,6 +5,7 @@
 
 @layer base {
   :root {
+
     --font-size-min: 16;
     --font-size-max: 20;
     --font-ratio-min: 1.2;
@@ -14,141 +15,103 @@
     --accent: 136, 58, 234;
     --accent-light: 224, 204, 250;
     --accent-dark: 49, 10, 101;
-    --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
-    --background: light-dark(blue, yellow);
   }
-
+ 
   html {
     color-scheme: light dark;
     height: 100%;
-
-    font-family: system-ui, sans-serif;
     scroll-behavior: smooth;
-  }
-
-  [data-theme="light"] {
-    color-scheme: light only;
-  }
-
-  [data-theme="dark"] {
-    color-scheme: dark only;
+    font-family: system-ui, sans-serif;
   }
 
   *,
-  *:after,
-  *:before {
+  *::before,
+  *::after {
     box-sizing: border-box;
   }
 
   body {
-    display: block;
-    container-type: inline-size;
-    container-name: thread;
-    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    max-width: 100%;
     min-height: 100vh;
-    font-family: "Roboto", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif,
-      system-ui;
-    padding-left: clamp(1rem, 5vw, 10rem);
-    padding-right: clamp(1rem, 5vw, 10rem);
+    overflow-x: hidden;
+    display: block;
+    font-family: "Roboto", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
     transition: background-color 0.3s ease;
+
   }
 
+  /* Grid Background */
   body::before {
     --size: 45px;
-    --line: color-mix(in lch, canvasText, transparent 70%);
+    --line: rgba(255, 255, 255, 0.06);
     content: "";
-    height: 100vh;
-    width: 100vw;
     position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
     background:
-      linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size),
-      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
-    mask: linear-gradient(150deg, transparent 50%, white);
-    top: 0;
-    transform-style: flat;
+      linear-gradient(90deg, var(--line) 1px, transparent 1px),
+      linear-gradient(var(--line) 1px, transparent 1px);
+    background-size: var(--size) var(--size);
     pointer-events: none;
+    z-index: -1;
   }
 
-  :where(.x-link):is(:hover, :focus-visible) {
-    opacity: 1;
-  }
-
+  /* MAIN FIX */
   main {
-    display: grid;
-    gap: 4px;
-    grid-template-columns: 20rem 1fr;
-    grid-auto-flow: column;
-    grid-template-areas: "sidebar content";
-
-    &.sidebar {
-      grid-area: sidebar;
-    }
-
-    &.content {
-      grid-area: content;
-    }
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
   }
 
-  @container thread (max-width: 768px) {
-    main {
-      grid-template-areas: "content";
-      grid-template-columns: auto 1fr;
-
-      & .content {
-        grid-area: content;
-        grid-column: span 2;
-      }
-    }
+  .content {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
+    padding: 0 !important;
+    margin: 0 !important;
   }
 
-  /* Utilities */
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
+  .sidebar {
+    display: none !important;
+    width: 0 !important;
   }
 
-  .link__active,
-  .text__active {
-    @apply text-customLight-active dark:text-customDark-active;
+  section {
+    width: 100%;
   }
 
-  .outline {
-    outline: 1px solid greenyellow;
+  textarea {
+    resize: none;
   }
 
   .whiteBg {
-    background-color: #eee;
-    color: #111;
+    background: #ffffff;
+    color: #111111;
   }
 
   .darkBg {
-    background-color: #222;
-    color: #fff;
+    background: #050505;
+    color: #ffffff;
   }
 
-  textarea {
-    resize: none;
+  .yellowBtnHover:hover {
+    background-color: #d4a900;
   }
 
   .blackBtnHover:hover {
     background-color: #1c1c1c;
-    color: #b8b8b8;
-  }
-
-  .yellowBtnHover:hover {
-    background-color: #b89405;
+    color: #d1d1d1;
   }
 
   .clipped-logo {
     position: relative;
-    -webkit-clip-path: inset(30px 10px 30px 10px);
-    clip-path: inset(30px 10px 30px 10px);
+    clip-path: inset(0);
+    -webkit-clip-path: inset(0);
   }
 }

src/components/AboutSection.astro

@@ -3,46 +3,67 @@ import image from "@/assets/images/about.jpg";
 import { Image } from "astro:assets";
 ---
 
-<section>
-  <div class="w-full px-4 py-8 md:px-6 md:py-12 lg:px-8">
-    <div class="mx-auto">
-      <h2 id="aboutText" class="mb-[0.8rem] inline-block rounded-md py-[2px] text-[27px]">What we do</h2>
-      <h1 class="mb-[1.1rem] text-[36px] font-bold leading-[42px] tracking-[-0.03em] lg:text-[61px] lg:leading-[72px]">
-        Efficient apps that simplify your life.
-      </h1>
-      <div class="flex flex-col gap-[1.5rem] lg:flex-row lg:justify-between lg:gap-[1.2rem] xl:gap-[3rem]">
-        <figure class="basis-[55%] lg:h-[500px]">
-          <Image
-            src={image}
-            width={800}
-            alt="person working on a laptop"
-            class="h-[250px] w-full rounded-xl object-cover md:h-[500px] lg:h-full"
-          />
-        </figure>
-        <div class="basis-[45%]">
-          <div>
-            <p
-              id="about"
-              class="mb-[0.8rem] text-[18px] font-normal leading-[24px] text-[#999] lg:text-[20px] lg:leading-[32px]"
-            >
-              Recursive Zero - crafting compact apps for smoother workflows and smarter storage solutions, enhancing
-              your day-to-day productivity
-            </p>
-          </div>
-          <div>
-            <a href="#contactForm">
-              <button class="h-[50px] rounded-[5px] bg-[#FFCC00] px-[20px] text-[14px] text-[#111] lg:text-[16px]">
-                Contact us
-              </button>
-            </a>
-            <a href="#" class="ml-[8px]">
-              <button class="buttonTheme learn-btn h-[50px] rounded-[5px] px-[20px] text-[14px] lg:text-[16px]">
-                Learn more
-              </button>
-            </a>
-          </div>
+<section class="overflow-hidden bg-[#07111f] text-white">
+  <div class="mx-auto max-w-7xl px-6 py-20 lg:px-10 lg:py-28">
+
+    <div class="grid items-center gap-14 lg:grid-cols-2">
+
+      <!-- Left Content -->
+      <div>
+        <p class="mb-5 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-400">
+          Recursive Zero
+        </p>
+
+        <h1 class="text-5xl font-bold leading-tight tracking-tight md:text-6xl lg:text-7xl">
+          We Build Digital <br />
+          Products That <br />
+          Drive <span class="text-cyan-400">Results.</span>
+        </h1>
+
+        <p class="mt-7 max-w-xl text-lg leading-8 text-white/70">
+          Recursive Zero crafts high-performance web apps, internal tools,
+          and scalable digital solutions that simplify operations and
+          accelerate business growth.
+        </p>
+
+        <!-- Buttons -->
+        <div class="mt-10 flex flex-wrap gap-4">
+          <a
+            href="#contactForm"
+            class="rounded-xl bg-white px-7 py-4 font-semibold text-black transition hover:scale-105"
+          >
+            Contact Us →
+          </a>
+
+          <a
+            href="/work"
+            class="rounded-xl border border-white/20 px-7 py-4 font-semibold text-white transition hover:bg-white hover:text-black"
+          >
+            View Our Work
+          </a>
         </div>
+
+        <!-- Points -->
+        <div class="mt-10 flex flex-wrap gap-6 text-sm text-white/70">
+          <span>✓ Fast Delivery</span>
+          <span>✓ Scalable</span>
+          <span>✓ Client-Focused</span>
+        </div>
+      </div>
+
+      <!-- Right Image -->
+      <div class="relative">
+        <div class="absolute -left-10 top-10 h-40 w-40 rounded-full bg-cyan-400/20 blur-3xl"></div>
+        <div class="absolute right-0 top-0 h-52 w-52 rounded-full bg-blue-500/20 blur-3xl"></div>
+
+        <Image
+          src={image}
+          width={1000}
+          alt="Dashboard Preview"
+          class="relative z-10 w-full rounded-3xl border border-white/10 object-cover shadow-2xl"
+        />
       </div>
+
     </div>
   </div>
-</section>
+</section>