added fn for sort team data by Firstname

src/app/team/page.js

@@ -1,10 +1,12 @@
 import TitleWithSubtitle from '@/components/elements/TitleWithSubtitle';
-import PillButton from '@/components/elements/PillButton';
-import SpeakerCard from '@/components/elements/SpeakerCard';
 import { team } from '@/data/data';
 import TeamMemberCard from '@/components/elements/TeamMemberCard';
+import { sortTeamByFirstName } from '@/lib/utils';
 
 export default function Home() {
+
+  const sortedTeam = sortTeamByFirstName(team); // Use the imported function
+
   return (
     <div id="speakers" className="flex flex-col gap-6 text-center items-center justify-center my-24">
       <TitleWithSubtitle
@@ -14,7 +16,7 @@ export default function Home() {
         subTitleClassName="max-w-xl" />
 
       <ul className=" py-6 grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-7xl mx-auto">
-        {team.map(member => (
+        {sortedTeam.map(member => (
           <li key={member.name} className="flex items-start">
             <TeamMemberCard member={member} />
           </li>

src/lib/utils.js

@@ -1,3 +1,13 @@
 export function clsx(...classes) {
   return classes.filter(Boolean).join(' ');
 }
+
+export function sortTeamByFirstName(team) {
+  return team.sort((a, b) => {
+    const firstNameA = a.name.split(' ')[0].toLowerCase();
+    const firstNameB = b.name.split(' ')[0].toLowerCase();
+    if (firstNameA < firstNameB) return -1;
+    if (firstNameA > firstNameB) return 1;
+    return 0;
+  });
+}