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

Added Perspective Hover Effect for Popular Board Games Card and Code cleanup : Issue no #106 #117

Merged
merged 3 commits into from
Oct 7, 2024
Merged

Added Perspective Hover Effect for Popular Board Games Card and Code cleanup : Issue no #106 #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
edfb99e
Perspective hover effect and code cleaning
AbhijitMotekar99 Oct 6, 2024
82eefef
Hover effect chnaged
AbhijitMotekar99 Oct 7, 2024
afe0968
Update App.css
AbhijitMotekar99 Oct 7, 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
3 changes: 2 additions & 1 deletion frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,5 @@ body,

body{
background: #F1EADC;
}
}

200 changes: 30 additions & 170 deletions frontend/src/components/Pages/Boardgame.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,177 +40,37 @@ export default function Boardgame() {
</section>
<section className="w-full py-12 md:py-24 lg:py-32">
<div className="container mx-auto grid grid-cols-1 gap-6 px-4 md:grid-cols-2 lg:grid-cols-3 md:px-6">
<div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<img
src={board1}
alt="Catan"
width="500"
height="400"
className="object-cover w-full h-64"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background">
<h3 className="text-xl font-bold">Catan</h3>
<p className="text-sm text-muted-foreground">
Settle the island of Catan in this classic resource management game.
</p>
</div>
</div>
<div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<img
src={board2}
alt="Ticket to Ride"
width="500"
height="400"
className="object-cover w-full h-64"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background">
<h3 className="text-xl font-bold">Ticket to Ride</h3>
<p className="text-sm text-muted-foreground">
Connect cities across a map and complete your railway routes.
</p>
</div>
</div>
<div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<img
src={board3}
alt="Pandemic"
width="500"
height="400"
className="object-cover w-full h-64"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background">
<h3 className="text-xl font-bold">Pandemic</h3>
<p className="text-sm text-muted-foreground">
Work together to contain the spread of deadly diseases across the globe.
</p>
</div>
</div>
<div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<img
src={board4}
alt="Codenames"
width="500"
height="400"
className="object-cover w-full h-64"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background">
<h3 className="text-xl font-bold">Codenames</h3>
<p className="text-sm text-muted-foreground">
Compete to make word associations and guess your teams secret code words.
</p>
</div>
</div>
<div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<img
src={board5}
alt="Azul"
width="500"
height="400"
className="object-cover w-full h-64"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background">
<h3 className="text-xl font-bold">Azul</h3>
<p className="text-sm text-muted-foreground">
Collect and place beautiful tiles to decorate the walls of a palace.
</p>
{[
{ src: board1, title: "Catan", description: "Settle the island of Catan in this classic resource management game." },
{ src: board2, title: "Ticket to Ride", description: "Connect cities across a map and complete your railway routes." },
{ src: board3, title: "Pandemic", description: "Work together to contain the spread of deadly diseases across the globe." },
{ src: board4, title: "Codenames", description: "Compete to make word associations and guess your team's secret code words." },
{ src: board5, title: "Azul", description: "Collect and place beautiful tiles to decorate the walls of a palace." },
{ src: board6, title: "Azul", description: "Collect and place beautiful tiles to decorate the walls of a palace." },
{ src: board7, title: "Azul", description: "Collect and place beautiful tiles to decorate the walls of a palace." },
{ src: board8, title: "Azul", description: "Collect and place beautiful tiles to decorate the walls of a palace." },
{ src: board10, title: "Wingspan", description: "Attract and collect birds in this relaxing engine-building game." },
].map((board, index) => (
<div key={index} className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2 card border border-white bg-white">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<div className="relative overflow-hidden">
<img
src={board.src}
alt={board.title}
width="500"
height="400"
className="object-cover w-full h-48 transition-all duration-300 ease-in-out group-hover:h-32"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background transition-transform duration-300 ease-in-out transform translate-y-0 group-hover:translate-y-4">
<h3 className="text-xl font-bold">{board.title}</h3>
<p className="text-sm text-muted-foreground">{board.description}</p>
</div>
</div>
RamakrushnaBiswal marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
<div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<img
src={board6}
alt="Azul"
width="500"
height="400"
className="object-cover w-full h-64"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background">
<h3 className="text-xl font-bold">Azul</h3>
<p className="text-sm text-muted-foreground">
Collect and place beautiful tiles to decorate the walls of a palace.
</p>
</div>
</div>
<div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<img
src={board7}
alt="Azul"
width="500"
height="400"
className="object-cover w-full h-64"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background">
<h3 className="text-xl font-bold">Azul</h3>
<p className="text-sm text-muted-foreground">
Collect and place beautiful tiles to decorate the walls of a palace.
</p>
</div>
</div>
<div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<img
src={board8}
alt="Azul"
width="500"
height="400"
className="object-cover w-full h-64"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background">
<h3 className="text-xl font-bold">Azul</h3>
<p className="text-sm text-muted-foreground">
Collect and place beautiful tiles to decorate the walls of a palace.
</p>
</div>
</div>
<div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
<a className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</a>
<img
src={board10}
alt="Wingspan"
width="500"
height="400"
className="object-cover w-full h-64"
style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
/>
<div className="p-4 bg-background">
<h3 className="text-xl font-bold">Wingspan</h3>
<p className="text-sm text-muted-foreground">
Attract and collect birds in this relaxing engine-building game.
</p>
</div>
</div>
))}
</div>
</section>
<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100">
Expand Down
110 changes: 27 additions & 83 deletions frontend/src/components/Pages/Register.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,90 +142,34 @@ export default function Register() {
</h1>
<div className="mt-8 w-full flex justify-center bg-white ">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-8 mb-10">
<div
className="rounded-lg border bg-card text-card-foreground shadow-sm"
data-v0-t="card"
>
<div className="flex flex-col items-center justify-center p-6">
<img
src={pic2}
alt="Catan"
className="mb-4 w-64 h-64 object-cover"
/>
<div className="font-medium">Catan</div>
<div className="text-muted-foreground text-sm">4-6 players</div>
</div>
</div>
<div
className="rounded-lg border bg-card text-card-foreground shadow-sm"
data-v0-t="card"
>
<div className="flex flex-col items-center justify-center p-6">
<img
src={pic3}
alt="Ticket to Ride"
className="mb-4 w-64 h-64 object-cover"
/>
<div className="font-medium">Ticket to Ride</div>
<div className="text-muted-foreground text-sm">2-5 players</div>
</div>
</div>
<div
className="rounded-lg border bg-card text-card-foreground shadow-sm"
data-v0-t="card"
>
<div className="flex flex-col items-center justify-center p-6">
<img
src={pic4}
alt="Codenames"
className="mb-4 w-64 h-64 object-cover"
/>
<div className="font-medium">Codenames</div>
<div className="text-muted-foreground text-sm">4-8 players</div>
</div>
</div>
<div
className="rounded-lg border bg-card text-card-foreground shadow-sm"
data-v0-t="card"
>
<div className="flex flex-col items-center justify-center p-6">
<img
src={pic4}
alt="Codenames"
className="mb-4 w-64 h-64 object-cover"
/>
<div className="font-medium">Codenames</div>
<div className="text-muted-foreground text-sm">4-8 players</div>
</div>
</div>
<div
className="rounded-lg border bg-card text-card-foreground shadow-sm"
data-v0-t="card"
>
<div className="flex flex-col items-center justify-center p-6">
<img
src={pic4}
alt="Codenames"
className="mb-4 w-64 h-64 object-cover"
/>
<div className="font-medium">Codenames</div>
<div className="text-muted-foreground text-sm">4-8 players</div>
</div>
</div>
<div
className="rounded-lg border bg-card text-card-foreground shadow-sm"
data-v0-t="card"
>
<div className="flex flex-col items-center justify-center p-6">
<img
src={pic5}
alt="Pandemic"
className="mb-4 w-64 h-64 object-cover"
/>
<div className="font-medium">Pandemic</div>
<div className="text-muted-foreground text-sm">2-4 players</div>
{[
{ src: pic2, title: "Catan", players: "4-6 players" },
{ src: pic3, title: "Ticket to Ride", players: "2-5 players" },
{ src: pic4, title: "Codenames", players: "4-8 players" },
{ src: pic4, title: "Codenames", players: "4-8 players" },
{ src: pic4, title: "Codenames", players: "4-8 players" },
{ src: pic5, title: "Pandemic", players: "2-4 players" },
].map((game, index) => (
RamakrushnaBiswal marked this conversation as resolved.
Show resolved Hide resolved
<div
key={index}
className="relative overflow-hidden transition-transform duration-300 ease-in-out perspective group"
data-v0-t="card"
>
<div className="flex flex-col items-center justify-center p-6 rounded-lg border bg-card text-card-foreground shadow-sm group-hover:scale-105 transition-all duration-300 ease-in-out hover:shadow-lg">
<img
src={game.src}
alt={game.title}
className="mb-4 w-64 h-64 object-cover"
/>
RamakrushnaBiswal marked this conversation as resolved.
Show resolved Hide resolved
<div className="font-medium">{game.title}</div>
<div className="text-muted-foreground text-sm">
{game.players}
</div>
</div>
{/* Glow effect */}
<div className="absolute inset-0 rounded-lg bg-yellow-500 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-25"></div>
</div>
</div>
))}
</div>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,5 @@
background-color: #004D43;
border-radius: 10px;
}



Loading