Skip to content

Commit e0bc436

Browse files
waleedlatif1waleedlatif1
committed
fix(footer): remove sticky peel reveal, keep clean footer link directory
The peel's "reveal window" relied on position: sticky bottom-detaching into a containing block whose extra height came from padding-bottom — that combination doesn't reliably work in WebKit/Safari (sticky never gets room to engage when the surplus height is padding rather than an explicit height or content), so the peel stayed permanently covered by the footer regardless of viewport size. Rather than carry that unreliable technique further, removing it entirely from both apps and reverting to the plain footer link directory.
1 parent 890d1b3 commit e0bc436

7 files changed

Lines changed: 54 additions & 136 deletions

File tree

‎apps/docs/components/footer/footer-peel.tsx‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎apps/docs/components/footer/footer.tsx‎

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import Link from 'next/link'
2-
import { FooterPeel } from '@/components/footer/footer-peel'
32
import { SimWordmark } from '@/components/ui/sim-logo'
43
import { SIM_SITE_URL } from '@/lib/urls'
54

65
/**
7-
* Docs footer — the same site link directory as the main app's landing
6+
* Docs footer - the same site link directory as the main app's landing
87
* footer (`apps/sim/app/(landing)/components/footer`), ported here so both
9-
* apps share one consistent footer (including the scroll "peel" reveal).
10-
* Links that live on sim.ai are absolute (docs.sim.ai is a different origin);
11-
* links that live on docs.sim.ai itself (Academy, API Reference, blocks,
12-
* integrations guides, …) stay relative.
8+
* apps share one consistent footer. Links that live on sim.ai are absolute
9+
* (docs.sim.ai is a different origin); links that live on docs.sim.ai itself
10+
* (Academy, API Reference, blocks, integrations guides, …) stay relative.
1311
*/
1412

1513
const LINK_CLASS =
@@ -130,36 +128,33 @@ function FooterColumn({ title, items }: { title: string; items: FooterItem[] })
130128

131129
export function Footer() {
132130
return (
133-
<div className='relative isolate z-30 mt-[120px] pb-[320px] max-sm:mt-16 max-sm:pb-[200px] max-lg:mt-[88px]'>
134-
<FooterPeel />
135-
<footer className='-mt-[320px] max-sm:-mt-[200px] relative z-30 w-full border-[var(--border)] border-t bg-[var(--bg)]'>
136-
<div className='mx-auto w-full max-w-[1460px] px-20 pt-16 pb-16 max-sm:px-5 max-lg:px-8 max-lg:pt-12 max-lg:pb-12'>
137-
<nav
138-
aria-label='Footer navigation'
139-
itemScope
140-
itemType='https://schema.org/SiteNavigationElement'
141-
className='grid grid-cols-8 gap-x-8 gap-y-10 max-sm:grid-cols-2 max-sm:gap-y-8 max-lg:grid-cols-3'
131+
<footer className='mt-[120px] w-full border-[var(--border)] border-t bg-[var(--bg)] max-sm:mt-16 max-lg:mt-[88px]'>
132+
<div className='mx-auto w-full max-w-[1460px] px-20 pt-16 pb-16 max-sm:px-5 max-lg:px-8 max-lg:pt-12 max-lg:pb-12'>
133+
<nav
134+
aria-label='Footer navigation'
135+
itemScope
136+
itemType='https://schema.org/SiteNavigationElement'
137+
className='grid grid-cols-8 gap-x-8 gap-y-10 max-sm:grid-cols-2 max-sm:gap-y-8 max-lg:grid-cols-3'
138+
>
139+
<a
140+
href={SIM_SITE_URL}
141+
aria-label='Sim home'
142+
className='flex h-[18px] items-center max-lg:col-span-full max-lg:mb-2'
142143
>
143-
<a
144-
href={SIM_SITE_URL}
145-
aria-label='Sim home'
146-
className='flex h-[18px] items-center max-lg:col-span-full max-lg:mb-2'
147-
>
148-
<SimWordmark />
149-
</a>
144+
<SimWordmark />
145+
</a>
150146

151-
<FooterColumn title='Product' items={PRODUCT_LINKS} />
152-
<FooterColumn title='Resources' items={RESOURCES_LINKS} />
153-
<FooterColumn title='Blocks' items={BLOCK_LINKS} />
154-
<FooterColumn title='Integrations' items={INTEGRATION_LINKS} />
155-
<FooterColumn title='Models' items={MODEL_LINKS} />
156-
<FooterColumn title='Socials' items={SOCIAL_LINKS} />
157-
<FooterColumn title='Legal' items={LEGAL_LINKS} />
158-
</nav>
147+
<FooterColumn title='Product' items={PRODUCT_LINKS} />
148+
<FooterColumn title='Resources' items={RESOURCES_LINKS} />
149+
<FooterColumn title='Blocks' items={BLOCK_LINKS} />
150+
<FooterColumn title='Integrations' items={INTEGRATION_LINKS} />
151+
<FooterColumn title='Models' items={MODEL_LINKS} />
152+
<FooterColumn title='Socials' items={SOCIAL_LINKS} />
153+
<FooterColumn title='Legal' items={LEGAL_LINKS} />
154+
</nav>
159155

160-
<p className='mt-16 text-[var(--text-muted)] text-sm'>© 2026 Sim. All rights reserved.</p>
161-
</div>
162-
</footer>
163-
</div>
156+
<p className='mt-16 text-[var(--text-muted)] text-sm'>© 2026 Sim. All rights reserved.</p>
157+
</div>
158+
</footer>
164159
)
165160
}

