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

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"

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>

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>

src/fonts/Source_Serif_4/OFL.txt

@@ -0,0 +1,91 @@
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/fonts/Source_Serif_4/README.txt

@@ -0,0 +1,128 @@
+Source Serif 4 Variable Font
+============================
+
+This download contains Source Serif 4 as both variable fonts and static fonts.
+
+Source Serif 4 is a variable font with these axes:
+  opsz
+  wght
+
+This means all the styles are contained in these files:
+  SourceSerif4-VariableFont_opsz,wght.ttf
+  SourceSerif4-Italic-VariableFont_opsz,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Source Serif 4:
+  static/SourceSerif4-ExtraLight.ttf
+  static/SourceSerif4-Light.ttf
+  static/SourceSerif4-Regular.ttf
+  static/SourceSerif4-Medium.ttf
+  static/SourceSerif4-SemiBold.ttf
+  static/SourceSerif4-Bold.ttf
+  static/SourceSerif4-ExtraBold.ttf
+  static/SourceSerif4-Black.ttf
+  static/SourceSerif4_18pt-ExtraLight.ttf
+  static/SourceSerif4_18pt-Light.ttf
+  static/SourceSerif4_18pt-Regular.ttf
+  static/SourceSerif4_18pt-Medium.ttf
+  static/SourceSerif4_18pt-SemiBold.ttf
+  static/SourceSerif4_18pt-Bold.ttf
+  static/SourceSerif4_18pt-ExtraBold.ttf
+  static/SourceSerif4_18pt-Black.ttf
+  static/SourceSerif4_36pt-ExtraLight.ttf
+  static/SourceSerif4_36pt-Light.ttf
+  static/SourceSerif4_36pt-Regular.ttf
+  static/SourceSerif4_36pt-Medium.ttf
+  static/SourceSerif4_36pt-SemiBold.ttf
+  static/SourceSerif4_36pt-Bold.ttf
+  static/SourceSerif4_36pt-ExtraBold.ttf
+  static/SourceSerif4_36pt-Black.ttf
+  static/SourceSerif4_48pt-ExtraLight.ttf
+  static/SourceSerif4_48pt-Light.ttf
+  static/SourceSerif4_48pt-Regular.ttf
+  static/SourceSerif4_48pt-Medium.ttf
+  static/SourceSerif4_48pt-SemiBold.ttf
+  static/SourceSerif4_48pt-Bold.ttf
+  static/SourceSerif4_48pt-ExtraBold.ttf
+  static/SourceSerif4_48pt-Black.ttf
+  static/SourceSerif4-ExtraLightItalic.ttf
+  static/SourceSerif4-LightItalic.ttf
+  static/SourceSerif4-Italic.ttf
+  static/SourceSerif4-MediumItalic.ttf
+  static/SourceSerif4-SemiBoldItalic.ttf
+  static/SourceSerif4-BoldItalic.ttf
+  static/SourceSerif4-ExtraBoldItalic.ttf
+  static/SourceSerif4-BlackItalic.ttf
+  static/SourceSerif4_18pt-ExtraLightItalic.ttf
+  static/SourceSerif4_18pt-LightItalic.ttf
+  static/SourceSerif4_18pt-Italic.ttf
+  static/SourceSerif4_18pt-MediumItalic.ttf
+  static/SourceSerif4_18pt-SemiBoldItalic.ttf
+  static/SourceSerif4_18pt-BoldItalic.ttf
+  static/SourceSerif4_18pt-ExtraBoldItalic.ttf
+  static/SourceSerif4_18pt-BlackItalic.ttf
+  static/SourceSerif4_36pt-ExtraLightItalic.ttf
+  static/SourceSerif4_36pt-LightItalic.ttf
+  static/SourceSerif4_36pt-Italic.ttf
+  static/SourceSerif4_36pt-MediumItalic.ttf
+  static/SourceSerif4_36pt-SemiBoldItalic.ttf
+  static/SourceSerif4_36pt-BoldItalic.ttf
+  static/SourceSerif4_36pt-ExtraBoldItalic.ttf
+  static/SourceSerif4_36pt-BlackItalic.ttf
+  static/SourceSerif4_48pt-ExtraLightItalic.ttf
+  static/SourceSerif4_48pt-LightItalic.ttf
+  static/SourceSerif4_48pt-Italic.ttf
+  static/SourceSerif4_48pt-MediumItalic.ttf
+  static/SourceSerif4_48pt-SemiBoldItalic.ttf
+  static/SourceSerif4_48pt-BoldItalic.ttf
+  static/SourceSerif4_48pt-ExtraBoldItalic.ttf
+  static/SourceSerif4_48pt-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.