mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
feat: synchronize background nebula animations and overhaul site copy
- perfectly synced nebula streamer impacts with computer icon pulse - standardized typography with left-border headers and blurbs across landing and services pages - expanded services page with specialized solutions for commerce, custom apps, and crypto - fixed bento grid image distortion and background persistence issues - corrected hydration and syntax errors in nebula-field
This commit is contained in:
jwinterm
@@ -6,6 +6,7 @@ import { FounderSignature } from "@/components/about/founder-signature";
|
||||
import { ServicesPreview } from "@/components/landing/services-preview";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@repo/ui/components/button";
|
||||
import { Card } from "@repo/ui/components/card";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@@ -45,15 +46,57 @@ export default function Home() {
|
||||
|
||||
<ServicesPreview />
|
||||
|
||||
<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>
|
||||
<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 pl-6">
|
||||
<h3 className="text-2xl font-bold mb-2">Selected Works</h3>
|
||||
<p className="text-muted-foreground text-lg max-w-3xl">
|
||||
A curated gallery of recent projects where we've pushed the boundaries of
|
||||
performance, accessibility, and user experience.
|
||||
</p>
|
||||
</div>
|
||||
<PortfolioGrid />
|
||||
</div>
|
||||
|
||||
<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-purple-500/50 pl-6">
|
||||
<h3 className="text-2xl font-bold mb-2">Inclusive by Design</h3>
|
||||
<p className="text-muted-foreground text-lg max-w-3xl">
|
||||
We believe the web is for everyone. Every line of code we write is
|
||||
audited for WCAG 2.1 compliance and high-performance across all devices.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="p-8 bg-card/50 backdrop-blur-sm border-purple-500/10 hover:border-purple-500/30 transition-all group">
|
||||
<h4 className="text-xl font-bold mb-4 flex items-center gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-sm">01</span>
|
||||
A11y First Architecture
|
||||
</h4>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Semantic HTML, ARIA patterns, and keyboard navigation aren't afterthoughts—they are the foundation of our build process.
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-8 bg-card/50 backdrop-blur-sm border-blue-500/10 hover:border-blue-500/30 transition-all group">
|
||||
<h4 className="text-xl font-bold mb-4 flex items-center gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 text-sm">02</span>
|
||||
Edge Performance
|
||||
</h4>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
By leveraging edge computing and static generation, we ensure your site is usable even on 3G connections and older hardware.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</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>
|
||||
<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 pl-6">
|
||||
<h3 className="text-2xl font-bold mb-2">Start a Project</h3>
|
||||
<p className="text-muted-foreground text-lg max-w-3xl">
|
||||
Ready to build something exceptional? Drop us a line and let's discuss
|
||||
how we can help you scale your digital presence.
|
||||
</p>
|
||||
</div>
|
||||
<ContactForm />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,47 +23,118 @@ export default function ServicesPage() {
|
||||
</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>
|
||||
{/* Context Header */}
|
||||
<div className="mb-20">
|
||||
<div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 pl-6">
|
||||
<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>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl">
|
||||
We solve complex business problems with elegant architecture.
|
||||
Whether you're scaling a commerce empire or building a new financial protocol,
|
||||
we provide the technical firepower.
|
||||
</p>
|
||||
</div>
|
||||
</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.
|
||||
{/* Medusa / Webshops Section */}
|
||||
<div className="mb-24">
|
||||
<div className="text-left mb-8 px-2 border-l-2 border-blue-500/50 pl-6">
|
||||
<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.
|
||||
Stop fighting with Shopify's limitations and own your infrastructure.
|
||||
</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="grid md:grid-cols-3 gap-6">
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/10 hover:border-indigo-500/30 transition-all">
|
||||
<h3 className="text-xl font-bold mb-2">Unlimited Data Modeling</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Natively model complex entities like "DNA Sequences" or "Royalty Logic"
|
||||
directly in the database without hacky metadata.
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/10 hover:border-indigo-500/30 transition-all">
|
||||
<h3 className="text-xl font-bold mb-2">Zero Capital Upfront</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Our "Toast" style partnership means we win when you win. Low friction onboarding
|
||||
with performance-based incentives.
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/10 hover:border-indigo-500/30 transition-all">
|
||||
<h3 className="text-xl font-bold mb-2">Headless SEO</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Custom Next.js frontends engineered for perfect lighthouse scores and
|
||||
superior organic search conversion.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</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.
|
||||
{/* Custom Apps Section */}
|
||||
<div className="mb-24">
|
||||
<div className="text-left mb-8 px-2 border-l-2 border-purple-500/50 pl-6">
|
||||
<h2 className="text-3xl font-bold mb-2">Custom Apps & Interactive Websites</h2>
|
||||
<p className="text-muted-foreground text-lg max-w-2xl">
|
||||
Whether it's a real-time collaborative tool or a high-end brand experience,
|
||||
we build performant web applications that delight users.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-purple-500/10 hover:border-purple-500/30 transition-all">
|
||||
<h3 className="text-xl font-bold mb-2">Real-time Platforms</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Socket.io and WebRTC integration for collaborative tools, dashboards,
|
||||
and live data visualization.
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-purple-500/10 hover:border-purple-500/30 transition-all">
|
||||
<h3 className="text-xl font-bold mb-2">Brand Motion</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Framermotion and Three.js powered interfaces that tell your brand's story
|
||||
through motion and depth.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Crypto Section */}
|
||||
<div className="mb-24">
|
||||
<div className="text-left mb-8 px-2 border-l-2 border-cyan-500/50 pl-6">
|
||||
<h2 className="text-3xl font-bold mb-2">Cryptocurrency & Payment Consulting</h2>
|
||||
<p className="text-muted-foreground text-lg max-w-2xl">
|
||||
Navigate the complex world of global finance. We bridge the gap between
|
||||
traditional banking and decentralized protocols.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-cyan-500/10 hover:border-cyan-500/30 transition-all">
|
||||
<h3 className="text-xl font-bold mb-2">Payment Orchestration</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Multi-PSP routing, automated reconciliation, and fraud prevention for
|
||||
high-volume merchants.
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-sm border-cyan-500/10 hover:border-cyan-500/30 transition-all">
|
||||
<h3 className="text-xl font-bold mb-2">Web3 Integration</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Non-custodial wallet auth, on/off ramp solutions, and smart contract
|
||||
interactions for modern dApps.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-20 p-12 rounded-2xl bg-gradient-to-br from-slate-900 via-slate-800 to-indigo-950 text-white text-center shadow-2xl relative overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<h2 className="text-3xl font-bold mb-4 relative z-10">Start building the future</h2>
|
||||
<p className="mb-8 text-slate-300 max-w-xl mx-auto relative z-10">
|
||||
We are currently accepting a limited number of partners for performance-based development.
|
||||
Let's see if we're a fit.
|
||||
</p>
|
||||
<Link href="/#contact">
|
||||
<Button size="lg" variant="secondary" className="rounded-full">
|
||||
<Link href="/#contact" className="relative z-10">
|
||||
<Button size="lg" variant="secondary" className="rounded-full px-12 py-6 text-lg hover:scale-105 transition-transform">
|
||||
Request a Demo
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
@@ -2,19 +2,28 @@ import { Card } from "@repo/ui/components/card";
|
||||
|
||||
export function ServicesPreview() {
|
||||
return (
|
||||
<div className="grid md:grid-cols-3 gap-6 w-full max-w-6xl mx-auto px-4 mt-8 mb-16">
|
||||
<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">
|
||||
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">Unlimited Data Modeling</h3>
|
||||
<h3 className="text-xl font-bold mb-2">Native Crypto & Payments</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.
|
||||
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">Workflow Orchestration</h3>
|
||||
<h3 className="text-xl font-bold mb-2">Zero Capital Upfront</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.
|
||||
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">
|
||||
@@ -25,5 +34,6 @@ export function ServicesPreview() {
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user