Docker config

app/components/TeamDetail/TeamMemberContent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const TeamMemberContent = ({ content }) => {
+  return (
+    <div className="">
+      <div className="prose prose-lg max-w-none">
+        {content.map((paragraph, index) => (
+          <div key={index}>
+            <p className="leading-relaxed text-base mb-6" style={{ color: '#555555' }}>
+              {paragraph}
+            </p>
+            {index < content.length - 1 && <div className="h-2"></div>}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TeamMemberContent;

app/components/TeamDetail/TeamMemberDetail.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import TeamMemberHero from './TeamMemberHero';
+import TeamMemberSidebar from './TeamMemberSidebar';
+import TeamMemberContent from './TeamMemberContent';
+
+const TeamMemberDetail = ({ memberData }) => {
+  return (
+    <div>
+      <TeamMemberHero memberName={memberData.name} />
+      
+      <section className="pt-12 pb-6">
+        <div className="container mx-auto max-w-none px-6">
+          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+            {/* Sidebar - Member Info */}
+            <div className="lg:col-span-1">
+              <TeamMemberSidebar memberData={memberData} />
+            </div>
+            
+            {/* Main Content */}
+            <div className="lg:col-span-3">
+              <TeamMemberContent content={memberData.content} />
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default TeamMemberDetail;

app/components/TeamDetail/TeamMemberHero.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Link from 'next/link';
+
+const TeamMemberHero = ({ memberName }) => {
+  return (
+    <section 
+      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[140px]" 
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
+    >
+      {/* Breadcrumb */}
+      <div className="relative z-10 mb-2 sm:mb-1 pt-2 sm:pt-0 sm:-mt-3 lg:-mt-3">
+        <div className="container mx-auto max-w-none px-4">
+          <nav className="flex flex-wrap items-center gap-1 sm:gap-2 text-xs sm:text-sm lg:text-sm">
+            <Link href="/" className="text-white hover:text-yellow-400 underline whitespace-nowrap">Home</Link>
+            <span className="text-white flex-shrink-0">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <Link href="/our-team" className="text-white hover:text-yellow-400 underline whitespace-nowrap">Team Members</Link>
+            <span className="text-white flex-shrink-0">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <span className="text-white">{memberName}</span>
+          </nav>
+        </div>
+      </div>
+      
+      {/* Page Title */}
+      <div className="relative z-10 text-center pb-2 sm:pb-0 sm:-mt-2 lg:mt-4">
+        <h1 className="text-lg sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl font-bold text-white mb-2 px-4 leading-tight">
+          {memberName}
+        </h1>
+        <div className="w-12 sm:w-14 md:w-16 lg:w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default TeamMemberHero;

app/components/TeamDetail/TeamMemberSidebar.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+const TeamMemberSidebar = ({ memberData }) => {
+  return (
+    <div className="lg:sticky lg:top-8">
+      <div className="rounded-3xl overflow-hidden" style={{ backgroundColor: '#f2fcfc' }}>
+        {/* Profile Image */}
+        <div className="relative">
+          <img 
+            src={memberData.image} 
+            alt={memberData.name} 
+            className="w-full h-80 object-cover"
+          />
+        </div>
+        
+        {/* Member Info */}
+        <div className="p-6">
+          <div className="text-left">
+            <h2 className="text-3xl font-normal mb-2" style={{ color: '#555555' }}>
+              {memberData.name}
+            </h2>
+            <h4 className="text-base text-teal-600 mb-6 font-normal">
+              {memberData.position}
+            </h4>
+            
+            {/* LinkedIn Button */}
+            {memberData.linkedinUrl && (
+              <a 
+                href={memberData.linkedinUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-colors duration-300"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clipRule="evenodd" />
+                </svg>
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamMemberSidebar;