Merge pull request #5 from WebmasterCamp/dev

Dev

package.json

@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -19,17 +21,19 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.52.1",
+    "recharts": "^2.12.7",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.5"
+    "typescript": "^5"
   }
 }

src/app/globals.css

@@ -10,7 +10,7 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 141.9 69.2% 58%;
     --primary-foreground: 210 40% 98%;
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
@@ -38,7 +38,7 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
+    --primary: 141.9 69.2% 58%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;

src/app/layout.tsx

@@ -31,7 +31,7 @@ export default function RootLayout({
           <main>
             {children}
           </main>
-          <Footer />
+        <Footer/>
         </ThemeProvider>
       </body>
     </html>

src/app/page.tsx

@@ -3,41 +3,74 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion"
+} from "@/components/ui/accordion";
 
 export default function Page() {
   return (
-    <div className="m-12 flex flex-col">
-      <div className="flex flex-row">
-        <div className="flex flex-col">
-          <img src="cabibara.webp" alt="" />
+    <div className="relative min-h-screen overflow-hidden">
+      <div className="absolute inset-0 h-full w-full bg-white bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] z-0"></div>
+
+      <div className="relative m-12 flex flex-col items-center z-10">
+        <div className="flex flex-row space-x-12 items-center w-60 h-60">
+          <img src="img.png" alt="" />
+          <div className="">
+            <h1 className="font-extrabol text-4xl">CashyBuddy</h1>
+            <p className="mt-2">“คู่หูรู้ใจไฟแนนซ์วัยทีน”</p>
+          </div>
         </div>
-        <div>
-          <img src="cabibara.webp" alt="" />
+        <div className="mt-10 bg-slate-50 p-4 m-2 text-xl">
+          <h1>เกี่ยวกับเรา</h1>
+        </div>
+        <div className="flex flex-row mt-4 space-x-6">
+          <div className="items-center">
+            <h1 className="font-extrabol text-4xl">CashyBuddy</h1>
+            <p className="mt-2">“คู่หูรู้ใจไฟแนนซ์วัยทีน”</p>
+          </div>
+          <div>
+            <p>
+              CashyBuddy
+              ช่วยให้เพื่อนนักเรียนสามารถบริหารจัดการเงินของตัวเองได้ผ่านมาสคอตผู้ช่วย
+              “Cashy” ถ้าเพื่อน ๆ กำลังเจอปัญหาเงินไม่พอใช้
+              วางแผนทางการเงินไม่เป็น และไม่มีพื้นฐานด้านการเงินเลย Cashy
+              สามารถช่วยเพื่อน ๆ ได้นะ{" "}
+            </p>
+          </div>
+        </div>
+        <div className="bg-slate-50 p-4">
+          <h1>FAQ</h1>
+        </div>
+        <div className="flex flex-col space-y-8 mt-4 ">
+          <div className="bg-green-300">
+            <Accordion type="single" collapsible className="p-2">
+              <AccordionItem value="item-1">
+                <AccordionTrigger>CashyBuddy คืออะไร ?</AccordionTrigger>
+                <AccordionContent>
+                CashyBuddy ไม่เรียกเก็บค่าบริการใด ๆ เพื่อน ๆ สามารถใช้ฟีเจอร์ทุกอย่างในเว็บไซต์ได้ตามใจต้องการ ~
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+          <div className="bg-green-300">
+            <Accordion type="single" collapsible className="p-2">
+              <AccordionItem value="item-2">
+                <AccordionTrigger>CashyBuddy ใช้งานอย่างไร ?</AccordionTrigger>
+                <AccordionContent>
+                เหมาะกับเพื่อน ๆ วัยมัธยมศึกษาที่มีปัญหาการบริหารจัดการเงินรายรับที่ได้จากผู้ปกครองที่ได้รับมาในแต่ละเดือน เช่น วางแผนสัดส่วนค่าใช้จ่ายไม่เป็น ไม่สามารถใช้จ่ายเงินตามที่ได้รับในแต่ละเดือนได้ 
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+          <div className="bg-green-300">
+            <Accordion type="single" collapsible className="p-2">
+              <AccordionItem value="item-3">
+                <AccordionTrigger>มีค่าใช้จ่ายในการบริการมั้ย ?</AccordionTrigger>
+                <AccordionContent>
+                เหมาะกับเพื่อน ๆ วัยมัธยมศึกษาที่มีปัญหาการบริหารจัดการเงินรายรับที่ได้จากผู้ปกครองที่ได้รับมาในแต่ละเดือน เช่น วางแผนสัดส่วนค่าใช้จ่ายไม่เป็น ไม่สามารถใช้จ่ายเงินตามที่ได้รับในแต่ละเดือนได้ 
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
         </div>
-      </div>
-      <div className="flex flex-row">
-        <h1>About us</h1>
-        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo reprehenderit alias natus, enim atque corporis ratione esse expedita ea facilis! Dolorem eos animi sapiente necessitatibus cum! Unde animi vitae veniam!</p>
-      </div>
-      <div className="flex flex-row">
-        <h1>F&Q</h1>
-        <Accordion type="single" collapsible>
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It adheres to the WAI-ARIA design pattern.
-            </AccordionContent>
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It adheres to the WAI-ARIA design pattern.
-            </AccordionContent>
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It adheres to the WAI-ARIA design pattern.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
       </div>
     </div>
   );