Skip to content

Commit

Permalink
✨ feat: add spotlight cards
Browse files Browse the repository at this point in the history
  • Loading branch information
megasanjay committed Jul 11, 2024
1 parent 8899e81 commit 6f26de9
Show file tree
Hide file tree
Showing 4 changed files with 344 additions and 78 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
"react-lottie-player": "1.5.5",
"react-spring": "^9.7.3",
"react-toastify": "9.1.3",
"react-use": "^17.5.0",
"rehype-document": "6.1.0",
"rehype-external-links": "2.1.0",
"rehype-format": "4.0.1",
Expand Down
59 changes: 59 additions & 0 deletions src/components/ui/SpotlightCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import clsx from 'clsx';
import { useRef, useMemo } from 'react';
import { useMouse } from 'react-use';

export function SpotlightCard({
as: Component = 'div',
from = 'rgba(255,255,255,0.8)',
via = null,
to = 'transparent',
size = 350,
mode = 'before',
hsl = false,
hslMin = 0,
hslMax = 360,
children,
className,
...props
}) {
const container = useRef(null);

const { elX, elY, elW, elH } = useMouse(container);

const spotlightColorStops = useMemo(() => {
if (hsl) {
const margin = hslMax - hslMin;
const rate = (elY + elX) / (elH + elW);
const hue = Math.round(margin * rate + hslMin);

return `hsl(${hue} 80% 70%),transparent`;
}

return [from, via, to].filter((value) => !!value).join(',');
}, [hsl, hslMax, hslMin, from, via, to, elY, elX, elH, elW]);

const classes =
mode == 'before'
? `before:absolute before:inset-0 before:bg-[radial-gradient(var(--spotlight-size)_circle_at_var(--x)_var(--y),var(--spotlight-color-stops))]`
: `after:absolute after:inset-0 after:bg-[radial-gradient(var(--spotlight-size)_circle_at_var(--x)_var(--y),var(--spotlight-color-stops))]`;

return (
<Component
ref={container}
className={clsx(
'relative transform-gpu overflow-hidden',
classes,
className,
)}
{...props}
style={{
'--x': `${elX}px`,
'--y': `${elY}px`,
'--spotlight-color-stops': spotlightColorStops,
'--spotlight-size': `${size}px`,
}}
>
{children}
</Component>
);
}
133 changes: 83 additions & 50 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Collaborators from '@/components/home/collaborators';
import ProjectsCarousel from '@/components/home/projectsCarousel';
// import Vision from '@/components/home/vision';
import Seo from '@/components/seo/seo';
import { SpotlightCard } from '@/components/ui/SpotlightCard';

