App/david/form

src/app/david/home/container/HomeContainer.tsx

@@ -0,0 +1,58 @@
+import { message } from "antd";
+import { useState } from "react";
+import { PageWithModalContentCustomModal } from "~/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal";
+import { HomeTemplate } from "~/components/Templates/Home/HomeTemplate";
+import ModalStore from "~/store/ModalStore";
+
+export const HomeContainer = () => {
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
+
+  const headerLeftIconClicked = () => {
+    void message.info("can't go back");
+  };
+
+  const headerRightSettingIconClicked = () => {
+    setIsCustomModalOpen(true);
+    console.log("CLicked")
+  };
+
+  const homeTemplateProps: React.ComponentProps<typeof HomeTemplate> = {
+    homeHeaderModuleProps: {
+      headerProps: {
+        title: "Proxima OS",
+        onClickLeftIcon: headerLeftIconClicked,
+        onClickRightIcon: headerRightSettingIconClicked,
+      },
+    },
+    homeContentModuleProps: {
+      image: "/images/mImg.png",
+      text: "Proxima",
+    },
+    homeFooterModuleProps: {
+      title: "HomeFooterModule",
+      images: [
+        "/images/dollar-circle.png",
+        "/images/message.png",
+        "/images/wallet.png",
+        "/images/History.png",
+      ],
+    },
+  };
+
+  const customModalProps = {
+    modalProps: {
+      isModalOpen: isCustomModalOpen,
+      setModalOpen: setIsCustomModalOpen,
+    },
+    title: "Transaction processing",
+    image: "/images/modal Img.png",
+    description: "Uploading your transaction to the node. please wait for a moment... This may take up to 2 minutes.",
+  };
+
+  return (
+    <>
+      <HomeTemplate {...homeTemplateProps} />
+      {isCustomModalOpen && <PageWithModalContentCustomModal {...customModalProps} />}
+    </>
+  );
+};

src/app/david/home/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { HomeContainer } from "./container/HomeContainer";
+
+const Home = () => {
+  return <HomeContainer />;
+};
+
+export default Home;

src/app/david/pageWithForm/container/PageWithFormContainer.tsx

@@ -0,0 +1,23 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { PageWithFormTemplate } from "~/components/Templates/PageWithForm/PageWithFormTemplate";
+
+export const PageWithFormContainer = () => {
+  const router = useRouter();
+  const [formData, setFormData] = useState<any>({});
+
+  const pagewithformTemplateProps: React.ComponentProps<
+    typeof PageWithFormTemplate
+  > = {
+    pageWithFormHeaderModuleProps: {
+      title: "Vote",
+      bgColor: "#FFFFFF", 
+      titleColor: "#000000",
+    },
+    pageWithFormFormModuleProps: {
+      setFormData,
+    },
+  };
+
+  return <PageWithFormTemplate {...pagewithformTemplateProps} />;
+};

src/app/david/pageWithForm/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { PageWithFormContainer } from "./container/PageWithFormContainer";
+
+const PageWithForm = () => {
+  return <PageWithFormContainer />;
+};
+
+export default PageWithForm;

src/app/david/pageWithModal/container/PageWithModalContainer.tsx

@@ -0,0 +1,38 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { PageWithModalTemplate } from "~/components/Templates/PageWithModal/PageWithModalTemplate";
+import ModalStore from "~/store/ModalStore";
+
+export const PageWithModalContainer = () => {
+  const router = useRouter();
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
+
+  const pagewithmodalTemplateProps: React.ComponentProps<
+    typeof PageWithModalTemplate
+  > = {
+    pageWithModalHeaderModuleProps: {
+      title: "PageWithModalHeaderModule",
+      onClickLeftIcon: () => router.back(),
+    },
+    pageWithModalContentModuleProps: {
+      onOpenSnapshotModal: () =>
+        ModalStore.open("TitleAndContent", {
+          TitleAndContent: {
+            title: "Modal Title",
+            description: "Modal Content",
+          },
+        }),
+      modalProps: {
+        modalProps: {
+          isModalOpen: isCustomModalOpen,
+          setModalOpen: setIsCustomModalOpen,
+        },
+        title: "Custom Modal Title",
+        description: "Custom Modal Description",
+        image: ""
+      },
+    },
+  };
+
+  return <PageWithModalTemplate {...pagewithmodalTemplateProps} />;
+};

src/app/david/pageWithModal/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { PageWithModalContainer } from "./container/PageWithModalContainer";
+
+const PageWithModal = () => {
+  return <PageWithModalContainer />;
+};
+
+export default PageWithModal;

src/app/sample/pageWithModal/container/PageWithModalContainer.tsx

@@ -29,6 +29,7 @@ export const PageWithModalContainer = () => {
         },
         title: "Custom Modal Title",
         description: "Custom Modal Description",
+         image: ""
       },
     },
   };

src/components/Atoms/FooterAtom/FooterAtom.tsx

