logicaffeine_web/ui/components/
footer.rs1use dioxus::prelude::*;
10use crate::ui::components::icon::{Icon, IconVariant, IconSize};
11use crate::ui::components::theme_picker::ThemePicker;
12use crate::ui::components::main_nav::LOGO_SVG;
13
14const FOOTER_STYLES: &str = r#"
15.site-footer {
16 background: linear-gradient(180deg, rgba(6, 8, 20, 0) 0%, rgba(6, 8, 20, 1) 100%);
17 border-top: 1px solid rgba(255, 255, 255, 0.06);
18 padding: 64px 24px 32px;
19 margin-top: auto;
20}
21
22.footer-container {
23 max-width: 1200px;
24 margin: 0 auto;
25}
26
27.footer-grid {
28 display: grid;
29 grid-template-columns: 2fr repeat(3, 1fr);
30 gap: 48px;
31 margin-bottom: 48px;
32}
33
34/* Brand section (first column, wider) */
35.footer-brand {
36 display: flex;
37 flex-direction: column;
38 gap: 16px;
39}
40
41.footer-brand-content {
42 display: flex;
43 flex-direction: column;
44 gap: 12px;
45}
46
47.footer-brand-logo {
48 display: flex;
49 align-items: center;
50 gap: 12px;
51 text-decoration: none;
52}
53
54.footer-logo-img {
55 width: 40px;
56 height: 40px;
57 border-radius: 8px;
58 overflow: hidden;
59 flex-shrink: 0;
60}
61
62.footer-logo-img svg {
63 width: 100%;
64 height: 100%;
65 filter: invert(1);
66}
67
68.footer-logo-text {
69 font-size: 18px;
70 font-weight: 700;
71 color: var(--text-primary, #f0f0f0);
72 letter-spacing: -0.02em;
73}
74
75.footer-brand-tagline {
76 color: var(--text-tertiary, #909090);
77 font-size: 14px;
78 line-height: 1.6;
79 max-width: 280px;
80}
81
82.footer-social-links {
83 display: flex;
84 gap: 12px;
85 margin-top: 8px;
86}
87
88.footer-social-link {
89 display: flex;
90 align-items: center;
91 justify-content: center;
92 width: 36px;
93 height: 36px;
94 border-radius: 8px;
95 background: rgba(255, 255, 255, 0.05);
96 color: var(--text-secondary, #b0b0b0);
97 text-decoration: none;
98 transition: all 0.2s ease;
99 font-size: 18px;
100}
101
102.footer-social-link:hover {
103 background: rgba(0, 212, 255, 0.15);
104 color: var(--text-primary, #f0f0f0);
105}
106
107/* Footer sections (Product, Resources, Legal) */
108.footer-section {
109 display: flex;
110 flex-direction: column;
111 gap: 16px;
112}
113
114.footer-section-title {
115 font-size: 12px;
116 font-weight: 600;
117 text-transform: uppercase;
118 letter-spacing: 0.1em;
119 color: var(--text-secondary, #b0b0b0);
120 margin-bottom: 4px;
121}
122
123.footer-section-links {
124 display: flex;
125 flex-direction: column;
126 gap: 12px;
127}
128
129.footer-link {
130 color: var(--text-tertiary, #909090);
131 text-decoration: none;
132 font-size: 14px;
133 transition: color 0.2s ease;
134 display: flex;
135 align-items: center;
136 gap: 6px;
137}
138
139.footer-link:hover {
140 color: var(--text-primary, #f0f0f0);
141}
142
143.footer-link-badge {
144 font-size: 10px;
145 padding: 2px 6px;
146 border-radius: 4px;
147 background: rgba(0, 212, 255, 0.15);
148 color: var(--color-accent-blue, #60a5fa);
149 text-transform: uppercase;
150 font-weight: 600;
151}
152
153/* Footer bottom bar */
154.footer-bottom {
155 display: flex;
156 justify-content: space-between;
157 align-items: center;
158 padding-top: 24px;
159 border-top: 1px solid rgba(255, 255, 255, 0.06);
160}
161
162.footer-copyright {
163 color: var(--text-tertiary, #909090);
164 font-size: 13px;
165}
166
167.footer-bottom-links {
168 display: flex;
169 gap: 24px;
170}
171
172.footer-bottom-link {
173 color: var(--text-tertiary, #909090);
174 text-decoration: none;
175 font-size: 13px;
176 transition: color 0.2s ease;
177}
178
179.footer-bottom-link:hover {
180 color: var(--text-primary, #f0f0f0);
181}
182
183.footer-bottom-right {
184 display: flex;
185 align-items: center;
186 gap: 24px;
187}
188
189.footer-theme-section {
190 display: flex;
191 align-items: center;
192 gap: 8px;
193}
194
195.footer-theme-label {
196 font-size: 12px;
197 color: var(--text-tertiary, #909090);
198 font-weight: 500;
199}
200
201/* Tablet: 2-column layout */
202@media (min-width: 769px) and (max-width: 1024px) {
203 .footer-grid {
204 grid-template-columns: repeat(2, 1fr);
205 gap: 40px;
206 }
207
208 .footer-brand {
209 grid-column: span 2;
210 flex-direction: row;
211 justify-content: space-between;
212 align-items: flex-start;
213 padding-bottom: 24px;
214 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
215 margin-bottom: 8px;
216 }
217
218 .footer-brand-content {
219 display: flex;
220 flex-direction: column;
221 gap: 12px;
222 }
223
224 .footer-brand-tagline {
225 max-width: 320px;
226 }
227}
228
229/* Mobile: single column */
230@media (max-width: 768px) {
231 .site-footer {
232 padding: 48px 16px 24px;
233 }
234
235 .footer-grid {
236 grid-template-columns: 1fr;
237 gap: 32px;
238 }
239
240 .footer-brand {
241 text-align: center;
242 align-items: center;
243 }
244
245 .footer-brand-tagline {
246 max-width: 100%;
247 }
248
249 .footer-social-links {
250 justify-content: center;
251 }
252
253 .footer-section {
254 align-items: center;
255 text-align: center;
256 }
257
258 .footer-section-links {
259 align-items: center;
260 }
261
262 .footer-bottom {
263 flex-direction: column;
264 gap: 16px;
265 text-align: center;
266 }
267
268 .footer-bottom-links {
269 flex-wrap: wrap;
270 justify-content: center;
271 gap: 16px;
272 }
273
274 .footer-bottom-right {
275 flex-direction: column;
276 gap: 16px;
277 }
278
279 .footer-theme-section {
280 justify-content: center;
281 }
282}
283"#;
284
285#[derive(Clone, Copy, PartialEq, Default)]
287pub enum FooterVariant {
288 #[default]
289 Full,
290 Minimal,
291}
292
293#[component]
294pub fn Footer(
295 #[props(default)]
296 variant: FooterVariant,
297) -> Element {
298 let current_year = 2026; if variant == FooterVariant::Minimal {
301 return rsx! {
302 style { "{FOOTER_STYLES}" }
303 footer { class: "site-footer",
304 div { class: "footer-container",
305 div { class: "footer-bottom",
306 span { class: "footer-copyright",
307 "© {current_year} Brahmastra Labs. All rights reserved."
308 }
309 div { class: "footer-bottom-links",
310 Link { to: "/privacy", class: "footer-bottom-link", "Privacy Policy" }
311 Link { to: "/terms", class: "footer-bottom-link", "Terms of Service" }
312 }
313 }
314 }
315 }
316 };
317 }
318
319 rsx! {
320 style { "{FOOTER_STYLES}" }
321 footer { class: "site-footer",
322 div { class: "footer-container",
323 div { class: "footer-grid",
324 div { class: "footer-brand",
326 div { class: "footer-brand-content",
327 Link { to: "/", class: "footer-brand-logo",
328 div {
329 class: "footer-logo-img",
330 dangerous_inner_html: "{LOGO_SVG}"
331 }
332 span { class: "footer-logo-text", "LOGICAFFEINE" }
333 }
334 p { class: "footer-brand-tagline",
335 "Debug your thoughts."
336 }
337 }
338 div { class: "footer-social-links",
339 a {
340 href: "https://github.com/Brahmastra-Labs/logicaffeine",
341 target: "_blank",
342 rel: "noopener noreferrer",
343 class: "footer-social-link",
344 title: "GitHub",
345 Icon { variant: IconVariant::Github, size: IconSize::Medium }
346 }
347 a {
348 href: "https://x.com/logicaffeine",
349 target: "_blank",
350 rel: "noopener noreferrer",
351 class: "footer-social-link",
352 title: "X",
353 "𝕏"
354 }
355 }
356 }
357
358 div { class: "footer-section",
360 h4 { class: "footer-section-title", "Product" }
361 nav { class: "footer-section-links",
362 Link { to: "/studio", class: "footer-link", "Studio" }
363 Link { to: "/learn", class: "footer-link", "Learn" }
364 Link { to: "/guide", class: "footer-link", "Documentation" }
365 Link { to: "/crates", class: "footer-link", "Crates" }
366 }
367 }
368
369 div { class: "footer-section",
371 h4 { class: "footer-section-title", "Resources" }
372 nav { class: "footer-section-links",
373 Link { to: "/roadmap", class: "footer-link", "Roadmap" }
374 Link { to: "/pricing", class: "footer-link", "Contact" }
375 Link { to: "/news", class: "footer-link", "News" }
376 a {
377 href: "https://github.com/Brahmastra-Labs/logicaffeine",
378 target: "_blank",
379 rel: "noopener noreferrer",
380 class: "footer-link",
381 "GitHub"
382 }
383 }
384 }
385
386 div { class: "footer-section",
388 h4 { class: "footer-section-title", "Community" }
389 nav { class: "footer-section-links",
390 a {
391 href: "https://discord.gg/pwnjnXvUHH",
392 target: "_blank",
393 rel: "noopener noreferrer",
394 class: "footer-link",
395 "Discord"
396 }
397 }
398 }
399 }
400
401 div { class: "footer-bottom",
403 span { class: "footer-copyright",
404 "© {current_year} Brahmastra Labs. All rights reserved."
405 }
406 div { class: "footer-bottom-right",
407 div { class: "footer-theme-section",
408 span { class: "footer-theme-label", "Theme:" }
409 ThemePicker {}
410 }
411 div { class: "footer-bottom-links",
412 Link { to: "/privacy", class: "footer-bottom-link", "Privacy" }
413 Link { to: "/terms", class: "footer-bottom-link", "Terms" }
414 }
415 }
416 }
417 }
418 }
419 }
420}