Skip to content

Fix: landing page footer responsive layout on mobile #1777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ahmetskilinc merged 5 commits into from
Aug 25, 2025
Merged

Fix: landing page footer responsive layout on mobile #1777

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
36e41ae
fix: responsive footer for mobile screens
ayushsharma74 Jul 21, 2025
e6ac504
fixed typo
ayushsharma74 Jul 21, 2025
9dc83e4
Merge branch 'staging' into fix/landing-footer-responsive-layout-on-m…
ayushsharma74 Jul 21, 2025
43e6578
Merge branch 'staging' into fix/landing-footer-responsive-layout-on-m…
ayushsharma74 Jul 22, 2025
625f37d
Merge branch 'staging' into fix/landing-footer-responsive-layout-on-m…
ayushsharma74 Jul 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions apps/mail/components/home/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function Footer() {
const ref = useRef(null);

return (
<div className="bg-panelDark m-4 hidden flex-col items-center justify-center rounded-xl md:flex">
<div className="bg-panelDark mx-1 mb-3 md:mx-4 md:mb-3 flex-col items-center justify-center rounded-xl flex">
<div>
{/* <div className="h-[527px] w-screen bg-gradient-to-b from-violet-600 via-orange-400 to-slate-950 blur-2xl" /> */}
<div>
Expand Down Expand Up @@ -80,9 +80,9 @@ export default function Footer() {
</div>
</div>
</div>
<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">
<div className="flex w-full items-start justify-between lg:w-[900px]">
<div className="inline-flex flex-col items-start justify-between self-stretch">
<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">
<div className="flex w-full flex-col md:flex-row items-start justify-between lg:w-[900px]">
<div className="inline-flex flex-col items-start justify-between gap-4 mb-10 md:mb-0 self-stretch">
<div className="inline-flex w-8 items-center justify-start gap-3">
<a href="/">
<img src="/white-icon.svg" alt="logo" width={100} height={100} />
Expand Down Expand Up @@ -120,7 +120,7 @@ export default function Footer() {
</a>
</div>
</div>
<div className="flex flex-1 items-start justify-end gap-10 opacity-0 md:opacity-100">
<div className="flex flex-1 items-start justify-end gap-5 md:gap-10 ">
<div className="inline-flex flex-col items-start justify-start gap-5">
<div className="justify-start self-stretch text-sm font-normal text-white/40">
Resources
Expand All @@ -132,12 +132,12 @@ export default function Footer() {
href="https://trust.inc/zero"
className="w-full"
>
<div className="justify-start self-stretch text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
<div className="justify-start self-stretch text-sm md:text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
SOC2
</div>
</a>
<a href="/privacy" className="w-full" target="_blank">
<div className="justify-start self-stretch text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
<div className="justify-start self-stretch text-sm md:text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
Privacy Policy
</div>
</a>
Expand All @@ -154,7 +154,7 @@ export default function Footer() {
target="_blank"
rel="noreferrer"
>
<div className="justify-start self-stretch text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
<div className="justify-start self-stretch text-sm md:text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
Chat with Zero
</div>
</a>
Expand All @@ -164,7 +164,7 @@ export default function Footer() {
target="_blank"
rel="noreferrer"
>
<div className="justify-start self-stretch text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
<div className="justify-start self-stretch text-sm md:text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
Zero AI
</div>
</a>
Expand All @@ -174,7 +174,7 @@ export default function Footer() {
target="_blank"
rel="noreferrer"
>
<div className="justify-start self-stretch text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
<div className="justify-start self-stretch text-sm md:text-base leading-none text-white opacity-80 transition-opacity hover:opacity-100">
Shortcuts
</div>
</a>
Expand All @@ -186,12 +186,12 @@ export default function Footer() {
</div>
<div className="flex flex-col items-start justify-start gap-4 self-stretch">
<a target="_blank" href="/contributors" className="w-full">
<div className="justify-start self-stretch text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
<div className="justify-start self-stretch text-sm md:text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
Contributors
</div>
</a>
<a target="_blank" href="/about" className="w-full">
<div className="justify-start self-stretch text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
<div className="justify-start self-stretch text-sm md:text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
About
</div>
</a>
Expand All @@ -201,7 +201,7 @@ export default function Footer() {
href="https://github.com/Mail-0/Zero"
className="w-full"
>
<div className="justify-start self-stretch text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
<div className="justify-start self-stretch text-sm md:text-base font-normal leading-none text-white opacity-80 transition-opacity hover:opacity-100">
Github
</div>
</a>
Expand All @@ -211,29 +211,29 @@ export default function Footer() {
</div>
<div className="h-0.5 self-stretch bg-white/20" />
<div className="flex flex-col items-start justify-start gap-6 self-stretch">
<div className="inline-flex items-center justify-between self-stretch">
<div className="inline-flex items-center justify-between self-stretch flex-col-reverse md:flex-row gap-3">
<div className="justify-start text-xs font-medium leading-tight text-white opacity-80 sm:text-sm">
© 2025 Zero Email Inc, All Rights Reserved
</div>
<div className="flex items-center justify-start gap-4">
<div className="flex items-center gap-4">
<Link
to="/about"
className="justify-start text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
className="justify-start text-nowrap text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
>
About
</Link>
<div className="h-5 w-0 outline outline-1 outline-offset-[-0.50px] outline-white/20" />

<Link
to="/terms"
className="justify-start text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
className="justify-start text-nowrap text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
>
Terms & Conditions
</Link>
<div className="h-5 w-0 outline outline-1 outline-offset-[-0.50px] outline-white/20" />
<Link
to="/privacy"
className="justify-start text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
className="justify-start text-nowrap text-sm font-normal leading-tight text-white/70 opacity-80 transition-opacity hover:opacity-100"
>
Privacy Policy
</Link>
Expand Down