Skip to content

Commit ff10e86

Browse files
iamabdullah73524iamabdullah73524
authored
Merge pull request #7 from recursivezero/feature/TZD-260005
Feature: Updated Home and About pages
2 parents a41900d + 5c93d1d commit ff10e86

20 files changed

Lines changed: 3558 additions & 1992 deletions

‎.astro/content.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,5 +180,5 @@ declare module 'astro:content' {
180180

181181
type AnyEntryMap = ContentEntryMap & DataEntryMap;
182182

183-
export type ContentConfig = typeof import("../src/content.config.js");
183+
export type ContentConfig = typeof import("./../src/content.config.js");
184184
}

‎package-lock.json‎

Lines changed: 2638 additions & 1520 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"github",
2626
"template"
2727
],
28-
"contributors": [ ],
28+
"contributors": [],
2929
"timestamp": {
3030
"createdOn": "Sun, 07 Jan 2024 00:00:00 +05:30",
3131
"updatedOn": "Sun,15 June 2025 02:10:39 +05:30"
@@ -81,13 +81,15 @@
8181
"tailwind-merge": "2.2.0",
8282
"tailwindcss": "3.4.17",
8383
"typescript": "5.6.2",
84-
"zod": "3.24.1"
84+
"zod": "3.22.4",
85+
"zod-to-json-schema": "3.22.4"
8586
},
8687
"devDependencies": {
8788
"@tailwindcss/aspect-ratio": "0.4.2",
8889
"@tailwindcss/typography": "0.5.10",
8990
"@types/node": "22.10.2",
90-
"@types/react": "19.0.0",
91+
"@types/react": "^18.2.0",
92+
"@types/react-dom": "^18.2.0",
9193
"@typescript-eslint/eslint-plugin": "6.13.2",
9294
"@typescript-eslint/parser": "6.13.2",
9395
"autoprefixer": "10.4.16",

‎src/assets/styles/globals.css‎

Lines changed: 50 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
@layer base {
77
:root {
8+
89
--font-size-min: 16;
910
--font-size-max: 20;
1011
--font-ratio-min: 1.2;
@@ -14,141 +15,103 @@
1415
--accent: 136, 58, 234;
1516
--accent-light: 224, 204, 250;
1617
--accent-dark: 49, 10, 101;
17-
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
18-
--background: light-dark(blue, yellow);
1918
}
20-
19+
2120
html {
2221
color-scheme: light dark;
2322
height: 100%;
24-
25-
font-family: system-ui, sans-serif;
2623
scroll-behavior: smooth;
27-
}
28-
29-
[data-theme="light"] {
30-
color-scheme: light only;
31-
}
32-
33-
[data-theme="dark"] {
34-
color-scheme: dark only;
24+
font-family: system-ui, sans-serif;
3525
}
3626

3727
*,
38-
*:after,
39-
*:before {
28+
*::before,
29+
*::after {
4030
box-sizing: border-box;
4131
}
4232

4333
body {
44-
display: block;
45-
container-type: inline-size;
46-
container-name: thread;
47-
box-sizing: border-box;
34+
margin: 0;
35+
padding: 0;
36+
width: 100%;
37+
max-width: 100%;
4838
min-height: 100vh;
49-
font-family: "Roboto", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif,
50-
system-ui;
51-
padding-left: clamp(1rem, 5vw, 10rem);
52-
padding-right: clamp(1rem, 5vw, 10rem);
39+
overflow-x: hidden;
40+
display: block;
41+
font-family: "Roboto", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
5342
transition: background-color 0.3s ease;
43+
5444
}
5545

46+
/* Grid Background */
5647
body::before {
5748
--size: 45px;
58-
--line: color-mix(in lch, canvasText, transparent 70%);
49+
--line: rgba(255, 255, 255, 0.06);
5950
content: "";
60-
height: 100vh;
61-
width: 100vw;
6251
position: fixed;
52+
inset: 0;
53+
width: 100%;
54+
height: 100%;
6355
background:
64-
linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size),
65-
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
66-
mask: linear-gradient(150deg, transparent 50%, white);
67-
top: 0;
68-
transform-style: flat;
56+
linear-gradient(90deg, var(--line) 1px, transparent 1px),
57+
linear-gradient(var(--line) 1px, transparent 1px);
58+
background-size: var(--size) var(--size);
6959
pointer-events: none;
60+
z-index: -1;
7061
}
7162

72-
:where(.x-link):is(:hover, :focus-visible) {
73-
opacity: 1;
74-
}
75-
63+
/* MAIN FIX */
7664
main {
77-
display: grid;
78-
gap: 4px;
79-
grid-template-columns: 20rem 1fr;
80-
grid-auto-flow: column;
81-
grid-template-areas: "sidebar content";
82-
83-
&.sidebar {
84-
grid-area: sidebar;
85-
}
86-
87-
&.content {
88-
grid-area: content;
89-
}
65+
display: block !important;
66+
width: 100% !important;
67+
max-width: 100% !important;
68+
padding: 0 !important;
69+
margin: 0 !important;
9070
}
9171

92-
@container thread (max-width: 768px) {
93-
main {
94-
grid-template-areas: "content";
95-
grid-template-columns: auto 1fr;
96-
97-
& .content {
98-
grid-area: content;
99-
grid-column: span 2;
100-
}
101-
}
72+
.content {
73+
width: 100% !important;
74+
max-width: 100% !important;
75+
display: block !important;
76+
padding: 0 !important;
77+
margin: 0 !important;
10278
}
10379

104-
/* Utilities */
105-
.sr-only {
106-
position: absolute;
107-
width: 1px;
108-
height: 1px;
109-
padding: 0;
110-
margin: -1px;
111-
overflow: hidden;
112-
clip: rect(0, 0, 0, 0);
113-
white-space: nowrap;
114-
border-width: 0;
80+
.sidebar {
81+
display: none !important;
82+
width: 0 !important;
11583
}
11684

117-
.link__active,
118-
.text__active {
119-
@apply text-customLight-active dark:text-customDark-active;
85+
section {
86+
width: 100%;
12087
}
12188

122-
.outline {
123-
outline: 1px solid greenyellow;
89+
textarea {
90+
resize: none;
12491
}
12592

12693
.whiteBg {
127-
background-color: #eee;
128-
color: #111;
94+
background: #ffffff;
95+
color: #111111;
12996
}
13097

13198
.darkBg {
132-
background-color: #222;
133-
color: #fff;
99+
background: #050505;
100+
color: #ffffff;
134101
}
135102

136-
textarea {
137-
resize: none;
103+
.yellowBtnHover:hover {
104+
background-color: #d4a900;
138105
}
139106

140107
.blackBtnHover:hover {
141108
background-color: #1c1c1c;
142-
color: #b8b8b8;
143-
}
144-
145-
.yellowBtnHover:hover {
146-
background-color: #b89405;
109+
color: #d1d1d1;
147110
}
148111

149112
.clipped-logo {
150113
position: relative;
151-
-webkit-clip-path: inset(30px 10px 30px 10px);
152-
clip-path: inset(30px 10px 30px 10px);
114+
clip-path: inset(0);
115+
-webkit-clip-path: inset(0);
153116
}
154117
}

‎src/components/AboutSection.astro‎

Lines changed: 60 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,67 @@ import image from "@/assets/images/about.jpg";
33
import { Image } from "astro:assets";
44
---
55

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

0 commit comments

Comments
 (0)