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

changed the pointer from cursor to default #284

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

changed the pointer from cursor to default #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1103fe6
changed the pointer from cursor to default
yashithalrao Oct 10, 2024
b26faa5
changed the footer color
yashithalrao Oct 10, 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
45 changes: 25 additions & 20 deletions src/components/CardEffect.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,31 @@ import Image from 'next/image'

export function CardEffect({heading, content, logo}) {
return (
<a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer">
{/* <span className="absolute inset-0 border-2 rounded-lg border-dashed border-black dark:border-zinc-300"></span> */}
<a
className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer hover:cursor-default"
>
<div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8 transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2">

<div className="px-8 pb-4 self-center transition-opacity group-hover:absolute group-hover:opacity-0">
<Image
src={logo}
width={150}
unoptimized
className="mx-auto"
alt="Project Logo"
/>
<h2 className="ml-0 leading-9 text-4xl text-center flex font-extrabold justify-center font-mono text-[#00843D] dark:text-yellow-400">
{heading}
</h2>
</div>

<div className="absolute self-center pr-6 lg:scale-90 lg:pb-0 lg:pl-3 lg:pr-0 xl:pl-0 md:p-0 md:scale-95 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 dark:text-zinc-300">
<p className="mt-4 font-mono sm:w-100 w-52">{content}</p>
</div>

</div>
</a>


{/* <div className="relative flex h-full transform items-end border-4 rounded-lg border-black dark:border-zinc-300 bg-transparent dark:bg-transparent transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2"> */}
{/* <div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800/40 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8 transition group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow-[8px_8px_0_0_#9ca3af] dark:group-hover:shadow-[8px_8px_0_0_#e5e7eb]"> */}
<div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8">
<div className="px-8 pb-4 self-center transition-opacity group-hover:absolute group-hover:opacity-0">
<Image
src= {logo}
width={150}
unoptimized
className='mx-auto'
alt='Project Logo'
/>
<h2 className="ml-0 leading-9 text-4xl text-center flex font-extrabold justify-center font-mono text-[#00843D] dark:text-yellow-400">{heading}</h2>
</div>
<div className="absolute self-center pr-6 lg:scale-90 lg:pb-0 lg:pl-3 lg:pr-0 xl:pl-0 md:p-0 md:scale-95 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 dark:text-zinc-300">
<p className="mt-4 font-mono sm:w-100 w-52">{content}</p>
</div>
</div>
</a>
)
}
2 changes: 1 addition & 1 deletion src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function NavLink({ href, children }) {

export function Footer() {
return (
<footer className="mt-16">
<footer className="mt-16 bg-gray-800 dark:bg-black">
<Container.Outer>
<div className="pt-10 pb-10">
<Container.Inner>
Expand Down