Skip to content

feat(footer): improve footer layout with additional content and styling #55

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
calebephrem merged 2 commits into from
Jul 31, 2026
Merged

feat(footer): improve footer layout with additional content and styling #55

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
228f3c7
feat: adding footer content to improve footer layout
Shamanth-Kumar-K Jul 31, 2026
d5cd7f3
fix: address review comments
Shamanth-Kumar-K Jul 31, 2026
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
208 changes: 166 additions & 42 deletions components/site/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,51 @@ const footerLinks = [
{ label: "Partners", href: "/partners" },
];

const highlightItems = [
{
label: "Privacy Policy",
href: "/pages/privacy-policy",
icon: (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 2 4 5v6c0 5 3.4 8.7 8 11 4.6-2.3 8-6 8-11V5z" />
<path d="M12 8v4" />
<circle cx="12" cy="15" r="0.6" fill="currentColor" stroke="none" />
</svg>
),
},
{
label: "Security Notice",
href: "/pages/security-notice",
icon: (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 2 4 5v6c0 5 3.4 8.7 8 11 4.6-2.3 8-6 8-11V5z" />
<path d="m9 12 2 2 4-4" />
</svg>
),
},
{
label: "Code of Conduct",
href: "/pages/code-of-conduct",
icon: (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
<circle cx="8" cy="8" r="3" />
<circle cx="17" cy="9" r="2.5" />
<path d="M2.5 20c0-3.5 2.7-6 5.5-6s5.5 2.5 5.5 6" />
<path d="M14.5 20c.3-2.6 1.9-4.6 4-4.9" />
</svg>
),
},
{
label: "Acknowledgements",
href: "/pages/acknowledgements",
icon: (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
<path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0L12 5.34l-.77-.76a5.4 5.4 0 1 0-7.65 7.65L12 20l8.42-7.77a5.4 5.4 0 0 0 0-7.65z" />
</svg>
),
},
];

