fix: styling on landing page

Author: code-mattclaffey

.storybook/manager.ts

@@ -9,37 +9,38 @@ const theme = create({
   fontCode: 'monospace',
 
   brandTitle: '⚛️ React Design Patterns',
-  brandUrl: 'https://example.com',
-  brandTarget: '_self',
-  colorPrimary: '#ffffff',
-  colorSecondary: '#A599E9',
-
-  // UI
-  appBg: '#1E1E3F',
-  appContentBg: '#2D2B55',
+  brandUrl:
+    'https://github.com/code-mattclaffey/react-design-patterns',
+  brandTarget: '_blank',
+  colorPrimary: '#3b82f6', // blue-500
+  colorSecondary: '#A599E9', // code-500 from tailwind config
+
+  // UI - matching main page blue-950 theme
+  appBg: '#172554', // blue-950
+  appContentBg: '#1e3a8a', // blue-900
   appPreviewBg: '#ffffff',
-  appBorderColor: '#2D2B55',
-  appBorderRadius: 4,
+  appBorderColor: '#1e40af', // blue-800
+  appBorderRadius: 8,
 
-  // Text colors
+  // Text colors - matching main page
   textColor: '#ffffff',
-  textInverseColor: '#ffffff',
+  textInverseColor: '#1e293b', // slate-800
 
-  // Toolbar default and active colors
-  barTextColor: '#ffffff',
+  // Toolbar colors - matching header
+  barTextColor: '#cbd5e1', // slate-300
   barSelectedColor: '#ffffff',
   barHoverColor: '#ffffff',
-  barBg: '#1E1E3F',
+  barBg: '#172554', // blue-950
 
   // Form colors
-  inputBg: '#ffffff',
-  inputBorder: '#35356b',
-  inputTextColor: '#1E1E3F',
-  inputBorderRadius: 2,
-
-  // Buttons
-  buttonBg: '#35356b',
-  buttonBorder: '#35356b',
+  inputBg: '#1e40af', // blue-800
+  inputBorder: '#3b82f6', // blue-500
+  inputTextColor: '#ffffff',
+  inputBorderRadius: 6,
+
+  // Buttons - matching CTA buttons
+  buttonBg: '#2563eb', // blue-600
+  buttonBorder: '#2563eb', // blue-600
   gridCellSize: 24
 });
 

.storybook/styles/docs.styles.css

@@ -1,8 +1,10 @@
+/* Main content styling to match landing page */
 .sbdocs-content p,
 .sbdocs-content li,
 .sbdocs-content a {
   font-size: 1.125rem;
   line-height: 1.6;
+  font-weight: 500;
 }
 
 .sbdocs-content h1,
@@ -14,20 +16,67 @@
   font-weight: 700;
   font-style: normal;
   margin-top: 1.5rem !important;
+  line-height: 1.2;
 }
 
 .sbdocs-content h1 {
   font-size: 2.5rem;
+  color: #3b82f6; /* blue-500 accent */
 }
 
 .sbdocs-content h2 {
   font-size: 2rem;
+  color: #2563eb; /* blue-600 */
 }
 
 .sbdocs-content h3 {
   font-size: 1.75rem;
+  color: #1d4ed8; /* blue-700 */
 }
 
 .sbdocs-content ol {
   list-style: decimal;
 }
+
+/* Code blocks styling */
+.sbdocs-content pre {
+  background-color: #172554 !important; /* blue-950 */
+  border: 1px solid #1e40af; /* blue-800 */
+  border-radius: 8px;
+}
+
+/* Links styling to match main page */
+.sbdocs-content a {
+  color: #3b82f6; /* blue-500 */
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.sbdocs-content a:hover {
+  color: #2563eb; /* blue-600 */
+  text-decoration: underline;
+}
+
+/* Badge/tag styling */
+.sbdocs-content .docblock-code-toggle {
+  background-color: #1e40af; /* blue-800 */
+  color: white;
+  border-radius: 6px;
+}
+
+/* Table styling */
+.sbdocs-content table {
+  border-collapse: collapse;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.sbdocs-content th {
+  background-color: #1e40af; /* blue-800 */
+  color: white;
+  font-weight: 600;
+}
+
+.sbdocs-content td {
+  border-color: #cbd5e1; /* slate-300 */
+}

src/app/components/Footer.tsx

@@ -6,7 +6,7 @@ export const Footer = () => {
           <div className="border-t border-blue-800 mb-4"></div>
           <div className="grid md:grid-cols-3 gap-8">
             <div className="md:col-span-2">
-              <div className="flex items-center space-x-3 mb-4">
+              <div className="flex items-center space-x-3 mb-8">
                 <div className="text-2xl">⚛️</div>
                 <div className="text-xl font-bold text-white">
                   React Design Patterns

src/app/components/Header.tsx

@@ -16,7 +16,7 @@ export const Header = () => {
 
           <div className="hidden md:flex items-center space-x-8">
             <a
-              href="#course"
+              href="/storybook"
               className="text-slate-300 hover:text-white transition-colors duration-200"
             >
               Course
@@ -37,9 +37,13 @@ export const Header = () => {
             </a>
           </div>
 
-          <button 
+          <button
             className="md:hidden text-white"
-            aria-label={isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}
+            aria-label={
+              isMenuOpen
+                ? 'Close navigation menu'
+                : 'Open navigation menu'
+            }
             aria-expanded={isMenuOpen}
             onClick={() => setIsMenuOpen(!isMenuOpen)}
           >
@@ -53,7 +57,11 @@ export const Header = () => {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth={2}
-                d={isMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
+                d={
+                  isMenuOpen
+                    ? 'M6 18L18 6M6 6l12 12'
+                    : 'M4 6h16M4 12h16M4 18h16'
+                }
               />
             </svg>
           </button>