@@ -1,11 +1,22 @@
 type Props = {
   title: string;
+  images?: string[]; // Optional array of image URLs
 };
 
 export const FooterAtom = (props: Props) => {
   return (
-    <div className="flex h-full items-center justify-center bg-[#FFC96F]">
-      <div>{props.title}</div>
+    <div className="flex h-full items-center justify-center bg-[#262626]">
+      {props.images && props.images.length > 0 ? (
+        <div className="flex justify-around w-full h-full items-center">
+          {props.images.map((image, index) => (
+            <div key={index} className={`h-full w-full flex justify-center items-center ${index === 2 ? 'border-t-2 border-[#00EC97]' : ''}`}>
+            <img  src={image} alt={`Footer image ${index + 1}`} className={`w-[21px] h-[21px] text-[#8C8C8C]`} />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div>{props.title}</div>
+      )}
     </div>
   );
 };

src/components/Atoms/HeaderAtom/HeaderAtom.tsx

@@ -5,28 +5,37 @@ type Props = {
   title: string;
   onClickLeftIcon?: () => void;
   onClickRightIcon?: () => void;
+  bgColor?: string;
+  titleColor?: string;
 };
 
 export const HeaderAtom = (props: Props) => {
   return (
-    <div className="relative flex h-full w-full items-center justify-center bg-[#FFC96F]">
+    <div
+    className={`relative flex h-full w-full items-center justify-center`}
+    style={{ backgroundColor: props.bgColor || "#262626" }} 
+  >
       {/* Sample using custom svg */}
       {props.onClickLeftIcon && (
         <div
           className="absolute left-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
           onClick={props.onClickLeftIcon}
         >
-          <SVGAtom iconName="arrowLeft" width={20} height={20} color="black" />
+          <SVGAtom iconName="arrowLeft" width={20} height={20} color="#CACACA" />
         </div>
       )}
 
-      <div>{props.title}</div>
-
+<div
+        className="text-[16px] font-medium"
+        style={{ color: props.titleColor || "#FFFFFF" }} // Use titleColor or default to white
+      >
+        {props.title}
+      </div>
       {/* Sample using Antd icon */}
       {props.onClickRightIcon && (
         <div
-          className="absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
-          onClick={() => console.log("Antd icon clicked")}
+          className="absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center text-[#CACACA]"
+          onClick={props.onClickRightIcon}
         >
           <SettingOutlined className="!text-gray-header cursor-pointer text-[20px]" />
         </div>

src/components/Atoms/ModalContainer/ModalContainer.tsx

@@ -10,7 +10,7 @@ export const ModalContainer = (props: PropsWithChildren<Props>) => {
   return (
     <div
       className={cn(
-        "relative left-1/2 top-1/2 z-[1] h-fit w-fit translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-[14px] bg-slate-50 shadow-lg ",
+        "relative left-1/2 top-1/2 z-[1] h-[358px] w-[340px] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-[14px] bg-[#2C2D30] shadow-lg ",
         props.className,
       )}
       style={props.style}

src/components/Components/ContentDisplay.tsx/ContentDisplay.tsx

@@ -0,0 +1,17 @@
+type ContentDisplayProps = {
+    image: string;
+    text: string;
+  };
+
+  export const ContentDisplay = (props: ContentDisplayProps) => {
+    return (
+      <div >
+        <b className="text-[28px] text-white">Messages</b>
+        <div className="flex flex-col justify-center items-center w-[65px] h-[93px] mt-[19px]">
+        <img src={props.image} alt="Sample" className="w-[68px] h-[68px]" />
+        <p className="text-[16px] mt-[9px] text-[#CACACA]">{props.text}</p>
+        </div>
+      </div>
+    );
+  };
+

src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx

@@ -2,20 +2,24 @@ import { Button } from "antd";
 import Modal from "~/components/Atoms/Modal/Modal";
 
 type Props = {
-  modalProps: React.ComponentProps<typeof Modal>;
+  modalProps: {
+    isModalOpen: boolean; // Ensure this matches your Modal component's expected prop
+    setModalOpen: (isOpen: boolean) => void;
+  };
   title: string;
   description: string;
+  image: string
 };
 
 export const PageWithModalContentCustomModal = (props: Props) => {
+  const { modalProps, title, description, image } = props;
+
   return (
-    <Modal {...props.modalProps}>
+    <Modal isModalOpen={modalProps.isModalOpen} setModalOpen={modalProps.setModalOpen}>
       <div className="flex h-fit w-80 flex-col gap-4 p-8">
-        <h1 className="text-2xl">{props.title}</h1>
-        <p>{props.description}</p>
-        <Button onClick={() => props.modalProps.setModalOpen(false)}>
-          close
-        </Button>
+        <h1 className="text-2xl font-bold text-white">{title}</h1>
+        <img src={image} className="w-full h-full object-contain"/>
+        <p className="text-[16px] text-white">{description}</p>
       </div>
     </Modal>
   );

src/components/Modules/Home/HomeContentModule.tsx

@@ -1,13 +1,24 @@
 import { LinkList } from "~/components/Components/LinkList/LinkList";
+import { ContentDisplay } from "~/components/Components/ContentDisplay.tsx/ContentDisplay";
 
 type Props = {
-  sampleLinks: string[];
+  sampleLinks?: string[]; 
+  image?: string; 
+  text?: string;
 };
 
 export const HomeContentModule = (props: Props) => {
+  if (props.image && props.text) {
+    return (
+      <div className="py-3">
+        <ContentDisplay image={props.image} text={props.text} />
+      </div>
+    );
+  }
+
   return (
     <div className="py-3">
-      <LinkList links={props.sampleLinks} />
+      {props.sampleLinks && <LinkList links={props.sampleLinks} />}
     </div>
   );
 };

src/components/Modules/Home/HomeFooterModule.tsx

@@ -2,8 +2,9 @@ import { FooterAtom } from "~/components/Atoms/FooterAtom/FooterAtom";
 
 type Props = {
   title: string;
+  images?: string[];
 };
 
 export const HomeFooterModule = (props: Props) => {
-  return <FooterAtom title={props.title} />;
+  return <FooterAtom title={props.title} images={props.images} />;
 };