diff --git a/apps/web/public/images/products/such-moon-launch.png b/apps/web/public/images/products/such-moon-launch.png new file mode 100644 index 0000000..5ddadc6 Binary files /dev/null and b/apps/web/public/images/products/such-moon-launch.png differ diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json index 32f08c1..420903d 100644 --- a/apps/web/public/manifest.json +++ b/apps/web/public/manifest.json @@ -8,12 +8,12 @@ "theme_color": "#000000", "icons": [ { - "src": "/images/branding/favicon_dark.svg", + "src": "/images/branding/favicon_light.svg", "type": "image/svg+xml", "purpose": "any" }, { - "src": "/images/branding/favicon_dark.png", + "src": "/images/branding/favicon_light.png", "sizes": "192x192", "type": "image/png" } diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 8cc6f8e..150a4f3 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -35,16 +35,18 @@ export const metadata: Metadata = { images: ["/images/branding/OG_banner_v2_light.png"], }, icons: { + // Favicons are served inverse to the browser chrome: dark chrome gets the + // light-tile file for contrast, light chrome gets the dark-tile file. icon: [ - { url: "/images/branding/favicon_dark.svg", type: "image/svg+xml", media: "(prefers-color-scheme: dark)" }, - { url: "/images/branding/favicon_light.svg", type: "image/svg+xml", media: "(prefers-color-scheme: light)" }, - { url: "/images/branding/favicon_dark.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: dark)" }, - { url: "/images/branding/favicon_light.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: light)" }, + { url: "/images/branding/favicon_light.svg", type: "image/svg+xml", media: "(prefers-color-scheme: dark)" }, + { url: "/images/branding/favicon_dark.svg", type: "image/svg+xml", media: "(prefers-color-scheme: light)" }, + { url: "/images/branding/favicon_light.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: dark)" }, + { url: "/images/branding/favicon_dark.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: light)" }, ], - shortcut: "/images/branding/favicon_dark.svg", + shortcut: "/images/branding/favicon_light.svg", apple: [ - { url: "/images/branding/favicon_dark.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: dark)" }, - { url: "/images/branding/favicon_light.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: light)" }, + { url: "/images/branding/favicon_light.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: dark)" }, + { url: "/images/branding/favicon_dark.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: light)" }, ], }, manifest: "/manifest.json", diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 2374e39..760c8a1 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -65,13 +65,13 @@ export default function Home() { for Everyone

- E-commerce, mobile apps, and custom solutions: we build accessible software to perform at scale. + Custom e-commerce, websites, apps, and consulting. Plus our own mobile apps and games. A software studio in Kennett Square, PA.

- +
- + diff --git a/apps/web/src/app/products/page.tsx b/apps/web/src/app/products/page.tsx index 8348a67..9e865e2 100644 --- a/apps/web/src/app/products/page.tsx +++ b/apps/web/src/app/products/page.tsx @@ -1,6 +1,7 @@ import { Header } from "@/components/layout/header"; import { MobileNav } from "@/components/layout/mobile-nav"; import { Card } from "@repo/ui/components/card"; +import Image from "next/image"; import Link from "next/link"; import type { Metadata } from "next"; @@ -21,48 +22,56 @@ const products = [ title: "Neroswap", description: "Aggregated DEX & CEX orderbook data. Compare Monero, Wownero, and Bitcoin prices across 6 exchanges in real time.", color: "yellow", + icon: "/images/products/neroswap.png", }, { slug: "webshops", title: "Webshops", description: "Headless Medusa commerce with revenue-share pricing. No upfront costs.", color: "emerald", + icon: "/images/products/occupy-wallets.png", }, { slug: "custom-websites", title: "Custom Websites", description: "Real-time platforms and interactive experiences. See rcryptocurrency.com and moonplace.io.", color: "purple", + icon: "/images/products/r-cryptocurrency.png", }, { slug: "smirk-wallet", title: "Smirk Wallet", description: "Non-custodial browser wallet for social tipping. BTC, LTC, XMR, WOW, GRIN.", color: "amber", + icon: "/images/products/smirk-wallet.png", }, { slug: "bauhaus-echo", title: "Bauhaus Echo", description: "Visual memory puzzle game inspired by Bauhaus design. Android, iOS, Web.", color: "blue", + icon: "/images/products/bauhaus-echo.png", }, { slug: "suchoice", title: "Suchoice", description: "Stop overthinking decisions. Snap a photo, let AI read the options, spin the wheel. Plus coin flip and adventure mode. Android and iOS.", color: "pink", + icon: "/images/products/suchoice.png", }, { slug: "vegan-iq", title: "Vegan IQ", description: "Test your plant-based knowledge with 2000+ trivia questions across 8 categories. Verified data, swipe gameplay. Android and iOS.", color: "green", + icon: "/images/products/vegan-iq.png", }, { slug: "wownero-moon-launch", title: "Wownero Moon Launch", description: "Crypto-themed space landing game. 11 levels, 4 weapons, endless mode. Android, iOS, Web, Desktop.", color: "orange", + icon: "/images/products/such-moon-launch.png", }, ]; @@ -95,7 +104,7 @@ export default function ProductsPage() {

- Our Products + Portfolio

Tools we have built, from commerce infrastructure to consumer apps. @@ -106,9 +115,18 @@ export default function ProductsPage() { {products.map((product) => ( -

- {product.title} -

+
+ {`${product.title} +

+ {product.title} +

+

{product.description}

diff --git a/apps/web/src/components/dynamic-favicon.tsx b/apps/web/src/components/dynamic-favicon.tsx index cf9bab8..f111619 100644 --- a/apps/web/src/components/dynamic-favicon.tsx +++ b/apps/web/src/components/dynamic-favicon.tsx @@ -9,7 +9,9 @@ export function DynamicFavicon() { useEffect(() => { if (!resolvedTheme) return; - const variant = resolvedTheme === 'dark' ? 'dark' : 'light'; + // Favicons contrast with browser chrome, so we serve the opposite-tone tile: + // dark mode → light tile, light mode → dark tile. + const variant = resolvedTheme === 'dark' ? 'light' : 'dark'; // Update all favicon link elements const links = document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"], link[rel="apple-touch-icon"]');