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

Shravani/#122 #341

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Shravani/#122 #341

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b3ce90
add creative hover effect for Apply to GSoC link
ShravaniCoder Jan 23, 2025
a39e649
add creative hover effect for Apply to GSoC with Aossie
ShravaniCoder Jan 23, 2025
d5a67d9
add creative hover effect for Apply to GSoC with Aossie
ShravaniCoder Jan 23, 2025
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
27 changes: 19 additions & 8 deletions src/components/Banner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,39 @@ import { Pattern } from '@/components/Pattern';

export function Banner() {
return (
<section aria-label="Apply Banner" className="scroll-mt-14 bg-[#00843D] dark:bg-yellow-400 sm:scroll-mt-32">
<section
aria-label="Apply Banner"
className="scroll-mt-14 bg-[#00843D] dark:bg-yellow-400 sm:scroll-mt-32"
>
<div className="overflow-hidden lg:relative">
<ContainerPattern size="md" className="relative grid grid-cols-1 items-end gap-y-12 lg:static lg:grid-cols-2 pt-24 pb-8 sm:py-10">
<ContainerPattern
size="md"
className="relative grid grid-cols-1 items-end gap-y-12 pt-24 pb-8 sm:py-10 lg:static lg:grid-cols-2"
>
<Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
<Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
<Pattern className="invisible absolute -top-32 left-0 mt-2 w-full sm:visible sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
<div>
<h2 className="font-mono text-5xl font-black tracking-tighter text-white dark:text-black sm:w-3/4 sm:text-5xl md:w-2/3 lg:w-auto">
Launch into AOSSIE&apos;s open-source world through GSoC!
</h2>
<p className="mt-4 text-lg tracking-tighter text-white dark:text-black font-medium font-mono">
Learn how to apply for an opportunity to work on open-source projects and gain real-world experience through Google Summer of Code.
<p className="mt-4 font-mono text-lg font-medium tracking-tighter text-white dark:text-black">
Learn how to apply for an opportunity to work on open-source
projects and gain real-world experience through Google Summer of
Code.
</p>
<div className="mt-5">
<Link href="/apply" legacyBehavior>
<a className="group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-black px-8 py-3 text-black dark:text-white focus:outline-none font-mono font-semibold">
Apply to GSoC with AOSSIE
<a className="group relative inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-black transition-all duration-300 hover:bg-gradient-to-r hover:from-[#00843D] hover:to-green-500 hover:text-white focus:outline-none dark:bg-black dark:text-white dark:hover:from-green-500 dark:hover:to-blue-500">
<span className="absolute inset-0 translate-x-full bg-[#FED41E] transition-transform duration-500 ease-out group-hover:translate-x-0 dark:bg-green-500"></span>
<span className="relative z-10">
Apply to GSoC with AOSSIE
</span>
</a>
</Link>
</div>
</div>
</ContainerPattern>
</div>
</section>
);
)
}