‎apps/docs/public/static/landing/footer-peel.jpg‎

-444 KB
Binary file not shown.

‎apps/sim/app/(landing)/components/footer/components/footer-peel/footer-peel.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎apps/sim/app/(landing)/components/footer/components/footer-peel/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/sim/app/(landing)/components/footer/footer.tsx‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Link from 'next/link'
2-
import { FooterPeel } from '@/app/(landing)/components/footer/components/footer-peel'
32
import { SimWordmark } from '@/app/(landing)/components/navbar/components/sim-wordmark'
43
import { MODEL_PROVIDERS_WITH_CATALOGS } from '@/app/(landing)/models/utils'
54

@@ -16,10 +15,6 @@ import { MODEL_PROVIDERS_WITH_CATALOGS } from '@/app/(landing)/models/utils'
1615
* (edge-to-edge): the border lives on the full-width `<footer>` landmark while
1716
* an inner container caps and centers the content at the shared
1817
* `max-w-[1460px]` with the same `px-20` gutter as every section above.
19-
*
20-
* The wrapper's bottom padding matches {@link FooterPeel}'s own height and is
21-
* the "reveal window" - the extra scroll room, past the footer's own opaque
22-
* background, where the sticky-pinned peel image becomes visible.
2318
*/
2419

2520
const LINK_CLASS =
@@ -136,36 +131,33 @@ function FooterColumn({ title, items }: { title: string; items: FooterItem[] })
136131

137132
export function Footer() {
138133
return (
139-
<div className='relative isolate mt-[120px] pb-[320px] max-sm:mt-16 max-sm:pb-[200px] max-lg:mt-[88px]'>
140-
<FooterPeel />
141-
<footer className='-mt-[320px] max-sm:-mt-[200px] relative z-30 w-full border-[var(--border)] border-t bg-[var(--bg)]'>
142-
<div className='mx-auto w-full max-w-[1460px] px-20 pt-16 pb-16 max-sm:px-5 max-lg:px-8 max-lg:pt-12 max-lg:pb-12'>
143-
<nav
144-
aria-label='Footer navigation'
145-
itemScope
146-
itemType='https://schema.org/SiteNavigationElement'
147-
className='grid grid-cols-8 gap-x-8 gap-y-10 max-sm:grid-cols-2 max-sm:gap-y-8 max-lg:grid-cols-3'
134+
<footer className='mt-[120px] w-full border-[var(--border)] border-t max-sm:mt-16 max-lg:mt-[88px]'>
135+
<div className='mx-auto w-full max-w-[1460px] px-20 pt-16 pb-16 max-sm:px-5 max-lg:px-8 max-lg:pt-12 max-lg:pb-12'>
136+
<nav
137+
aria-label='Footer navigation'
138+
itemScope
139+
itemType='https://schema.org/SiteNavigationElement'
140+
className='grid grid-cols-8 gap-x-8 gap-y-10 max-sm:grid-cols-2 max-sm:gap-y-8 max-lg:grid-cols-3'
141+
>
142+
<Link
143+
href='/'
144+
aria-label='Sim home'
145+
className='flex h-[18px] items-center max-lg:col-span-full max-lg:mb-2'
148146
>
149-
<Link
150-
href='/'
151-
aria-label='Sim home'
152-
className='flex h-[18px] items-center max-lg:col-span-full max-lg:mb-2'
153-
>
154-
<SimWordmark />
155-
</Link>
147+
<SimWordmark />
148+
</Link>
156149

157-
<FooterColumn title='Product' items={PRODUCT_LINKS} />
158-
<FooterColumn title='Resources' items={RESOURCES_LINKS} />
159-
<FooterColumn title='Blocks' items={BLOCK_LINKS} />
160-
<FooterColumn title='Integrations' items={INTEGRATION_LINKS} />
161-
<FooterColumn title='Models' items={MODEL_LINKS} />
162-
<FooterColumn title='Socials' items={SOCIAL_LINKS} />
163-
<FooterColumn title='Legal' items={LEGAL_LINKS} />
164-
</nav>
150+
<FooterColumn title='Product' items={PRODUCT_LINKS} />
151+
<FooterColumn title='Resources' items={RESOURCES_LINKS} />
152+
<FooterColumn title='Blocks' items={BLOCK_LINKS} />
153+
<FooterColumn title='Integrations' items={INTEGRATION_LINKS} />
154+
<FooterColumn title='Models' items={MODEL_LINKS} />
155+
<FooterColumn title='Socials' items={SOCIAL_LINKS} />
156+
<FooterColumn title='Legal' items={LEGAL_LINKS} />
157+
</nav>
165158

166-
<p className='mt-16 text-[var(--text-muted)] text-sm'>© 2026 Sim. All rights reserved.</p>
167-
</div>
168-
</footer>
169-
</div>
159+
<p className='mt-16 text-[var(--text-muted)] text-sm'>© 2026 Sim. All rights reserved.</p>
160+
</div>
161+
</footer>
170162
)
171163
}

‎apps/sim/public/landing/footer-peel.jpg‎

-444 KB
Binary file not shown.

0 commit comments

Comments
 (0)