redesign: editorial layout, kill AI-slop aesthetic

Manavarya09 · claude · Manavarya09 · commit 62099d84b3bc · 2026-03-27T21:22:35.000+04:00
- Removed centered 3-column icon boxes (AI slop)
- Left-aligned editorial layout throughout
- Asymmetric grid for VS Code section (sticky sidebar + editor)
- Rules as a simple 2-column list, not a heavy table
- Comparison table with minimal styling
- Integration cards as compact code blocks
- Removed grain overlay, glow effects, trust bar
- Smaller, tighter typography — no over-designed section headers
- JetBrains Mono for code, Inter for text
- Stats inline in hero, not a separate section

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/website/src/app/globals.css b/website/src/app/globals.css
@@ -4,86 +4,22 @@
 @tailwind components;
 @tailwind utilities;
 
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  scroll-behavior: smooth;
-}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
 
 body {
-  background: #050505;
-  color: #d4a012;
-  font-family: "Inter", -apple-system, sans-serif;
+  background: #060606;
+  color: #e5e5e5;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
 }
 
-::selection {
-  background: #d4a012;
-  color: #050505;
-}
+.font-mono { font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace; }
 
-::-webkit-scrollbar {
-  width: 5px;
-}
-::-webkit-scrollbar-track {
-  background: #050505;
-}
-::-webkit-scrollbar-thumb {
-  background: #d4a01240;
-  border-radius: 3px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #d4a01280;
-}
+::selection { background: #d4a012; color: #060606; }
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #ffffff10; border-radius: 3px; }
 
-.font-mono {
-  font-family: "JetBrains Mono", "SF Mono", monospace;
-}
-
-/* Noise grain overlay */
-.grain::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  pointer-events: none;
-  opacity: 0.03;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-}
-
-/* Glow effect for key elements */
-.glow-amber {
-  box-shadow: 0 0 60px -12px #d4a01230, 0 0 120px -24px #d4a01215;
-}
-
-/* Animated gradient border */
-@keyframes borderGlow {
-  0%, 100% { opacity: 0.3; }
-  50% { opacity: 0.8; }
-}
-
-.border-glow {
-  animation: borderGlow 3s ease-in-out infinite;
-}
-
-/* Scan line effect */
-@keyframes scanline {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(100vh); }
-}
-
-.scanline::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, #d4a01240, transparent);
-  animation: scanline 8s linear infinite;
-}
+.glow-amber { box-shadow: 0 0 80px -20px #d4a01215; }
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className="dark">
-      <body className="antialiased grain">{children}</body>
+      <body className="antialiased">{children}</body>
     </html>
   );
 }
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export default function RootLayout({`
`19`	`19`	`}) {`
`20`	`20`	`return (`
`21`	`21`	`<html lang="en" className="dark">`
`22`		`- <body className="antialiased grain">{children}</body>`
	`22`	`+ <body className="antialiased">{children}</body>`
`23`	`23`	`</html>`
`24`	`24`	`);`
`25`	`25`	`}`