feat: Add Source Serif 4 and Fractul font families, new message and requests icons, and update agent dashboard and layout.

2026-01-18 08:44:53 +05:30
parent 36cff9de00
commit 59fcc65489
91 changed files with 348 additions and 23 deletions
--- a/src/app/(agent)/agent/dashboard/component/ProfileSidebar.tsx
+++ b/src/app/(agent)/agent/dashboard/component/ProfileSidebar.tsx
@@ -12,8 +12,8 @@ export function ProfileSidebar({ profileImage, email, phone }: ProfileSidebarPro
  return (
    <div className="w-full lg:w-[220px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
      {/* Profile Image */}
-      <div className="relative w-[200px]">
-        <div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
+      <div className="relative w-[200px] h-[200px]">
+        <div className="w-full h-full rounded-[15px] overflow-hidden border-4 border-[#5ba4a4]">
          <Image
            src={profileImage}
            alt="Profile"
@@ -22,8 +22,10 @@ export function ProfileSidebar({ profileImage, email, phone }: ProfileSidebarPro
            className="w-full h-full object-cover"
          />
        </div>
-        {/* Edit Icon - Top Right Outside */}
-        <button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
+        {/* Gradient Overlay - subtle darkening at bottom */}
+        <div className="absolute inset-0 rounded-[15px] bg-gradient-to-t from-black/40 via-transparent to-transparent pointer-events-none" />
+        {/* Edit Icon - Center */}
+        <button className="absolute top-[calc(50%-18px)] left-[calc(50%-18px)] w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
          <Image
            src="/assets/icons/edit-icon.svg"
            alt="Edit profile"
--- a/src/app/(agent)/agent/dashboard/page.tsx
+++ b/src/app/(agent)/agent/dashboard/page.tsx
@@ -87,7 +87,10 @@ export default function AgentDashboard() {
              height={200}
              className="w-full h-full object-cover"
            />
+            {/* Gradient Overlay */}
+            <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
          </div>
+          {/* Edit Icon - Top Right Outside */}
          <button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
            <Image
              src="/assets/icons/edit-icon.svg"
@@ -212,7 +215,10 @@ export default function AgentDashboard() {
                height={200}
                className="w-full h-full object-cover"
              />
+              {/* Gradient Overlay */}
+              <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
            </div>
+            {/* Edit Icon - Top Right Outside */}
            <button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
              <Image
                src="/assets/icons/edit-icon.svg"
@@ -324,21 +330,21 @@ export default function AgentDashboard() {

              {/* Action Buttons */}
              <div className="flex items-center gap-3">
-                <button className="flex items-center gap-2 px-4 py-2 bg-[#5ba4a4] text-white text-sm rounded-[15px] hover:bg-[#4a9393] transition-colors">
+                <button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
                  <Image
-                    src="/assets/icons/message-icon.svg"
+                    src="/assets/icons/message-dark-icon.svg"
                    alt="Message"
-                    width={16}
-                    height={16}
+                    width={14}
+                    height={13}
                  />
                  Message
                </button>
-                <button className="flex items-center gap-2 px-4 py-2 bg-[#5ba4a4] text-white text-sm rounded-[15px] hover:bg-[#4a9393] transition-colors">
+                <button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
                  <Image
-                    src="/assets/icons/clipboard-icon.svg"
+                    src="/assets/icons/requests-dark-icon.svg"
                    alt="Requests"
-                    width={16}
-                    height={16}
+                    width={14}
+                    height={13}
                  />
                  Requests
                </button>
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Source_Serif_4, Nunito_Sans } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
+import localFont from "next/font/local";
 import { SessionProvider } from "@/components/providers/session-provider";
 import "./globals.css";

@@ -13,17 +14,108 @@ const geistMono = Geist_Mono({
  subsets: ["latin"],
 });

-const sourceSerif4 = Source_Serif_4({
-  variable: "--font-source-serif-4",
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
+// Local Fractul font
+const fractul = localFont({
+  src: [
+    {
+      path: "../fonts/fractul/Fractul-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../fonts/fractul/Fractul-Italic.ttf",
+      weight: "400",
+      style: "italic",
+    },
+    {
+      path: "../fonts/fractul/Fractul-Medium.ttf",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../fonts/fractul/Fractul-MediumItalic.ttf",
+      weight: "500",
+      style: "italic",
+    },
+    {
+      path: "../fonts/fractul/Fractul-SemiBold.ttf",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "../fonts/fractul/Fractul-SemiBoldItalic.ttf",
+      weight: "600",
+      style: "italic",
+    },
+    {
+      path: "../fonts/fractul/Fractul-Bold.ttf",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../fonts/fractul/Fractul-BoldItalic.ttf",
+      weight: "700",
+      style: "italic",
+    },
+    {
+      path: "../fonts/fractul/Fractul-ExtraBold.ttf",
+      weight: "800",
+      style: "normal",
+    },
+    {
+      path: "../fonts/fractul/Fractul-ExtraBoldItalic.ttf",
+      weight: "800",
+      style: "italic",
+    },
+  ],
+  variable: "--font-fractul",
 });

-// Using Nunito Sans as a close alternative to Fractul (similar geometric sans-serif style)
-const nunitoSans = Nunito_Sans({
-  variable: "--font-fractul",
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700", "800"],
+// Local Source Serif 4 font
+const sourceSerif4 = localFont({
+  src: [
+    {
+      path: "../fonts/Source_Serif_4/static/SourceSerif4-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../fonts/Source_Serif_4/static/SourceSerif4-Italic.ttf",
+      weight: "400",
+      style: "italic",
+    },
+    {
+      path: "../fonts/Source_Serif_4/static/SourceSerif4-Medium.ttf",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../fonts/Source_Serif_4/static/SourceSerif4-MediumItalic.ttf",
+      weight: "500",
+      style: "italic",
+    },
+    {
+      path: "../fonts/Source_Serif_4/static/SourceSerif4-SemiBold.ttf",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "../fonts/Source_Serif_4/static/SourceSerif4-SemiBoldItalic.ttf",
+      weight: "600",
+      style: "italic",
+    },
+    {
+      path: "../fonts/Source_Serif_4/static/SourceSerif4-Bold.ttf",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../fonts/Source_Serif_4/static/SourceSerif4-BoldItalic.ttf",
+      weight: "700",
+      style: "italic",
+    },
+  ],
+  variable: "--font-source-serif-4",
 });

 export const metadata: Metadata = {
@@ -39,7 +131,7 @@ export default function RootLayout({
  return (
    <html lang="en">
      <body
-        className={`${geistSans.variable} ${geistMono.variable} ${sourceSerif4.variable} ${nunitoSans.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${sourceSerif4.variable} ${fractul.variable} antialiased`}
      >
        <SessionProvider>{children}</SessionProvider>
      </body>