Skip to content
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

Jump to bottom

Refactor footer #563

Merged
merged 4 commits into from
Jul 3, 2024
Merged

Refactor footer #563

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
708cadc
refactor: footer non responsive
Jad31 Jul 2, 2024
10c2b81
fix: responsiveness
Jad31 Jul 2, 2024
f822161
Update website/src/common/Footer.tsx
frouioui Jul 3, 2024
836f856
fix: responsiveness
Jad31 Jul 3, 2024
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
75 changes: 27 additions & 48 deletions website/src/common/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,8 @@ const Footer: React.FC = () => {
links: [
{ title: "Daily", to: "/daily" },
{ title: "Compare", to: "/compare" },
{ title: "Micro", to: "/micro" },
{ title: "Macro", to: "/macro" },
{ title: "PR", to: "/pr" },
{ title: "History", to: "/history" },
],
},
{
Expand All @@ -64,70 +63,50 @@ const Footer: React.FC = () => {
{ title: "Community", to: "https://vitess.io/community" },
],
},
{
title: "arewefastyet",
links: [
{ title: "GitHub", to: "https://www.github.com/vitessio/arewefastyet" },
],
},
];

return (
<footer className="p-page relative mt-10 py-20 text-black">
<div className="absolute bottom-6 left-6 right-6 top-6 -z-1 rounded-lg bg-primary" />
<div className="flex flex-col gap-5 md:flex-row justify-center md:justify-between text-sm font-light tracking-tight">
<div
className={`flex basis-[20%] flex-col items-center gap-y-5 opacity-90 drop-shadow-[0px_0px_0px_theme("colors.back")]`}
>
<img
src="/logo.png"
alt="agrosurance logo"
className="aspect-square w-1/3"
/>
<h2 className="text-xl font-medium">arewefastyet</h2>
<footer className="m-auto w-full border-border/40 lg:px-60 md:px-12 sm:px-6 py-12 text-foreground border-t">
<div className="flex flex-col gap-8 lg:gap-28 lg:flex-row md:justify-center text-sm font-light tracking-tight lg:pr-64">
<div className="md:flex m-auto lg:m-0 flex-col gap-y-4 lg:gap-y-12 lg:order-1 order-2">
<div className="flex gap-x-2 items-center">
<img
src="/logo.png"
alt="vitess logo"
className="aspect-square h-10 w-10 md:h-12 md:w-12 md:shrink-0"
/>
<h2 className="text-3xl font-normal">arewefastyet</h2>
</div>
<div className="my-2 flex justify-between md:justify-center px-5 md:px-0 gap-x-4">
<div className="flex items-center gap-x-8">
{socials.map((social, key) => (
<Link key={key} to={social.url} target="__blank" className="">
<social.icon className="text-foreground hover:text-primary/80 md:text-4xl text-2xl" />
</Link>
))}
</div>
</div>
</div>
<div className="flex md:gap-[3em] px-5 md:px-0 justify-between md:justify-end">
<div className="flex order-1 md:gap-[12em] gap-[6em] xl:pl-24 m-auto md:justify-center">
{items.map((item, key) => (
<div key={key} className="flex flex-col">
<h5 className="font-semibold">{item.title}</h5>
<div className="my-4 md:my-7 flex flex-col gap-y-3">
<h5 className="font-bold md:text-lg text-base">{item.title}</h5>
<div className="my-4 md:my-7 flex flex-col gap-y-2">
{item.links.map((link, key) => (
<Link key={key} to={link.to}>
<Link className="md:text-base text-xs text-foreground/80 hover:text-primary/80" key={key} to={link.to}>
{link.title}
</Link>
))}
</div>
</div>
))}
</div>

{/* <div className="flex flex-col items-center text-center text-back text-opacity-80">
<h5 className="my-3 text-4xl font-bold tracking-tighter text-back">
TRULY TESTED
</h5>
<p>A cutting edge Benchmarking</p>
<p>approach for uparalleled</p>
<p>Database Speed</p>
<p className="font-semibold text-back">for vitess</p>
</div> */}
{/* <div className="w-[15%]" /> */}
</div>
<div className="my-2 flex justify-between md:justify-start px-5 md:px-0 gap-x-4">
<p className="font-mono md:text-xl font-bold">Follow Us</p>
<div className="flex items-center gap-x-3">
{socials.map((social, key) => (
<Link key={key} to={social.url} target="__blank" className="">
<social.icon size={33} />
</Link>
))}
</div>
</div>
<div className="my-2 w-full border border-black"></div>
<div className="mt-4 text-center md:text-left text-xs">
<div className="mt-8 lg:mt-4 text-center md:text-center text-medium">
@vitessio/arewefastyet
</div>
</footer>
);
};

export default Footer;
export default Footer;
Loading