Nnebuo Ukamaka_TestPage1

pages/_app.js

@@ -0,0 +1,7 @@
+import '../src/styles/globals.css';
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

pages/homePage.tsx

@@ -0,0 +1,7 @@
+import HomeContainer from "../src/app/NnebuoUkamaka/homePage/container/HomePageContainer";
+
+const Home = () => {
+    return <HomeContainer/>
+};
+
+export default Home;

src/app/NnebuoUkamaka/footer/FooterContainer.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import Image from "next/image";
+
+const Footer = () => {
+  return (
+    <footer className='fixed bottom-0 w-full bg-gray-800 py-4'>
+      <nav className='mx-auto flex max-w-sm justify-around'>
+        <a href=''>
+          <div className='flex cursor-pointer flex-col items-center'>
+            <Image
+              src='/svgs/paymentIcon.svg'
+              alt='payment'
+              width={20}
+              height={20}
+              className='rounded-full'
+            />
+          </div>
+        </a>
+
+        <a href=''>
+          <div className='flex cursor-pointer flex-col items-center'>
+            <Image
+              src='/svgs/messageIcon.svg'
+              alt='payment'
+              width={20}
+              height={20}
+              className='rounded-full'
+            />
+          </div>
+        </a>
+        <div className='flex cursor-pointer flex-col items-center'>
+          <span className=' h-1 w-16 bg-green-500' />
+          <a href=''>
+            <div className='flex cursor-pointer flex-col items-center'>
+              <Image
+                src='/svgs/cardIcon.svg'
+                alt='star'
+                width={20}
+                height={20}
+                className='rounded-full'
+              />
+            </div>
+          </a>
+        </div>
+        <a href=''>
+          <div className='flex cursor-pointer flex-col items-center'>
+            <Image
+              src='/svgs/reloadIcon.svg'
+              alt='star'
+              width={20}
+              height={20}
+              className='rounded-full'
+            />
+          </div>
+        </a>
+      </nav>
+    </footer>
+  );
+};
+
+export default Footer;

src/app/NnebuoUkamaka/header/headerContainer.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Image from "next/image";
+const Header = () => {
+  return (
+    <header className='flex items-center justify-between bg-gray-900 px-4 py-3'>
+      <div className='flex items-center'>
+        <a className='text-white' href=''>
+          <Image
+            src='/svgs/headerIcon.svg'
+            alt='copy'
+            width={20}
+            height={20}
+            className='rounded-full'
+          />
+        </a>
+      </div>
+      <div className='flex-1 text-center'>
+        <h1 className='text-lg font-semibold text-white'>Proxima OS</h1>
+      </div>
+      <div className='flex items-center'>
+        <a className='text-white' href='#'>
+          <Image
+            src='/svgs/settingsIcon.svg'
+            alt='settings'
+            width={20}
+            height={20}
+            className='rounded-full'
+          />
+        </a>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/app/NnebuoUkamaka/homePage/container/HomePageContainer.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { NextPage } from "next";
+import Image from "next/image";
+import Header from "../../header/HeaderContainer";
+import Footer from "../../footer/FooterContainer";
+interface Message {
+  id: number;
+  icon: string; // URL or emoji for the icon
+  name: string;
+  time: string;
+  content: string;
+  unread: boolean;
+}
+
+const messages: Message[] = [
+  {
+    id: 1,
+    icon: "/svgs/ETH.svg",
+    name: "ETH",
+    time: "08:43 PM",
+    content: "User: namulabs is fantastic company...",
+    unread: true,
+  },
+  {
+    id: 2,
+    icon: "/svgs/nvr.svg",
+    name: "Nvir",
+    time: "08:42 AM",
+    content: "User: namulabs is fantastic company...",
+    unread: false,
+  },
+];
+
+const HomeContainer: NextPage = () => {
+  return (
+    <div>
+      <Header/>
+      <div className="min-h-screen bg-gray-900 py-10 " >
+    <div className=' ms-8 items-start  text-white'>
+      <h1 className='mb-6 ms-4 text-2xl font-semibold'>Messages</h1>
+      <div className='w-80 rounded-xl  p-4'>
+        <div className='mb-4 '>
+          <div className='flex h-10 w-10 mb-1 items-center justify-center rounded-full'>
+            <Image
+              src='/images/starIcon.png'
+              alt='star'
+              width={100}
+              height={100}
+              className='rounded-full'
+            />
+          </div>
+          <span className='text-lg font-semibold items-start'>Proxima</span>
+        </div>
+
+        <div className='space-y-4 bg-gray-800 w-96 h-page rounded-lg'>
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className='flex items-center justify-between rounded-lg p-3'
+            >
+              <div className='flex items-center'>
+                <Image
+                  src={message.icon}
+                  alt={message.name}
+                  width={40}
+                  height={40}
+                  className='rounded-full'
+                />
+
+                <div className='ml-4'>
+                  <h2 className='font-semibold'>{message.name}</h2>
+                  <p className='truncate text-sm text-gray-400'>
+                    {message.content}
+                  </p>
+                </div>
+              </div>
+              <div className='text-right'>
+                <p className='text-sm text-gray-400'>{message.time}</p>
+                {message.unread && (
+                  <div className='mt-1 h-2 w-4 rounded-full'>
+                    <Image
+                  src="/svgs/N.svg"
+                  alt="badge"
+                  width={100}
+                  height={100}
+                  className='rounded-full'
+                />
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+    </div>
+    <Footer/>
+    </div>
+  );
+};
+
+export default HomeContainer;