feat: add unique keys to motion components for improved rendering

src/components/About.tsx

@@ -39,6 +39,7 @@ const About = () => {
     <section id="about" className="about">
       <div className="container">
         <motion.div
+          key="about-header"
           className="section-header"
           initial={{ opacity: 0, y: 50 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -53,6 +54,7 @@ const About = () => {
 
         <div className="about-content">
           <motion.div
+            key="about-text"
             className="about-text"
             variants={containerVariants}
             initial="hidden"
@@ -82,6 +84,7 @@ const About = () => {
           </motion.div>
 
           <motion.div
+            key="about-stats"
             className="about-stats"
             variants={containerVariants}
             initial="hidden"
@@ -90,7 +93,7 @@ const About = () => {
           >
             {stats.map((stat, index) => (
               <motion.div
-                key={index}
+                key={`stat-${index}`}
                 className="stat-card"
                 variants={itemVariants}
                 whileHover={{
@@ -110,6 +113,7 @@ const About = () => {
         </div>
 
         <motion.div
+          key="about-highlight"
           className="about-highlight"
           initial={{ opacity: 0, scale: 0.9 }}
           whileInView={{ opacity: 1, scale: 1 }}