Vytran branch

cubeseed_login/app/(farmer)/dashboard/layout.tsx

@@ -2,17 +2,22 @@ import Navbar from "@/component/navbar/Navbar"
 import DashboardNavbar from "@/component/dashboard/DashboardNavbar/DashboardNavbar"
 import DashboardSidePannel from "@/component/dashboard/DashboardSidePannel"
 import { Inter as FontSans } from "next/font/google"
+import { Nunito } from "next/font/google"
 
 export const metadata = {
-  title: "Next.js",
-  description: "Generated by Next.js",
+  title: "Cubeseed",
+  description: "Cubeseed Africa - Virtual Marketplace",
 }
 
 const fontSans = FontSans({
   variable: "--font-sans",
   subsets: ["latin"],
 })
 
+const fontNunito = Nunito({
+  subsets: ["latin"],
+})
+
 export default function DashboardLayout({
   children,
 }: {

cubeseed_login/app/(farmer)/dashboard/page.tsx

@@ -1,7 +1,8 @@
 // import CreateInvoice from "@/component/Invoice/create-invoice"
-import CreateSucess from "@/component/Invoice/create-success"
+// import CreateSucess from "@/component/Invoice/create-success"
 import { useState } from "react"
 
 export default async function DashboardPage() {
-  return <div>{/* <CreateInvoice /> */}</div>
+  // return <div>{/* <CreateInvoice /> */}</div>
+  return <div>hello</div>
 }

cubeseed_login/next.config.js

@@ -2,8 +2,24 @@
 const nextConfig = {
   reactStrictMode: true,
   experimental: {
-    appDir: true
-  }
+    appDir: true,
+  },
 }
 
 module.exports = nextConfig
+
+// const path = require("path")
+// const nextConfig = {
+//   reactStrictMode: true,
+//   experimental: {
+//     appDir: true,
+//   },
+//   webpack: (config) => {
+//     console.log("Webpack configuration is being executed:", config)
+//     config.resolve.alias["@/layout"] = path.resolve(__dirname, "src/layout.tsx")
+//     console.log("Alias added:", config.resolve.alias)
+//     return config
+//   },
+// }
+
+// module.exports = nextConfig

cubeseed_login/package.json

@@ -40,11 +40,6 @@
     "@types/react-dom": "18.0.11",
     "autoprefixer": "^10.4.14",
     "chromatic": "^7.4.0",
-    "eslint": "8.48.0",
-    "eslint-config-next": "13.4.19",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-tailwindcss": "^3.13.0",
     "husky": "^8.0.0",
     "postcss": "^8.4.25",
     "prettier": "^2.8.8",

cubeseed_login/src/component/Layout.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode, useState } from "react"
+import Navbar from "./navbar/Navbar"
+import NavbarAuthenticated from "./navbar/NavbarAuthenticated"
+import Footer from "./footer/Footer"
+
+interface LayoutProps {
+  children: ReactNode
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+
+  return (
+    <div
+      style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
+    >
+      {isAuthenticated ? <NavbarAuthenticated /> : <Navbar />}
+      <div style={{ flex: 1, paddingTop: "68px" }}>{children}</div>
+      <Footer />
+    </div>
+  )
+}
+
+export default Layout

cubeseed_login/src/component/footer/Footer.tsx

@@ -0,0 +1,13 @@
+const Footer = () => {
+  return (
+    <div className="flex h-8 flex-row items-center justify-between px-20  py-8 text-[12px] font-bold text-[#03656b]">
+      <div className="flex gap-10">
+        <span>Terms of Service</span>
+        <span>Privacy Policy</span>
+      </div>
+      <span>© 2023 Cubeseed</span>
+    </div>
+  )
+}
+
+export default Footer

cubeseed_login/src/component/navbar/Logo.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+
+import logo from "@assets/cubeseed.png"
+
+const Logo = () => {
+  const router = useRouter()
+
+  return (
+    <Image
+      onClick={() => router.push("/")}
+      className="block cursor-pointer"
+      src={logo}
+      height="120"
+      width="120"
+      alt="Logo"
+    />
+  )
+}
+
+export default Logo

cubeseed_login/src/component/navbar/Navbar.tsx

@@ -1,37 +1,43 @@
 import Link from "next/link"
-import navStyles from "@/styles/navbar.module.scss"
 import React from "react"
-import LoginPage from "@/pages/login_page/login-page"
+import SignInPage from "@/pages/signin"
+import Container from "@/comps/Container"
+import Logo from "./Logo"
+import { PiUserCircleFill } from "react-icons/pi"
 
