Skip to content
This repository has been archived by the owner on May 14, 2024. It is now read-only.

Commit

Permalink
Redesign sponsors page
Browse files Browse the repository at this point in the history
  • Loading branch information
@cherriae
cherriae committed Apr 11, 2024
1 parent 771f452 commit cbeb4ec
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 267 deletions.
110 changes: 51 additions & 59 deletions app/sponsors/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,71 @@
"use client"
import {AuroraBackground} from "@/components/aceternity/ui/aurora";
import {motion} from "framer-motion";
import {BentoGrid} from "@/components/aceternity/ui/bento-grid";
import {BentoGridItem} from "@/components/aceternity/ui/direction-aware-hover";
import {Image} from "@nextui-org/react";
import React from "react";
import {BackgroundGradient} from "@/components/aceternity/ui/bg-gradient-card";
import {Link} from "@nextui-org/link";


export default function SponsorPage() {
const bentoItems = [
{
image: "/logos/first.png",
text: <div>
<h1 className={"main"}>FIRST</h1>
</div>,
title: "FIRST",
url: "https://www.firstinspires.org/",
className:
"md:col-span-1",
description: ""
},
{
image: "/sponsors/alumni-foundation.png",
text: <div>
<h1 className={"main"}>Brooklyn Tech Alumni Foundation</h1>
</div>,
title: "Brooklyn Tech Alumni Foundation",
url: "",
className:
"md:col-span-2",
description: ""
},
{
image: "/sponsors/arament.png",
text: <div>
<h1 className={"main"}>Arament Research, Development and Engineering Center</h1>
</div>,
title: "Arament Research, Development and Engineering Center",
url: "",
className:
"md:col-span-2",
description: ""
},
{
image: "/sponsors/con-edison.png",
text: <div>
<h1 className={"main"}>Con Edison</h1>
</div>,
title: "Con Edison",
url: "https://www.coned.com/en",
className:
"md:col-span-1",
description: ""
},
{
image: "/sponsors/dodstem.png",
text: <div>
<h1 className={"main"}>DoD STEM</h1>
</div>,
title: "DoD STEM",
url: "https://www.dodstem.us",
className:
"md:col-span-1",
description: ""
},
{
image: "/sponsors/haas-foundation.png",
text: <div>
<h1 className={"main"}>Gene HAAS Foundation</h1>
</div>,
title: "Gene HAAS Foundation",
url: "https://ghaasfoundation.org/content/ghf/en/home.html",
className:
"md:col-span-1",
description: ""
},
{
image: "/sponsors/ike-heller.png",
text: <div>
<h1 className={"main"}>Ike Heller</h1>
</div>,
title: "Ike Heller",
url: "",
className:
"md:col-span-1",
description: ""
},
{
image: "/sponsors/quotebeam.png",
text: <div>
<h1 className={"main"}>QuoteBeam</h1>
</div>,
title: "QuoteBeam",
url: "https://quotebeam.com",
className:
"md:col-span-1.5",
description: ""
},
{
image: "/sponsors/whimsy-tech.png",
text: <div>
<h1 className={"main"}>Whimsy Tech</h1>
</div>,
title: "Whimsy Tech",
url: "https://whimsytech.com",
className:
"md:col-span-2",
},
description: ""
}
];


return (
<div className={"w-full"}>
<AuroraBackground>
Expand All @@ -112,18 +87,35 @@ export default function SponsorPage() {
</div>
</motion.div>
</AuroraBackground>
<div className={"h-full py-20"}>
<BentoGrid className="max-w-8xl mx-auto md:auto-rows-[30rem] p-10">
<div className={"h-full py-20 items-center justify-center"}>
<div className="flex flex-wrap justify-center gap-5">
{bentoItems.map((item, i) => (
<BentoGridItem
key={i}
image={item.image}
text={item.text}
url={item.url}
className={item.className}
/>
))}
</BentoGrid>
<BackgroundGradient
className="rounded-[22px] max-w-sm p-4 sm:p-10 bg-white dark:bg-zinc-900 flex flex-col justify-between"
key={i}>
<div className="h-[400px] w-[300px] flex flex-col justify-between">
<div className="flex items-center justify-center h-[300px] overflow-hidden">
<Image
src={item.image}
alt="sponsor"
width={300}
height={300}
className="max-w-full max-h-full object-contain object-center"
/>
</div>
<div className="mt-4">
<Link className="text-base sm:text-xl text-black dark:text-neutral-200"
href={item.url}>
{item.title}
</Link>
<p className="text-sm text-neutral-600 dark:text-neutral-400">
{item.description}
</p>
</div>
</div>
</BackgroundGradient>
))}
</div>
</div>
</div>
);
Expand Down
72 changes: 72 additions & 0 deletions components/aceternity/ui/bg-gradient-card.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { cn } from "@/components/cn";
import React from "react";
import { motion } from "framer-motion";

export const BackgroundGradient = ({
children,
className,
containerClassName,
animate = true,
}: {
children?: React.ReactNode;
className?: string;
containerClassName?: string;
animate?: boolean;
}) => {
const variants = {
initial: {
backgroundPosition: "0 50%",
},
animate: {
backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
},
};
return (
<div className={cn("relative p-[4px] group", containerClassName)}>
<motion.div
variants={animate ? variants : undefined}
initial={animate ? "initial" : undefined}
animate={animate ? "animate" : undefined}
transition={
animate
? {
duration: 5,
repeat: Infinity,
repeatType: "reverse",
}
: undefined
}
style={{
backgroundSize: animate ? "400% 400%" : undefined,
}}
className={cn(
"absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl transition duration-500 will-change-transform",
" bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"
)}
/>
<motion.div
variants={animate ? variants : undefined}
initial={animate ? "initial" : undefined}
animate={animate ? "animate" : undefined}
transition={
animate
? {
duration: 5,
repeat: Infinity,
repeatType: "reverse",
}
: undefined
}
style={{
backgroundSize: animate ? "400% 400%" : undefined,
}}
className={cn(
"absolute inset-0 rounded-3xl z-[1] will-change-transform",
"bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"
)}
/>

<div className={cn("relative z-10", className)}>{children}</div>
</div>
);
};
Loading

1 comment on commit cbeb4ec

@vercel
Copy link

@vercel vercel bot commented on cbeb4ec Apr 11, 2024

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

web-new – ./

team334.vercel.app
bths.vercel.app
web-new-techknights.vercel.app
techknights.vercel.app
web-new-git-main-techknights.vercel.app
bthsrobotics.vercel.app

Please sign in to comment.