Skip to content

Commit e30e7c9

Browse files
ayushsharma74ayushsharma74
authored
Fix: landing page footer responsive layout on mobile (#1777)
1 parent cd252bd commit e30e7c9

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

‎apps/mail/components/home/footer.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function Footer() {
2626
const ref = useRef(null);
2727

2828
return (
29-
<div className="bg-panelDark m-4 hidden flex-col items-center justify-center rounded-xl md:flex">
29+
<div className="bg-panelDark mx-1 mb-3 md:mx-4 md:mb-3 flex-col items-center justify-center rounded-xl flex">
3030
<div>
3131
{/* <div className="h-[527px] w-screen bg-linear-to-b from-violet-600 via-orange-400 to-slate-950 blur-2xl" /> */}
3232
<div>
@@ -80,9 +80,9 @@ export default function Footer() {
8080
</div>
8181
</div>
8282
</div>
83-
<div className="relative z-50 mx-auto mb-12 mt-52 flex max-w-[2900px] flex-col items-start justify-start gap-10 self-stretch px-4">
84-
<div className="flex w-full items-start justify-between lg:w-[900px]">
85-
<div className="inline-flex flex-col items-start justify-between self-stretch">
83+
<div className="relative z-50 mx-auto mb-12 mt-10 md:mt-52 flex max-w-[2900px] flex-col items-start justify-start gap-10 self-stretch px-4">
84+
<div className="flex w-full flex-col md:flex-row items-start justify-between lg:w-[900px]">
85+
<div className="inline-flex flex-col items-start justify-between gap-4 mb-10 md:mb-0 self-stretch">
8686
<div className="inline-flex w-8 items-center justify-start gap-3">
8787
<a href="/">
8888
<img src="/white-icon.svg" alt="logo" width={100} height={100} />
@@ -120,7 +120,7 @@ export default function Footer() {
120120
</a>
121121
</div>
122122
</div>
123-
<div className="flex flex-1 items-start justify-end gap-10 opacity-0 md:opacity-100">
123+
<div className="flex flex-1 items-start justify-end gap-5 md:gap-10 ">
124124
<div className="inline-flex flex-col items-start justify-start gap-5">
125125
<div className="justify-start self-stretch text-sm font-normal text-white/40">
126126
Resources
@@ -132,12 +132,12 @@ export default function Footer() {
132132
href="https://trust.inc/zero"
133133
className="w-full"
134134
>
135-
<div className="justify-start self-stretch text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
135+
<div className="justify-start self-stretch text-sm md:text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
136136
SOC2
137137
</div>
138138
</a>
139139
<a href="/privacy" className="w-full" target="_blank">
140-
<div className="justify-start self-stretch text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
140+
<div className="justify-start self-stretch text-sm md:text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
141141
Privacy Policy
142142
</div>
143143
</a>
@@ -154,7 +154,7 @@ export default function Footer() {
154154
target="_blank"
155155
rel="noreferrer"
156156
>
157-
<div className="justify-start self-stretch text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
157+
<div className="justify-start self-stretch text-sm md:text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
158158
Chat with Zero
159159
</div>
160160
</a>
@@ -164,7 +164,7 @@ export default function Footer() {
164164
target="_blank"
165165
rel="noreferrer"
166166
>
167-
<div className="justify-start self-stretch text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
167+
<div className="justify-start self-stretch text-sm md:text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
168168
Zero AI
169169
</div>
170170
</a>
@@ -174,7 +174,7 @@ export default function Footer() {
174174
target="_blank"
175175
rel="noreferrer"
176176
>
177-
<div className="justify-start self-stretch text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
177+
<div className="justify-start self-stretch text-sm md:text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
178178
Shortcuts
179179
</div>
180180
</a>
@@ -186,12 +186,12 @@ export default function Footer() {
186186
</div>
187187
<div className="flex flex-col items-start justify-start gap-4 self-stretch">
188188
<a target="_blank" href="/contributors" className="w-full">
189-
<div className="justify-start self-stretch text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
189+
<div className="justify-start self-stretch text-sm md:text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
190190
Contributors
191191
</div>
192192
</a>
193193
<a target="_blank" href="/about" className="w-full">
194-
<div className="justify-start self-stretch text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
194+
<div className="justify-start self-stretch text-sm md:text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
195195
About
196196
</div>
197197
</a>
@@ -201,7 +201,7 @@ export default function Footer() {
201201
href="https://github.com/Mail-0/Zero"
202202
className="w-full"
203203
>
204-
<div className="justify-start self-stretch text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
204+
<div className="justify-start self-stretch text-sm md:text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
205205
Github
206206
</div>
207207
</a>
@@ -211,29 +211,29 @@ export default function Footer() {
211211
</div>
212212
<div className="h-0.5 self-stretch bg-white/20" />
213213
<div className="flex flex-col items-start justify-start gap-6 self-stretch">
214-
<div className="inline-flex items-center justify-between self-stretch">
214+
<div className="inline-flex items-center justify-between self-stretch flex-col-reverse md:flex-row gap-3">
215215
<div className="justify-start text-xs font-medium leading-tight text-white opacity-80 sm:text-sm">
216216
© 2025 Zero Email Inc, All Rights Reserved
217217
</div>
218-
<div className="flex items-center justify-start gap-4">
218+
<div className="flex items-center gap-4">
219219
<Link
220220
to="/about"
221-
className="justify-start text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
221+
className="justify-start text-nowrap text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
222222
>
223223
About
224224
</Link>
225225
<div className="h-5 w-0 outline outline-1 outline-offset-[-0.50px] outline-white/20" />
226226

227227
<Link
228228
to="/terms"
229-
className="justify-start text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
229+
className="justify-start text-nowrap text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
230230
>
231231
Terms & Conditions
232232
</Link>
233233
<div className="h-5 w-0 outline outline-1 outline-offset-[-0.50px] outline-white/20" />
234234
<Link
235235
to="/privacy"
236-
className="justify-start text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
236+
className="justify-start text-nowrap text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
237237
>
238238
Privacy Policy
239239
</Link>

0 commit comments

Comments
 (0)