github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-17 05:32:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

add neroswap icon and dynamic feature to bento

Browse Source
This commit is contained in:
jwinterm
2026-03-23 17:49:12 -04:00
parent eff0173135
commit 44638a04b3
3 changed files with 87 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/public/images/products/neroswap.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

apps/web/src/app/globals.css
+49 -1
View File
@@ -85,7 +85,9 @@
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
position: relative;
overflow: hidden;
transition: all 300ms;
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 300ms ease;
}
.section-container {
@@ -100,6 +102,52 @@
border-color: hsl(var(--primary) / 0.3);
}
/* Bento grid entrance animation */
@keyframes bento-enter {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bento-item {
animation: bento-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Hover lift for bento links */
.bento-item:hover .glass-card {
transform: translateY(-4px);
box-shadow: 0 32px 64px -16px rgb(0 0 0 / 0.3);
}
/* Focus-visible ring for keyboard navigation */
.bento-item:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 4px;
border-radius: 2.5rem;
}
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.bento-item {
animation: none;
}
.bento-item:hover .glass-card {
transform: none;
}
.glass-card {
transition: border-color 300ms;
}
.glass-card .object-contain,
.glass-card .object-cover {
transition: none !important;
}
}
/* Typography customization for blog posts */
.prose {
--tw-prose-body: hsl(var(--foreground));
apps/web/src/components/portfolio/bento-grid.tsx
+38 -29
View File
@@ -6,7 +6,7 @@ export const PortfolioGrid = () => {
return (
<section className="grid grid-cols-1 md:grid-cols-4 auto-rows-[300px] gap-6 w-full max-w-7xl mx-auto p-4 z-10 relative">
{/* Row 1: r/CryptoCurrency (2x1) */}
<Link href="https://rcryptocurrency.com" target="_blank" rel="noopener noreferrer" className="md:col-span-2">
<Link href="https://rcryptocurrency.com" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-2" style={{ animationDelay: "0ms" }}>
<Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-slate-950/90 cursor-pointer">
<div className="absolute inset-0 z-20 bg-gradient-to-t from-black/95 via-black/40 to-transparent p-8 flex flex-col justify-end items-center text-center pointer-events-none">
<h3 className="text-3xl font-bold text-white shadow-black drop-shadow-xl tracking-tight">r/CryptoCurrency</h3>
@@ -27,7 +27,7 @@ export const PortfolioGrid = () => {
</Link>
{/* Row 1: MoonPlace (1x1) */}
<Link href="https://moonplace.io" target="_blank" rel="noopener noreferrer" className="md:col-span-1">
<Link href="https://moonplace.io" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-1" style={{ animationDelay: "75ms" }}>
<Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-indigo-50/95 dark:!bg-indigo-950/95 !border-indigo-500/20 cursor-pointer">
<div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
<h3 className="text-xl font-bold text-indigo-700 dark:text-indigo-400">MoonPlace</h3>
@@ -46,7 +46,7 @@ export const PortfolioGrid = () => {
</Link>
{/* Row 1-2: Smirk Wallet (1x2 tall, far right) */}
<Link href="https://smirk.cash" target="_blank" rel="noopener noreferrer" className="md:col-span-1 md:row-span-2">
<Link href="https://smirk.cash" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-1 md:row-span-2" style={{ animationDelay: "150ms" }}>
<Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-amber-50/95 dark:!bg-amber-950/95 !border-amber-500/20 cursor-pointer">
<div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
<h3 className="text-xl font-bold text-amber-700 dark:text-amber-400">Smirk Wallet</h3>
@@ -64,40 +64,27 @@ export const PortfolioGrid = () => {
</Card>
</Link>
{/* Row 2: Neroswap (1x1) */}
<Link href="https://neroswap.com" target="_blank" rel="noopener noreferrer" className="md:col-span-1">
{/* Row 2: Neroswap (2x1) */}
<Link href="https://neroswap.com" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-2" style={{ animationDelay: "225ms" }}>
<Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-yellow-50/95 dark:!bg-yellow-950/95 !border-yellow-500/20 cursor-pointer">
<div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
<h3 className="text-xl font-bold text-yellow-700 dark:text-yellow-400">Neroswap</h3>
<p className="text-sm mt-1 text-foreground font-semibold">DEX &amp; CEX orderbook aggregator.</p>
</div>
</Card>
</Link>
{/* Row 2: Privacy Labs (1x1) */}
<Link href="https://play.wowne.ro" target="_blank" rel="noopener noreferrer" className="md:col-span-1">
<Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-orange-50/95 dark:!bg-orange-950/95 !border-orange-500/20 cursor-pointer">
<div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
<h3 className="text-xl font-bold text-orange-700 dark:text-orange-400">Privacy Labs</h3>
<ul className="mt-2 space-y-1 text-sm text-foreground font-semibold">
<li className="flex items-center gap-2">Monerogue / Wownerogue</li>
<li className="flex items-center gap-2"><span className="text-xs opacity-60">(Blockchain Gaming)</span></li>
</ul>
<div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-yellow-500/10 shadow-inner">
<Image
src="/images/products/neroswap.png"
alt="Screenshot of Neroswap DEX and CEX orderbook aggregator interface"
fill
className="object-cover opacity-50 transition-transform duration-1000 group-hover:scale-105"
sizes="(max-width: 768px) 100vw, 50vw"
/>
</div>
<div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-orange-500/10 shadow-inner">
<Image
src="/images/products/privacy-labs.png"
alt="Screenshots of Monerogue roguelike game and Wowne.ro WebAssembly wallet interface"
fill
className="object-contain p-2 opacity-50 transition-transform duration-1000 group-hover:scale-110"
sizes="(max-width: 768px) 100vw, 25vw"
/>
</div>
</Card>
</Link>
{/* Row 2: Bauhaus Echo (1x1) */}
<Link href="/products/bauhaus-echo" className="md:col-span-1">
<Link href="/products/bauhaus-echo" className="bento-item md:col-span-1" style={{ animationDelay: "300ms" }}>
<Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-blue-50/95 dark:!bg-blue-950/95 !border-blue-500/20 cursor-pointer">
<div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
<h3 className="text-xl font-bold text-blue-700 dark:text-blue-400">Bauhaus Echo</h3>
@@ -115,8 +102,8 @@ export const PortfolioGrid = () => {
</Card>
</Link>
{/* Row 3: Occupy Wallets (4x1, full width) */}
<Link href="https://occupywallets.art" target="_blank" rel="noopener noreferrer" className="md:col-span-4">
{/* Row 3: Occupy Wallets (2x1) */}
<Link href="https://occupywallets.art" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-2" style={{ animationDelay: "375ms" }}>
<Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] cursor-pointer">
<div className="absolute inset-0 z-20 p-8 flex flex-col justify-center items-center text-center pointer-events-none">
<h3 className="text-2xl font-bold text-zinc-900 dark:text-white drop-shadow-sm bg-white/60 dark:bg-black/60 backdrop-blur-3xl rounded-xl px-6 py-2">Occupy Wallets</h3>
@@ -133,6 +120,28 @@ export const PortfolioGrid = () => {
</div>
</Card>
</Link>
{/* Row 3: Privacy Labs (2x1) */}
<Link href="https://play.wowne.ro" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-2" style={{ animationDelay: "450ms" }}>
<Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-orange-50/95 dark:!bg-orange-950/95 !border-orange-500/20 cursor-pointer">
<div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
<h3 className="text-xl font-bold text-orange-700 dark:text-orange-400">Privacy Labs</h3>
<ul className="mt-2 space-y-1 text-sm text-foreground font-semibold">
<li className="flex items-center gap-2">Monerogue / Wownerogue</li>
<li className="flex items-center gap-2"><span className="text-xs opacity-60">(Blockchain Gaming)</span></li>
</ul>
</div>
<div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-orange-500/10 shadow-inner">
<Image
src="/images/products/privacy-labs.png"
alt="Screenshots of Monerogue roguelike game and Wowne.ro WebAssembly wallet interface"
fill
className="object-contain p-2 opacity-50 transition-transform duration-1000 group-hover:scale-110"
sizes="(max-width: 768px) 100vw, 50vw"
/>
</div>
</Card>
</Link>
</section>
);
};