From c7593caf1f68753ada2b8019809b1cbc4f73e005 Mon Sep 17 00:00:00 2001
From: Sravan Kumar <sravan.iitk.2010@gmail.com>
Date: Wed, 12 Nov 2025 11:55:15 +0530
Subject: [PATCH] Added Chevron icon instead of text. Some padding and margin
 changes to navigationbar and home page to make it consistent

---
 public/icons/chevron.svg               |  3 ++
 src/app/page.tsx                       | 50 +++++++++++++++++---------
 src/components/NavigationalSidebar.tsx | 45 ++++++++++++++++-------
 3 files changed, 69 insertions(+), 29 deletions(-)
 create mode 100644 public/icons/chevron.svg

diff --git a/public/icons/chevron.svg b/public/icons/chevron.svg
new file mode 100644
index 0000000..a73eab1
--- /dev/null
+++ b/public/icons/chevron.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6261 7.29289C13.0167 6.90237 13.6498 6.90237 14.0404 7.29289L22.0404 15.2929C22.4309 15.6834 22.4309 16.3166 22.0404 16.7071L14.0404 24.7071C13.6498 25.0976 13.0167 25.0976 12.6261 24.7071C12.2356 24.3166 12.2356 23.6834 12.6261 23.2929L19.919 16L12.6261 8.70711C12.2356 8.31658 12.2356 7.68342 12.6261 7.29289Z" fill="#E01236"/>
+</svg>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1f5e394..72bca77 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 import CategoryIcon from "@/components/CategoryIcon";
 import Logo from "@/components/Logo";
 import Copyright from "@/components/Copyright";
