mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-18 05:41:26 +02:00
Fix critical accessibility and SEO issues
- Fix homepage heading hierarchy (h2 -> h1) - Add page-specific metadata to services and about pages - Fix outline-none on form inputs for keyboard accessibility - Delete sync conflict files - Add group class back to bento cards for hover animations - Use raw CSS for glassmorphism to fix Tailwind opacity errors - Add TODO.md with production checklist - Add semantic CSS classes (.section-container, .glass-card) - Update Tailwind config for opacity modifier support
This commit is contained in:
jwinterm
@@ -1,48 +1,82 @@
|
||||
import { Card } from "@repo/ui/components/card";
|
||||
import Image from "next/image";
|
||||
|
||||
export const FounderSignature = () => {
|
||||
return (
|
||||
<section className="w-full max-w-4xl mx-auto py-20 px-4">
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-3xl font-bold tracking-tight">Accessibility as Architecture</h2>
|
||||
<div className="prose dark:prose-invert">
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
"During my three years at <span className="text-foreground font-semibold">Cecil College</span>, I didn't just teach web design—I re-engineered how it was taught.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed mt-4">
|
||||
Transitioning the curriculum toward 'Digital Arts and Media Design,' I embedded inclusive design principles into the foundation of every course. I taught students that a website isn't truly 'live' until it is accessible to everyone.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed mt-4">
|
||||
This wasn't just academic theory; it was a rigorous discipline of semantic HTML, ARIA compliance, and cognitive load management. Today, I bring that same academic rigor to Such Software’s commercial projects. We don't retroactively fix accessibility; we architect for it from line one."
|
||||
</p>
|
||||
</div>
|
||||
<div className="pt-4 border-t border-border">
|
||||
<p className="font-mono text-sm uppercase tracking-widest text-primary">Founder & Principle Engineer</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-[1fr,440px] gap-12 lg:gap-20 items-start">
|
||||
{/* Left Column: Bio */}
|
||||
<div className="space-y-8 text-left section-container">
|
||||
<div className="flex items-center gap-6 relative z-10">
|
||||
<div className="relative w-24 h-24 rounded-full overflow-hidden border-2 border-primary/10 bg-white dark:bg-zinc-900 shadow-xl ring-4 ring-primary/5">
|
||||
<Image
|
||||
src="/images/logo_w_circle_trans.jpg"
|
||||
alt="Such Software Icon"
|
||||
fill
|
||||
className="object-cover scale-[1.02]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-mono text-xs uppercase tracking-[0.4em] text-primary/80 mb-1">Founder & Principal Engineer</p>
|
||||
<h2 className="text-3xl font-bold tracking-tight">John Winter Murphy</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="relative p-8 bg-muted/30 border-dashed">
|
||||
<div className="absolute -top-4 -right-4 w-24 h-24 bg-blue-500/10 rounded-full blur-2xl" />
|
||||
<div className="absolute -bottom-4 -left-4 w-32 h-32 bg-purple-500/10 rounded-full blur-2xl" />
|
||||
|
||||
<h3 className="tex-lg font-semibold mb-4">Core Competencies</h3>
|
||||
<ul className="space-y-3 font-mono text-sm">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-green-500">✓</span> WCAG 2.2 AA Compliance
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-green-500">✓</span> Section 508 & ADA
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-green-500">✓</span> Semantic HTML5 Architecture
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-green-500">✓</span> Playwright A11y Automation
|
||||
</li>
|
||||
|
||||
<div className="prose dark:prose-invert max-w-none">
|
||||
<p className="text-muted-foreground leading-relaxed italic border-l-4 border-primary/20 pl-6 text-lg">
|
||||
"During my three years at <span className="text-foreground font-semibold">Cecil College</span>, I didn't just teach web engineering—I re-engineered how it was taught.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed mt-6">
|
||||
Transitioning the curriculum toward from PDFs and Powerpoints to web-based content, I focused on transforming complex technical lessons into highly accessible HTML using <span className="text-foreground font-semibold underline decoration-primary/50">Quarto markdown</span> as our source. This allowed us to consistently generate semantic content including accessible equations and guaranteed descriptive alt text for every visual asset.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed mt-4 italic border-l-4 border-primary/20 pl-6 text-lg">
|
||||
This wasn't just academic theory; it was a rigorous discipline of semantic architecture, ARIA compliance, and cognitive load management. Today, I bring that same technical rigor to Such Software’s commercial projects. We don't retroactively fix accessibility; we architect for it from line one."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Cards 01, 02, 03 */}
|
||||
<div className="space-y-6 lg:-mt-4">
|
||||
<Card className="glass-card hover:border-purple-500/30">
|
||||
<h4 className="text-base font-bold mb-3 flex items-center gap-2">
|
||||
<span className="w-6 h-6 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-[10px]">01</span>
|
||||
A11y First Architecture
|
||||
</h4>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed font-medium">
|
||||
Semantic HTML, ARIA patterns, and keyboard navigation aren't afterthoughts—they are the foundation of our build process.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card className="glass-card hover:border-blue-500/30">
|
||||
<h4 className="text-base font-bold mb-3 flex items-center gap-2">
|
||||
<span className="w-6 h-6 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 text-[10px]">02</span>
|
||||
Edge Performance
|
||||
</h4>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed font-medium">
|
||||
By leveraging edge computing and static generation, we ensure your site is usable even on 3G connections and older hardware.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card className="glass-card hover:border-emerald-500/30 border-dashed">
|
||||
<h4 className="text-base font-bold mb-4 flex items-center gap-2">
|
||||
<span className="text-emerald-500 text-[10px]">03</span>
|
||||
Core Competencies
|
||||
</h4>
|
||||
<ul className="grid grid-cols-1 gap-2 font-mono text-[11px] uppercase tracking-wider text-muted-foreground/80">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-emerald-500 text-sm">✓</span> WCAG 2.2 AA Compliance
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-emerald-500 text-sm">✓</span> Section 508 & ADA
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-emerald-500 text-sm">✓</span> Semantic HTML5 Architecture
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-emerald-500 text-sm">✓</span> Playwright A11y Automation
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,15 +1,19 @@
|
||||
'use client';
|
||||
import { useFormState, useFormStatus } from 'react-dom'; // Note: check react-dom version for useFormState support or import from hook
|
||||
// Next.js 14 uses react-dom for these
|
||||
import { useFormState, useFormStatus } from 'react-dom';
|
||||
import { submitContactForm } from '@/actions/submit-contact';
|
||||
import { TurnstileWidget } from './turnstile-widget';
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@repo/ui/components/button';
|
||||
|
||||
function SubmitButton() {
|
||||
const { pending } = useFormStatus();
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={pending}
|
||||
size="lg"
|
||||
className="w-full md:w-64 rounded-xl text-lg font-semibold"
|
||||
>
|
||||
{pending ? "Sending..." : "Send Message"}
|
||||
</Button>
|
||||
);
|
||||
@@ -20,38 +24,84 @@ export function ContactForm() {
|
||||
const [token, setToken] = useState<string>('');
|
||||
|
||||
return (
|
||||
<form action={formAction} className="space-y-4 max-w-md mx-auto p-4 border rounded-lg bg-card text-card-foreground">
|
||||
<h3 className="text-xl font-bold">Contact Us</h3>
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium">Name</label>
|
||||
<input name="name" id="name" required className="w-full mt-1 p-2 border rounded bg-background" />
|
||||
{state?.errors?.name && <p className="text-red-500 text-xs">{state.errors.name}</p>}
|
||||
<form
|
||||
action={formAction}
|
||||
className="space-y-8 w-full max-w-6xl mx-auto section-container"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -mr-32 -mt-32" />
|
||||
<div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl -ml-32 -mb-32" />
|
||||
|
||||
<div className="text-left mb-10 relative z-10">
|
||||
<h3 className="text-3xl font-bold tracking-tight">Project Inquiry</h3>
|
||||
<p className="text-muted-foreground text-lg mt-3 max-w-2xl text-balance">
|
||||
Tell us about your technical challenges. From Medusa v2 migrations to real-time custom engines, we're ready to architect your solution.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 relative z-10">
|
||||
<div className="space-y-3">
|
||||
<label htmlFor="name" className="text-sm font-semibold tracking-wide uppercase text-muted-foreground ml-1">Full Name</label>
|
||||
<input
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Jamie Doe"
|
||||
required
|
||||
className="w-full p-4 border-2 border-border/50 rounded-2xl bg-background/50 focus:ring-4 focus:ring-primary/10 focus:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-all text-lg"
|
||||
/>
|
||||
{state?.errors?.name && <p className="text-red-500 text-sm px-1">{state.errors.name}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label htmlFor="email" className="text-sm font-semibold tracking-wide uppercase text-muted-foreground ml-1">Work Email</label>
|
||||
<input
|
||||
name="email"
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="jamie@example.com"
|
||||
required
|
||||
className="w-full p-4 border-2 border-border/50 rounded-2xl bg-background/50 focus:ring-4 focus:ring-primary/10 focus:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-all text-lg"
|
||||
/>
|
||||
{state?.errors?.email && <p className="text-red-500 text-sm px-1">{state.errors.email}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium">Email</label>
|
||||
<input name="email" id="email" type="email" required className="w-full mt-1 p-2 border rounded bg-background" />
|
||||
{state?.errors?.email && <p className="text-red-500 text-xs">{state.errors.email}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium">Message</label>
|
||||
<textarea name="message" id="message" required className="w-full mt-1 p-2 border rounded bg-background h-32" />
|
||||
{state?.errors?.message && <p className="text-red-500 text-xs">{state.errors.message}</p>}
|
||||
<div className="space-y-3 relative z-10">
|
||||
<label htmlFor="message" className="text-sm font-semibold tracking-wide uppercase text-muted-foreground ml-1">Project Details</label>
|
||||
<textarea
|
||||
name="message"
|
||||
id="message"
|
||||
placeholder="What are you building? Mention any specific constraints, timelines, or technologies..."
|
||||
required
|
||||
className="w-full p-6 border-2 border-border/50 rounded-2xl bg-background/50 h-56 resize-none focus:ring-4 focus:ring-primary/10 focus:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-all text-lg leading-relaxed"
|
||||
/>
|
||||
{state?.errors?.message && <p className="text-red-500 text-sm px-1">{state.errors.message}</p>}
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="token" value={token} />
|
||||
|
||||
<div className="my-4">
|
||||
<TurnstileWidget onVerify={setToken} />
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-8 pt-4 relative z-10 border-t border-border/50">
|
||||
<div className="scale-100 flex items-center gap-3">
|
||||
<TurnstileWidget onVerify={setToken} />
|
||||
<p className="text-[10px] text-muted-foreground max-w-[120px] leading-tight">
|
||||
Protected by Cloudflare Turnstile to ensure human delivery.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full md:w-auto">
|
||||
<SubmitButton />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SubmitButton />
|
||||
|
||||
{state?.message && (
|
||||
<p className={`text-sm ${state.success ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{state.message}
|
||||
</p>
|
||||
<div className={`mt-8 p-6 rounded-2xl text-base border-l-4 relative z-10 ${
|
||||
state.success
|
||||
? "bg-emerald-500/10 border-emerald-500 text-emerald-700 dark:text-emerald-400"
|
||||
: "bg-red-500/10 border-red-500 text-red-700 dark:text-red-400"
|
||||
}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xl">{state.success ? "✓" : "⚠"}</span>
|
||||
<p className="font-medium">{state.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
|
||||
@@ -2,33 +2,33 @@ import { Card } from "@repo/ui/components/card";
|
||||
|
||||
export function ServicesPreview() {
|
||||
return (
|
||||
<div className="w-full max-w-6xl mx-auto px-4 mt-8 mb-16">
|
||||
<div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 pl-6">
|
||||
<h3 className="text-2xl font-bold mb-2">High-Performance Webshops</h3>
|
||||
<p className="text-muted-foreground text-lg max-w-3xl">
|
||||
<div className="w-full max-w-6xl mx-auto px-4 mt-8 mb-16 relative z-10">
|
||||
<div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 section-container">
|
||||
<h3 className="text-3xl font-bold mb-3 tracking-tight">High-Performance Webshops</h3>
|
||||
<p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
|
||||
We build commerce infrastructure that scales with you. From complex supply chains
|
||||
to global payments, we handle the technical heavy lifting so you can focus on your brand.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<Card className="p-6 bg-card/50 backdrop-blur-sm border-indigo-500/20 hover:border-indigo-500/40 transition-colors text-left">
|
||||
<h3 className="text-xl font-bold mb-2">Native Crypto & Payments</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<Card className="glass-card hover:border-indigo-500/40 text-left">
|
||||
<h3 className="text-xl font-bold mb-3">Native Crypto & Payments</h3>
|
||||
<p className="text-base text-muted-foreground leading-relaxed">
|
||||
Deep expertise in multi-currency checkout, fiat-to-crypto onboarding, and
|
||||
DeFi integration. We build payments that work everywhere, for everyone.
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-card/50 backdrop-blur-sm border-indigo-500/20 hover:border-indigo-500/40 transition-colors text-left">
|
||||
<h3 className="text-xl font-bold mb-2">Zero Capital Upfront</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<Card className="glass-card hover:border-indigo-500/40 text-left">
|
||||
<h3 className="text-xl font-bold mb-3">Zero Capital Upfront</h3>
|
||||
<p className="text-base text-muted-foreground leading-relaxed">
|
||||
We operate on a "Toast" style partnership model. No massive setup fees or
|
||||
stiff monthly subscriptions—we only win when you're making sales.
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-card/50 backdrop-blur-sm border-indigo-500/20 hover:border-indigo-500/40 transition-colors text-left">
|
||||
<h3 className="text-xl font-bold mb-2">Headless Performance</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<Card className="glass-card hover:border-indigo-500/40 text-left">
|
||||
<h3 className="text-xl font-bold mb-3">Headless Performance</h3>
|
||||
<p className="text-base text-muted-foreground leading-relaxed">
|
||||
We couple the robust Medusa backend with a Next.js frontend, ensuring your shop
|
||||
scores 100/100 on Core Web Vitals and SEO.
|
||||
</p>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import Link from "next/link";
|
||||
import { SiteLogo } from "./site-logo";
|
||||
import { FaXTwitter, FaTelegram, FaReddit, FaPhone } from "react-icons/fa6";
|
||||
|
||||
export function Footer() {
|
||||
@@ -9,7 +10,7 @@ export function Footer() {
|
||||
<div className="container px-4 md:px-6 mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-bold">Such Software</h3>
|
||||
<SiteLogo />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Full-service software provider in the heart of Mushroom Country.
|
||||
</p>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export function SiteLogo() {
|
||||
return (
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="relative w-52 h-14 lg:w-64 lg:h-16">
|
||||
{/* Dark mode logo (white text) */}
|
||||
<Image
|
||||
src="/images/logo_dark_w_name_trans.png"
|
||||
alt="Such Software"
|
||||
fill
|
||||
className="object-contain hidden dark:block"
|
||||
priority
|
||||
/>
|
||||
{/* Light mode logo (black text) */}
|
||||
<Image
|
||||
src="/images/logo_light_w_name_trans.png"
|
||||
alt="Such Software"
|
||||
fill
|
||||
className="object-contain block dark:hidden"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
-67
@@ -1,67 +0,0 @@
|
||||
import { Card } from "@repo/ui/components/card";
|
||||
import Image from "next/image";
|
||||
|
||||
export const PortfolioGrid = () => {
|
||||
return (
|
||||
<section className="grid grid-cols-1 md:grid-cols-4 auto-rows-[300px] gap-4 max-w-7xl mx-auto p-4 z-10 relative">
|
||||
{/* Hero Project: r/CryptoCurrency */}
|
||||
<Card className="md:col-span-2 md:row-span-2 relative group overflow-hidden border-0 bg-slate-900/70 backdrop-blur-sm">
|
||||
<div className="absolute inset-0 z-10 bg-gradient-to-t from-black/80 to-transparent p-6 flex flex-col justify-end">
|
||||
<h3 className="text-3xl font-bold text-white">r/CryptoCurrency</h3>
|
||||
<p className="text-gray-200">Governance dashboard for 10M+ members. Real-time DAO metrics.</p>
|
||||
</div>
|
||||
<Image
|
||||
src="/images/r-cryptocurrency.png"
|
||||
alt="r/CryptoCurrency Governance Dashboard"
|
||||
fill
|
||||
className="object-cover opacity-60 transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Secondary: Occupy Wallets */}
|
||||
<Card className="md:col-span-2 relative group overflow-hidden bg-zinc-100/70 backdrop-blur-sm">
|
||||
<div className="absolute inset-0 z-10 p-6 flex flex-col justify-center items-center text-center">
|
||||
<h3 className="text-2xl font-bold text-zinc-900 drop-shadow-sm">Occupy Wallets</h3>
|
||||
<p className="text-zinc-800 font-medium drop-shadow-sm">High-fidelity gallery for fiscal graffiti.</p>
|
||||
</div>
|
||||
<Image
|
||||
src="/images/occupy-wallets.png"
|
||||
alt="Occupy Wallets Gallery"
|
||||
fill
|
||||
className="object-cover opacity-40 transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Tertiary: Monerogue & Wowne.ro (Grouped) */}
|
||||
<Card className="md:col-span-1 relative group overflow-hidden bg-orange-50/70 dark:bg-orange-950/70 border-orange-500/20 backdrop-blur-sm">
|
||||
<div className="absolute inset-0 z-10 p-6 bg-gradient-to-br from-background/90 to-transparent">
|
||||
<h3 className="text-xl font-bold text-orange-700 dark:text-orange-400">Privacy Labs</h3>
|
||||
<ul className="mt-2 space-y-2 text-sm text-foreground">
|
||||
<li className="flex items-center gap-2">Monerogue <span className="text-xs opacity-50">(Game)</span></li>
|
||||
<li className="flex items-center gap-2">Wowne.ro <span className="text-xs opacity-50">(WASM)</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<Image
|
||||
src="/images/privacy-labs.png"
|
||||
alt="Privacy Labs Projects"
|
||||
fill
|
||||
className="object-cover opacity-30 transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Quaternary: MoonPlace */}
|
||||
<Card className="md:col-span-1 relative group overflow-hidden bg-indigo-50/70 dark:bg-indigo-950/70 border-indigo-500/20 backdrop-blur-sm">
|
||||
<div className="absolute inset-0 z-10 p-6 bg-gradient-to-br from-background/90 to-transparent">
|
||||
<h3 className="text-xl font-bold text-indigo-700 dark:text-indigo-400">MoonPlace</h3>
|
||||
<p className="text-sm mt-2 text-foreground">Collaborative pixel canvas engine.</p>
|
||||
</div>
|
||||
<Image
|
||||
src="/images/moonplace.png"
|
||||
alt="MoonPlace Pixel Canvas"
|
||||
fill
|
||||
className="object-cover opacity-30 transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
</Card>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -5,29 +5,31 @@ 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">
|
||||
{/* Hero Project: r/CryptoCurrency */}
|
||||
<Card className="md:col-span-2 md:row-span-2 relative group overflow-hidden border-0 bg-slate-900/70 backdrop-blur-sm min-h-[300px]">
|
||||
<div className="absolute inset-0 z-20 bg-gradient-to-t from-black/90 via-black/20 to-transparent p-8 flex flex-col justify-end pointer-events-none">
|
||||
<h3 className="text-3xl font-bold text-white shadow-black drop-shadow-xl">r/CryptoCurrency</h3>
|
||||
<p className="text-gray-200 shadow-black drop-shadow-md max-w-sm mt-2 font-medium">Governance dashboard for 10M+ members. Real-time DAO metrics.</p>
|
||||
<Card className="md:col-span-2 md:row-span-2 glass-card group min-h-[300px] rounded-[2.5rem] !bg-slate-950/90">
|
||||
<div className="absolute inset-0 z-20 bg-gradient-to-t from-black/95 via-black/20 to-transparent p-12 flex flex-col justify-end items-center text-center pointer-events-none pb-20">
|
||||
<h3 className="text-4xl font-bold text-white shadow-black drop-shadow-xl tracking-tight">r/CryptoCurrency</h3>
|
||||
<p className="text-gray-200 shadow-black drop-shadow-md max-w-md mt-3 font-medium text-lg leading-relaxed">
|
||||
Governance dashboard for 10M+ members. Real-time DAO metrics.
|
||||
</p>
|
||||
</div>
|
||||
<div className="absolute inset-4 rounded-xl overflow-hidden z-10 bg-slate-800/50">
|
||||
<div className="absolute inset-x-10 top-10 bottom-48 rounded-2xl overflow-hidden z-10 bg-slate-800/30">
|
||||
<Image
|
||||
src="/images/r-cryptocurrency.png"
|
||||
alt="r/CryptoCurrency"
|
||||
fill
|
||||
className="object-contain p-4 opacity-70 transition-transform duration-1000 group-hover:scale-105"
|
||||
className="object-contain p-8 opacity-80 transition-transform duration-1000 group-hover:scale-105"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Secondary: Occupy Wallets */}
|
||||
<Card className="md:col-span-2 relative group overflow-hidden bg-zinc-100/70 backdrop-blur-sm border-0 min-h-[300px]">
|
||||
<Card className="md:col-span-2 glass-card group min-h-[300px] rounded-[2.5rem]">
|
||||
<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 drop-shadow-sm bg-white/60 backdrop-blur-md rounded-xl px-6 py-2">Occupy Wallets</h3>
|
||||
<p className="text-zinc-900 font-bold drop-shadow-sm bg-white/60 backdrop-blur-md rounded-xl px-6 py-2 mt-4">High-fidelity gallery for fiscal graffiti.</p>
|
||||
<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>
|
||||
<p className="text-zinc-900 dark:text-zinc-200 font-bold drop-shadow-sm bg-white/60 dark:bg-black/60 backdrop-blur-3xl rounded-xl px-6 py-2 mt-4">High-fidelity gallery for fiscal graffiti.</p>
|
||||
</div>
|
||||
<div className="absolute inset-4 rounded-xl overflow-hidden z-10 bg-zinc-200/50">
|
||||
<div className="absolute inset-4 rounded-xl overflow-hidden z-10 bg-zinc-200/50 dark:bg-zinc-800/50">
|
||||
<Image
|
||||
src="/images/occupy-wallets.png"
|
||||
alt="Occupy Wallets"
|
||||
@@ -39,7 +41,7 @@ export const PortfolioGrid = () => {
|
||||
</Card>
|
||||
|
||||
{/* Tertiary: Monerogue & Wowne.ro (Grouped) */}
|
||||
<Card className="md:col-span-1 relative group overflow-hidden bg-orange-50/70 dark:bg-orange-950/70 border-orange-500/20 backdrop-blur-sm min-h-[300px]">
|
||||
<Card className="md:col-span-1 glass-card group min-h-[300px] rounded-[2.5rem] !bg-orange-50/95 dark:!bg-orange-950/95 !border-orange-500/20">
|
||||
<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">
|
||||
@@ -59,7 +61,7 @@ export const PortfolioGrid = () => {
|
||||
</Card>
|
||||
|
||||
{/* Quaternary: MoonPlace */}
|
||||
<Card className="md:col-span-1 relative group overflow-hidden bg-indigo-50/70 dark:bg-indigo-950/70 border-indigo-500/20 backdrop-blur-sm min-h-[300px]">
|
||||
<Card className="md:col-span-1 glass-card group min-h-[300px] rounded-[2.5rem] !bg-indigo-50/95 dark:!bg-indigo-950/95 !border-indigo-500/20">
|
||||
<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>
|
||||
<p className="text-sm mt-1 text-foreground font-semibold">Collaborative pixel canvas engine.</p>
|
||||
|
||||
Reference in New Issue
Block a user