export default function Home() {
return (
Expand Down Expand Up @@ -72,79 +73,111 @@ export default function Home() {
</h2>
</div>

<div className="flex h-full flex-col items-center justify-center gap-3 py-3 md:flex-row">
<div className="flex h-full flex-col items-center justify-start py-1 md:flex-row">
<Link
href="/sodaforsparc"
passHref
className="relative flex cursor-pointer flex-col rounded-lg border border-pink-300 bg-white p-1 shadow-md transition-all hover:border-pink-400 hover:shadow-lg md:h-[180px] md:w-7/12"
className="relative h-full cursor-pointer rounded-lg md:min-h-[180px] md:w-7/12"
>
<div className="px-8 py-4">
<h3 className="mb-2 text-2xl font-bold text-stone-900">
SODA for SPARC
</h3>

<p className="font-asap text-lg">
Easily make bioelectronic, neurophysiology, and other similar
research data and computational models FAIR following the NIH
SPARC guidelines
</p>
</div>
<SpotlightCard
from="#CD329F"
via="#CD329F"
className="relative mx-auto w-full max-w-2xl rounded-[--radius] p-8 [--radius:theme(borderRadius.2xl)]"
>
<div className="absolute inset-px rounded-[calc(var(--radius)-1px)] bg-pink-50/95"></div>

<div className="relative">
<h3 className="mb-2 text-2xl font-bold text-stone-900">
SODA for SPARC
</h3>

<p className="font-asap text-lg">
Easily make bioelectronic, neurophysiology, and other similar
research data and computational models FAIR following the NIH
SPARC guidelines
</p>
</div>
</SpotlightCard>
</Link>

<Link
href="/aireadi"
passHref
className="relative flex cursor-pointer flex-col rounded-lg border border-pink-300 bg-white p-1 shadow-md transition-all hover:border-pink-400 hover:shadow-lg md:h-[180px] md:w-5/12"
className="relative h-full cursor-pointer rounded-lg md:min-h-[180px] md:w-5/12"
>
<div className="px-8 py-4">
<h3 className="mb-2 text-2xl font-bold text-stone-900">
AI-READI
</h3>

<p className="font-asap text-lg">
Generating a flagship AI-ready and ethically-sourced dataset to
support future AI-driven discoveries in diabetes
</p>
</div>
<SpotlightCard
from="#CD329F"
via="#CD329F"
className="relative mx-auto w-full max-w-2xl rounded-[--radius] p-8 [--radius:theme(borderRadius.2xl)]"
>
<div className="absolute inset-px rounded-[calc(var(--radius)-1px)] bg-pink-50/95"></div>

<div className="relative">
<h3 className="mb-2 text-2xl font-bold text-stone-900">
AI-READI
</h3>

<p className="font-asap text-lg">
Generating a flagship AI-ready and ethically-sourced dataset
to support future AI-driven discoveries in diabetes
</p>
</div>
</SpotlightCard>
</Link>
</div>

<div className="flex h-full flex-col items-center justify-center gap-3 py-3 md:flex-row">
<div className="flex h-full flex-col items-center justify-end gap-3 py-1 md:flex-row">
<Link
href="/codefair"
passHref
className="relative flex cursor-pointer flex-col rounded-lg border border-pink-300 bg-white p-1 shadow-md transition-all hover:border-pink-400 hover:shadow-lg md:h-[200px] md:w-5/12"
className="cursor-pointer rounded-lg md:min-h-[200px] md:w-5/12"
>
<div className="px-8 py-4">
<h3 className="mb-2 text-2xl font-bold text-stone-900">
Codefair
</h3>

<p className="font-asap text-lg">
codefair is your personal assistant when it comes to making your
research software reusable and especially complying with the
Findable, Accessible, Interoperable, Reusable (FAIR) Principles
for Research Software.
</p>
</div>
<SpotlightCard
from="#CD329F"
via="#CD329F"
className="relative mx-auto w-full max-w-2xl rounded-[--radius] p-8 [--radius:theme(borderRadius.2xl)]"
>
<div className="absolute inset-px rounded-[calc(var(--radius)-1px)] bg-pink-50/95"></div>

<div className="relative">
<h3 className="mb-2 text-2xl font-bold text-stone-900">
Codefair
</h3>

<p className="font-asap text-lg">
codefair is your personal assistant when it comes to making
your research software reusable and especially complying with
the Findable, Accessible, Interoperable, Reusable (FAIR)
Principles for Research Software.
</p>
</div>
</SpotlightCard>
</Link>

<Link
href="/fair-biors"
passHref
className="relative flex cursor-pointer flex-col rounded-lg border border-pink-300 bg-white p-1 shadow-md transition-all hover:border-pink-400 hover:shadow-lg md:h-[200px] md:w-7/12"
className="cursor-pointer rounded-lg md:min-h-[200px] md:w-7/12"
>
<div className="px-8 py-4">
<h3 className="mb-2 text-2xl font-bold text-stone-900">
FAIR Biomedical Research Software (FAIR-BioRS) guidelines
</h3>

<p className="font-asap text-lg">
The FAIR-BioRS guidelines are a set of minimal and actionable
step-by-step instructions for making biomedical research
software FAIR
</p>
</div>
<SpotlightCard
from="#CD329F"
via="#CD329F"
className="relative mx-auto w-full max-w-2xl rounded-[--radius] p-8 [--radius:theme(borderRadius.2xl)]"
>
<div className="absolute inset-px rounded-[calc(var(--radius)-1px)] bg-pink-50/95"></div>

<div className="relative">
<h3 className="mb-2 text-2xl font-bold text-stone-900">
FAIR Biomedical Research Software (FAIR-BioRS) guidelines
</h3>

<p className="font-asap text-lg">
The FAIR-BioRS guidelines are a set of minimal and actionable
step-by-step instructions for making biomedical research
software FAIR
</p>
</div>
</SpotlightCard>
</Link>
</div>

Expand Down
Loading

0 comments on commit 6f26de9

Please sign in to comment.