From 7abc9fc1c97ba49cfca50d491698d1e440f21287 Mon Sep 17 00:00:00 2001
From: Chinedu Okeke <chiscookeke11@gmail.com>
Date: Fri, 21 Feb 2025 05:40:28 +0100
Subject: [PATCH 1/3] ADD: new-idea-screen

---
 CryptoHackAI-web/public/Image.svg             |   3 +
 .../src/app/components/ImageUpload.tsx        |  72 ++++++++++
 CryptoHackAI-web/src/app/globals.css          |   7 +
 CryptoHackAI-web/src/app/new-idea/page.tsx    | 127 ++++++++++++++++++
 4 files changed, 209 insertions(+)
 create mode 100644 CryptoHackAI-web/public/Image.svg
 create mode 100644 CryptoHackAI-web/src/app/components/ImageUpload.tsx
 create mode 100644 CryptoHackAI-web/src/app/new-idea/page.tsx

diff --git a/CryptoHackAI-web/public/Image.svg b/CryptoHackAI-web/public/Image.svg
new file mode 100644
index 0000000..394ad3f
--- /dev/null
+++ b/CryptoHackAI-web/public/Image.svg
@@ -0,0 +1,3 @@
+<svg width="108" height="87" viewBox="0 0 108 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 76.125H85.5C90.4706 76.125 94.5 72.8791 94.5 68.875V18.125C94.5 14.1209 90.4706 10.875 85.5 10.875H22.5C17.5294 10.875 13.5 14.1209 13.5 18.125V68.875C13.5 72.8791 17.5294 76.125 22.5 76.125ZM22.5 76.125L72 36.25L94.5 54.375M45 30.8125C45 33.8155 41.9779 36.25 38.25 36.25C34.5221 36.25 31.5 33.8155 31.5 30.8125C31.5 27.8095 34.5221 25.375 38.25 25.375C41.9779 25.375 45 27.8095 45 30.8125Z" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/CryptoHackAI-web/src/app/components/ImageUpload.tsx b/CryptoHackAI-web/src/app/components/ImageUpload.tsx
new file mode 100644
index 0000000..f2bb297
--- /dev/null
+++ b/CryptoHackAI-web/src/app/components/ImageUpload.tsx
@@ -0,0 +1,72 @@
+"use client"
+import Image from 'next/image';
+import React, { useState, ChangeEvent } from 'react';
+
+interface ImageUploadProps {
+  onImageChange: (file: File | null) => void;
+}
+
+const ImageUpload: React.FC<ImageUploadProps> = ({ onImageChange }) => {
+  const [image, setImage] = useState<string | null>(null);
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImage(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+      onImageChange(file);
+    } else {
+      setImage(null);
+      onImageChange(null);
+    }
+  };
+
+  return (
+    <div style={styles.uploadContainer}>
+      <Image src="/Image.svg" alt='image-upload' height={100} width={100} />
+      <label htmlFor="image-upload" style={styles.uploadLabel}>
+        AI Generated Image
+      </label>
+      <input
+        id="image-upload"
+        type="file"
+        accept="image/*"
+        onChange={handleImageChange}
+        style={styles.uploadInput}
+      />
+      {image && <Image src={image || "/placeholder.svg"} alt="Preview" style={styles.imagePreview} />}
+    </div>
+  );
+};
+
+const styles: { [key: string]: React.CSSProperties } = {
+  uploadContainer: {
+    width: '120px',
+    padding: '20px',
+    textAlign: 'start',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  uploadLabel: {
+    fontSize: '12px',
+    color: '#333',
+    cursor: 'pointer',
+  },
+  uploadInput: {
+    display: 'none',
+  },
+  imagePreview: {
+    width: '100px',
+    marginTop: '10px',
+    height: '100px',
+    objectPosition: 'center',
+    objectFit: 'cover'
+  },
+};
+
+export default ImageUpload;
diff --git a/CryptoHackAI-web/src/app/globals.css b/CryptoHackAI-web/src/app/globals.css
index 6b717ad..7f99c8c 100644
--- a/CryptoHackAI-web/src/app/globals.css
+++ b/CryptoHackAI-web/src/app/globals.css
@@ -19,3 +19,10 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  scrollbar-width: none; 
+  -ms-overflow-style: none; 
+}
diff --git a/CryptoHackAI-web/src/app/new-idea/page.tsx b/CryptoHackAI-web/src/app/new-idea/page.tsx
new file mode 100644
index 0000000..6f9cb5e
--- /dev/null
+++ b/CryptoHackAI-web/src/app/new-idea/page.tsx
@@ -0,0 +1,127 @@
+"use client"
+import { type FormEvent, useState } from "react"
+import type React from "react"
+
+import ImageUpload from "../components/ImageUpload"
+
+const Page = () => {
+  const [formData, setFormData] = useState({
+    description: "",
+    impact: "",
+    uniqueness: "",
+    image: null as File | null,
+  })
+
+  const handleShare = (e: FormEvent) => {
+    e.preventDefault()
+    console.log(formData)
+    setFormData({
+      description: "",
+      impact: "",
+      uniqueness: "",
+      image: null,
+    })
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+    setFormData({
+      ...formData,
+      [name]: value,
+    })
+  }
+
+  const handleImageChange = (file: File | null) => {
+    setFormData({
+      ...formData,
+      image: file,
+    })
+  }
+
+  const deleteData = () => {
+    setFormData({
+      description: "",
+      impact: "",
+      uniqueness: "",
+      image: null,
+    })
+  }
+
+  return (
+    <form
+      onSubmit={handleShare}
+      className="w-full min-h-screen flex flex-col items-center justify-start gap-8 py-6 px-5 bg-[#B4AB9A]"
+    >
+      <div className="w-full max-w-[1057px] min-h-[285px] bg-[#F5F5F5] rounded-[50px] py-5 pr-[4%] pl-[10%] flex-col md:flex-row flex items-center justify-start md:justify-start gap-4 md:gap-8">
+        <h1 className="text-[#2C2C2C] font-bold text-5xl">Idea Name</h1>
+
+        <div>
+          <ImageUpload onImageChange={handleImageChange} />
+        </div>
+
+        <div className="flex flex-row md:flex-col items-center justify-center gap-7 md:ml-auto">
+          <button className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]">Share</button>
+          <button
+            type="button"
+            className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]"
+            onClick={deleteData}
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+
+      <div className="w-full max-w-[1057px] flex-col md:flex-row gap-4 flex items-center justify-between p-1">
+        <div className="bg-[#F5F5F5] w-full max-w-[638px] rounded-[50px] h-[594px] flex flex-col gap-5 items-start justify-center p-5">
+          <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">Description</h2>
+
+          <div className="bg-white h-[473px] p-4 border-[1px] w-full border-[#D9D9D9] rounded-[10px]">
+            <textarea
+              name="description"
+              id="description"
+              className="w-full h-full p-0 resize-none text-[#1E1E1E] font-normal text-base leading-[22.4px] border-none outline-none"
+              value={formData.description}
+              onChange={handleChange}
+              required
+            />
+          </div>
+        </div>
+
+        <div className="w-full flex flex-col items-center justify-between gap-8 max-w-[375px] h-full">
+          <div className="bg-[#F5F5F5] w-[372px] h-[252px] rounded-[50px] flex items-start justify-center flex-col gap-2 p-4">
+            <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">Impact</h2>
+
+            <div className="w-full max-w-[326px] h-[153px] bg-white p-4 border-[1px] border-[#D9D9D9] rounded-[10px]">
+              <textarea
+                name="impact"
+                id="impact"
+                className="w-full h-full p-0 resize-none text-[#1E1E1E] font-normal text-base leading-[22.4px] border-none outline-none"
+                value={formData.impact}
+                onChange={handleChange}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="bg-[#F5F5F5] w-[372px] h-[327px] rounded-[50px] flex items-start justify-center flex-col gap-2 p-4">
+            <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">Uniqueness</h2>
+
+            <div className="w-full max-w-[331px] h-[216px] bg-white p-4 border-[1px] border-[#D9D9D9] rounded-[10px]">
+              <textarea
+                name="uniqueness"
+                id="uniqueness"
+                className="w-full h-full p-0 resize-none text-[#1E1E1E] font-normal text-base leading-[22.4px] border-none outline-none"
+                value={formData.uniqueness}
+                onChange={handleChange}
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+export default Page
+