@@ -25,23 +26,30 @@ export default function Home() {
         <div className="mainColumn font-[family-name:var(--font-jetbrains-mono)]">
           <div className="max-w-4xl mx-auto">
             <h2
-              className="text-xl sm:text-3xl tracking-wider uppercase mt-6 sm:mt-2 mb-8 text-left px-8"
+              className="flex items-center gap-1 text-xl sm:text-3xl tracking-wider uppercase mt-6 sm:mt-2 mb-8 text-left px-4"
               style={{ color: "var(--color-bc-red)" }}
             >
-              {">"} WHAT WE ARE WIRED FOR
+              <Image
+                src="/icons/chevron.svg"
+                alt=""
+                width={20}
+                height={20}
+                className="w-8 h-8"
+              />
+              <span>WHAT WE ARE WIRED FOR</span>
             </h2>
 
             {/* Row 1: Applied AI - Label Left, Items Right */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-2 sm:gap-8 mb-4 sm:mb-8 px-8">
               <div className="flex items-center pl-4">
-                <h3 className="text-lg sm:text-4xl font-semibold sm:font-bold uppercase text-[var(--color-bc-purple)]">
+                <h3 className="text-lg sm:text-3xl font-semibold sm:font-bold uppercase text-[var(--color-bc-purple)]">
                   APPLIED AI
                 </h3>
               </div>
               <div className="space-y-2">
                 {appliedAIAreas.map((area) => (
                   <Link key={area.slug} href={`/expertise/${area.slug}`}>
-                    <div className="flex items-center space-x-4 cursor-pointer transition-all duration-300 hover:bg-[var(--color-bc-beige)] group py-3 px-4">
+                    <div className="flex items-center space-x-4 cursor-pointer transition-all duration-300 hover:bg-[var(--color-bc-beige)] group py-3 px-4 rounded">
                       <div className="flex-shrink-0">
                         <CategoryIcon
                           slug={area.slug}
@@ -72,7 +80,7 @@ export default function Home() {
               <div className="space-y-2">
                 {productEngineeringAreas.map((area) => (
                   <Link key={area.slug} href={`/expertise/${area.slug}`}>
-                    <div className="flex items-center space-x-4 cursor-pointer transition-all duration-300 hover:bg-[var(--color-bc-beige)] group py-3 px-4">
+                    <div className="flex items-center space-x-4 cursor-pointer transition-all duration-300 hover:bg-[var(--color-bc-beige)] group py-3 px-4 rounded">
                       <div className="flex-shrink-0">
                         <CategoryIcon
                           slug={area.slug}
@@ -91,7 +99,7 @@ export default function Home() {
                 ))}
               </div>
               <div className="hidden sm:flex items-center justify-start pl-4">
-                <h3 className="text-lg sm:text-4xl font-bold uppercase text-[var(--color-bc-purple)]">
+                <h3 className="text-lg sm:text-3xl font-bold uppercase text-[var(--color-bc-purple)]">
                   PRODUCT ENGINEERING
                 </h3>
               </div>
@@ -105,12 +113,16 @@ export default function Home() {
                   className=""
                   aria-label="Explore our engineering principles"
                 >
-                  <div className="flex items-center justify-between gap-4 pl-6 pr-2 py-6 hover:bg-[var(--color-bc-beige)] group">
-                    <div>
-                      <h2 className="text-lg sm:text-3xl tracking-wider uppercase text-left flex items-center gap-4">
-                        <span style={{ color: "var(--color-bc-red)" }}>
-                          {">"}
-                        </span>
+                  <div className="flex items-center justify-between gap-4 pl-4 pr-2 py-4 hover:bg-[var(--color-bc-beige)] group mb-2 rounded ">
+                    <div >
+                      <h2 className="text-lg sm:text-3xl tracking-wider uppercase text-left flex items-center gap-1">
+                        <Image
+                          src="/icons/chevron.svg"
+                          alt=""
+                          width={20}
+                          height={20}
+                          className="w-8 h-8"
+                        />
                         <span className="font-semibold text-lg sm:text-2xl transition-colors duration-300 text-[var(--color-bc-text-black)] group-hover:text-[var(--color-bc-red)]">
                           OUR ENGINEERING PRINCIPLES
                         </span>
@@ -125,12 +137,16 @@ export default function Home() {
                 className=""
                 aria-label="Meet our leadership team"
               >
-                <div className="flex items-center justify-between gap-4 pl-6 pr-2 py-6 hover:bg-[var(--color-bc-beige)] group">
+                <div className="flex items-center justify-between gap-4 pl-4 pr-2 py-4 hover:bg-[var(--color-bc-beige)] group mb-2 rounded ">
                   <div>
-                    <h2 className="text-lg sm:text-3xl tracking-wider uppercase text-left flex items-center gap-4">
-                      <span style={{ color: "var(--color-bc-red)" }}>
-                        {">"}
-                      </span>
+                    <h2 className="text-lg sm:text-3xl tracking-wider uppercase text-left flex items-center gap-1">
+                      <Image
+                        src="/icons/chevron.svg"
+                        alt=""
+                        width={20}
+                        height={20}
+                        className="w-8 h-8"
+                      />
                       <span className="font-semibold text-lg sm:text-2xl transition-colors duration-300 text-[var(--color-bc-text-black)] group-hover:text-[var(--color-bc-red)]">
                         LEADERSHIP
                       </span>
diff --git a/src/components/NavigationalSidebar.tsx b/src/components/NavigationalSidebar.tsx
index 1c71519..a82a77e 100644
--- a/src/components/NavigationalSidebar.tsx
+++ b/src/components/NavigationalSidebar.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 import CategoryIcon from "@/components/CategoryIcon";
 import { appliedAIAreas, productEngineeringAreas } from "@/lib/expertise";
 import { SHOW_PRINCIPLES } from "@/lib/config";
@@ -13,16 +14,22 @@ export default function NavigationalSidebar({
   return (
     <div className="mt-6">
       <h2
-        className="text-lg sm:text-xl tracking-wider uppercase mb-6 text-left px-4 sm:px-6 flex items-center gap-2"
+        className="text-lg sm:text-xl tracking-wider uppercase mb-6 text-left px-2 flex items-center gap-1"
         style={{ color: "var(--color-bc-red)" }}
       >
-        <span>{">"}</span>
+        <Image
+          src="/icons/chevron.svg"
+          alt=""
+          width={20}
+          height={20}
+          className="w-6 h-6"
+        />
         <span>WHAT WE ARE WIRED FOR</span>
       </h2>
 
       {/* Applied AI Section */}
-      <div className="mb-6">
-        <h3 className="text-lg sm:text-xl font-bold uppercase mb-4 px-4 sm:px-6 text-[var(--color-bc-purple)]">
+      <div className="mb-8">
+        <h3 className="text-lg sm:text-xl font-bold uppercase mb-1 pl-8 pr-2 sm:px-8 text-[var(--color-bc-purple)]">
           APPLIED AI
         </h3>
         <div className="space-y-2">
@@ -31,7 +38,7 @@ export default function NavigationalSidebar({
             return (
               <Link key={area.slug} href={`/expertise/${area.slug}`}>
                 <div
-                  className={`flex items-center space-x-4 cursor-pointer transition-all duration-300 py-3 px-4 sm:px-6 group ${
+                  className={`flex items-center space-x-4 cursor-pointer transition-all duration-300 py-2.5 pl-8 pr-2 sm:pl-8 sm:pr-4 group ${
                     isActive
                       ? "bg-white text-[var(--color-bc-red)]"
                       : "hover:bg-white/50 text-[var(--color-bc-text-black)] hover:text-[var(--color-bc-red)]"
@@ -57,8 +64,8 @@ export default function NavigationalSidebar({
       </div>
 
       {/* Product Engineering Section */}
-      <div className="mb-6">
-        <h3 className="text-lg sm:text-xl font-bold uppercase mb-4 px-4 sm:px-6 text-[var(--color-bc-purple)]">
+      <div className="mb-8">
+        <h3 className="text-lg sm:text-xl font-bold uppercase mb-1 pl-8 pr-2 sm:px-8 text-[var(--color-bc-purple)]">
           PRODUCT ENGINEERING
         </h3>
         <div className="space-y-2">
@@ -67,7 +74,7 @@ export default function NavigationalSidebar({
             return (
               <Link key={area.slug} href={`/expertise/${area.slug}`}>
                 <div
-                  className={`flex items-center space-x-4 cursor-pointer transition-all duration-300 py-3 px-4 sm:px-6 group ${
+                  className={`flex items-center space-x-4 cursor-pointer transition-all duration-300 py-2.5 pl-8 pr-2 sm:pl-8 sm:pr-4 group ${
                     isActive
                       ? "bg-white text-[var(--color-bc-red)]"
                       : "hover:bg-white/50 text-[var(--color-bc-text-black)] hover:text-[var(--color-bc-red)]"
@@ -97,26 +104,40 @@ export default function NavigationalSidebar({
         {SHOW_PRINCIPLES && (
           <Link href="/principles">
             <div
-              className={`px-4 sm:px-6 py-2 cursor-pointer uppercase tracking-wider text-sm sm:text-lg transition-colors duration-300 ${
+              className={`flex items-center gap-1 px-4 sm:pl-2 sm:pr-4 py-3 cursor-pointer uppercase tracking-wider text-sm sm:text-lg transition-colors duration-300 ${
                 activeSlug === "principles"
                   ? "text-[var(--color-bc-red)]"
                   : "text-[var(--color-bc-text-black)] hover:text-[var(--color-bc-red)]"
               }`}
             >
-              OUR ENGINEERING PRINCIPLES
+            <Image
+              src="/icons/chevron.svg"
+              alt=""
+              width={20}
+              height={20}
+              className="w-6 h-6"
+            />
+            <span>OUR ENGINEERING PRINCIPLES</span>
             </div>
           </Link>
         )}
 
         <Link href="/leadership">
           <div
-            className={`px-4 sm:px-6 py-2 cursor-pointer uppercase tracking-wider text-sm sm:text-lg transition-colors duration-300 ${
+            className={`flex items-center gap-1 px-4 sm:pl-2 sm:pr-4 py-3 cursor-pointer uppercase tracking-wider text-sm sm:text-lg transition-colors duration-300 ${
               activeSlug === "leadership"
                 ? "text-[var(--color-bc-red)]"
                 : "text-[var(--color-bc-text-black)] hover:text-[var(--color-bc-red)]"
             }`}
           >
-            LEADERSHIP
+            <Image
+              src="/icons/chevron.svg"
+              alt=""
+              width={20}
+              height={20}
+              className="w-6 h-6"
+            />
+            <span>LEADERSHIP</span>
           </div>
         </Link>
       </div>