feat: Introduce new icons and agent images, and update FeaturesSection to display agent cards and refined feature details.

public/assets/icons/hourglass-icon.svg

@@ -0,0 +1,3 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.62955 0L4.47682 1.42062C4.38204 2.19628 4.02992 2.91777 3.47677 3.46975C2.92361 4.02173 2.20135 4.37232 1.42545 4.46548L0 4.61024V30.5282L1.38409 30.7127C3.01159 30.9259 4.23182 32.084 4.48636 33.6637L4.70432 35H30.6568L30.7745 33.5396C30.8439 32.8102 31.1605 32.1264 31.6717 31.6015C32.183 31.0767 32.8583 30.7423 33.5857 30.6538L35 30.4948V4.69138L33.6636 4.47661C32.0902 4.22208 30.8748 2.96532 30.7093 1.42221L30.5566 0H4.62955ZM7.32455 3.18167H27.8632C28.1843 4.10906 28.7049 4.95476 29.3882 5.65921C30.0715 6.36367 30.901 6.90975 31.8182 7.25899V27.8206C30.9112 28.1553 30.09 28.6876 29.4139 29.3787C28.7379 30.0698 28.224 30.9026 27.9093 31.8167H7.27045C6.91788 30.9017 6.36912 30.075 5.66274 29.3947C4.95637 28.7145 4.10955 28.1973 3.18182 27.8794V7.31785C4.14158 6.9891 5.01364 6.44564 5.73156 5.72885C6.44948 5.01207 6.99431 4.14089 7.32455 3.18167ZM8.39205 7.95418C8.085 7.95418 7.79068 8.56984 8.33318 8.70983C9.34023 8.97391 10.0927 9.36367 10.0927 10.7875V17.2749C10.0927 22.6217 10.0784 24.6405 9.60432 25.4677C9.1 26.1295 8.89795 26.1327 8.27114 26.3506C7.91477 26.3506 7.78591 27.0442 8.27114 27.0442C10.5032 27.0442 9.42614 26.917 11.6598 26.917C13.8584 26.917 12.9484 27.0442 15.1073 27.0442C15.4764 27.0442 15.4095 26.5192 15.1073 26.4158C13.7073 25.929 13.7025 25.7572 13.5959 25.5966C12.958 24.5975 13.2332 20.1814 13.2332 18.258C13.2332 17.9176 13.6277 17.4372 14.0827 17.4372H20.9173C21.3723 17.4372 21.7668 17.9176 21.7668 18.258C21.7668 20.1814 22.042 24.5959 21.4025 25.5966C21.2975 25.7636 21.2943 25.9306 19.8911 26.4158C19.592 26.5192 19.53 27.0442 19.8911 27.0442C22.05 27.0442 21.14 26.917 23.3418 26.917C25.5739 26.917 24.4968 27.0442 26.7289 27.0442C27.2093 27.0442 27.0852 26.3506 26.7289 26.3506C26.0957 26.1327 25.9 26.1231 25.3957 25.4693C24.9168 24.6421 24.9073 22.6217 24.9073 17.2765V10.7859C24.9073 9.37003 25.6582 8.97073 26.6668 8.70824C27.2141 8.56825 26.9055 7.95259 26.6032 7.95259C24.36 7.95259 25.3384 8.07986 23.0936 8.07986C21.0843 8.07986 22.0802 7.95259 20.0709 7.95259C19.8673 7.95259 19.5459 8.48553 20.0073 8.6462C20.3095 8.7496 21.708 8.88323 21.708 11.1661C21.708 14.0885 21.7175 14.6437 21.6443 15.4773C21.6443 15.5616 21.5011 16.2981 20.8552 16.2981H14.1448C13.4989 16.2981 13.3557 15.56 13.3557 15.4773C13.2809 14.6452 13.292 14.0885 13.292 11.1661C13.292 8.88323 14.692 8.74801 14.9927 8.6462C15.4541 8.48553 15.1343 7.95259 14.9291 7.95259C12.9214 7.95259 13.9141 8.07986 11.9032 8.07986C9.66 8.07986 10.6368 7.95259 8.39205 7.95259V7.95418Z" fill="#E58625"/>
+</svg>

public/assets/icons/location-filled-icon.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.5 0C4.185 0 1.5 2.685 1.5 6C1.5 10.5 7.5 15 7.5 15C7.5 15 13.5 10.5 13.5 6C13.5 2.685 10.815 0 7.5 0ZM7.5 8.25C6.255 8.25 5.25 7.245 5.25 6C5.25 4.755 6.255 3.75 7.5 3.75C8.745 3.75 9.75 4.755 9.75 6C9.75 7.245 8.745 8.25 7.5 8.25Z" fill="#00293D"/>
+</svg>

