Skip to content

Commit 3f387a1

Browse files
Kapil GowruKapil Gowru
Kapil Gowru
authored and
Kapil Gowru
committed
fix: imported fern footer
1 parent 0066337 commit 3f387a1

File tree

1 file changed

+261
-61
lines changed

1 file changed

+261
-61
lines changed

‎footer/src/FernFooter.tsx‎

Lines changed: 261 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -9,76 +9,276 @@ import { Soc2Logo } from './images/soc2';
99

1010
export const FernFooter: React.FC = () => {
1111
return (
12-
<footer className="footer">
13-
<div className="footer-top">
14-
{/* Left Column - Logo and Status */}
15-
<a className="footer-logo" href="https://buildwithfern.com">
16-
<BuiltWithFernLight className="footer-logo-img dark:hidden" />
17-
<BuiltWithFernDark className="footer-logo-img hidden dark:block" />
18-
19-
<BuiltWithFernFrameLight className="footer-logo-frame dark:hidden" />
20-
<BuiltWithFernFrameDark className="footer-logo-frame hidden dark:block" />
21-
</a>
22-
23-
<div className="footer-status">
24-
{/* <a className="status-badge" href="https://status.buildwithfern.com">
25-
<div className="status-indicator"></div>
26-
<span className="status-text">All systems operational</span>
27-
</a> */}
28-
<FernStatusWidget />
29-
30-
<a className="soc2-badge" href="https://security.buildwithfern.com/">
31-
<Soc2Logo className="soc2-badge-img" />
32-
<span className="status-text">Soc 2 Type II</span>
12+
<>
13+
<style>{`
14+
.footer {
15+
padding: 3rem 2rem;
16+
}
17+
18+
.footer-top {
19+
display: flex;
20+
justify-content: space-between;
21+
gap: 2rem;
22+
margin-bottom: 3rem;
23+
position: relative;
24+
}
25+
26+
.footer-logo {
27+
display: flex;
28+
align-items: center;
29+
gap: 0.25rem;
30+
}
31+
32+
.footer-logo svg {
33+
transition: filter 150ms ease;
34+
}
35+
36+
.footer-logo:hover svg {
37+
filter: saturate(1) opacity(1);
38+
}
39+
40+
.footer-logo-img {
41+
height: 1rem;
42+
margin: 0;
43+
filter: saturate(0) opacity(0.7);
44+
}
45+
46+
.footer-logo-frame {
47+
position: absolute;
48+
top: 50%;
49+
left: 0;
50+
transform: translate(-32px, calc(-50% - 4px));
51+
filter: saturate(0) opacity(0.7);
52+
}
53+
54+
.footer-status {
55+
display: flex;
56+
flex-direction: row;
57+
gap: 1rem;
58+
}
59+
60+
.status-text {
61+
font-size: 0.875rem;
62+
color: var(--grayscale-10);
63+
font-weight: 400;
64+
}
65+
66+
.soc2-badge {
67+
display: flex;
68+
align-items: center;
69+
gap: 0.5rem;
70+
border-radius: 9999px;
71+
padding: 0.25rem 0.75rem 0.25rem 0.25rem;
72+
align-self: flex-start;
73+
text-decoration: none;
74+
transition: background-color 150ms ease, color 150ms ease;
75+
}
76+
77+
.soc2-badge:hover {
78+
background-color: var(--grayscale-a4);
79+
}
80+
81+
.soc2-badge:hover .status-text {
82+
color: var(--grayscale-12);
83+
}
84+
85+
.soc2-badge-img {
86+
width: 1.5rem;
87+
height: 1.5rem;
88+
background-color: #62636C;
89+
border-radius: 1000px;
90+
}
91+
92+
.footer-links {
93+
display: flex;
94+
gap: 2rem;
95+
padding-top: 2rem;
96+
align-items: flex-end;
97+
justify-content: space-between;
98+
}
99+
100+
.footer-columns {
101+
display: flex;
102+
gap: 2rem;
103+
}
104+
105+
.footer-column {
106+
display: flex;
107+
flex-direction: column;
108+
gap: 1rem;
109+
width: 170px;
110+
}
111+
112+
.footer-column-title {
113+
font-size: 0.875rem;
114+
font-weight: 400;
115+
color: var(--grayscale-9);
116+
letter-spacing: -0.025em;
117+
}
118+
119+
.footer-column-links {
120+
display: flex;
121+
flex-direction: column;
122+
gap: 1rem;
123+
}
124+
125+
.footer-link {
126+
font-weight: 400;
127+
font-size: 0.875rem;
128+
color: var(--grayscale-11);
129+
text-decoration: none;
130+
transition: color 0.15s ease-in-out;
131+
}
132+
133+
.footer-link svg {
134+
display: none !important;
135+
}
136+
137+
.footer-link:hover {
138+
color: var(--grayscale-12);
139+
}
140+
141+
.footer-bottom-text {
142+
font-weight: 400;
143+
font-size: 0.875rem;
144+
color: var(--grayscale-10);
145+
text-decoration: none;
146+
transition: color 0.15s ease-in-out;
147+
}
148+
149+
/* Responsive Design - Mobile */
150+
@media (max-width: 640px) {
151+
.footer {
152+
padding: 2rem 1.5rem;
153+
}
154+
155+
.footer-top {
156+
flex-direction: column;
157+
gap: 1.5rem;
158+
margin-bottom: 2rem;
159+
}
160+
161+
.footer-logo-frame {
162+
transform: translate(-32px, calc(-50% - 68px));
163+
}
164+
165+
.footer-status {
166+
flex-direction: column;
167+
gap: 0.75rem;
168+
padding-top: 2rem;
169+
}
170+
171+
.footer-links {
172+
display: grid;
173+
grid-template-columns: 1fr;
174+
gap: 1.5rem;
175+
align-items: flex-start;
176+
padding-top: 1rem;
177+
}
178+
179+
.footer-columns {
180+
display: grid;
181+
grid-template-columns: 1fr;
182+
gap: 2rem;
183+
width: 100%;
184+
order: 1;
185+
}
186+
187+
.footer-column {
188+
width: 100%;
189+
}
190+
191+
.footer-bottom-text {
192+
order: 2;
193+
}
194+
}
195+
196+
/* Tablet breakpoint */
197+
@media (max-width: 720px) and (min-width: 481px) {
198+
.footer-columns {
199+
flex-direction: row;
200+
flex-wrap: wrap;
201+
justify-content: center;
202+
}
203+
204+
.footer-column {
205+
width: calc(50% - 1rem);
206+
min-width: 200px;
207+
}
208+
}
209+
`}</style>
210+
211+
<footer className="footer">
212+
<div className="footer-top">
213+
{/* Left Column - Logo and Status */}
214+
<a className="footer-logo" href="https://buildwithfern.com">
215+
<BuiltWithFernLight className="footer-logo-img dark:hidden" />
216+
<BuiltWithFernDark className="footer-logo-img hidden dark:block" />
217+
218+
<BuiltWithFernFrameLight className="footer-logo-frame dark:hidden" />
219+
<BuiltWithFernFrameDark className="footer-logo-frame hidden dark:block" />
33220
</a>
221+
222+
<div className="footer-status">
223+
{/* <a className="status-badge" href="https://status.buildwithfern.com">
224+
<div className="status-indicator"></div>
225+
<span className="status-text">All systems operational</span>
226+
</a> */}
227+
<FernStatusWidget />
228+
229+
<a className="soc2-badge" href="https://security.buildwithfern.com/">
230+
<Soc2Logo className="soc2-badge-img" />
231+
<span className="status-text">Soc 2 Type II</span>
232+
</a>
233+
</div>
34234
</div>
35-
</div>
36-
37-
{/* Footer Links */}
38-
<div className="footer-links">
39-
<div className="footer-bottom-text"> © 2025 Fern • Located in Brooklyn, NY </div>
40-
{/* Newsletter Signup */}
41-
{/* <div className="newsletter-container">
42-
<div className="newsletter-label">Subscribe to our updates</div>
43-
<div className="newsletter-form">
44-
<div className="newsletter-input">
45-
<span>[email protected]</span>
235+
236+
{/* Footer Links */}
237+
<div className="footer-links">
238+
<div className="footer-bottom-text"> © 2025 Fern • Located in Brooklyn, NY </div>
239+
{/* Newsletter Signup */}
240+
{/* <div className="newsletter-container">
241+
<div className="newsletter-label">Subscribe to our updates</div>
242+
<div className="newsletter-form">
243+
<div className="newsletter-input">
244+
<span>[email protected]</span>
245+
</div>
246+
<button className="newsletter-button">
247+
</button>
46248
</div>
47-
<button className="newsletter-button">
48-
</button>
49-
</div>
50-
</div> */}
51-
<div className="footer-columns">
52-
<div className="footer-column">
53-
<h4 className="footer-column-title">Documentation</h4>
54-
<div className="footer-column-links">
55-
<a href="/openapi/getting-started/overview" className="footer-link">OpenAPI Compatibility</a>
56-
<a href="/sdks/overview/introduction" className="footer-link">SDKs</a>
57-
<a href="docs/getting-started/overview" className="footer-link">Docs</a>
249+
</div> */}
250+
<div className="footer-columns">
251+
<div className="footer-column">
252+
<h4 className="footer-column-title">Documentation</h4>
253+
<div className="footer-column-links">
254+
<a href="/openapi/getting-started/overview" className="footer-link">OpenAPI Compatibility</a>
255+
<a href="/sdks/overview/introduction" className="footer-link">SDKs</a>
256+
<a href="docs/getting-started/overview" className="footer-link">Docs</a>
257+
</div>
58258
</div>
59-
</div>
60259

61-
<div className="footer-column">
62-
<h4 className="footer-column-title">Resources</h4>
63-
<div className="footer-column-links">
64-
<a href="https://buildwithfern.com/blog" className="footer-link">Blog</a>
65-
<a href="#support" className="footer-link">Support</a>
66-
<a href="https://buildwithfern.com/pricing" className="footer-link">Pricing</a>
67-
<a href="https://buildwithfern.com/slack" className="footer-link">Slack</a>
260+
<div className="footer-column">
261+
<h4 className="footer-column-title">Resources</h4>
262+
<div className="footer-column-links">
263+
<a href="https://buildwithfern.com/blog" className="footer-link">Blog</a>
264+
<a href="#support" className="footer-link">Support</a>
265+
<a href="https://buildwithfern.com/pricing" className="footer-link">Pricing</a>
266+
<a href="https://buildwithfern.com/slack" className="footer-link">Slack</a>
267+
</div>
68268
</div>
69-
</div>
70269

71-
<div className="footer-column">
72-
<h4 className="footer-column-title">Company</h4>
73-
<div className="footer-column-links">
74-
<a href="https://brandfetch.com/buildwithfern.com" className="footer-link">Brand Kit</a>
75-
<a href="https://github.com/fern-api/fern" className="footer-link">Github</a>
76-
<a href="https://buildwithfern.com/privacy-policy" className="footer-link">Privacy Policy</a>
77-
<a href="https://buildwithfern.com/terms-of-service" className="footer-link">Terms of Service</a>
270+
<div className="footer-column">
271+
<h4 className="footer-column-title">Company</h4>
272+
<div className="footer-column-links">
273+
<a href="https://brandfetch.com/buildwithfern.com" className="footer-link">Brand Kit</a>
274+
<a href="https://github.com/fern-api/fern" className="footer-link">Github</a>
275+
<a href="https://buildwithfern.com/privacy-policy" className="footer-link">Privacy Policy</a>
276+
<a href="https://buildwithfern.com/terms-of-service" className="footer-link">Terms of Service</a>
277+
</div>
78278
</div>
79279
</div>
80280
</div>
81-
</div>
82-
</footer>
281+
</footer>
282+
</>
83283
);
84284
};

0 commit comments

Comments
 (0)