From f974aa00c2cba722746ba3b1d4c319d96a74b3c2 Mon Sep 17 00:00:00 2001
From: Chinedu Okeke <chiscookeke11@gmail.com>
Date: Fri, 21 Feb 2025 05:57:09 +0100
Subject: [PATCH 2/3] Fix: new idea screen

---
 .../src/app/components/ImageUpload.tsx        |  72 ----------
 CryptoHackAI-web/src/app/new-idea/page.tsx    | 124 +++++-------------
 2 files changed, 33 insertions(+), 163 deletions(-)
 delete mode 100644 CryptoHackAI-web/src/app/components/ImageUpload.tsx

diff --git a/CryptoHackAI-web/src/app/components/ImageUpload.tsx b/CryptoHackAI-web/src/app/components/ImageUpload.tsx
deleted file mode 100644
index f2bb297..0000000
--- a/CryptoHackAI-web/src/app/components/ImageUpload.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client"
-import Image from 'next/image';
-import React, { useState, ChangeEvent } from 'react';
-
-interface ImageUploadProps {
-  onImageChange: (file: File | null) => void;
-}
-
-const ImageUpload: React.FC<ImageUploadProps> = ({ onImageChange }) => {
-  const [image, setImage] = useState<string | null>(null);
-
-  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setImage(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-      onImageChange(file);
-    } else {
-      setImage(null);
-      onImageChange(null);
-    }
-  };
-
-  return (
-    <div style={styles.uploadContainer}>
-      <Image src="/Image.svg" alt='image-upload' height={100} width={100} />
-      <label htmlFor="image-upload" style={styles.uploadLabel}>
-        AI Generated Image
-      </label>
-      <input
-        id="image-upload"
-        type="file"
-        accept="image/*"
-        onChange={handleImageChange}
-        style={styles.uploadInput}
-      />
-      {image && <Image src={image || "/placeholder.svg"} alt="Preview" style={styles.imagePreview} />}
-    </div>
-  );
-};
-
-const styles: { [key: string]: React.CSSProperties } = {
-  uploadContainer: {
-    width: '120px',
-    padding: '20px',
-    textAlign: 'start',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  uploadLabel: {
-    fontSize: '12px',
-    color: '#333',
-    cursor: 'pointer',
-  },
-  uploadInput: {
-    display: 'none',
-  },
-  imagePreview: {
-    width: '100px',
-    marginTop: '10px',
-    height: '100px',
-    objectPosition: 'center',
-    objectFit: 'cover'
-  },
-};
-
-export default ImageUpload;
diff --git a/CryptoHackAI-web/src/app/new-idea/page.tsx b/CryptoHackAI-web/src/app/new-idea/page.tsx
index 6f9cb5e..8ecedf8 100644
--- a/CryptoHackAI-web/src/app/new-idea/page.tsx
+++ b/CryptoHackAI-web/src/app/new-idea/page.tsx
@@ -1,73 +1,31 @@
 "use client"
-import { type FormEvent, useState } from "react"
-import type React from "react"
 
-import ImageUpload from "../components/ImageUpload"
+import Image from "next/image";
 
-const Page = () => {
-  const [formData, setFormData] = useState({
-    description: "",
-    impact: "",
-    uniqueness: "",
-    image: null as File | null,
-  })
-
-  const handleShare = (e: FormEvent) => {
-    e.preventDefault()
-    console.log(formData)
-    setFormData({
-      description: "",
-      impact: "",
-      uniqueness: "",
-      image: null,
-    })
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const { name, value } = e.target
-    setFormData({
-      ...formData,
-      [name]: value,
-    })
-  }
+const img = "/image.svg"
 
-  const handleImageChange = (file: File | null) => {
-    setFormData({
-      ...formData,
-      image: file,
-    })
-  }
-
-  const deleteData = () => {
-    setFormData({
-      description: "",
-      impact: "",
-      uniqueness: "",
-      image: null,
-    })
-  }
+const Page = () => {
+  const newIdea = {
+    name: "Idea Name",
+    image: "",
+    description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+    impact: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the  ���1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+    uniqueness: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+  };
 
   return (
-    <form
-      onSubmit={handleShare}
-      className="w-full min-h-screen flex flex-col items-center justify-start gap-8 py-6 px-5 bg-[#B4AB9A]"
-    >
-      <div className="w-full max-w-[1057px] min-h-[285px] bg-[#F5F5F5] rounded-[50px] py-5 pr-[4%] pl-[10%] flex-col md:flex-row flex items-center justify-start md:justify-start gap-4 md:gap-8">
-        <h1 className="text-[#2C2C2C] font-bold text-5xl">Idea Name</h1>
+    <div className="w-full min-h-screen flex flex-col items-center justify-start gap-8 p-5 bg-[#B4AB9A]">
+      <div className="w-full max-w-[1057px] min-h-[285px] bg-[#F5F5F5] rounded-[50px] py-5 pr-[4%] pl-[10%] flex-col md:flex-row flex items-center justify-start md:justify-start gap-4 md:gap-[10%] ">
+        <h1 className="text-[#2C2C2C] font-bold text-5xl">{newIdea.name}</h1>
 
-        <div>
-          <ImageUpload onImageChange={handleImageChange} />
+        <div className="flex flex-col items-start justify-center " >
+          <Image src={img} alt="image" height={100} width={100} className="object-contain" /> 
+          <p>AI Generated<br/> Image</p>
         </div>
 
         <div className="flex flex-row md:flex-col items-center justify-center gap-7 md:ml-auto">
           <button className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]">Share</button>
-          <button
-            type="button"
-            className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]"
-            onClick={deleteData}
-          >
-            Delete
-          </button>
+          <button className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]">Delete</button>
         </div>
       </div>
 
@@ -75,15 +33,10 @@ const Page = () => {
         <div className="bg-[#F5F5F5] w-full max-w-[638px] rounded-[50px] h-[594px] flex flex-col gap-5 items-start justify-center p-5">
           <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">Description</h2>
 
-          <div className="bg-white h-[473px] p-4 border-[1px] w-full border-[#D9D9D9] rounded-[10px]">
-            <textarea
-              name="description"
-              id="description"
-              className="w-full h-full p-0 resize-none text-[#1E1E1E] font-normal text-base leading-[22.4px] border-none outline-none"
-              value={formData.description}
-              onChange={handleChange}
-              required
-            />
+          <div className="bg-white h-[473px] p-4 border-[1px] border-[#D9D9D9] rounded-[10px] overflow-y-auto scrollbar-hide">
+            <p className="text-[#1E1E1E] font-normal text-base leading-[22.4px] whitespace-pre-line">
+              {newIdea.description}
+            </p>
           </div>
         </div>
 
@@ -91,37 +44,26 @@ const Page = () => {
           <div className="bg-[#F5F5F5] w-[372px] h-[252px] rounded-[50px] flex items-start justify-center flex-col gap-2 p-4">
             <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">Impact</h2>
 
-            <div className="w-full max-w-[326px] h-[153px] bg-white p-4 border-[1px] border-[#D9D9D9] rounded-[10px]">
-              <textarea
-                name="impact"
-                id="impact"
-                className="w-full h-full p-0 resize-none text-[#1E1E1E] font-normal text-base leading-[22.4px] border-none outline-none"
-                value={formData.impact}
-                onChange={handleChange}
-                required
-              />
+            <div className="w-full max-w-[326px] h-[153px] bg-white overflow-y-auto scrollbar-hide p-4 border-[1px] border-[#D9D9D9] rounded-[10px]">
+              <p className="text-[#1E1E1E] font-normal text-base leading-[22.4px] whitespace-pre-line">
+                {newIdea.impact}
+              </p>
             </div>
           </div>
 
           <div className="bg-[#F5F5F5] w-[372px] h-[327px] rounded-[50px] flex items-start justify-center flex-col gap-2 p-4">
             <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">Uniqueness</h2>
 
-            <div className="w-full max-w-[331px] h-[216px] bg-white p-4 border-[1px] border-[#D9D9D9] rounded-[10px]">
-              <textarea
-                name="uniqueness"
-                id="uniqueness"
-                className="w-full h-full p-0 resize-none text-[#1E1E1E] font-normal text-base leading-[22.4px] border-none outline-none"
-                value={formData.uniqueness}
-                onChange={handleChange}
-                required
-              />
+            <div className="w-full max-w-[331px] h-[216px] bg-white overflow-y-auto scrollbar-hide p-4 border-[1px] border-[#D9D9D9] rounded-[10px]">
+              <p className="text-[#1E1E1E] font-normal text-base leading-[22.4px] whitespace-pre-line">
+                {newIdea.uniqueness}
+              </p>
             </div>
           </div>
         </div>
       </div>
-    </form>
-  )
-}
-
-export default Page
+    </div>
+  );
+};
 