public/assets/icons/star-orange-icon.svg

@@ -0,0 +1,3 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5179 5.964C14.735 1.9881 15.8427 0 17.5 0C19.1573 0 20.265 1.9881 22.4821 5.964L23.0563 6.99306C23.6862 8.12349 24.0008 8.68878 24.4912 9.06158C24.9811 9.43439 25.5934 9.57252 26.8185 9.84923L27.9318 10.101C32.2366 11.0759 34.3872 11.5625 34.8999 13.209C35.4108 14.8542 33.9442 16.5709 31.0096 20.0027L30.2503 20.89C29.4174 21.8647 28.999 22.3529 28.8118 22.9548C28.6246 23.5588 28.6873 24.2096 28.8136 25.51L28.929 26.6948C29.372 31.2745 29.594 33.5634 28.2534 34.5803C26.9129 35.597 24.8973 34.6696 20.8688 32.8145L19.8238 32.335C18.6795 31.8067 18.1073 31.544 17.5 31.544C16.8927 31.544 16.3205 31.8067 15.1762 32.335L14.1333 32.8145C10.1027 34.6696 8.08714 35.597 6.74831 34.582C5.40596 33.5634 5.62802 31.2745 6.07098 26.6948L6.18641 25.5117C6.31268 24.2096 6.37537 23.5588 6.18641 22.9567C6.00096 22.3529 5.58262 21.8647 4.74973 20.8916L3.99037 20.0027C1.05577 16.5726 -0.410792 14.856 0.100133 13.209C0.611351 11.5625 2.7652 11.0741 7.07027 10.101L8.18324 9.84923C9.40664 9.57252 10.0172 9.43439 10.5088 9.06158C11.0006 8.68878 11.3138 8.12349 11.9437 6.99306L12.5179 5.964Z" fill="#FFDE21"/>
+</svg>

public/assets/icons/trusted-people-icon.svg

@@ -0,0 +1,4 @@
+<svg width="31" height="37" viewBox="0 0 31 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 12.9531C31.001 10.724 30.313 8.53236 29.0028 6.59044C27.6925 4.64853 25.8043 3.02208 23.521 1.86853C21.2376 0.714987 18.6364 0.0734203 15.9692 0.005936C13.302 -0.0615483 10.6591 0.447335 8.2964 1.48333C5.93366 2.51932 3.93109 4.04733 2.48256 5.91944C1.03402 7.79155 0.188581 9.94436 0.0280702 12.1695C-0.132441 14.3946 0.397417 16.6166 1.56635 18.6205C2.73529 20.6244 4.50371 22.3422 6.70043 23.6077L2.44752e-06 33.3005L4.99543 33.4725L7.67029 37L15.345 25.894L15.5 25.9014C15.5775 25.9051 15.6019 25.8959 15.655 25.894L23.3297 37L26.0577 33.5483L31 33.3005L24.2996 23.6077C26.3668 22.4187 28.057 20.8275 29.2242 18.9714C30.3915 17.1152 31.001 15.0498 31 12.9531ZM4.42857 12.9531C4.42857 11.1239 5.0779 9.3357 6.29445 7.81474C7.51099 6.29378 9.24011 5.10834 11.2631 4.40832C13.2862 3.7083 15.5123 3.52514 17.6599 3.88201C19.8076 4.23888 21.7803 5.11974 23.3287 6.41321C24.877 7.70668 25.9315 9.35466 26.3587 11.1487C26.7859 12.9428 26.5666 14.8025 25.7287 16.4925C24.8907 18.1825 23.4716 19.6269 21.651 20.6432C19.8303 21.6595 17.6897 22.2019 15.5 22.2019C12.5637 22.2019 9.74761 21.2275 7.67132 19.493C5.59502 17.7585 4.42857 15.406 4.42857 12.9531Z" fill="#638559"/>
+<path d="M15.5022 18.497C19.171 18.497 22.1451 16.0125 22.1451 12.9477C22.1451 9.88294 19.171 7.39844 15.5022 7.39844C11.8335 7.39844 8.85938 9.88294 8.85938 12.9477C8.85938 16.0125 11.8335 18.497 15.5022 18.497Z" fill="#638559"/>
+</svg>

