Skip to content

feat:Design & Implement a Premium Footer #80

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

feat:Design & Implement a Premium Footer #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5524bfa
feat:Design & Implement a Premium Footer
khedkaravani-rgb Jul 18, 2026
a40add6
feat:updated Kepler logo in footer
khedkaravani-rgb Jul 18, 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
98 changes: 98 additions & 0 deletions frontend/src/components/layouts/FooterHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { Link } from "react-router-dom";
import { ShimmerButton } from "@/components/ui/shimmer-button";
import { Particles } from "@/components/ui/particles";

export default function FooterHero() {
return (
<section className="relative overflow-hidden rounded-[40px] border border-white/10 bg-gradient-to-b from-[#0A1020] via-[#091425] to-[#050811] backdrop-blur-xl px-8 py-24 text-center">
<div className="absolute inset-0 overflow-hidden rounded-[40px]">
<Particles
className="absolute inset-0"
color="#4FE0C8"
quantity={180}
refresh={false}
/>
</div>
{/* Background Glow */}
<div className="absolute inset-0">
<div className="absolute left-1/2 top-0 h-[500px] w-[500px] -translate-x-1/2 rounded-full bg-cyan-500/10 blur-[140px]" />
<div className="absolute left-1/2 top-16 h-[700px] w-[700px] -translate-x-1/2 rounded-full border border-cyan-400/5" />
<div className="absolute left-1/2 top-28 h-[520px] w-[520px] -translate-x-1/2 rounded-full border border-cyan-400/5" />
</div>

<div className="relative z-10 max-w-4xl mx-auto">

{/* Badge */}

<div className="inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-cyan-500/10 px-5 py-2 text-xs uppercase tracking-[0.22em] text-cyan-300">
<span className="h-2 w-2 rounded-full bg-cyan-400 animate-pulse"></span>
AI-Powered Autonomous Space Traffic
</div>

{/* Heading */}

<h2 className="mt-8 text-5xl md:text-6xl lg:text-7xl font-bold leading-tight text-white">
Ready to Shape the
<br />

<span className="bg-gradient-to-r from-cyan-300 via-[#5EE7FF] to-[#8B5CF6] bg-clip-text text-transparent">
Future of Space Traffic?
</span>
</h2>
<div
className="absolute left-1/2 top-44 -translate-x-1/2 h-56 w-[36rem] rounded-full blur-[130px] bg-cyan-500/10"
/>
{/* Description */}

<p className="mx-auto mt-8 max-w-3xl text-lg leading-8 text-slate-400">
Discover how Kepler is building the next generation of
AI-powered autonomous space traffic management for safer,
smarter, and more efficient orbital operations.
</p>

{/* Buttons */}

<div className="mt-14 flex flex-wrap justify-center gap-6">

<Link to="/dashboard">
<ShimmerButton className="rounded-full px-8 py-3 text-base font-semibold">
Get Started
</ShimmerButton>
</Link>
Comment thread
khedkaravani-rgb marked this conversation as resolved.

<Link
to="/#contact"
className="rounded-full border border-white/15 bg-white/5 px-8 py-3 font-medium text-white backdrop-blur transition-all duration-300 hover:border-cyan-400/40 hover:bg-cyan-400/10 hover:text-cyan-200"
>
Contact Us
</Link>
Comment thread
khedkaravani-rgb marked this conversation as resolved.
Comment thread
khedkaravani-rgb marked this conversation as resolved.

</div>

<div className="mt-16 flex flex-wrap justify-center gap-10 text-center">

<div>
<h3 className="text-3xl font-bold text-cyan-300">12,400+</h3>
<p className="text-slate-500 text-sm">Objects Tracked</p>
</div>

<div>
<h3 className="text-3xl font-bold text-cyan-300">99.982%</h3>
<p className="text-slate-500 text-sm">Conjunction Recall</p>
</div>

<div>
<h3 className="text-3xl font-bold text-cyan-300">&lt;40ms</h3>
<p className="text-slate-500 text-sm">Decision Latency</p>
</div>
<div>
<h3 className="text-3xl font-bold text-cyan-300">0</h3>
<p className="text-slate-500 text-sm">Unresolved Conflicts, to date</p>
</div>

</div>

</div>
</section>
);
}
162 changes: 162 additions & 0 deletions frontend/src/components/layouts/FooterLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
import { Link } from "react-router-dom";
import { MagicCard } from "@/components/ui/magic-card";

const platformLinks = [
{ label: "Product", to: "/product" },
{ label: "Solutions", to: "/solutions" },
{ label: "Developers", to: "/developers" },
{ label: "Technology", to: "/technologies" },
Comment thread
khedkaravani-rgb marked this conversation as resolved.
Comment thread
khedkaravani-rgb marked this conversation as resolved.
{ label: "Dashboard", to: "/dashboard" },
];

const companyLinks = [
{ label: "About", to: "/about" },
{ label: "Careers", to: "#" },
{ label: "Blog", to: "#" },
Comment thread
khedkaravani-rgb marked this conversation as resolved.
{ label: "Contact", to: "/#contact" },
];