+export default Page;
\ No newline at end of file

From 0392656d999c363b334d55cfa527c6b46059706b Mon Sep 17 00:00:00 2001
From: Chinedu Okeke <chiscookeke11@gmail.com>
Date: Mon, 24 Feb 2025 04:07:04 +0100
Subject: [PATCH 3/3]  Created a constant.ts file Created a reusable card Add
 placeholder onclick  function for the buttons

---
 CryptoHackAI-web/src/app/components/Card.tsx | 33 +++++++
 CryptoHackAI-web/src/app/new-idea/page.tsx   | 94 ++++++++++----------
 CryptoHackAI-web/src/app/utils/constants.ts  | 12 +++
 3 files changed, 94 insertions(+), 45 deletions(-)
 create mode 100644 CryptoHackAI-web/src/app/components/Card.tsx
 create mode 100644 CryptoHackAI-web/src/app/utils/constants.ts

diff --git a/CryptoHackAI-web/src/app/components/Card.tsx b/CryptoHackAI-web/src/app/components/Card.tsx
new file mode 100644
index 0000000..cd2452b
--- /dev/null
+++ b/CryptoHackAI-web/src/app/components/Card.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface CardProps {
+  content: string;
+  title: string;
+  className: string;
+  contentStyle: string;
+}
+
+const Card: React.FC<CardProps> = ({
+  content,
+  title,
+  className,
+  contentStyle,
+}) => {
+  return (
+    <div
+      className={`bg-[#F5F5F5] w-full  rounded-[50px] flex flex-col  items-start justify-center p-5 ${className} `}
+    >
+      <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">{title} </h2>
+
+      <div
+        className={`bg-white  p-4 border-[1px] border-[#D9D9D9] rounded-[10px] overflow-y-auto scrollbar-hide ${contentStyle} `}
+      >
+        <p className="text-[#1E1E1E] font-normal text-base leading-[22.4px] whitespace-pre-line">
+          {content}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/CryptoHackAI-web/src/app/new-idea/page.tsx b/CryptoHackAI-web/src/app/new-idea/page.tsx
index 8ecedf8..4c8ce54 100644
--- a/CryptoHackAI-web/src/app/new-idea/page.tsx
+++ b/CryptoHackAI-web/src/app/new-idea/page.tsx
@@ -1,69 +1,73 @@
-"use client"
+'use client';
 
-import Image from "next/image";
+import Image from 'next/image';
+import NEW_IDEA from '../utils/constants';
+import Card from '../components/Card';
 
-const img = "/image.svg"
+const img = '/image.svg';
 
 const Page = () => {
-  const newIdea = {
-    name: "Idea Name",
-    image: "",
-    description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
-    impact: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the  ���1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
-    uniqueness: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
-  };
-
   return (
     <div className="w-full min-h-screen flex flex-col items-center justify-start gap-8 p-5 bg-[#B4AB9A]">
       <div className="w-full max-w-[1057px] min-h-[285px] bg-[#F5F5F5] rounded-[50px] py-5 pr-[4%] pl-[10%] flex-col md:flex-row flex items-center justify-start md:justify-start gap-4 md:gap-[10%] ">
-        <h1 className="text-[#2C2C2C] font-bold text-5xl">{newIdea.name}</h1>
+        <h1 className="text-[#2C2C2C] font-bold text-5xl">{NEW_IDEA.name}</h1>
 
-        <div className="flex flex-col items-start justify-center " >
-          <Image src={img} alt="image" height={100} width={100} className="object-contain" /> 
-          <p>AI Generated<br/> Image</p>
+        <div className="flex flex-col items-start justify-center ">
+          <Image
+            src={img}
+            alt="image"
+            height={100}
+            width={100}
+            className="object-contain"
+          />
+          <p>
+            AI Generated
+            <br /> Image
+          </p>
         </div>
 
         <div className="flex flex-row md:flex-col items-center justify-center gap-7 md:ml-auto">
-          <button className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]">Share</button>
-          <button className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]">Delete</button>
+          <button
+            onClick={() => console.log('Share Clicked')}
+            className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]"
+          >
+            Share
+          </button>
+          <button
+            onClick={() => console.log('Delete Clicked')}
+            className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]"
+          >
+            Delete
+          </button>
         </div>
       </div>
 
       <div className="w-full max-w-[1057px] flex-col md:flex-row gap-4 flex items-center justify-between p-1">
