Skip to content

Commit a929992

Browse files
iamabdullah73524iamabdullah73524
authored
Merge pull request #8 from recursivezero/revert-7-feature/TZD-260005
Revert "Feature: Updated Home and About pages"
2 parents ff10e86 + 1b80cd2 commit a929992

20 files changed

Lines changed: 1992 additions & 3558 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: 1520 additions & 2638 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 5 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,15 +81,13 @@
8181
"tailwind-merge": "2.2.0",
8282
"tailwindcss": "3.4.17",
8383
"typescript": "5.6.2",
84-
"zod": "3.22.4",
85-
"zod-to-json-schema": "3.22.4"
84+
"zod": "3.24.1"
8685
},
8786
"devDependencies": {
8887
"@tailwindcss/aspect-ratio": "0.4.2",
8988
"@tailwindcss/typography": "0.5.10",
9089
"@types/node": "22.10.2",
91-
"@types/react": "^18.2.0",
92-
"@types/react-dom": "^18.2.0",
90+
"@types/react": "19.0.0",
9391
"@typescript-eslint/eslint-plugin": "6.13.2",
9492
"@typescript-eslint/parser": "6.13.2",
9593
"autoprefixer": "10.4.16",

‎src/assets/styles/globals.css‎

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

66
@layer base {
77
:root {
8-
98
--font-size-min: 16;
109
--font-size-max: 20;
1110
--font-ratio-min: 1.2;
@@ -15,103 +14,141 @@
1514
--accent: 136, 58, 234;
1615
--accent-light: 224, 204, 250;
1716
--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);
1819
}
19-
20+
2021
html {
2122
color-scheme: light dark;
2223
height: 100%;
23-
scroll-behavior: smooth;
24+
2425
font-family: system-ui, sans-serif;
26+
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;
2535
}
2636

2737
*,
28-
*::before,
29-
*::after {
38+
*:after,
39+
*:before {
3040
box-sizing: border-box;
3141
}
3242

3343
body {
34-
margin: 0;
35-
padding: 0;
36-
width: 100%;
37-
max-width: 100%;
38-
min-height: 100vh;
39-
overflow-x: hidden;
4044
display: block;
41-
font-family: "Roboto", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
45+
container-type: inline-size;
46+
container-name: thread;
47+
box-sizing: border-box;
48+
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);
4253
transition: background-color 0.3s ease;
43-
4454
}
4555

46-
/* Grid Background */
4756
body::before {
4857
--size: 45px;
49-
--line: rgba(255, 255, 255, 0.06);
58+
--line: color-mix(in lch, canvasText, transparent 70%);
5059
content: "";
60+
height: 100vh;
61+
width: 100vw;
5162
position: fixed;
52-
inset: 0;
53-
width: 100%;
54-
height: 100%;
5563
background:
56-
linear-gradient(90deg, var(--line) 1px, transparent 1px),
57-
linear-gradient(var(--line) 1px, transparent 1px);
58-
background-size: var(--size) var(--size);
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;
5969
pointer-events: none;
60-
z-index: -1;
6170
}
6271

63-
/* MAIN FIX */
72+
:where(.x-link):is(:hover, :focus-visible) {
73+
opacity: 1;
74+
}
75+
6476
main {
65-
display: block !important;
66-
width: 100% !important;
67-
max-width: 100% !important;
68-
padding: 0 !important;
69-
margin: 0 !important;
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+
}
7090
}
7191

72-
.content {
73-
width: 100% !important;
74-
max-width: 100% !important;
75-
display: block !important;
76-
padding: 0 !important;
77-
margin: 0 !important;
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+
}
78102
}
79103

80-
.sidebar {
81-
display: none !important;
82-
width: 0 !important;
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;
83115
}
84116

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

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

93126
.whiteBg {
94-
background: #ffffff;
95-
color: #111111;
127+
background-color: #eee;
128+
color: #111;
96129
}
97130

98131
.darkBg {
99-
background: #050505;
100-
color: #ffffff;
132+
background-color: #222;
133+
color: #fff;
101134
}
102135

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

107140
.blackBtnHover:hover {
108141
background-color: #1c1c1c;
109-
color: #d1d1d1;
142+
color: #b8b8b8;
143+
}
144+
145+
.yellowBtnHover:hover {
146+
background-color: #b89405;
110147
}
111148

112149
.clipped-logo {
113150
position: relative;
114-
clip-path: inset(0);
115-
-webkit-clip-path: inset(0);
151+
-webkit-clip-path: inset(30px 10px 30px 10px);
152+
clip-path: inset(30px 10px 30px 10px);
116153
}
117154
}

‎src/components/AboutSection.astro‎

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

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>
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>
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-
/>
6545
</div>
66-
6746
</div>
6847
</div>
69-
</section>
48+
</section>

0 commit comments

Comments
 (0)