export default function Footer() {
return (
<footer
Expand All @@ -32,7 +77,7 @@ export default function Footer() {
/>

<div className="max-w-6xl mx-auto px-6 py-16">
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 mb-12">
<div className="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
{/* Brand */}
<div>
<div className="flex items-center gap-2 mb-4">
Expand Down Expand Up @@ -106,70 +151,148 @@ export default function Footer() {
>
Community
</h4>
<div className="flex gap-3">
<div className="flex flex-col gap-3">
<a
href="/join"
target="_blank"
rel="noopener noreferrer"
className="w-9 h-9 flex items-center justify-center transition-all hover:border-[rgba(99,102,241,0.5)]"
style={{
background: indigo(0.06),
border: `1px solid ${indigo(0.15)}`,
color: text.dim,
}}
className="flex items-center gap-2.5 group"
aria-label="Discord"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="currentColor"
<span
className="w-8 h-8 flex items-center justify-center flex-shrink-0 transition-all group-hover:border-[rgba(99,102,241,0.5)]"
style={{
background: indigo(0.06),
border: `1px solid ${indigo(0.15)}`,
color: text.dim,
}}
>
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057.1 18.079.11 18.1.124 18.116a19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
</svg>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057.1 18.079.11 18.1.124 18.116a19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</span>
<span
className="text-sm transition-colors group-hover:text-[#a5b4fc]"
style={{
fontFamily: "var(--font-geist-mono)",
color: text.veryDim,
}}
>
Discord
</span>
</a>
<a
href="/github"
target="_blank"
rel="noopener noreferrer"
className="w-9 h-9 flex items-center justify-center transition-all hover:border-[rgba(99,102,241,0.5)]"
style={{
background: indigo(0.06),
border: `1px solid ${indigo(0.15)}`,
color: text.dim,
}}
className="flex items-center gap-2.5 group"
aria-label="GitHub"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="currentColor"
<span
className="w-8 h-8 flex items-center justify-center flex-shrink-0 transition-all group-hover:border-[rgba(99,102,241,0.5)]"
style={{
background: indigo(0.06),
border: `1px solid ${indigo(0.15)}`,
color: text.dim,
}}
>
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
</svg>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
</svg>
</span>
<span
className="text-sm transition-colors group-hover:text-[#a5b4fc]"
style={{
fontFamily: "var(--font-geist-mono)",
color: text.veryDim,
}}
>
GitHub
</span>
</a>
<a
href={`mailto:${email}`}
className="w-9 h-9 flex items-center justify-center transition-all hover:border-[rgba(99,102,241,0.5)]"
style={{
background: indigo(0.06),
border: `1px solid ${indigo(0.15)}`,
color: text.dim,
}}
className="flex items-center gap-2.5 group"
aria-label="Email"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="currentColor"
<span
className="w-8 h-8 flex items-center justify-center flex-shrink-0 transition-all group-hover:border-[rgba(99,102,241,0.5)]"
style={{
background: indigo(0.06),
border: `1px solid ${indigo(0.15)}`,
color: text.dim,
}}
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M3 5.25C3 4.007 4.007 3 5.25 3h13.5C19.993 3 21 4.007 21 5.25v13.5c0 1.243-1.007 2.25-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18.75V5.25zm2.052-.75a.75.75 0 0 0-.552.243L12 11.46l7.5-6.717a.75.75 0 0 0-.552-.243H5.052zm13.698 2.64L12.796 12.03a.75.75 0 0 1-.592.27.75.75 0 0 1-.592-.27L5.25 7.14v11.61h13.5V7.14z" />
</svg>
</span>
<span
className="text-sm transition-colors group-hover:text-[#a5b4fc]"
style={{
fontFamily: "var(--font-geist-mono)",
color: text.veryDim,
}}
>
<path d="M3 5.25C3 4.007 4.007 3 5.25 3h13.5C19.993 3 21 4.007 21 5.25v13.5c0 1.243-1.007 2.25-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18.75V5.25zm2.052-.75a.75.75 0 0 0-.552.243L12 11.46l7.5-6.717a.75.75 0 0 0-.552-.243H5.052zm13.698 2.64L12.796 12.03a.75.75 0 0 1-.592.27.75.75 0 0 1-.592-.27L5.25 7.14v11.61h13.5V7.14z" />
</svg>
Email
</span>
</a>
</div>
</div>

{/* Highlights */}
<div>
<h4
className="text-xs uppercase tracking-widest mb-4"
style={{
fontFamily: "var(--font-geist-mono)",
color: accent.indigoLightest,
}}
>
Highlights
</h4>
<ul className="space-y-3 mb-6">
{highlightItems.map((item) => (
<li key={item.label}>
<Link
href={item.href}
className="flex items-center gap-2 text-sm transition-colors hover:text-[#a5b4fc]"
Comment on lines +264 to +274

@beetle-ai beetle-ai Bot Jul 31, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new Highlights section uses the Link component (line 264), but there's no visible import statement for it in the patch. If Link is not imported from next/link or another source, this will cause a runtime error.

Confidence: 4/5

Suggested Fix

Verify that Link is imported at the top of the file. If not present, add:

Suggested change
color: accent.indigoLightest,
}}
>
Highlights
</h4>
<ul className="space-y-3 mb-6">
{highlightItems.map((item) => (
<li key={item.label}>
<Link
href={item.href}
className="flex items-center gap-2 text-sm transition-colors hover:text-[#a5b4fc]"
import Link from "next/link";

This import should be added to the imports section at the beginning of the file (typically near other React/Next.js imports).

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In components/site/Footer.tsx, the new Highlights section uses the Link component
starting at line 264, but the import statement for Link from "next/link" may be missing.
Add the import statement at the top of the file if it's not already present:
import Link from "next/link";

📍 This suggestion applies to lines 264-274

style={{
fontFamily: "var(--font-geist-mono)",
color: text.veryDim,
}}
>
<span style={{ color: accent.indigo }}>{item.icon}</span>
{item.label}
</Link>
</li>
))}
</ul>
<p
className="text-xs italic leading-relaxed max-w-[220px]"
style={{
fontFamily: "var(--font-geist-mono)",
color: text.veryDim,
}}
>
&ldquo;Code. Create. Collaborate.&rdquo;
</p>
</div>
</div>

{/* Bottom */}
Expand All @@ -193,7 +316,8 @@ export default function Footer() {
color: text.veryDim,
}}
>
Built with love by the community, for the community.
Built with ❤️ by the community, for the community.

</p>
</div>
</div>
Expand Down
Loading