public/assets/icons/verified-badge-icon.svg

@@ -0,0 +1,3 @@
+<svg width="37" height="35" viewBox="0 0 37 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6666 35L9.50028 29.6667L3.5 28.3333L4.08343 22.1667L0 17.5L4.08343 12.8333L3.5 6.66671L9.50028 5.33329L12.6666 0L18.3334 2.41657L24.0003 0L27.1666 5.33329L33.1669 6.66671L32.5834 12.8333L36.6666 17.5L32.5834 22.1667L33.1669 28.3333L27.1666 29.6667L24.0003 35L18.3334 32.5834L12.6666 35ZM16.5834 23.4167L26 14L23.6669 11.5833L16.5834 18.6666L13 15.1666L10.6669 17.5L16.5834 23.4167Z" fill="#1DA1F2"/>
+</svg>

src/components/home/FeaturesSection.tsx

@@ -1,76 +1,207 @@
 'use client';
 
+import Image from 'next/image';
+
 const features = [
   {
-    icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-    ),
+    icon: '/assets/icons/hourglass-icon.svg',
     title: 'Hire Quickly',
-    description: 'Connect with experienced local real estate agents who match your needs and preferences. Get answers quickly and move forward on your property decisions.',
+    description: 'Connect with experienced local real estate agents who match your needs and preferences. Our simple process helps you get started quickly and move forward without delays or unnecessary complexity.',
   },
   {
-    icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-      </svg>
-    ),
+    icon: '/assets/icons/verified-badge-icon.svg',
     title: 'Verified Agents',
-    description: 'All agents are carefully vetted and background checked to ensure that you work with professionals who meet quality and reliability standards.',
+    description: 'All agents are carefully identity-verified and background-checked to ensure trust and safety. You can confidently work with professionals who meet quality and reliability standards.',
   },
   {
-    icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-      </svg>
-    ),
+    icon: '/assets/icons/star-orange-icon.svg',
     title: 'Top Rated',
-    description: 'Find highly rated agents based on positive client feedback. Their credentials and contributions have made them standout performers in the industry.',
+    description: 'Work with highly rated agents known for strong expertise and positive client feedback. Their consistent performance helps you make informed and confident property decisions.',
   },
   {
-    icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-      </svg>
-    ),
+    icon: '/assets/icons/trusted-people-icon.svg',
     title: 'Trusted by Thousands',
-    description: 'Thousands of buyers, sellers, and investors have relied on our platform. Our professionals help people navigate property tax-free gift exchanges.',
+    description: 'Thousands of buyers, sellers, and renters trust our platform to find reliable agents. Our professionals help people navigate property journeys with confidence and ease.',
   },
 ];
 
-export function FeaturesSection() {
+const agents = [
+  {
+    name: 'Anderson',
+    role: 'Rental & Investment Consultant',
+    rating: '4.9',
+    location: 'New York',
+    experience: '7+ years in the real estate industry.',
+    image: '/assets/images/agent-anderson.jpg',
+    position: 'top-left',
+  },
+  {
+    name: 'Deepak',
+    role: 'Rental & Investment Consultant',
+    rating: '4.9',
+    location: 'New York',
+    experience: '7+ years in the real estate industry.',
+    image: '/assets/images/agent-deepak.jpg',
+    position: 'top-right',
+  },
+  {
+    name: 'Daniel',
+    role: 'Rental & Investment Consultant',
+    rating: '4.9',
+    location: 'New York',
+    experience: '7+ years in the real estate industry.',
+    image: '/assets/images/agent-daniel.jpg',
+    position: 'bottom-center',
+  },
+];
+
+function AgentCard({ agent, className = '' }: { agent: typeof agents[0]; className?: string }) {
   return (
-    <section className="py-16 md:py-24 bg-white">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Section Header */}
-        <div className="text-center mb-12">
-          <h2 className="text-3xl md:text-4xl font-bold text-[#00293d] mb-4">
-            Find Trusted Real Estate Professionals On Demand
-          </h2>
-          <p className="text-gray-600 max-w-2xl mx-auto">
-            Quickly connect with the right agents exactly when you need them.
-          </p>
+    <div className={`bg-white border border-[#00293d]/10 rounded-[15px] w-[254px] overflow-hidden ${className}`}>
+      {/* Agent Image */}
+      <div className="h-[161px] w-full overflow-hidden rounded-t-[15px]">
+        <Image
+          src={agent.image}
+          alt={agent.name}
+          width={254}
+          height={161}
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      {/* Agent Info */}
+      <div className="p-4">
+        {/* Name */}
+        <h4 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293d]">
+          {agent.name}
+        </h4>
+
+        {/* Role */}
+        <p className="font-fractul font-normal text-[14px] leading-[17px] text-[#00293d] mt-1">
+          {agent.role}
+        </p>
+
+        {/* Verified & Rating */}
+        <div className="flex items-center gap-4 mt-2">
+          <div className="flex items-center gap-1">
+            <Image
+              src="/assets/icons/verified-icon.svg"
+              alt="Verified"
+              width={14}
+              height={14}
+            />
+            <span className="font-serif font-medium text-[14px] leading-[19px] text-[#00293d]">
+              Verified Agent
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Image
+              src="/assets/icons/star-filled-icon.svg"
+              alt="Rating"
+              width={14}
+              height={14}
+            />
+            <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293d]">
+              {agent.rating} Rating
+            </span>
+          </div>
         </div>
 
