From 09fa264f48cdacd97e5e93f7a277bd2e44cbd5cf Mon Sep 17 00:00:00 2001
From: Hansamu <tintin30052002@gmail.com>
Date: Tue, 28 Jan 2025 11:15:53 -0500
Subject: [PATCH 1/5] added some reusable components, created home page

---
 webapp/src/components/ui/button.tsx | 27 ++++++++++++++++++
 webapp/src/components/ui/card.tsx   | 19 +++++++++++++
 webapp/src/pages/home.tsx           | 44 +++++++++++++++++++++++++++++
 3 files changed, 90 insertions(+)
 create mode 100644 webapp/src/components/ui/button.tsx
 create mode 100644 webapp/src/components/ui/card.tsx
 create mode 100644 webapp/src/pages/home.tsx

diff --git a/webapp/src/components/ui/button.tsx b/webapp/src/components/ui/button.tsx
new file mode 100644
index 0000000..ed6f884
--- /dev/null
+++ b/webapp/src/components/ui/button.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+
+interface ButtonProps {
+  children: string; // Only allow text
+  onClick?: () => void; // Optional
+  className?: string; // Optional, will override default style
+  route?: string; // Optional re-routing
+}
+
+export function Button({ children, onClick, className = "", route }: ButtonProps) {
+  const router = useRouter();
+
+  const handleClick = () => {
+    if (onClick) onClick(); // Execute custom logic, if provided
+    if (route) router.push(route); // Navigate to the route, if specified
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 ${className}`}
+    >
+      {children}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/webapp/src/components/ui/card.tsx b/webapp/src/components/ui/card.tsx
new file mode 100644
index 0000000..dc48132
--- /dev/null
+++ b/webapp/src/components/ui/card.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export function Card({ children, className = "" }) {
+  console.log("Card component rendered with className:", className);
+  return (
+    <div className={`bg-white rounded-lg shadow-md ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+export function CardContent({ children, className = "" }) {
+  console.log("CardContent component rendered with className:", className);
+  return (
+    <div className={`p-4 ${className}`}>
+      {children}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/webapp/src/pages/home.tsx b/webapp/src/pages/home.tsx
new file mode 100644
index 0000000..7c288b4
--- /dev/null
+++ b/webapp/src/pages/home.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-5xl">
+        {/* Left Section - What we do */}
+        <Card className="bg-gray-200">
+          <CardContent className="text-center">
+            <h2 className="text-2xl font-bold text-black mb-4">What we do</h2>
+            <p className="text-gray-700">
+              Donations for charities are inconsistent and many charities struggle with finances. 
+              To solve this problem, we are creating Stock Charity, a charity that uses donations 
+              to buy stocks that payout dividends and then uses those dividends to finance charities year-round.
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* Right Section - Donate Button and Stats */}
+        <div className="flex flex-col items-center space-y-8">
+          {/* Donate Button */}
+          <Button className="bg-blue-500 hover:bg-blue-600 text-2xl px-8 py-4">
+            DONATE
+          </Button>
+
+          {/* Stats Card */}
+          <Card className="bg-gray-200">
+            <CardContent className="text-center">
+              <p className="text-lg text-black">We have over</p>
+              <p className="text-3xl font-bold text-black">$xxx,xxx.xx</p>
+              <p className="text-lg text-black">in stocks</p>
+              <p className="text-lg text-black mt-4">which have paid out over</p>
+              <p className="text-3xl font-bold text-black">$xxx,xxx.xx</p>
+              <p className="text-lg text-black">in dividends to over</p>
+              <p className="text-3xl font-bold text-black">xxx charities</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

From 97858cedfc4b94fb418591852ba15d035f91d01c Mon Sep 17 00:00:00 2001
From: Hansamu <tintin30052002@gmail.com>
Date: Tue, 28 Jan 2025 18:34:11 -0500
Subject: [PATCH 2/5] updated type clarity for card.tsx

---
 webapp/src/components/ui/card.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/ui/card.tsx b/webapp/src/components/ui/card.tsx
index dc48132..42e0ede 100644
--- a/webapp/src/components/ui/card.tsx
+++ b/webapp/src/components/ui/card.tsx
@@ -1,6 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
-export function Card({ children, className = "" }) {
+interface CardProps {
+  children: ReactNode; // any valid React children
+  className?: string;
+}
+
+export function Card({ children, className = "" }: CardProps) {
   console.log("Card component rendered with className:", className);
   return (
     <div className={`bg-white rounded-lg shadow-md ${className}`}>
@@ -9,7 +14,7 @@ export function Card({ children, className = "" }) {
   );
 }
 
-export function CardContent({ children, className = "" }) {
+export function CardContent({ children, className = "" }: CardProps) {
   console.log("CardContent component rendered with className:", className);
   return (
     <div className={`p-4 ${className}`}>

From a8d8ba40cdb3e666d8d31e997a476f5fecc157e8 Mon Sep 17 00:00:00 2001
From: Hansamu <tintin30052002@gmail.com>
Date: Fri, 31 Jan 2025 23:58:38 -0500
Subject: [PATCH 3/5] removed console.log

---
 webapp/src/components/ui/card.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webapp/src/components/ui/card.tsx b/webapp/src/components/ui/card.tsx
index 42e0ede..7cf4ecf 100644
--- a/webapp/src/components/ui/card.tsx
+++ b/webapp/src/components/ui/card.tsx
@@ -6,7 +6,6 @@ interface CardProps {
 }
 
 export function Card({ children, className = "" }: CardProps) {
-  console.log("Card component rendered with className:", className);
   return (
     <div className={`bg-white rounded-lg shadow-md ${className}`}>
       {children}
@@ -15,7 +14,6 @@ export function Card({ children, className = "" }: CardProps) {
 }
 
 export function CardContent({ children, className = "" }: CardProps) {
-  console.log("CardContent component rendered with className:", className);
   return (
     <div className={`p-4 ${className}`}>
       {children}

From 2db82e5dcb3004ad9319b6048a49769a7d0d13a4 Mon Sep 17 00:00:00 2001
From: Hansamu <tintin30052002@gmail.com>
Date: Sat, 1 Feb 2025 02:33:02 -0500
Subject: [PATCH 4/5] centered text in what we do section

---
 webapp/src/pages/home.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/pages/home.tsx b/webapp/src/pages/home.tsx
index 7c288b4..580bd29 100644
--- a/webapp/src/pages/home.tsx
+++ b/webapp/src/pages/home.tsx
@@ -7,7 +7,7 @@ export default function HomePage() {
     <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-5xl">
         {/* Left Section - What we do */}
-        <Card className="bg-gray-200">
+        <Card className="bg-gray-200 flex items-center justify-center">
           <CardContent className="text-center">
             <h2 className="text-2xl font-bold text-black mb-4">What we do</h2>
             <p className="text-gray-700">

From 8278865b77674f7f514b9a00f6c73fca7536354f Mon Sep 17 00:00:00 2001
From: Hansamu <tintin30052002@gmail.com>
Date: Sat, 1 Feb 2025 02:41:03 -0500
Subject: [PATCH 5/5] donate button in home page now routes to /charity-signup

---
 webapp/src/pages/home.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webapp/src/pages/home.tsx b/webapp/src/pages/home.tsx
index 580bd29..3fc9f68 100644
--- a/webapp/src/pages/home.tsx
+++ b/webapp/src/pages/home.tsx
@@ -21,7 +21,9 @@ export default function HomePage() {
         {/* Right Section - Donate Button and Stats */}
         <div className="flex flex-col items-center space-y-8">
           {/* Donate Button */}
-          <Button className="bg-blue-500 hover:bg-blue-600 text-2xl px-8 py-4">
+          <Button 
+            className="bg-blue-500 hover:bg-blue-600 text-2xl px-8 py-4"
+            route="/charity-signup">
             DONATE
           </Button>