[feat] added guidelines pages

.gitignore

@@ -1 +1,2 @@
-target
+target
+.DS_Store

frontend/gostarkme-web/app/globals.css

@@ -8,4 +8,9 @@
   .text-balance {
     text-wrap: balance;
   }
-}
+
+  ol li {
+    list-style-type: decimal;
+    display: list-item;
+  }
+}

frontend/gostarkme-web/app/guidelines/charity/page.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable react/no-unescaped-entities */
+import { WelcomeBar } from "@/components/welcomepage/WelcomeBar";
+import { WelcomeItems } from "@/components/welcomepage/WelcomeItems";
+import Image from "next/image";
+
+export default function CharityGuidelines() {
+    return (
+        <main className="flex min-h-screen w-full flex-col items-center">
+            <WelcomeBar />
+
+            <section className="w-full">
+                <h1 className="text-2xl md:text-3xl font-bold border-b-[1px] border-gray-300 mx-4 md:mx-10 my-5 md:my-10 p-4 md:p-5">
+                    Charity and Helping Purpose Guidelines &#x1fac0;
+                </h1>
+
+                {/* {DO's} */}
+                <div className="ml-4 md:ml-20">
+                    <h2 className="text-xl md:text-2xl font-bold mb-2">Do's &#9989;</h2>
+                    <ol className="ml-5 list-disc">
+                        <li>Give your funding a meaningful title.</li>
+                        <li>Be as detailed as possible when describing the situation why you are asking for funds.</li>
+                        <li>Add a link to a drive / cloud storage where you can share photos and videos that evidence the reason why you need the funds.</li>
+                        <li>You can also add updates to the drive to demonstrate you are using the funds for the cause, this will boost the confidence.</li>
+                    </ol>
+                </div>
+
+                {/* {DONT's} */}
+                <div className="ml-4 md:ml-20 mt-8">
+                    <h2 className="text-xl md:text-2xl font-bold mb-2">Dont's &#10060;</h2>
+                    <p className="text-sm md:text-base mb-4">
+                        The following points are things we are not going to accept and in case of detecting one of this your funding will be taken down.
+                    </p>
+                    <ol className="ml-5 list-disc">
+                        <li>Illegal or Non-Ethical Activities: Any project or cause that involves illegal activities, such as the sale of drugs, human trafficking, or any other activity that violates the law.</li>
+                        <li>Projects that Promote Hate or Discrimination: Any cause that promotes hatred, violence, discrimination, or racism would not be accepted.</li>
+                        <li>Political or Religious Campaigns: Many platforms do not allow fundraising for political campaigns, religious movements or proselytism.</li>
+                        <li>High-Risk Businesses: Some considered high-risk, such as gambling, payday loans, or pyramid schemes, may be prohibited.</li>
+                        <li>Explicit or Adult Content: Projects involving pornographic or explicit content are generally not accepted.</li>
+                        <li>Unauthorized medicines or treatments: Fundraising for unauthorized medical treatments or “miracle” remedies could be rejected.</li>
+                        <li>Projects that Violate Intellectual Property: Any project that infringes copyright, trademarks, or patents would not be allowed.</li>
+                    </ol>
+                </div>
+            </section>
+        </main>
+    );
+}

