Skip to content

Commit

Permalink
Merge pull request #23 from celestiaorg/feature/banner
Browse files Browse the repository at this point in the history 
Banner for Mammothon
  • Loading branch information
@gabros20
gabros20 authored Jan 16, 2025
2 parents dceb28b + 4a3fb2a commit 4dcea82
Show file tree
Hide file tree
Showing 12 changed files with 548 additions and 444 deletions.
Binary file added public/images/components/banner/mamothon-image.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 10 additions & 7 deletions src/app/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import "./styles/text-link.scss";
import { Suspense } from "react";
import meta from "@/components/Meta/Meta";
import LoadingScreen from "@/components/Loading/LoadingScreen";
import { BannerProvider } from "@/context/BannerContext";
import PlausibleProvider from "next-plausible";

export const metadata = meta();
Expand All @@ -27,13 +28,15 @@ export default function RootLayout({ children }) {
/>
</head>
<body className={`text-black`}>
<ScrollPositionProvider>
<Nav />
<main id={"main-content"}>
<Suspense fallback={<LoadingScreen />}>{children}</Suspense>
</main>
<Footer />
</ScrollPositionProvider>
<BannerProvider>
<ScrollPositionProvider>
<Nav />
<main id={"main-content"}>
<Suspense fallback={<LoadingScreen />}>{children}</Suspense>
</main>
<Footer />
</ScrollPositionProvider>
</BannerProvider>
</body>
</html>
);
Expand Down
18 changes: 10 additions & 8 deletions src/components/Banner/Banner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,33 @@ import TertiaryButton from "@/macros/Buttons/TertiaryButton";
import { useScrollPosition } from "@/utils/scrollLock";