-        <div className="bg-[#F5F5F5] w-full max-w-[638px] rounded-[50px] h-[594px] flex flex-col gap-5 items-start justify-center p-5">
-          <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">Description</h2>
-
-          <div className="bg-white h-[473px] p-4 border-[1px] border-[#D9D9D9] rounded-[10px] overflow-y-auto scrollbar-hide">
-            <p className="text-[#1E1E1E] font-normal text-base leading-[22.4px] whitespace-pre-line">
-              {newIdea.description}
-            </p>
-          </div>
-        </div>
+        <Card
+          title="Description"
+          content={NEW_IDEA.description}
+          className="max-w-[638px]  h-[594px] gap-5 "
+          contentStyle="h-[473px]"
+        />
 
         <div className="w-full flex flex-col items-center justify-between gap-8 max-w-[375px] h-full">
-          <div className="bg-[#F5F5F5] w-[372px] h-[252px] rounded-[50px] flex items-start justify-center flex-col gap-2 p-4">
-            <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">Impact</h2>
-
-            <div className="w-full max-w-[326px] h-[153px] bg-white overflow-y-auto scrollbar-hide p-4 border-[1px] border-[#D9D9D9] rounded-[10px]">
-              <p className="text-[#1E1E1E] font-normal text-base leading-[22.4px] whitespace-pre-line">
-                {newIdea.impact}
-              </p>
-            </div>
-          </div>
-
-          <div className="bg-[#F5F5F5] w-[372px] h-[327px] rounded-[50px] flex items-start justify-center flex-col gap-2 p-4">
-            <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">Uniqueness</h2>
+          <Card
+            title="Impact"
+            content={NEW_IDEA.impact}
+            className="max-w-[372px]  h-[252px] gap-2 "
+            contentStyle=" h-[153px] "
+          />
 
-            <div className="w-full max-w-[331px] h-[216px] bg-white overflow-y-auto scrollbar-hide p-4 border-[1px] border-[#D9D9D9] rounded-[10px]">
-              <p className="text-[#1E1E1E] font-normal text-base leading-[22.4px] whitespace-pre-line">
-                {newIdea.uniqueness}
-              </p>
-            </div>
-          </div>
+          <Card
+            title="Uniqueness"
+            content={NEW_IDEA.uniqueness}
+            className="max-w-[372px]  h-[327px] gap-2 "
+            contentStyle=" h-[216px] "
+          />
         </div>
       </div>
     </div>
   );
 };
 
-export default Page;
\ No newline at end of file
+export default Page;
diff --git a/CryptoHackAI-web/src/app/utils/constants.ts b/CryptoHackAI-web/src/app/utils/constants.ts
new file mode 100644
index 0000000..ec999ae
--- /dev/null
+++ b/CryptoHackAI-web/src/app/utils/constants.ts
@@ -0,0 +1,12 @@
+
+
+
+const NEW_IDEA = {
+    name: "Idea Name",
+    image: "",
+    description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+    impact: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the  ���1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+    uniqueness: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+  }
+
+  export default NEW_IDEA;
\ No newline at end of file