Implement the complete layout

app/(root)/layout.tsx

@@ -1,12 +1,27 @@
+import MobileNav from "@/components/MobileNav";
+import Sidebar from "@/components/Sidebar";
+import Image from "next/image";
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const loggedIn = { firstName: 'Adrian', lastName: 'JSM' };
+
   return (
-    <main>
-      SIDEBAR
-      {children}
+    <main className="flex h-screen w-full font-inter">
+      <Sidebar user={loggedIn} />
+
+      <div className="flex size-full flex-col">
+        <div className="root-layout">
+          <Image src="/icons/logo.svg" width={30} height={30} alt="logo" />
+          <div>
+            <MobileNav user={loggedIn} />
+          </div>
+        </div>
+        {children}
+      </div>
     </main>
   );
 }

app/(root)/my-banks/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const MyBanks = () => {
+  return (
+    <div>page</div>
+  )
+}
+
+export default MyBanks

app/(root)/page.tsx

@@ -1,8 +1,37 @@
-import React from 'react'
+import HeaderBox from '@/components/HeaderBox'
+import RightSidebar from '@/components/RightSidebar';
+import TotalBalanceBox from '@/components/TotalBalanceBox';
 
 const Home = () => {
+  const loggedIn = { firstName: 'Adrian', lastName: 'JSM', email: '[email protected]' };
+
   return (
-    <div>Home</div>
+    <section className="home">
+      <div className="home-content">
+        <header className="home-header">
+          <HeaderBox 
+            type="greeting"
+            title="Welcome"
+            user={loggedIn?.firstName || 'Guest'}
+            subtext="Access and manage your account and transactions efficiently."
+          />
+
+          <TotalBalanceBox 
+            accounts={[]}
+            totalBanks={1}
+            totalCurrentBalance={1250.35}
+          />
+        </header>
+
+        RECENT TRANSACTIONS
+      </div>
+
+      <RightSidebar 
+        user={loggedIn}
+        transactions={[]}
+        banks={[{ currentBalance: 123.50 }, { currentBalance: 500.50}]}
+      />
+    </section>
   )
 }
 

app/(root)/payment-transfer/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Transfer = () => {
+  return (
+    <div>Transfer</div>
+  )
+}
+
+export default Transfer

app/(root)/transaction-history/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const TransactionHistory = () => {
+  return (
+    <div>TransactionHistory</div>
+  )
+}
+
+export default TransactionHistory

components/AnimatedCounter.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import CountUp from 'react-countup';
+
+const AnimatedCounter = ({ amount }: { amount: number }) => {
+  return (
+    <div className="w-full">
+      <CountUp 
+        decimals={2}
+        decimal=","
+        prefix="$"
+        end={amount} 
+      />
+    </div>
+  )
+}
+
+export default AnimatedCounter

components/BankCard.tsx

@@ -0,0 +1,65 @@
+import { formatAmount } from '@/lib/utils'
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+const BankCard = ({ account, userName, showBalance = true }: CreditCardProps) => {
+  return (
+    <div className="flex flex-col">
+      <Link href="/" className="bank-card">
+        <div className="bank-card_content">
+          <div>
+            <h1 className="text-16 font-semibold text-white">
+              {account.name || userName}
+            </h1>
+            <p className="font-ibm-plex-serif font-black text-white">
+              {formatAmount(account.currentBalance)}
+            </p>
+          </div>
+
+          <article className="flex flex-col gap-2">
+            <div className="flex justify-between">
+              <h1 className="text-12 font-semibold text-white">
+                {userName}
+              </h1>
+              <h2 className="text-12 font-semibold text-white">
+              ●● / ●●
+              </h2>
+            </div>
+            <p className="text-14 font-semibold tracking-[1.1px] text-white">
+              ●●●● ●●●● ●●●● <span className="text-16">1234</span>
+            </p>
+          </article>
+        </div>
+
+        <div className="bank-card_icon">
+          <Image 
+            src="/icons/Paypass.svg"
+            width={20}
+            height={24}
+            alt="pay"
+          />
+          <Image 
+            src="/icons/mastercard.svg"
+            width={45}
+            height={32}
+            alt="mastercard"
+            className="ml-5"
+          />
+        </div>
+
+        <Image 
+          src="/icons/lines.png"
+          width={316}
+          height={190}
+          alt="lines"
+          className="absolute top-0 left-0"
+        />
+      </Link>
+
+      {/* COPY */}
+    </div>
+  )
+}
+
+export default BankCard