export default function Banner() {
const { isBannerVisible, setIsBannerVisible } = useBanner();
const { isBannerVisible, setIsBannerVisible, bannerRef } = useBanner();
const { menuIsOpen } = useScrollPosition();

if (!isBannerVisible || menuIsOpen) return null;
if (!isBannerVisible || menuIsOpen) {
return null;
}

return (
<div className='relative'>
<div className='relative' ref={bannerRef}>
{/* Background color */}
<div className='absolute inset-0 bg-[#1D013D]' />
{/* Background image with opacity */}
<div className="absolute inset-0 bg-[url('/images/components/banner/mamothon-image.jpg')] bg-cover bg-center" />
{/* Content */}
<div className='relative px-3 py-3 sm:px-6 lg:px-8'>
<div className='flex flex-col justify-center gap-3 md:flex-row'>
<div className='flex justify-between md:items-center'>
<div className='flex items-center'>
<p className='font-medium text-white '>
<p className='font-medium text-white'>
<span className='sm:hidden'>
<span className='mr-4 text-white text-[15px]'>It&apos;s time to go bigger!</span>
<br />
<span className='text-[#D7B9FF] mr-2 text-[15px]'>Mammothon global hackathon begins</span>
<br />
<span className='mr-2 text-white text-[15px]'>Feb 1</span>
<span className='text-white mr-2 text-[15px]'>Mammothon global hackathon begins Feb 1</span>
</span>
<span className='hidden sm:inline'>
<span className='text-white'>Time to go bigger!</span>{" "}
<span className='text-[#D7B9FF]'>Mammothon global hackathon begins</span>{" "}
<span className='text-white'>Mammothon global hackathon begins</span>{" "}
<span className='text-white'>February 1</span>
</span>
</p>
Expand Down
160 changes: 73 additions & 87 deletions src/components/Cards/ProjectCard/ProjectCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,93 +8,79 @@ import CategoryPill from "@/macros/Pills/CategoryPill";
import { motion } from "framer-motion";
import { stringToId } from "@/utils/stringToId";

const ProjectCard = ({
title,
description,
url,
dark = false,
image,
categories = [],
}) => {
const Tag = url ? Link : "div";
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
id={stringToId(title)}
>
<Tag
href={url || ""}
className={`flex w-full group border-b transition-colors hover:duration-100 group-hover:duration-100 duration-300 delay-0 py-6 px-2 lg:px-6 gap-5 min-h-[100px] ${
dark
? "bg-black text-white border-white hover:border-black hover:bg-white hover:text-black"
: "bg-white text-black border-black hover:border-white hover:bg-black hover:text-white"
}`}
>
<div
className={`w-10 relative grow-0 shrink-0 flex items-start content-center transition-all hover:duration-100 group-hover:duration-100 duration-300`}
>
<Image
className={`flex-grow-0 justify-self-center w-full max-w-10 rounded-full overflow-hidden`}
width={40}
height={40}
src={image}
alt={`${title} logo`}
/>
</div>
<div className={`content-center`}>
<Label
tag={"h3"}
size={"lg"}
className={`transition-colors hover:duration-100 group-hover:duration-100 duration-300 flex items-center ${
dark
? "text-white group-hover:text-black"
: "text-black group-hover:text-white"
}`}
>
{title}
{!url && (
<Body size={"sm"} className={`text-pretty`}>
- Coming Soon
</Body>
)}
</Label>
<Body size={"sm"} className={`text-pretty`}>
{description}
</Body>
{categories.length > 0 && (
<div className={`flex flex-wrap gap-1 mt-1`}>
{categories.map((category, index) => {
return (
<CategoryPill key={`category-pill-${index}`} hover>
{category}
</CategoryPill>
);
})}
</div>
)}
</div>
<div
className={`w-10 relative grow-0 shrink-0 flex items-start content-center transition-all hover:duration-100 group-hover:duration-100 duration-300 mr-0 ml-auto`}
>
{url && (
<Icon
Icon={<ArrowLongSVG dark={dark} />}
hover
HoverIcon={<ArrowLongSVG dark={!dark} />}
className={`flex-grow-0 shrink-0 justify-self-center group-hover:bg-white`}
direction={`top-right`}
border={false}
dark={dark}
transparentBg
size={"40"}
/>
)}
</div>
</Tag>
</motion.div>
);
const ProjectCard = ({ title, description, url, dark = false, image, categories = [] }) => {
const Tag = url ? Link : "div";
return (
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} id={stringToId(title)}>
<Tag
href={url || ""}
className={`flex w-full group border-b transition-colors hover:duration-100 group-hover:duration-100 duration-300 delay-0 py-6 px-2 lg:px-6 gap-5 min-h-[100px] ${
dark
? "bg-black text-white border-white hover:border-black hover:bg-white hover:text-black"
: "bg-white text-black border-black hover:border-white hover:bg-black hover:text-white"
}`}
>
<div
className={`w-10 relative grow-0 shrink-0 flex items-start content-center transition-all hover:duration-100 group-hover:duration-100 duration-300`}
>
<Image
className={`flex-grow-0 justify-self-center w-full max-w-10 rounded-full overflow-hidden`}
width={40}
height={40}
src={image}
alt={`${title} logo`}
/>
</div>
<div className={`content-center`}>
<Label
tag={"h3"}
size={"lg"}
className={`transition-colors hover:duration-100 group-hover:duration-100 duration-300 flex items-center ${
dark ? "text-white group-hover:text-black" : "text-black group-hover:text-white"
}`}
>
{title}
{!url && (
<Body size={"sm"} className={`text-pretty`}>
- Coming Soon
</Body>
)}
</Label>
<Body size={"sm"} className={`text-pretty`}>
{description}
</Body>
{categories.length > 0 && (
<div className={`flex flex-wrap gap-1 mt-1`}>
{categories.map((category, index) => {
return (
<CategoryPill key={`category-pill-${index}`} hover>
{category}
</CategoryPill>
);
})}
</div>
)}
</div>
<div
className={`w-10 relative grow-0 shrink-0 flex items-start content-center transition-all hover:duration-100 group-hover:duration-100 duration-300 mr-0 ml-auto`}
>
{url && (
<Icon
Icon={<ArrowLongSVG dark={dark} />}
hover
HoverIcon={<ArrowLongSVG dark={!dark} />}
className={`flex-grow-0 shrink-0 justify-self-center group-hover:bg-white`}
direction={`top-right`}
border={false}
dark={dark}
transparentBg
size={"40"}
/>
)}
</div>
</Tag>
</motion.div>
);
};

export default ProjectCard;
17 changes: 15 additions & 2 deletions src/components/Heroes/PrimaryHero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import Container from "@/components/Container/Container";
import BorderButton from "@/macros/Buttons/BorderButton";
import { Display, Body } from "@/macros/Copy";
import { usePlausible } from "next-plausible";
import { useBanner } from "@/context/BannerContext";

const PrimaryHero = ({ headline, subheadline, buttons, videos }) => {
const videoRef = useRef(null);
const trackEvent = usePlausible();
const { isBannerVisible, bannerHeight } = useBanner();

useEffect(() => {
if (videoRef.current) {
Expand All @@ -30,7 +32,18 @@ const PrimaryHero = ({ headline, subheadline, buttons, videos }) => {
};

return (
<section className={`bg-white-weak relative md:min-h-[70vh] lg:min-h-[90vh] flex flex-col-reverse md:block content-center`}>
<section
style={
isBannerVisible
? {
"--md-min-h": `calc(70vh + ${bannerHeight}px)`,
"--lg-min-h": `calc(90vh + ${bannerHeight}px)`,
}
: undefined
}
className={`bg-white-weak relative flex flex-col-reverse md:block content-center
${isBannerVisible ? "md:[min-height:var(--md-min-h)] lg:[min-height:var(--lg-min-h)]" : "md:min-h-[70vh] lg:min-h-[90vh]"}`}
>
{videos && (
<video
ref={videoRef}
Expand All @@ -49,7 +62,7 @@ const PrimaryHero = ({ headline, subheadline, buttons, videos }) => {
{videos.poster.sm && <img src={videos.poster.sm} alt='' media='(max-width: 767px)' />}
</video>
)}
<Container size={`lg`} className='relative z-10 pt-36 lg:pt-10 lg:pb-10'>
<Container size={`lg`} className={`relative z-10 ${isBannerVisible ? "pt-64 lg:pt-28" : "pt-36 lg:pt-10"} lg:pb-10`}>
<div className={`w-full md:w-3/4 lg:w-1/2 lg:pt-32 lg:my-auto`}>
<Display size={"lg"} className={`mb-4`}>
{headline}
Expand Down
Loading

0 comments on commit 4dcea82

Please sign in to comment.