Jules wip 10191830019210473033

apps/web/package.json

@@ -1,5 +1,6 @@
 {
-  "name": "@opencanvas/web",
+  "name": "legalease-africa",
+  "description": "Localized subscription-based legal services for African startups and SMEs",
   "author": "Brace Sproul",
   "homepage": "https://opencanvas.langchain.com",
   "repository": "https://github.com/langchain-ai/open-canvas",

apps/web/src/app/layout.tsx

@@ -9,8 +9,8 @@ const inter = Inter({
 });
 
 export const metadata: Metadata = {
-  title: "Open Canvas",
-  description: "Open Canvas Chat UX by LangChain",
+  title: "LegalEase Africa – Smart Legal Support for Startups",
+  description: "Affordable legal services for African startups and SMEs. Templates, compliance tools, and local legal experts—on subscription.",
 };
 
 export default function RootLayout({

apps/web/src/app/page.tsx

@@ -1,24 +1,100 @@
 "use client";
 
-import { Canvas } from "@/components/canvas";
-import { AssistantProvider } from "@/contexts/AssistantContext";
-import { GraphProvider } from "@/contexts/GraphContext";
-import { ThreadProvider } from "@/contexts/ThreadProvider";
-import { UserProvider } from "@/contexts/UserContext";
-import { Suspense } from "react";
+import { Button } from "@/components/ui/button"; // Assuming this path is correct
 
 export default function Home() {
   return (
-    <Suspense>
-      <UserProvider>
-        <ThreadProvider>
-          <AssistantProvider>
-            <GraphProvider>
-              <Canvas />
-            </GraphProvider>
-          </AssistantProvider>
-        </ThreadProvider>
-      </UserProvider>
-    </Suspense>
+    <main>
+      <nav className="bg-white shadow-md p-4 sticky top-0 z-50"> {/* Added sticky and z-index for visibility */}
+        <div className="container mx-auto flex justify-between items-center">
+          <div className="text-2xl font-bold text-primary">LegalEase Africa</div>
+          <div className="space-x-4">
+            <a href="#" className="hover:text-secondary">Home</a>
+            <a href="#features" className="hover:text-secondary">Features</a>
+            <a href="#countries" className="hover:text-secondary">Countries</a>
+            <a href="#pricing" className="hover:text-secondary">Pricing</a>
+            <a href="/auth/login" className="hover:text-secondary">Login</a>
+          </div>
+        </div>
+      </nav>
+
+      <section className="flex flex-col items-center justify-center py-20 text-center">
+        <h1 className="text-4xl font-bold text-primary">LegalEase Africa</h1>
+        <p className="mt-4 text-lg text-muted">
+          Affordable, localized legal help for startups and SMEs across Africa.
+        </p>
+        <Button className="mt-6">Get Started</Button>
+      </section>
+
+      <section id="features" className="py-16 bg-gray-100"> {/* Placeholder background */}
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center mb-12">Key Features</h2>
+          <div className="grid md:grid-cols-3 gap-8 text-left"> {/* Changed text-center to text-left for card content */}
+            <div className="p-6 shadow-lg rounded-lg bg-white">
+              <h3 className="text-xl font-semibold mb-2">Legal Document Templates</h3>
+              <p className="text-gray-600">Access a library of lawyer-vetted legal documents tailored for African startups.</p>
+            </div>
+            <div className="p-6 shadow-lg rounded-lg bg-white">
+              <h3 className="text-xl font-semibold mb-2">Compliance Checklists</h3>
+              <p className="text-gray-600">Navigate regulatory requirements with country-specific compliance guides.</p>
+            </div>
+            <div className="p-6 shadow-lg rounded-lg bg-white">
+              <h3 className="text-xl font-semibold mb-2">Monthly Legal Access</h3>
+              <p className="text-gray-600">Get dedicated time with legal experts for advice and document review.</p>
+            </div>
+            <div className="p-6 shadow-lg rounded-lg bg-white">
+              <h3 className="text-xl font-semibold mb-2">Real-Time Alerts</h3>
+              <p className="text-gray-600">Stay updated on new laws and regulations affecting your business.</p>
+            </div>
+            <div className="p-6 shadow-lg rounded-lg bg-white">
+              <h3 className="text-xl font-semibold mb-2">Legal Q&A by Country</h3>
+              <p className="text-gray-600">Find answers to common legal questions for your specific jurisdiction.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="pricing" className="py-16">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center mb-12">Subscription Tiers</h2>
+          <div className="grid md:grid-cols-3 gap-8 text-center">
+            <div className="p-6 shadow-lg rounded-lg bg-white border border-gray-200">
+              <h3 className="text-2xl font-semibold mb-3">Basic Tier</h3>
+              <p className="text-gray-700 mb-4">Templates + Alerts</p>
+              {/* <Button variant="outline">Choose Basic</Button> */}
+            </div>
+            <div className="p-6 shadow-lg rounded-lg bg-white border border-gray-200">
+              <h3 className="text-2xl font-semibold mb-3">Growth Tier</h3>
+              <p className="text-gray-700 mb-4">Consultations + Vetting</p>
+              {/* <Button variant="outline">Choose Growth</Button> */}
+            </div>
+            <div className="p-6 shadow-lg rounded-lg bg-white border border-gray-200">
+              <h3 className="text-2xl font-semibold mb-3">Premium Tier</h3>
+              <p className="text-gray-700 mb-4">Concierge + Representation</p>
+              {/* <Button variant="outline">Choose Premium</Button> */}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="countries" className="py-16 bg-gray-100"> {/* Placeholder background */}
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center mb-12">Supported Countries</h2>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 text-center">
+            <div className="p-4 border rounded-md bg-white shadow">Kenya</div>
+            <div className="p-4 border rounded-md bg-white shadow">Nigeria</div>
+            <div className="p-4 border rounded-md bg-white shadow">South Africa</div>
+            <div className="p-4 border rounded-md bg-white shadow">Uganda</div>
+            <div className="p-4 border rounded-md bg-white shadow">Ghana</div>
+          </div>
+        </div>
+      </section>
+
+      <footer className="text-center p-4 mt-12 border-t text-muted">
+        <p className="text-sm">
+          © {new Date().getFullYear()} LegalEase Africa. All rights reserved.
+        </p>
+      </footer>
+    </main>
   );
 }

apps/web/src/components/auth/login/Login.tsx

@@ -68,14 +68,7 @@ export function Login() {
       <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
         <div className="absolute inset-0 bg-zinc-900" />
         <div className="relative z-20 flex gap-1 items-center text-lg font-medium">
-          <NextImage
-            src="/lc_logo.jpg"
-            width={36}
-            height={36}
-            alt="LangChain Logo"
-            className="rounded-full"
-          />
-          Open Canvas
+          <span className="font-bold">LegalEase Africa</span>
         </div>
       </div>
       <div className="lg:p-8">

apps/web/src/components/auth/signup/Signup.tsx

@@ -68,14 +68,7 @@ export function Signup() {
       <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
         <div className="absolute inset-0 bg-zinc-900" />
         <div className="relative z-20 flex gap-1 items-center text-lg font-medium">
-          <NextImage
-            src="/lc_logo.jpg"
-            width={36}
-            height={36}
-            alt="LangChain Logo"
-            className="rounded-full"
-          />
-          Open Canvas
+          <span className="font-bold">LegalEase Africa</span>
         </div>
       </div>
       <div className="lg:p-8">

apps/web/src/components/chat-interface/welcome.tsx

@@ -8,33 +8,29 @@ import { ProgrammingLanguagesDropdown } from "../ui/programming-lang-dropdown";
 import { Button } from "../ui/button";
 
 const QUICK_START_PROMPTS_SEARCH = [
-  "Write a market analysis of AI chip manufacturers in 2025",
-  "Create a blog post about the latest climate change policies and their impact",
-  "Draft an investor update on renewable energy trends this quarter",
-  "Write a report on current cybersecurity threats in cloud computing",
-  "Analyze the latest developments in quantum computing for a tech newsletter",
-  "Create a summary of emerging medical breakthroughs in cancer treatment",
-  "Write about the impact of current interest rates on the housing market",
-  "Draft an article about breakthroughs in battery technology this year",
-  "Analyze current supply chain disruptions in semiconductor manufacturing",
-  "Write about how recent AI regulations affect business innovation",
+  "Recent updates to intellectual property law in Africa.",
+  "Compare business registration processes: Kenya vs. Nigeria.",
+  "Data privacy regulations for online businesses in Uganda.",
+  "Guidance on cross-border service agreements in East Africa.",
+  "Standard clauses for a SaaS (Software as a Service) agreement.",
+  "Legal requirements for foreign investment in Ghana.",
+  "Employee share option schemes for startups in South Africa.",
+  "Dispute resolution mechanisms for SMEs in Africa.",
+  "Key considerations for online content licensing.",
+  "Understanding tax obligations for digital services in Africa."
 ];
 
 const QUICK_START_PROMPTS = [
-  "Write a bedtime story about a brave little robot",
-  "Create a function to calculate Fibonacci numbers in TypeScript",
-  "Draft a resignation letter for a position I've had for 2 years",
-  "Build a simple weather dashboard using React and Tailwind",
-  "Write a poem about artificial intelligence",
-  "Create a basic Express.js REST API with two endpoints",
-  "Draft a congratulatory speech for my sister's graduation",
-  "Build a command-line calculator in Python",
-  "Write instructions for making perfect scrambled eggs",
-  "Create a simple snake game using HTML canvas",
-  "Write me a TODO app in React",
-  "Explain why the sky is blue in a short essay",
-  "Help me draft an email to my professor Craig",
-  "Write a web scraping program in Python",
+  "Draft a Non-Disclosure Agreement for a consultant.",
+  "What are the requirements for company registration in Kenya?",
+  "Generate a basic employment contract template for Nigeria.",
+  "Outline key terms for a website's Terms of Service.",
+  "Help me understand the process of trademark registration in South Africa.",
+  "Draft a simple loan agreement for a startup.",
+  "What are common legal pitfalls for new e-commerce businesses in Ghana?",
+  "Find a template for a Founder's Agreement.",
+  "Explain the difference between a shareholder and a director.",
+  "Draft a cease and desist letter for copyright infringement."
 ];
 
 function getRandomPrompts(prompts: string[], count: number = 4): string[] {
@@ -99,18 +95,18 @@ const QuickStartButtons = (props: QuickStartButtonsProps) => {
 
   return (
     <div className="flex flex-col gap-8 items-center justify-center w-full">
-      <div className="flex flex-col gap-6">
-        <p className="text-gray-600 text-sm">Start with a blank canvas</p>
+      <div className="flex flex-col gap-6 items-center"> {/* Added items-center for the button */}
+        <p className="text-gray-600 text-sm">Start a new legal document or query</p>
         <div className="flex flex-row gap-1 items-center justify-center w-full">
           <Button
             variant="outline"
             className="text-gray-500 hover:text-gray-700 transition-colors ease-in rounded-2xl flex items-center justify-center gap-2 w-[250px] h-[64px]"
             onClick={() => props.handleQuickStart("text")}
           >
-            New Markdown
+            New Document
             <NotebookPen />
           </Button>
-          <ProgrammingLanguagesDropdown handleSubmit={handleLanguageSubmit} />
+          {/* <ProgrammingLanguagesDropdown handleSubmit={handleLanguageSubmit} /> */}
         </div>
       </div>
       <div className="flex flex-col gap-6 mt-2 w-full">
@@ -139,11 +135,10 @@ export const ThreadWelcome: FC<ThreadWelcomeProps> = (
       <div className="flex items-center justify-center mt-16 w-full">
         <div className="text-center max-w-3xl w-full">
           <Avatar className="mx-auto">
-            <AvatarImage src="/lc_logo.jpg" alt="LangChain Logo" />
-            <AvatarFallback>LC</AvatarFallback>
+            <span className="font-bold text-xl">LegalEase Africa</span>
           </Avatar>
           <TighterText className="mt-4 text-lg font-medium">
-            What would you like to write today?
+            How can we help with your legal needs today?
           </TighterText>
           <div className="mt-8 w-full">
             <QuickStartButtons

apps/web/tailwind.config.ts

@@ -76,19 +76,19 @@ const config: Config = {
   				foreground: 'hsl(var(--popover-foreground))'
   			},
   			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
+				DEFAULT: '#0D1F2D',
   				foreground: 'hsl(var(--primary-foreground))'
   			},
   			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
+				DEFAULT: '#2A9D8F',
   				foreground: 'hsl(var(--secondary-foreground))'
   			},
   			muted: {
   				DEFAULT: 'hsl(var(--muted))',
   				foreground: 'hsl(var(--muted-foreground))'
   			},
   			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
+				DEFAULT: '#E9C46A',
   				foreground: 'hsl(var(--accent-foreground))'
   			},
   			destructive: {
@@ -118,19 +118,7 @@ const config: Config = {
   				'`"Courier New"`',
   				'`monospace`'
   			],
-  			sans: [
-  				'Inter',
-  				'-apple-system',
-  				'BlinkMacSystemFont',
-  				'Segoe UI',
-  				'Roboto',
-  				'Helvetica',
-  				'Arial',
-  				'sans-serif',
-  				'Apple Color Emoji',
-  				'Segoe UI Emoji',
-  				'Segoe UI Symbol'
-  			]
+			sans: ['Poppins', 'Inter', 'sans-serif']
   		},
   		letterSpacing: {
   			tighter: '-0.04em'