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

Fix UI/UX issues and restore styling

Browse Source 
- Fix dark mode toggle (use resolvedTheme, simplify icon rendering)
- Restore colored left borders on section containers
- Remove conflicting px-2 classes from section-container elements
- Fix founder signature vertical alignment (items-center)
- Reduce header nav gap for tighter spacing
- Increase section-container and glass-card padding
This commit is contained in:
jwinterm
2026-01-16 15:34:19 -05:00
parent ffaea03e58
commit b81bea6297
7 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/about/page.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export default function AboutPage() {
<main className="relative flex flex-col items-center overflow-hidden">
<header className="z-50 w-full max-w-7xl mx-auto flex justify-between items-center p-6 bg-background/50 backdrop-blur-3xl sticky top-0 rounded-b-3xl border-b border-border/50">
<div className="flex items-center gap-8">
<div className="flex items-center gap-2">
<SiteLogo />
<nav className="hidden md:flex gap-6 text-sm font-medium">
<Link href="/services" className="hover:text-primary transition-colors">Services</Link>
apps/web/src/app/globals.css
+2 -2
View File
@@ -89,11 +89,11 @@
}
.section-container {
@apply mask-backdrop rounded-[2.5rem] p-10 md:p-16 text-card-foreground;
@apply mask-backdrop rounded-[2.5rem] p-12 md:p-20 text-card-foreground;
}
.glass-card {
@apply mask-backdrop rounded-[2rem] p-8 text-card-foreground;
@apply mask-backdrop rounded-[2rem] p-10 text-card-foreground;
}
.glass-card:hover {
apps/web/src/app/page.tsx
+4 -4
View File
@@ -14,7 +14,7 @@ export default function Home() {
<main className="relative flex flex-col items-center justify-between overflow-hidden">
<header className="z-50 w-full max-w-7xl mx-auto flex justify-between items-center p-6 bg-background/50 backdrop-blur-3xl sticky top-0 rounded-b-3xl border-b border-border/50">
<div className="flex items-center gap-8">
<div className="flex items-center gap-2">
<SiteLogo />
<nav className="hidden md:flex gap-6 text-sm font-medium">
<Link href="/services" className="hover:text-primary transition-colors">Services</Link>
@@ -48,7 +48,7 @@ export default function Home() {
<ServicesPreview />
<div className="w-full max-w-6xl mx-auto mb-16 px-4">
<div className="text-left mb-8 px-2 border-l-2 border-blue-500/50 section-container">
<div className="text-left mb-8 section-container border-l-4 border-l-blue-500">
<h3 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Selected Works</h3>
<p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
A curated gallery of recent projects where we've pushed the boundaries of
@@ -59,7 +59,7 @@ export default function Home() {
</div>
<div className="w-full max-w-6xl mx-auto mb-20 px-4">
<div className="text-left mb-12 px-2 border-l-2 border-purple-500/50 section-container">
<div className="text-left mb-12 section-container border-l-4 border-l-purple-500">
<h3 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Inclusive by Design</h3>
<p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
We believe the web is for everyone. Every line of code we write is
@@ -70,7 +70,7 @@ export default function Home() {
</div>
<div id="contact" className="w-full mt-20 mb-20 flex flex-col items-center">
<div className="w-full max-w-6xl text-left mb-12 px-2 border-l-2 border-emerald-500/50 section-container">
<div className="w-full max-w-6xl text-left mb-12 section-container border-l-4 border-l-cyan-500">
<h3 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Start a Project</h3>
<p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
Ready to build something exceptional? Drop us a line and let's discuss
apps/web/src/app/services/page.tsx
+5 -5
View File
@@ -24,7 +24,7 @@ export default function ServicesPage() {
<DataGrid />
<header className="z-50 w-full max-w-7xl mx-auto flex justify-between items-center p-6 bg-background/50 backdrop-blur-3xl sticky top-0 border-b border-border/50 rounded-b-3xl">
<div className="flex items-center gap-8">
<div className="flex items-center gap-2">
<SiteLogo />
<nav className="hidden md:flex gap-6 text-sm font-medium">
<Link href="/services" className="text-primary transition-colors">Services</Link>
@@ -37,7 +37,7 @@ export default function ServicesPage() {
<div className="z-10 w-full max-w-5xl mx-auto py-20 px-4">
{/* Context Header */}
<div className="mb-20">
<div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 section-container">
<div className="text-left mb-8 section-container border-l-4 border-l-emerald-500">
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-blue-500">
Specialized Solutions
</h1>
@@ -51,7 +51,7 @@ export default function ServicesPage() {
{/* Medusa / Webshops Section */}
<div className="mb-24">
<div className="text-left mb-8 px-2 border-l-2 border-blue-500/50 section-container mb-10">
<div className="text-left mb-10 section-container border-l-4 border-l-blue-500">
<h2 className="text-3xl font-bold mb-2">Medusa v2 Development</h2>
<p className="text-muted-foreground text-lg max-w-3xl">
We build proprietary, headless commerce engines that scale with your business logic.
@@ -86,7 +86,7 @@ export default function ServicesPage() {
{/* Custom Apps Section */}
<div className="mb-24">
<div className="text-left mb-8 px-2 border-l-2 border-purple-500/50 section-container mb-10">
<div className="text-left mb-10 section-container border-l-4 border-l-purple-500">
<h2 className="text-3xl font-bold mb-2">Custom Apps & Interactive Websites</h2>
<p className="text-muted-foreground text-lg max-w-2xl leading-relaxed">
Whether it's a real-time collaborative tool or a high-end brand experience,
@@ -113,7 +113,7 @@ export default function ServicesPage() {
{/* Crypto Section */}
<div className="mb-24">
<div className="text-left mb-8 px-2 border-l-2 border-cyan-500/50 section-container mb-10">
<div className="text-left mb-10 section-container border-l-4 border-l-cyan-500">
<h2 className="text-3xl font-bold mb-2">Cryptocurrency & Payment Consulting</h2>
<p className="text-muted-foreground text-lg max-w-2xl leading-relaxed">
Navigate the complex world of global finance. We bridge the gap between
apps/web/src/components/about/founder-signature.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import Image from "next/image";
export const FounderSignature = () => {
return (
<div className="grid md:grid-cols-[1fr,440px] gap-12 lg:gap-20 items-start">
<div className="grid md:grid-cols-[1fr,440px] gap-12 lg:gap-20 items-center">
{/* Left Column: Bio */}
<div className="space-y-8 text-left section-container">
<div className="flex items-center gap-6 relative z-10">
@@ -35,7 +35,7 @@ export const FounderSignature = () => {
</div>
{/* Right Column: Cards 01, 02, 03 */}
<div className="space-y-6 lg:-mt-4">
<div className="space-y-6">
<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>
apps/web/src/components/landing/services-preview.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ 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 relative z-10">
<div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 section-container">
<div className="text-left mb-8 section-container border-l-4 border-l-emerald-500">
<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
apps/web/src/components/theme-toggle.tsx
+20 -6
View File
@@ -3,12 +3,18 @@
import { useTheme } from "next-themes";
import { Moon, Sun } from "lucide-react";
import { Button } from "@repo/ui/components/button";
import { useEffect, useState } from "react";
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
const { setTheme, resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const toggleTheme = (e: React.MouseEvent<HTMLButtonElement>) => {
const isDark = theme === "dark";
const isDark = resolvedTheme === "dark";
// Fallback for browsers without startViewTransition
if (!document.startViewTransition) {
@@ -46,10 +52,18 @@ export function ThemeToggle() {
};
return (
<Button variant="ghost" size="icon" onClick={toggleTheme} className="rounded-full">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
<Button
variant="ghost"
size="icon"
onClick={mounted ? toggleTheme : undefined}
className="rounded-full"
aria-label="Toggle theme"
>
{mounted && resolvedTheme === "dark" ? (
<Moon className="h-5 w-5" />
) : (
<Sun className="h-5 w-5" />
)}
</Button>
);
}