const resourceLinks = [
{ label: "Documentation", to: "/docs" },
{ label: "FAQs", to: "#" },
Comment thread
khedkaravani-rgb marked this conversation as resolved.
{ label: "Support", to: "/#contact" },
];

export default function FooterLinks() {
return (
<section className="relative py-24">

{/* Huge Background Wordmark */}

<div
aria-hidden
className="pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden"
>
<img
src="/Logo.svg"
alt=""
width={20}
height={20}
className="h-5 w-5 object-contain"
/>
<h1 className="select-none text-[180px] md:text-[260px] lg:text-[340px] font-black tracking-[0.2em] text-white/[0.03]">
KEPLER
</h1>
</div>
Comment thread
khedkaravani-rgb marked this conversation as resolved.

<div className="relative z-10 mx-auto max-w-7xl px-6">

<div className="grid gap-12 lg:grid-cols-[1.2fr_2fr]">

{/* Brand */}

<div className="max-w-md">

<div className="flex items-center gap-4">

<img
src="/Logo.svg"
alt="Kepler"
className="h-12 w-12"
/>

<div>

<h2 className="font-necosmic text-[26px] text-white tracking-wide font-medium">
KEPLER
</h2>

<p className="mt-1 text-sm uppercase tracking-[0.22em] text-cyan-300">
AI-Powered Space Traffic Platform
</p>
Comment thread
khedkaravani-rgb marked this conversation as resolved.

</div>

</div>

<p className="mt-7 text-slate-400 leading-9">
Kepler delivers intelligent orbital monitoring,
autonomous collision avoidance, mission planning,
and real-time traffic management for the next
generation of space operations.
</p>

<div className="mt-10 flex items-center gap-3">

<span className="h-3 w-3 rounded-full bg-cyan-400 animate-pulse"></span>

<span className="text-cyan-300">
All Systems Operational
</span>

</div>

</div>

{/* Navigation */}

<div className="grid gap-6 md:grid-cols-3">

<FooterCard
title="Platform"
links={platformLinks}
/>

<FooterCard
title="Company"
links={companyLinks}
/>

<FooterCard
title="Resources"
links={resourceLinks}
/>

</div>

</div>

</div>

</section>
);
}

function FooterCard({
title,
links,
}: {
title: string;
links: { label: string; to: string }[];
}) {
return (
<MagicCard
className="rounded-3xl border border-white/10 bg-white/[0.03] p-7 backdrop-blur-xl"
>
<h3 className="mb-6 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-300">
{title}
</h3>

<div className="space-y-4">

{links.map((link) => (
<Link
key={link.label}
to={link.to}
className="
block
text-slate-400
transition-all
duration-300
hover:translate-x-2
hover:text-white
"
>
{link.label}
</Link>
))}

</div>
</MagicCard>
);
}
115 changes: 115 additions & 0 deletions frontend/src/components/layouts/FooterSocials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import {
ArrowRight,
Mail,
Heart,
} from "lucide-react";
Comment thread
khedkaravani-rgb marked this conversation as resolved.

const socials = [
{
name: "Email",
href: "mailto:contact@kepler.ai",
icon: Mail,
},
];
Comment thread
khedkaravani-rgb marked this conversation as resolved.

export default function FooterSocials() {
return (
<section className="relative">

{/* Divider */}

<div className="h-px bg-gradient-to-r from-transparent via-cyan-400/20 to-transparent" />

<div className="mx-auto max-w-7xl px-6 py-8">

<div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">

{/* Copyright */}

<div>

<p className="text-sm text-slate-400">
© {new Date().getFullYear()} Kepler.
All rights reserved.
</p>

<p className="mt-2 text-sm text-slate-500">
AI-Powered Autonomous Space Traffic Management Platform.
</p>

</div>

{/* Social Icons */}

<div className="flex items-center gap-4">

{socials.map((social) => {
const Icon = social.icon;

return (
<a
key={social.name}
href={social.href}
target="_blank"
rel="noopener noreferrer"
aria-label={social.name}
className="
group
flex
h-12
w-12
items-center
justify-center
rounded-full
border
border-white/10
bg-white/[0.03]
backdrop-blur-lg
transition-all
duration-300
hover:-translate-y-1
hover:border-cyan-400/40
hover:bg-cyan-400/10
hover:shadow-[0_0_30px_rgba(94,231,255,.25)]
"
>
<Icon
size={20}
className="
text-slate-400
transition-colors
duration-300
group-hover:text-cyan-300
"
/>
</a>
);
})}

</div>

</div>

{/* Bottom Attribution */}

<div className="mt-8 flex justify-center">

<p className="flex items-center gap-2 text-sm text-slate-500">

Built with

<Heart
size={14}
className="fill-red-500 text-red-500"
/>

by 7Blocks

</p>

</div>

</div>
</section>
);
}
Loading
Loading