mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-22 06:18:32 +02:00
feat: Initial Monorepo Setup for Such Software
- **Architecture**: Initialized Turborepo monorepo with pnpm workspace. - **Frontend**: Scaffolding for Next.js 14 app (apps/web) with Tailwind CSS v4 configuration. - **UI System**: Created shared UI package (@repo/ui) with Shadcn/UI primitives (Card, Button). - **Procedural Design**: - Implemented 'NebulaField' organic background animation for Home. - Implemented 'DataGrid' isometric background for Services. - Added 'DynamicBackground' for theme-aware transitions. - **Features**: - Responsive 'ThemeToggle' with View Transitions API support. - 'PortfolioGrid' component showcasing key projects (r/CryptoCurrency, etc.). - 'FounderSignature' component detailing accessibility focus. - 'ContactForm' with Zod validation + turnstile integration stub. - **Pages**: - Landing page with parallax/procedural visuals. - Services page highlighting Medusa v2 development capabilities. - **Clean Up**: Removed initial Medusa backend scaffold to focus on frontend delivery first.
This commit is contained in:
jwinterm
@@ -0,0 +1,76 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Such Software LLC",
|
||||
description: "Next-Generation Monorepo Platform",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={inter.className}>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { DynamicBackground } from "@/components/landing/dynamic-background";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { PortfolioGrid } from "@/components/portfolio/bento-grid";
|
||||
import { ContactForm } from "@/components/contact/contact-form";
|
||||
import { FounderSignature } from "@/components/about/founder-signature";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@repo/ui/components/button";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="relative min-h-screen flex flex-col items-center justify-between overflow-hidden bg-background text-foreground transition-colors duration-500">
|
||||
|
||||
<DynamicBackground />
|
||||
|
||||
<header className="z-50 w-full max-w-7xl mx-auto flex justify-between items-center p-6">
|
||||
<div className="flex items-center gap-6">
|
||||
<h1 className="text-2xl font-bold tracking-tighter">Such Software</h1>
|
||||
<nav className="hidden md:flex gap-4 text-sm font-medium">
|
||||
<Link href="/services" className="hover:text-primary transition-colors">Services</Link>
|
||||
<Link href="/about" className="hover:text-primary transition-colors">About</Link>
|
||||
</nav>
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</header>
|
||||
|
||||
<div className="z-10 w-full max-w-7xl mx-auto flex flex-col items-center pt-20 pb-10 px-4 text-center">
|
||||
<h2 className="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-emerald-500">
|
||||
Digital Craftsmanship
|
||||
</h2>
|
||||
<p className="max-w-2xl text-xl text-muted-foreground mb-8">
|
||||
Next-generation web applications engineered for scale, compliance, and performance.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-4 mb-20">
|
||||
<Link href="/services">
|
||||
<Button size="lg" className="rounded-full">
|
||||
Explore Services
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="#contact">
|
||||
<Button variant="outline" size="lg" className="rounded-full">
|
||||
Start a Project
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 w-full">
|
||||
<h3 className="text-3xl font-bold text-left w-full mt-10 mb-6 px-4">Selected Works</h3>
|
||||
<PortfolioGrid />
|
||||
</div>
|
||||
|
||||
<FounderSignature />
|
||||
|
||||
<div id="contact" className="w-full mt-20 mb-10 flex flex-col items-center">
|
||||
<h3 className="text-3xl font-bold mb-8">Start a Project</h3>
|
||||
<ContactForm />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { DataGrid } from "@repo/ui/procedural/data-grid";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { Button } from "@repo/ui/components/button";
|
||||
import Link from "next/link";
|
||||
import { Card } from "@repo/ui/components/card";
|
||||
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<main className="relative min-h-screen flex flex-col items-center bg-background text-foreground overflow-hidden">
|
||||
|
||||
{/* Option B: Data Grid Background for Technical Feel */}
|
||||
<DataGrid />
|
||||
|
||||
<header className="z-50 w-full max-w-7xl mx-auto flex justify-between items-center p-6 bg-background/50 backdrop-blur-sm sticky top-0">
|
||||
<div className="flex items-center gap-6">
|
||||
<Link href="/" className="text-2xl font-bold tracking-tighter">Such Software</Link>
|
||||
<nav className="hidden md:flex gap-4 text-sm font-medium">
|
||||
<Link href="/services" className="text-primary transition-colors">Services</Link>
|
||||
<Link href="/about" className="hover:text-primary transition-colors">About</Link>
|
||||
</nav>
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</header>
|
||||
|
||||
<div className="z-10 w-full max-w-5xl mx-auto py-20 px-4">
|
||||
<div className="mb-16 text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-cyan-500">
|
||||
Medusa v2 Development
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
We build proprietary, headless commerce engines that scale with your business logic.
|
||||
Stop fighting with Shopify's limitations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/20">
|
||||
<h3 className="text-xl font-bold mb-2">Unlimited Data Modeling</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Need a product with "DNA Sequence", "Artist Bio", and "Royalty Logic"?
|
||||
We model that natively in the database, not via hacky meta-fields.
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/20">
|
||||
<h3 className="text-xl font-bold mb-2">Workflow Orchestration</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Automate complex business logic—like splitting an order between a print-on-demand provider
|
||||
and a local warehouse automatically using Medusa Workflows.
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/20">
|
||||
<h3 className="text-xl font-bold mb-2">Headless Performance</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
We couple the robust Medusa backend with a Next.js 16 frontend, ensuring your shop
|
||||
scores 100/100 on Core Web Vitals and SEO.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="mt-20 p-8 rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 text-white text-center">
|
||||
<h2 className="text-2xl font-bold mb-4">Ready to upgrading your shop?</h2>
|
||||
<p className="mb-8 text-slate-300">
|
||||
We are currently accepting beta partners for our new Medusa v2 accelerator.
|
||||
</p>
|
||||
<Link href="/#contact">
|
||||
<Button size="lg" variant="secondary" className="rounded-full">
|
||||
Request a Demo
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user