-        {/* Features Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-          {features.map((feature, index) => (
-            <div
-              key={index}
-              className="text-center p-6 rounded-xl hover:bg-[#f5f9f8] transition-colors"
-            >
-              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#c4d9d4]/30 text-[#00293d] mb-4">
-                {feature.icon}
-              </div>
-              <h3 className="text-xl font-bold text-[#00293d] mb-3">
-                {feature.title}
-              </h3>
-              <p className="text-gray-600 text-sm leading-relaxed">
-                {feature.description}
+        {/* Location */}
+        <div className="flex items-center gap-1 mt-2">
+          <Image
+            src="/assets/icons/location-filled-icon.svg"
+            alt="Location"
+            width={15}
+            height={15}
+          />
+          <span className="font-serif font-medium text-[14px] leading-[19px] text-[#00293d]">
+            {agent.location}
+          </span>
+        </div>
+
+        {/* Experience */}
+        <p className="mt-2 text-[14px] leading-[19px] text-[#00293d]">
+          <span className="font-serif font-bold">Experience:</span>
+          <span className="font-serif font-normal"> {agent.experience}</span>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function FeaturesSection() {
+  return (
+    <section className="py-16 md:py-20 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col lg:flex-row gap-12 lg:gap-8">
+          {/* Left Side - Title & Features */}
+          <div className="lg:w-1/2">
+            {/* Section Header */}
+            <div className="mb-8">
+              <h2 className="font-fractul font-bold text-[32px] md:text-[40px] leading-[1.2] text-[#00293d] mb-4">
+                Find Trusted Real Estate Professionals On Demand
+              </h2>
+              <p className="font-fractul font-medium text-[18px] md:text-[20px] leading-[1.4] text-[#00293d]">
+                Quickly connect with the right agents exactly when you need them.
               </p>
             </div>
-          ))}
+
+            {/* Features Grid - 2x2 */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {features.map((feature, index) => (
+                <div
+                  key={index}
+                  className="border border-[#00293d]/10 rounded-[15px] p-5"
+                >
+                  <div className="mb-3">
+                    <Image
+                      src={feature.icon}
+                      alt={feature.title}
+                      width={35}
+                      height={35}
+                    />
+                  </div>
+                  <h3 className="font-fractul font-semibold text-[20px] leading-[24px] text-[#00293d] mb-2">
+                    {feature.title}
+                  </h3>
+                  <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293d]">
+                    {feature.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right Side - Agent Cards */}
+          <div className="lg:w-1/2 relative min-h-[650px] hidden lg:block">
+            {/* Anderson - Top Left */}
+            <AgentCard
+              agent={agents[0]}
+              className="absolute top-0 left-0 shadow-lg z-10"
+            />
+
+            {/* Deepak - Top Right, offset down */}
+            <AgentCard
+              agent={agents[1]}
+              className="absolute top-[170px] right-0 shadow-lg z-20"
+            />
+
+            {/* Daniel - Bottom Left, overlapping */}
+            <AgentCard
+              agent={agents[2]}
+              className="absolute top-[320px] left-[60px] shadow-lg z-30"
+            />
+          </div>
+
+          {/* Mobile Agent Cards - Horizontal Scroll */}
+          <div className="lg:hidden overflow-x-auto pb-4">
+            <div className="flex gap-4 min-w-max">
+              {agents.map((agent, index) => (
+                <AgentCard key={index} agent={agent} className="shadow-lg flex-shrink-0" />
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </section>