-export default function Navbar() {
+const Navbar = () => {
   return (
-    <nav className={navStyles.nav}>
-      <h1>CubeSeed</h1>
-      <div className={navStyles.navlinkgroup}>
-        <ul className={navStyles.navlinks}>
-          <li className={navStyles.navlink}>
-            <Link href="/about">About</Link>
-          </li>
-          <li className={navStyles.navlink}>
-            <Link href="/features">Features</Link>
-          </li>
-          <li className={navStyles.navlink}>
-            <Link href="/contact_us">Contact Us</Link>
-          </li>
-        </ul>
-      </div>
-      <div className={navStyles.navbuttongroup}>
-        <Link
-          href="/login_page/login-page"
-          legacyBehavior
-          className={navStyles.loginbutton}
-        >
-          <a className={navStyles.button}>Login</a>
-        </Link>
-        <Link href="/signup" legacyBehavior className={navStyles.signupbutton}>
-          <a className={navStyles.button}>Signup</a>
-        </Link>
+    <div className="fixed z-10 w-full border-b border-[#8bc8c8] bg-[#e2f5f5] shadow-sm">
+      <div className="py-4">
+        <Container>
+          <div className="flex flex-row items-center justify-between">
+            <Logo />
+
+            {/* Links */}
+            <div className="flex cursor-pointer flex-row items-center gap-8 text-[15px] text-[#03656b]">
+              <Link href="/about">
+                <div className="hover:text-[#4cacb3]">About</div>
+              </Link>
+              <Link href="/features">
+                <div className="hover:text-[#4cacb3]">Features</div>
+              </Link>
+              <Link href="/testimonials">
+                <div className="hover:text-[#4cacb3]">Testimonials</div>
+              </Link>
+
+              {/* Sign in button */}
+              <Link href="/signin">
+                <div className="flex flex-row items-center gap-1 hover:text-[#4cacb3]">
+                  <PiUserCircleFill size={28} />
+                  <div>Sign in</div>
+                </div>
+              </Link>
+            </div>
+          </div>
+        </Container>
       </div>
-    </nav>
+    </div>
   )
 }
+
+export default Navbar

cubeseed_login/src/component/navbar/NavbarAuthenticated.tsx

@@ -0,0 +1,50 @@
+import Link from "next/link"
+import React from "react"
+import SignInPage from "@/pages/signin"
+import Container from "@/comps/Container"
+import Logo from "./Logo"
+import { PiUserCircleFill } from "react-icons/pi"
+import { IoMdNotificationsOutline } from "react-icons/io"
+import { LiaClipboardListSolid } from "react-icons/lia"
+import { RxMagnifyingGlass } from "react-icons/rx"
+
+const NavbarAuthenticated = () => {
+  return (
+    <div className="fixed z-10 w-full border-b border-[#8bc8c8] bg-[#e2f5f5] shadow-sm">
+      <div className="py-4">
+        <Container>
+          <div className="flex flex-row justify-between">
+            <Logo />
+
+            {/* Searchbar */}
+            <div className="-my-[1px] mr-[20%] flex w-[35%] rounded-3xl border-[1px] border-[#03656b] bg-white lg:mr-[30%]">
+              <input
+                type="text"
+                className="w-[90%] rounded-3xl rounded-r-none px-4 focus:outline-none"
+                placeholder="Search"
+              />
+              <button className="flex items-center border-l px-4 text-gray-500">
+                <RxMagnifyingGlass size={22} />
+              </button>
+            </div>
+
+            {/* Links */}
+            <div className="flex cursor-pointer flex-row items-center gap-8 text-[15px] text-[#03656b]">
+              <Link href="/signin">
+                <IoMdNotificationsOutline size={22} />
+              </Link>
+              <Link href="/signin">
+                <LiaClipboardListSolid size={22} />
+              </Link>
+              <Link href="/signin">
+                <PiUserCircleFill size={28} />
+              </Link>
+            </div>
+          </div>
+        </Container>
+      </div>
+    </div>
+  )
+}
+
+export default NavbarAuthenticated

cubeseed_login/src/comps/Container.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+interface ContainerProps {
+  children: React.ReactNode
+}
+
+const Container: React.FC<ContainerProps> = ({ children }) => {
+  return <div className="mx-auto max-w-[2520px] px-6">{children}</div>
+}
+
+export default Container

cubeseed_login/src/comps/ProgressBar.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+interface ProgressBarProps {
+  stepsCompleted: number
+  totalSteps: number
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  stepsCompleted,
+  totalSteps,
+}) => {
+  // Calculate the completion percentage
+  const completionPercentage = (stepsCompleted / totalSteps) * 100
+
+  return (
+    <div className="h-[3px] w-full rounded-full bg-gray-200">
+      <div
+        className="h-[3px] rounded-full bg-[#fcb103]"
+        style={{ width: `${completionPercentage}%` }}
+      ></div>
+    </div>
+  )
+}
+
+export default ProgressBar

cubeseed_login/src/pages/_app.tsx

@@ -1,15 +1,19 @@
 import type { AppProps } from "next/app"
 import "@/styles/globals.scss"
-// import "@/styles/global.css" // tailwind
 import { FarmContextProvider } from "@/context/context"
 import { SignUpContextProvider } from "@/context/signup"
+import Layout from "@/component/Layout"
 
-export default function App({ Component, pageProps }: AppProps) {
+const App: React.FC<AppProps> = ({ Component, pageProps }) => {
   return (
     <FarmContextProvider>
       <SignUpContextProvider>
-        <Component {...pageProps} />
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
       </SignUpContextProvider>
     </FarmContextProvider>
   )
 }
+
+export default App