Merge pull request #305 from hermannsalan/homepage

Homepage

Author: hermannsalan

backend/tenantfirstaid/feedback.py

@@ -34,7 +34,19 @@ def send_feedback() -> Tuple[str, int]:
         ]
 
     if not file:
-        return "No file provided", 404
+        name = request.form.get("name")
+        subject = request.form.get("subject")
+        email_params = {
+            "subject": subject or "Homepage Feedback",
+            "from_email": os.getenv("SENDER_EMAIL"),
+            "to": [os.getenv("RECIPIENT_EMAIL")],
+            "body": f"From: {name}\n\n{feedback}",
+        }
+        try:
+            EmailMessage(**email_params).send()
+            return "Message sent", 200
+        except Exception as e:
+            return f"Send failed: {str(e)}", 500
 
     html_content: str = file.read().decode("utf-8")
     pdf_content: Optional[bytes] = convert_html_to_pdf(html_content)

frontend/package-lock.json

@@ -4,6 +4,7 @@ import Navbar from "./shared/components/Navbar/Navbar";
 import Chat from "./Chat";
 import LoadingPage from "./pages/LoadingPage";
 import PageLayout from "./layouts/PageLayout";
+import HomePage from "./pages/HomePage/HomePage";
 
 // Lazy-loading for less frequented pages
 const About = lazy(() => import("./About"));
@@ -17,12 +18,13 @@ export default function App() {
       <Navbar />
       <PageLayout>
         <Routes>
-          <Route path="/" element={<Chat />} />
+          <Route path="/" element={<HomePage />} />
           <Route
             path="/*"
             element={
               <Suspense fallback={<LoadingPage />}>
                 <Routes>
+                  <Route path="/chat" element={<Chat />} />
                   <Route path="/letter" element={<Letter />} />
                   <Route path="/letter/:org/:loc?" element={<Letter />} />
                   <Route path="/about" element={<About />} />

frontend/src/App.tsx

@@ -7,13 +7,16 @@ interface Props {
 
 export default function PageLayout({ children }: Props) {
   const { pathname } = useLocation();
-  const isChatPages = pathname === "/" || pathname.startsWith("/letter");
+  const isChatOrHomePages =
+    pathname === "/" ||
+    pathname.startsWith("/letter") ||
+    pathname.startsWith("/chat");
 
   return (
     <div
       className={clsx(
         "flex justify-center pt-(--navbar-height)",
-        isChatPages ? "h-dvh" : "items-center sm:pt-32 sm:pb-16",
+        isChatOrHomePages ? "h-dvh" : "items-center sm:pt-32 sm:pb-16",
       )}
       id="page-layout"
     >

frontend/src/assets/ChatExample.png

@@ -0,0 +1,14 @@
+const brainyFeatures = [
+  {
+    title: "Ask questions",
+    desc: "Chat with Brainy about your housing issues.",
+    id: "chat",
+  },
+  {
+    title: "Write letters",
+    desc: "Brainy can help draft letters to your landlord.",
+    id: "letter",
+  },
+];
+
+export default brainyFeatures;

frontend/src/assets/LetterExample.png

@@ -0,0 +1,44 @@
+//Headers for the comparison grid
+const headers = ["", "Tenant First Aid", "Traditional Legal Aid", "ChatGPT"];
+
+// 2. Extract table data into a clean structure
+const comparisonData = [
+  {
+    feature: "Always available",
+    tenantFirstAid: true,
+    traditional: false,
+    chatgpt: true,
+  },
+  {
+    feature: "Always free",
+    tenantFirstAid: true,
+    traditional: false,
+    chatgpt: false,
+  },
+  {
+    feature: "No eligibility requirements",
+    tenantFirstAid: true,
+    traditional: false,
+    chatgpt: true,
+  },
+  {
+    feature: "Provides legal advice",
+    tenantFirstAid: false,
+    traditional: true,
+    chatgpt: false,
+  },
+  {
+    feature: "Only references relevant laws",
+    tenantFirstAid: true,
+    traditional: true,
+    chatgpt: false,
+  },
+  {
+    feature: "Direct advocacy with court/landlords",
+    tenantFirstAid: false,
+    traditional: true,
+    chatgpt: false,
+  },
+];
+
+export { headers, comparisonData };

frontend/src/assets/LetterTemplate.png

@@ -0,0 +1,51 @@
+import React from "react";
+import CheckCircle from "../../../shared/components/CheckCircleIcon";
+import XCircle from "../../../shared/components/XCircleIcon";
+import { headers, comparisonData } from "./ComparisonData";
+
+export default function ComparisonGrid() {
+  const renderIcon = (hasFeature: boolean) =>
+    hasFeature ? <CheckCircle /> : <XCircle />;
+
+  return (
+    <div className="bg-[#E6D5B8]/10 backdrop-blur-lg border border-[#E6D5B8]/20 p-12 shadow-[0_15px_40px_rgba(0,0,0,0.2)] rounded-3xl overflow-hidden max-[950px]:overflow-x-auto max-[950px]:p-6 max-[950px]:pl-0">
+      <div className="grid grid-cols-4 gap-px bg-[#E6D5B8]/10 max-[950px]:min-w-[700px] [&>div:nth-child(4n+1)]:max-[950px]:sticky [&>div:nth-child(4n+1)]:max-[950px]:left-0 [&>div:nth-child(4n+1)]:max-[950px]:z-10 [&>div:nth-child(4n+1)]:max-[950px]:border-r [&>div:nth-child(4n+1)]:max-[950px]:border-[#E6D5B8]/20 [&>div:nth-child(4n+1)]:max-[950px]:bg-[#0E362D] [&>div:nth-child(1)]:max-[950px]:!bg-emerald-900">
+        {/* Render Headers */}
+        {headers.map((header) => (
+          <div
+            key={header == " " ? "empty-header" : header}
+            className="p-5 font-bold bg-emerald-900/80 text-[#F4F4F2] text-center"
+          >
+            {header}
+          </div>
+        ))}
+
+        {/* Render Data Rows */}
+        {comparisonData.map((row) => (
+          // React.Fragment is crucial here so we don't break CSS Grid and nth-child selectors
+          <React.Fragment key={row.feature}>
+            {/* Feature Name (Sticky Column) */}
+            <div className="p-5 bg-[#E6D5B8]/5 text-[#F4F4F2] text-center flex items-center justify-center font-medium">
+              {row.feature}
+            </div>
+
+            {/* Tenant First Aid Column */}
+            <div className="p-5 bg-[#E6D5B8]/5 text-center font-bold flex items-center justify-center">
+              {renderIcon(row.tenantFirstAid)}
+            </div>
+
+            {/* Traditional Legal Aid Column */}
+            <div className="p-5 bg-[#E6D5B8]/5 text-[#F4F4F2] text-center flex items-center justify-center font-medium">
+              {renderIcon(row.traditional)}
+            </div>
+
+            {/* ChatGPT Column */}
+            <div className="p-5 bg-[#E6D5B8]/5 text-[#F4F4F2] text-center flex items-center justify-center font-medium">
+              {renderIcon(row.chatgpt)}
+            </div>
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}