feat: first draft

app/api/backup/route.ts

@@ -0,0 +1,15 @@
+import { redis } from '@utils/redis';
+import { NextResponse } from 'next/server';
+import crypto from 'crypto';
+
+export async function POST(req: Request) {
+  try {
+    const { state } = await req.json();
+    const key = crypto.randomBytes(8).toString('hex');
+    await redis.set(key, JSON.stringify(state));
+    return NextResponse.json({ success: true, key });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ error: 'Backup failed' }, { status: 500 });
+  }
+}

app/api/restore/route.ts

@@ -0,0 +1,35 @@
+import { redis } from '@utils/redis';
+import { validateState } from '@utils/validateState';
+import { NextResponse } from 'next/server';
+
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const key = searchParams.get('key');
+
+    if (!key) {
+      return NextResponse.json({ error: 'No key provided' }, { status: 400 });
+    }
+
+    const state = await redis.get(key);
+
+    if (!state) {
+      return NextResponse.json(
+        { error: 'No data found for this key' },
+        { status: 404 }
+      );
+    }
+
+    const validatedState = validateState(state);
+    return NextResponse.json({ data: validatedState });
+  } catch (error) {
+    console.error('Restore operation failed:', error);
+    return NextResponse.json(
+      {
+        error: 'Restore failed',
+        details: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500 }
+    );
+  }
+}

app/globals.css

@@ -0,0 +1,193 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 190 95% 95%;
+    --foreground: 200 50% 3%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 200 50% 3%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 200 50% 3%;
+
+    --primary: 190 100% 50%; /* Bright cyan */
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 185 100% 85%;
+    --secondary-foreground: 200 50% 3%;
+
+    --muted: 185 35% 88%;
+    --muted-foreground: 200 40% 40%;
+
+    --accent: 170 85% 45%; /* Bold turquoise */
+    --accent-foreground: 200 50% 3%;
+
+    --destructive: 345 84% 60%; /* Coral red */
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 190 95% 85%;
+    --input: 190 95% 85%;
+    --ring: 190 100% 50%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 200 50% 3%;
+    --foreground: 210 40% 98%;
+
+    --card: 200 50% 3%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 200 50% 3%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 190 100% 50%;
+    --primary-foreground: 200 50% 3%;
+
+    --secondary: 200 34% 20%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 200 34% 20%;
+    --muted-foreground: 200 40% 60%;
+
+    --accent: 170 85% 45%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 345 62% 40%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 200 34% 20%;
+    --input: 200 34% 20%;
+    --ring: 190 100% 50%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    background: linear-gradient(
+      180deg,
+      hsl(190 95% 95%) 0%,
+      hsl(185 90% 92%) 100%
+    );
+    min-height: 100vh;
+  }
+
+  /* Animated waves for the header */
+  @keyframes wave {
+    0% {
+      transform: translateX(0) translateZ(0) scaleY(1);
+    }
+    50% {
+      transform: translateX(-25%) translateZ(0) scaleY(0.8);
+    }
+    100% {
+      transform: translateX(-50%) translateZ(0) scaleY(1);
+    }
+  }
+
+  @keyframes swell {
+    0%,
+    100% {
+      transform: translateY(-12px);
+    }
+    50% {
+      transform: translateY(12px);
+    }
+  }
+
+  .wave {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 88.7' width='800' height='88.7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23ffffff33'/%3E%3C/svg%3E");
+    position: absolute;
+    width: 200%;
+    height: 100%;
+    animation: wave 12s linear infinite;
+    transform-origin: center bottom;
+  }
+
+  .wave-2 {
+    animation: wave 18s linear reverse infinite;
+    opacity: 0.5;
+  }
+
+  .wave-3 {
+    animation: wave 20s linear infinite;
+    opacity: 0.2;
+  }
+
+  .swell {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    animation: swell 7s ease -1.25s infinite;
+    transform-origin: center bottom;
+  }
+
+  /* Glass effect for cards */
+  .glass-card {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
+  }
+
+  .dark .glass-card {
+    background: rgba(0, 0, 0, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  /* Gradient borders */
+  .gradient-border {
+    position: relative;
+    border: none;
+  }
+
+  .gradient-border::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    padding: 2px;
+    background: linear-gradient(
+      45deg,
+      hsl(190 100% 50%),
+      hsl(170 85% 45%),
+      hsl(190 100% 50%)
+    );
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+}
+
+.tabs-list {
+  @apply inline-flex h-12 items-center justify-center rounded-lg bg-white p-1 shadow-lg dark:bg-gray-800/50 backdrop-blur-sm;
+}
+
+.tab {
+  @apply inline-flex items-center justify-center whitespace-nowrap rounded-md px-6 py-2.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300;
+}
+
+.tab[data-state='active'] {
+  @apply bg-gradient-to-r from-cyan-500 to-blue-500 text-white shadow-sm;
+}
+
+.tab[data-state='inactive'] {
+  @apply text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-50;
+}

app/layout.tsx

@@ -0,0 +1,45 @@
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { ThemeProvider } from '@components/ThemeProvider';
+import type { Metadata } from 'next';
+import Header from '@components/Header';
+import { StateProvider } from '@contexts/state/StateProvider';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: `Blue ocean strategy tool by ${process.env.NEXT_PUBLIC_BRAND_NAME}`,
+  description:
+    'Web application for visualizing and analyzing business strategies using the Blue Ocean Strategy framework',
+  keywords: 'blue ocean, strategy, business, visualization, analysis',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <StateProvider>
+            <div className="min-h-screen bg-background transition-colors">
+              <Header />
+              <main className="container max-w-screen-xl mx-auto px-4 py-6">
+                <div className="flex justify-center">
+                  <div className="w-full">{children}</div>
+                </div>
+              </main>
+            </div>
+          </StateProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@components/ui/tabs';
+import StrategyCanvas from '@components/core/StrategyCanvas';
+import FourActions from '@components/core/FourActions';
+import SixPaths from '@components/core/SixPaths';
+import UtilityMap from '@components/core/UtilityMap';
+import PriceCorridor from '@components/core/PriceCorridor';
+import Validation from '@components/core/Validation';
+import BackupControls from '@components/BackupControls';
+
+export default function Home() {
+  return (
+    <>
+      <BackupControls />
+      <Tabs defaultValue="canvas" className="w-full">
+        <TabsList>
+          <TabsTrigger value="canvas">Strategy Canvas</TabsTrigger>
+          <TabsTrigger value="actions">Four Actions</TabsTrigger>
+          <TabsTrigger value="paths">Six Paths</TabsTrigger>
+          <TabsTrigger value="utility">Utility Map</TabsTrigger>
+          <TabsTrigger value="price">Price Corridor</TabsTrigger>
+          <TabsTrigger value="validation">Validation</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="canvas">
+          <StrategyCanvas />
+        </TabsContent>
+        <TabsContent value="actions">
+          <FourActions />
+        </TabsContent>
+        <TabsContent value="paths">
+          <SixPaths />
+        </TabsContent>
+        <TabsContent value="utility">
+          <UtilityMap />
+        </TabsContent>
+        <TabsContent value="price">
+          <PriceCorridor />
+        </TabsContent>
+        <TabsContent value="validation">
+          <Validation />
+        </TabsContent>
+      </Tabs>
+    </>
+  );
+}