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 icons and animation to links

Browse Source
This commit is contained in:
jwinterm
2026-04-09 08:42:33 -04:00
parent 2c5562f45d
commit 57a365dc06
6 changed files with 74 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/links/page.tsx
+35 -5
View File
@@ -1,6 +1,7 @@
import { Header } from "@/components/layout/header";
import { MobileNav } from "@/components/layout/mobile-nav";
import { StoreButtons } from "@/components/store-buttons";
import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
@@ -14,6 +15,7 @@ const apps = [
{
name: "Vegan IQ",
tagline: "Plant-based trivia backed by real data",
icon: "/images/products/vegan-iq.png",
color: "text-green-600 dark:text-green-400",
borderColor: "border-green-500/20",
href: "/products/vegan-iq",
@@ -25,6 +27,7 @@ const apps = [
{
name: "Bauhaus Echo",
tagline: "Visual memory puzzle inspired by Bauhaus design",
icon: "/images/products/bauhaus-echo.png",
color: "text-blue-600 dark:text-blue-400",
borderColor: "border-blue-500/20",
href: "/products/bauhaus-echo",
@@ -36,6 +39,7 @@ const apps = [
{
name: "Suchoice",
tagline: "AI-powered decision making",
icon: "/images/products/suchoice.png",
color: "text-pink-600 dark:text-pink-400",
borderColor: "border-pink-500/20",
href: "/products/suchoice",
@@ -57,16 +61,42 @@ export default function LinksPage() {
<div className="space-y-8">
{apps.map((app) => (
<div key={app.name} className={`rounded-xl border ${app.borderColor} bg-card p-6`}>
<Link href={app.href}>
<h2 className={`text-xl font-bold ${app.color} hover:underline`}>{app.name}</h2>
</Link>
<p className="text-sm text-muted-foreground mt-1 mb-4">{app.tagline}</p>
<div className="flex items-center gap-4 mb-3">
<Image
src={app.icon}
alt={`${app.name} icon`}
width={56}
height={56}
className="rounded-xl"
/>
<div>
<Link href={app.href}>
<h2 className={`text-xl font-bold ${app.color} hover:underline`}>{app.name}</h2>
</Link>
<p className="text-sm text-muted-foreground">{app.tagline}</p>
</div>
</div>
<StoreButtons links={app.links} />
</div>
))}
</div>
<div className="mt-12 text-center">
<div className="flex justify-center mt-12 mb-6 motion-reduce:hidden">
<img
src="/images/animations/anim1_pulse_light.svg"
alt=""
aria-hidden="true"
className="w-20 h-20 opacity-50 block dark:hidden"
/>
<img
src="/images/animations/anim1_pulse.svg"
alt=""
aria-hidden="true"
className="w-20 h-20 opacity-50 hidden dark:block"
/>
</div>
<div className="text-center">
<Link href="/" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
such.software
</Link>
apps/web/src/app/products/bauhaus-echo/page.tsx
+13 -3
View File
@@ -2,6 +2,7 @@ import { Header } from "@/components/layout/header";
import { MobileNav } from "@/components/layout/mobile-nav";
import { Card } from "@repo/ui/components/card";
import { StoreButtons } from "@/components/store-buttons";
import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
@@ -32,9 +33,18 @@ export default function BauhausEchoPage() {
← Back to Products
</Link>
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-blue-600 dark:text-blue-400">
Bauhaus Echo
</h1>
<div className="flex items-center gap-5 mb-6">
<Image
src="/images/products/bauhaus-echo.png"
alt="Bauhaus Echo icon"
width={80}
height={80}
className="rounded-2xl"
/>
<h1 className="text-4xl md:text-5xl font-bold text-blue-600 dark:text-blue-400">
Bauhaus Echo
</h1>
</div>
<div className="prose dark:prose-invert max-w-none mb-12">
<p className="text-xl text-muted-foreground leading-relaxed">
apps/web/src/app/products/suchoice/page.tsx
+13 -3
View File
@@ -2,6 +2,7 @@ import { Header } from "@/components/layout/header";
import { MobileNav } from "@/components/layout/mobile-nav";
import { Card } from "@repo/ui/components/card";
import { StoreButtons } from "@/components/store-buttons";
import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
@@ -32,9 +33,18 @@ export default function SuchoicePage() {
← Back to Products
</Link>
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-pink-600 dark:text-pink-400">
Suchoice
</h1>
<div className="flex items-center gap-5 mb-6">
<Image
src="/images/products/suchoice.png"
alt="Suchoice icon"
width={80}
height={80}
className="rounded-2xl"
/>
<h1 className="text-4xl md:text-5xl font-bold text-pink-600 dark:text-pink-400">
Suchoice
</h1>
</div>
<div className="prose dark:prose-invert max-w-none mb-12">
<p className="text-xl text-muted-foreground leading-relaxed">
apps/web/src/app/products/vegan-iq/page.tsx
+13 -3
View File
@@ -2,6 +2,7 @@ import { Header } from "@/components/layout/header";
import { MobileNav } from "@/components/layout/mobile-nav";
import { Card } from "@repo/ui/components/card";
import { StoreButtons } from "@/components/store-buttons";
import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
@@ -34,9 +35,18 @@ export default function VeganIqPage() {
← Back to Products
</Link>
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-green-600 dark:text-green-400">
Vegan IQ
</h1>
<div className="flex items-center gap-5 mb-6">
<Image
src="/images/products/vegan-iq.png"
alt="Vegan IQ icon"
width={80}
height={80}
className="rounded-2xl"
/>
<h1 className="text-4xl md:text-5xl font-bold text-green-600 dark:text-green-400">
Vegan IQ
</h1>
</div>
<div className="prose dark:prose-invert max-w-none mb-12">
<p className="text-xl text-muted-foreground leading-relaxed">