components/DoughnutChart.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
+import { Doughnut } from "react-chartjs-2";
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+
+
+const DoughnutChart = ({ accounts }: DoughnutChartProps) => {
+  const data = {
+    datasets: [
+      {
+        label: 'Banks',
+        data: [1250, 2500, 3750],
+        backgroundColor: ['#0747b6', '#2265d8', '#2f91fa'] 
+      }
+    ],
+    labels: ['Bank 1', 'Bank 2', 'Bank 3']
+  }
+
+  return <Doughnut 
+    data={data} 
+    options={{
+      cutout: '60%',
+      plugins: {
+        legend: {
+          display: false
+        }
+      }
+    }}
+  />
+}
+
+export default DoughnutChart

components/HeaderBox.tsx

@@ -0,0 +1,17 @@
+const HeaderBox = ({ type = "title", title, subtext, user }: HeaderBoxProps) => {
+  return (
+    <div className="header-box">
+      <h1 className="header-box-title">
+        {title}
+        {type === 'greeting' && (
+          <span className="text-bankGradient">
+            &nbsp;{user}
+          </span>
+        )}
+      </h1>
+      <p className="header-box-subtext">{subtext}</p>
+    </div>
+  )
+}
+
+export default HeaderBox

components/MobileNav.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
+import { sidebarLinks } from "@/constants"
+import { cn } from "@/lib/utils"
+import Image from "next/image"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+const MobileNav = ({ user }: MobileNavProps) => {
+  const pathname = usePathname();
+
+  return (
+    <section className="w-fulll max-w-[264px]">
+      <Sheet>
+        <SheetTrigger>
+          <Image
+            src="/icons/hamburger.svg"
+            width={30}
+            height={30}
+            alt="menu"
+            className="cursor-pointer"
+          />
+        </SheetTrigger>
+        <SheetContent side="left" className="border-none bg-white">
+          <Link href="/" className="cursor-pointer flex items-center gap-1 px-4">
+            <Image 
+              src="/icons/logo.svg"
+              width={34}
+              height={34}
+              alt="Horizon logo"
+            />
+            <h1 className="text-26 font-ibm-plex-serif font-bold text-black-1">Horizon</h1>
+          </Link>
+          <div className="mobilenav-sheet">
+            <SheetClose asChild>
+              <nav className="flex h-full flex-col gap-6 pt-16 text-white">
+                  {sidebarLinks.map((item) => {
+                const isActive = pathname === item.route || pathname.startsWith(`${item.route}/`)
+
+                return (
+                  <SheetClose asChild key={item.route}>
+                    <Link href={item.route} key={item.label}
+                      className={cn('mobilenav-sheet_close w-full', { 'bg-bank-gradient': isActive })}
+                    >
+                        <Image 
+                          src={item.imgURL}
+                          alt={item.label}
+                          width={20}
+                          height={20}
+                          className={cn({
+                            'brightness-[3] invert-0': isActive
+                          })}
+                        />
+                      <p className={cn("text-16 font-semibold text-black-2", { "text-white": isActive })}>
+                        {item.label}
+                      </p>
+                    </Link>
+                  </SheetClose>
+                )
+              })}
+
+              USER
+              </nav>
+            </SheetClose>
+
+            FOOTER
+          </div>
+        </SheetContent>
+      </Sheet>
+    </section>
+  )
+}
+
+export default MobileNav