nobalmako 1.0.0

package/src/app/auth/register/page.tsx

@@ -0,0 +1,16 @@
+import { Metadata } from "next";
+import RegisterForm from "./RegisterForm";
+import { Suspense } from "react";
+
+export const metadata: Metadata = {
+  title: "Register - Nobalmako",
+  description: "Create your Nobalmako account",
+};
+
+export default function RegisterPage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen flex items-center justify-center bg-background p-4">Loading registration...</div>}>
+      <RegisterForm />
+    </Suspense>
+  );
+}

package/src/app/auth/reset-password/page.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useState, useEffect, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Shield, Loader2, CheckCircle2 } from "lucide-react";
+
+function ResetPasswordForm() {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+  
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const token = searchParams.get('token');
+
+  useEffect(() => {
+    if (!token) {
+      setError("Invalid or missing reset token. Please request a new link.");
+    }
+  }, [token]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      setIsLoading(false);
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters long");
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const response = await fetch("/api/auth/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, password }),
+      });
+
+      if (response.ok) {
+        setSuccess(true);
+      } else {
+        const data = await response.json();
+        setError(data.error || "Failed to reset password");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <Shield className="h-12 w-12 text-primary" />
+          </div>
+          <CardTitle className="text-2xl">Create New Password</CardTitle>
+          <CardDescription>
+            {success 
+              ? "Your password has been successfully reset" 
+              : "Please enter your new password below."}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {success ? (
+            <div className="space-y-6 text-center">
+              <div className="flex justify-center">
+                <div className="h-20 w-20 bg-green-100 rounded-full flex items-center justify-center">
+                  <CheckCircle2 className="h-10 w-10 text-green-600" />
+                </div>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                You can now use your new password to sign in to your account.
+              </p>
+              <Button asChild className="w-full">
+                <Link href="/auth/login">Go to Sign in</Link>
+              </Button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {error && (
+                <Alert variant="destructive">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="password">New Password</Label>
+                <Input
+                  id="password"
+                  name="password"
+                  type="password"
+                  required
+                  placeholder="At least 8 characters"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  disabled={isLoading || !token}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">Confirm New Password</Label>
+                <Input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                  required
+                  placeholder="Repeat your password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  disabled={isLoading || !token}
+                />
+              </div>
+
+              <Button type="submit" className="w-full" disabled={isLoading || !token}>
+                {isLoading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Resetting...
+                  </>
+                ) : (
+                  "Reset Password"
+                )}
+              </Button>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    }>
+      <ResetPasswordForm />
+    </Suspense>
+  );
+}

package/src/app/dashboard/DashboardClient.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Plus, Settings, Users, Database, Shield, Key, History, Search } from "lucide-react";
+import { useAuth } from "@/hooks/use-auth";
+import { useTeams } from "@/hooks/use-teams";
+import { useEnvironments } from "@/hooks/use-environments";
+import { useVariables } from "@/hooks/use-variables";
+import CreateTeamDialog from "@/components/CreateTeamDialog";
+import CreateVariableDialog from "@/components/CreateVariableDialog";
+import SearchDialog from "@/components/SearchDialog";
+import ApiKeysManager from "@/components/ApiKeysManager";
+import AppLayout from "@/components/AppLayout";
+import { SecurityOverview } from "@/components/SecurityOverview";
+import { MFASettings } from "@/components/MFASettings";
+
+export default function DashboardClient() {
+  const { user, isLoading: authLoading } = useAuth();
+  const { teams, isLoading: teamsLoading } = useTeams();
+  const { environments, isLoading: environmentsLoading } = useEnvironments();
+  const { variables, isLoading: variablesLoading } = useVariables();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push("/auth/login");
+    }
+  }, [user, authLoading, router]);
+
+  if (authLoading || teamsLoading || environmentsLoading || variablesLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return null; // Will redirect
+  }
+
+  return (
+    <AppLayout>
+      <div className="space-y-8 max-w-7xl mx-auto">
+        {/* Welcome Section */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Welcome back, {user.name}</h1>
+            <p className="text-muted-foreground mt-1">
+              Here's an overview of your projects and secrets.
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <CreateTeamDialog />
+          </div>
+        </div>
+
+        {/* Security Health */}
+        <section className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Shield className="h-5 w-5 text-primary" />
+            <h2 className="text-xl font-bold tracking-tight">Security Health</h2>
+          </div>
+          <SecurityOverview variables={variables || []} teams={teams || []} />
+        </section>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <Card className="bg-card border-border shadow-sm">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground flex items-center">
+                <Shield className="h-4 w-4 mr-2" />
+                Total Projects
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-3xl font-bold">{teams?.length || 0}</div>
+            </CardContent>
+          </Card>
+          <Card className="bg-card border-border shadow-sm">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground flex items-center">
+                <Database className="h-4 w-4 mr-2" />
+                Active Environments
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-3xl font-bold">{environments?.length || 0}</div>
+            </CardContent>
+          </Card>
+          <Card className="bg-card border-border shadow-sm">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground flex items-center">
+                <Key className="h-4 w-4 mr-2" />
+                Secrets Guarded
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-3xl font-bold">{variables?.filter(v => v.isSecret).length || 0}</div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Tabs defaultValue="projects" className="space-y-6">
+          <TabsList className="bg-card border p-1">
+            <TabsTrigger value="projects" className="px-6">Projects</TabsTrigger>
+            <TabsTrigger value="api-keys" className="px-6">API Keys</TabsTrigger>
+            <TabsTrigger value="security" className="px-6">Security</TabsTrigger>
+            <TabsTrigger value="activity" className="px-6">Activity</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="projects" className="space-y-6 outline-none">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {teams?.map((team) => (
+                <Card 
+                  key={team.id} 
+                  className="group hover:border-primary/50 transition-all cursor-pointer overflow-hidden shadow-sm hover:shadow-md"
+                  onClick={() => router.push(`/project/${team.id}`)}
+                >
+                  <div 
+                    className="h-2 w-full transition-all group-hover:h-3" 
+                    style={{ backgroundColor: team.color || '#3b82f6' }}
+                  />
+                  <CardHeader>
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="group-hover:text-primary transition-colors">{team.name}</CardTitle>
+                      {team.ownerId === user.id && (
+                        <Badge variant="secondary" className="font-normal">Owner</Badge>
+                      )}
+                    </div>
+                    <CardDescription className="line-clamp-2 min-h-[2.5rem]">
+                      {team.description || "No description provided."}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                      <div className="flex items-center">
+                        <Database className="h-4 w-4 mr-1 text-blue-500" />
+                        {environments?.filter(e => e.teamId === team.id).length || 0} Envs
+                      </div>
+                      <div className="flex items-center">
+                        <Shield className="h-4 w-4 mr-1 text-green-500" />
+                        {variables?.filter(v => v.teamId === team.id).length || 0} Vars
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+
+              <Card 
+                className="border-dashed flex flex-col items-center justify-center p-8 hover:bg-muted/50 cursor-pointer transition-colors min-h-[180px]"
+                onClick={() => {
+                  const btn = document.querySelector('[data-create-team-btn]') as HTMLButtonElement;
+                  if (btn) btn.click();
+                }}
+              >
+                <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mb-4">
+                  <Plus className="h-6 w-6 text-muted-foreground" />
+                </div>
+                <h3 className="font-semibold">Create Project</h3>
+                <p className="text-sm text-muted-foreground text-center mt-1">
+                  Add a new project to start managing variables.
+                </p>
+              </Card>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="api-keys" className="outline-none">
+            <Card className="shadow-sm">
+              <CardHeader>
+                <CardTitle>API Keys</CardTitle>
+                <CardDescription>
+                  Manage access keys for fetching your environment variables programmatically.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ApiKeysManager />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="security" className="outline-none">
+            <MFASettings initialEnabled={user.mfaEnabled || false} />
+          </TabsContent>
+
+          <TabsContent value="activity" className="outline-none">
+            <Card className="shadow-sm">
+              <CardHeader>
+                <CardTitle>Global Activity Log</CardTitle>
+                <CardDescription>
+                  Recent changes across all your projects.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="text-center py-12">
+                  <div className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-muted mb-4">
+                    <History className="h-6 w-6 text-muted-foreground" />
+                  </div>
+                  <h3 className="font-semibold">Full Activity History</h3>
+                  <p className="text-sm text-muted-foreground mt-1 mb-6 max-w-xs mx-auto">
+                    View a detailed audit trail of every change made to your environment variables.
+                  </p>
+                  <Button variant="outline" onClick={() => router.push('/audit-log')}>
+                    View All Audit Logs
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </AppLayout>
+  );
+}

package/src/app/dashboard/page.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+import DashboardClient from "./DashboardClient";
+
+export const metadata: Metadata = {
+  title: "Dashboard - Nobalmako",
+  description: "Manage your environment variables",
+};
+
+export default function DashboardPage() {
+  return <DashboardClient />;
+}

package/src/app/docs/page.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import AppLayout from "@/components/AppLayout";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Terminal, Shield, Zap, Globe, Lock, Cpu, Server, Database } from "lucide-react";
+
+export default function DocsPage() {
+  const steps = [
+    {
+      title: "1. Create a Project",
+      description: "Initialize your workspace. A project represents a specific application or service where you'll manage secrets.",
+      icon: <Terminal className="h-5 w-5 text-primary" />,
+      color: "blue"
+    },
+    {
+      title: "2. Define Environments",
+      description: "Set up Development, Staging, and Production. Each environment isolates its own set of encrypted variables.",
+      icon: <Globe className="h-5 w-5 text-primary" />,
+      color: "emerald"
+    },
+    {
+      title: "3. Import Secrets",
+      description: "Add your keys manually or bulk-import via .env files. Nobalmako automatically encrypts everything at rest.",
+      icon: <Lock className="h-5 w-5 text-primary" />,
+      color: "amber"
+    },
+    {
+      title: "4. Inject via API & SDK",
+      description: "Use our CLI or REST API to securely inject credentials into your CI/CD pipelines and local machines.",
+      icon: <Zap className="h-5 w-5 text-primary" />,
+      color: "purple"
+    }
+  ];
+
+  return (
+    <AppLayout>
+      <div className="max-w-6xl mx-auto py-12 px-6 sm:px-8">
+        <header className="mb-16 border-b pb-10">
+          <Badge className="mb-4 bg-primary/10 text-primary border-primary/20 hover:bg-primary/20" variant="outline">
+            Documentation v1.0.0
+          </Badge>
+          <h1 className="text-5xl font-extrabold tracking-tight mb-4 text-foreground ">
+            Documentation
+          </h1>
+          <p className="text-xl text-muted-foreground max-w-2xl leading-relaxed">
+            Welcome to Nobalmako. Learn how to centralize, secure, and automate your company's environment variables.
+          </p>
+        </header>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
+          {steps.map((step, i) => (
+            <Card key={i} className="border-border/50 bg-card hover:bg-muted/50 transition-all hover:shadow-lg group">
+              <CardHeader>
+                <div className="mb-4 p-3 bg-primary/5 rounded-xl w-fit group-hover:scale-110 transition-transform">
+                  {step.icon}
+                </div>
+                <CardTitle className="text-lg font-bold text-foreground ">{step.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {step.description}
+                </p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="grid lg:grid-cols-12 gap-16">
+          <div className="lg:col-span-8 space-y-20">
+            <section className="scroll-mt-24">
+              <div className="flex items-center gap-4 mb-6">
+                <div className="p-2 bg-primary/10 rounded-lg">
+                  <Shield className="h-6 w-6 text-primary" />
+                </div>
+                <h2 className="text-3xl font-bold text-foreground ">Security Architecture</h2>
+              </div>
+              <div className="prose  max-w-none">
+                <p className="text-lg text-muted-foreground leading-relaxed italic border-l-4 border-primary/20 pl-6 py-2">
+                  "Nobalmako uses industry-standard AES-256-GCM encryption. Keys are never stored in plain-text, and unique IVs are used for every single secret."
+                </p>
+                <div className="grid sm:grid-cols-2 gap-8 mt-10">
+                  <div className="p-6 bg-muted/40 rounded-2xl border border-border/50">
+                    <h4 className="font-bold flex items-center gap-2 mb-3 text-foreground ">
+                      <Server className="h-4 w-4 text-primary" /> At Rest
+                    </h4>
+                    <p className="text-sm text-muted-foreground">Encryption performed application-side before hitting the database.</p>
+                  </div>
+                  <div className="p-6 bg-muted/40 rounded-2xl border border-border/50">
+                    <h4 className="font-bold flex items-center gap-2 mb-3 text-foreground ">
+                      <Cpu className="h-4 w-4 text-primary" /> In Transit
+                    </h4>
+                    <p className="text-sm text-muted-foreground">Mandatory TLS 1.3 encryption for all API calls and browser traffic.</p>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section className="scroll-mt-24">
+              <div className="flex items-center gap-4 mb-6">
+                <div className="p-2 bg-primary/10 rounded-lg">
+                  <Zap className="h-6 w-6 text-primary" />
+                </div>
+                <h2 className="text-3xl font-bold text-foreground ">Code Integration (SDKs)</h2>
+              </div>
+              <p className="text-muted-foreground mb-6">
+                Nobalmako provides official client libraries for major languages to simplify secret injection.
+              </p>
+              <div className="grid gap-6">
+                <Card className="border-border/50">
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-sm font-semibold uppercase tracking-wider opacity-60">JavaScript / TypeScript</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <pre className="bg-slate-900 text-primary p-4 rounded-xl overflow-x-auto text-[13px] leading-relaxed font-mono">
+{`npm install @nobalmako/sdk
+
+import { nobalmako } from '@nobalmako/sdk';
+
+// Automatically loads variables into process.env
+await nobalmako.load({
+  project: "my-service",
+  environment: "production"
+});`}
+                    </pre>
+                  </CardContent>
+                </Card>
+
+                <Card className="border-border/50">
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-sm font-semibold uppercase tracking-wider opacity-60">Python</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <pre className="bg-slate-900 text-primary p-4 rounded-xl overflow-x-auto text-[13px] leading-relaxed font-mono">
+{`pip install nobalmako
+
+from nobalmako import nm
+
+# Loads variables into os.environ
+nm.load(project="my-service", env="production")`}
+                    </pre>
+                  </CardContent>
+                </Card>
+              </div>
+            </section>
+
+            <section className="scroll-mt-24">
+              <div className="flex items-center gap-4 mb-6">
+                <div className="p-2 bg-primary/10 rounded-lg">
+                  <Database className="h-6 w-6 text-primary" />
+                </div>
+                <h2 className="text-3xl font-bold text-foreground ">Environment Isolation</h2>
+              </div>
+              <div className="prose  max-w-none space-y-6">
+                <p className="text-lg text-muted-foreground">
+                  Prevent "Production leaking into Dev" by defining strict scoped environments. Each environment is a cryptographic silo.
+                </p>
+                <ul className="grid sm:grid-cols-2 gap-x-12 gap-y-4 list-none p-0">
+                  <li className="flex items-start gap-3">
+                    <div className="mt-1.5 h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
+                    <span className="text-sm font-medium">RBAC for specifically sensitive environments.</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <div className="mt-1.5 h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
+                    <span className="text-sm font-medium">Environment-specific webhook triggers.</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <div className="mt-1.5 h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
+                    <span className="text-sm font-medium">Automatic .env generation for local dev.</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <div className="mt-1.5 h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
+                    <span className="text-sm font-medium">Historical versioning of all secrets.</span>
+                  </li>
+                </ul>
+              </div>
+            </section>
+
+            <section id="cli-installation" className="scroll-mt-24">
+              <div className="flex items-center gap-4 mb-6">
+                <div className="p-2 bg-primary/10 rounded-lg">
+                  <Terminal className="h-6 w-6 text-primary" />
+                </div>
+                <h2 className="text-3xl font-bold text-foreground ">CLI Usage</h2>
+              </div>
+              <div className="prose  max-w-none space-y-6">
+                <p className="text-lg text-muted-foreground">
+                  The Nobalmako CLI is the fastest way to sync your environment variables with your local machine or CI/CD pipelines.
+                </p>
+                
+                <div className="space-y-4">
+                  <h4 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">Global Installation</h4>
+                  <p className="text-sm text-muted-foreground">Download and install the CLI from NPM globally to use it anywhere.</p>
+                  <div className="bg-slate-900 rounded-xl p-6 font-mono text-sm border border-white/10 group relative">
+                    <code className="text-primary">npm install -g nobalmako</code>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <h4 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">Authentication</h4>
+                  <p className="text-sm text-muted-foreground">Authenticate your CLI session to interact with your projects.</p>
+                  <div className="bg-slate-900 rounded-xl p-6 font-mono text-sm border border-white/10">
+                    <code className="text-primary">nobalmako login</code>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <h4 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">Pulling Secrets</h4>
+                  <p className="text-sm text-muted-foreground">Download your environment variables into a local .env file.</p>
+                  <div className="bg-slate-900 rounded-xl p-6 font-mono text-sm border border-white/10">
+                    <code className="text-primary">nobalmako pull -p "My Project" -e "development"</code>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <h4 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">Usage in CI/CD</h4>
+                  <p className="text-sm text-muted-foreground">For GitHub Actions or GitLab CI, we recommend using `npx` with an API token.</p>
+                  <div className="bg-slate-900 rounded-xl p-6 font-mono text-sm border border-white/10">
+                    <code className="text-primary">npx nobalmako pull -p "Prod" -e "prod" --token $NOBALMAKO_TOKEN</code>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+
+          <aside className="lg:col-span-4 space-y-8">
+            <div className="p-8 border border-primary/20 bg-card rounded-[2rem] text-foreground shadow-xl relative overflow-hidden group">
+              <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-500" />
+              <h3 className="text-2xl font-bold mb-4 relative z-10 text-primary">Need closer help?</h3>
+              <p className="text-muted-foreground mb-6 text-sm leading-relaxed relative z-10">
+                Our team of security engineers is available for white-glove onboarding and architectural reviews.
+              </p>
+              <button className="w-full bg-primary text-primary-foreground font-bold py-3 rounded-xl hover:bg-primary/90 transition-colors shadow-lg relative z-10">
+                Contact Enterprise Support
+              </button>
+            </div>
+
+            <div className="p-8 border border-border/50 rounded-[2rem] bg-card hover:bg-muted/30 transition-colors">
+              <h4 className="font-bold mb-4 flex items-center gap-2 text-foreground ">
+                <Shield className="h-4 w-4 text-primary" /> compliance
+              </h4>
+              <p className="text-xs text-muted-foreground leading-relaxed">
+                Nobalmako is built to help your organization achieve SOC2 Type II and GDPR compliance by providing immutable logs and proof of secret rotation.
+              </p>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}