frontend/gostarkme-web/app/guidelines/projects/page.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/no-unescaped-entities */
+import { WelcomeBar } from "@/components/welcomepage/WelcomeBar";
+
+export default function ProjectsGuidelines() {
+    return (
+        <main className="flex min-h-screen w-full flex-col items-center">
+            <WelcomeBar />
+
+            <section className="w-full">
+                <h1 className="text-2xl md:text-3xl font-bold border-b-[1px] border-gray-300 mx-4 md:mx-10 my-5 md:my-10 p-4 md:p-5">
+                    Early Stage Projects Guidelines &#129504;
+                </h1>
+
+                {/* {DO's} */}
+                <div className="ml-4 md:ml-20">
+                    <h2 className="text-xl md:text-2xl font-bold mb-2">Do's &#9989;</h2>
+                    <ol className="ml-5 list-disc">
+                        <li>Give a short but meaningful description of the project.</li>
+                        <li>Include a public git repo link for people to see your work.</li>
+                        <li>Explain why you need the funds and why your project should be funded.</li>
+                        <li>Give a breakdown on how you plan to spend the funds you are going to receive.</li>
+                        <li>Add a public contact handle for people to ask questions about your project, this will boost the confidence.</li>
+                    </ol>
+                </div>
+
+                {/* {DONT's} */}
+                <div className="ml-4 md:ml-20 mt-8">
+                    <h2 className="text-xl md:text-2xl font-bold mb-2">Dont's &#10060;</h2>
+                    <p className="text-sm md:text-base mb-4">
+                        The following points are things we are not going to accept and in case of detecting one of this your project will be taken down.
+                    </p>
+                    <ol className="ml-5 list-disc">
+                        <li>No Hateful Content: Hate speech and discrimination are things that we strongly oppose.</li>
+                        <li>Tricking Users: Any content that can cause harm to users or have unforeseen repercussions is prohibited.</li>
+                        <li>Falsification: It is expressly forbidden to make any attempt to falsify contributions, including through Sybil attacks or other forms of manipulation.</li>
+                        <li>Fraud & Impersonation: In order to preserve openness and confidence, projects must authentically depict their affiliation and goals.</li>
+                        <li>Advertising Restrictions: It is not permitted to use funds for sales or direct promotional efforts.</li>
+                    </ol>
+                </div>
+            </section>
+        </main>
+    );
+}

frontend/gostarkme-web/app/page.tsx

@@ -1,7 +1,7 @@
+import { LinkButton } from "@/components/ui/LinkButton";
 import { WelcomeBar } from "@/components/welcomepage/WelcomeBar";
 import { WelcomeItems } from "@/components/welcomepage/WelcomeItems";
 import Image from "next/image";
-
 export default function Home() {
   return (
     <main className="flex min-h-screen w-full flex-col items-center">
@@ -36,12 +36,10 @@ export default function Home() {
           <div className="text-gray-600">
             Projects with a clear idea, direction and good work progress can apply to start receiving funds.
           </div>
-          <button
-            type="button"
-            className="self-center bg-darkblue text-white text-sm mt-4 px-4 py-2 rounded-md hover:bg-starkorange active:bg-darkblue  ease-in-out duration-500 active:duration-0 shadow-gray-400"
-          >
-            Learn more
-          </button>
+          <LinkButton
+            label="Learn more"
+            href="/guidelines/projects"
+          />
         </div>
 
         {/* <!-- Card 2 --> */}
@@ -55,12 +53,10 @@ export default function Home() {
           <p className="text-gray-600">
             Charity organizations and people in need with economic problems can apply to receive funds.
           </p>
-          <button
-            type="button"
-            className="self-center bg-darkblue text-white text-sm mt-4 px-4 py-2 rounded-md hover:bg-starkorange active:bg-darkblue  ease-in-out duration-500 active:duration-0 shadow-gray-400"
-          >
-            Learn more
-          </button>
+          <LinkButton
+            label="Learn more"
+            href="/guidelines/charity"
+          />
         </div>
       </section>
     </main>

frontend/gostarkme-web/components/ui/LinkButton.tsx

@@ -12,7 +12,7 @@ export const LinkButton = ({ label, href, Icon }: LinkButtonProps<void>) => {
     return (
         <Link
             href={href}
-            className="bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md text-xs md:text-sm shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out duration-500 active:duration-0 shadow-gray-400"
+            className="self-center bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md text-xs md:text-sm shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out duration-500 active:duration-0 shadow-gray-400"
         >
             {Icon ? <Icon className="text-xl md:text-2xl w-5 md:w-6" /> : label}
         </Link>