feat: enhance ProjectCard and Projects components with new styles and improved structure

style: update opacity in Home styles for better visibility
refactor: remove unnecessary comments in Projects component for cleaner code

src/components/ProjectCard.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react'
 
+import style from '@styles/Project.module.scss'
+
 export interface ProjectTech {
   name: string;
   icon: string;
@@ -29,41 +31,40 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, onOpenDetails
   
   return (
     <div 
-      className={`card h-100 ${project.featured ? 'featured-card' : ''}`} 
+      className={`card ${style.card} h-100 ${project.featured ? style.featuredCard : ''}`} 
       data-category={project.category.join(',')}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
       <div className="position-relative">
-        <img src={project.image} className="card-img-top" alt={project.title} />
-        <div className="category-badge">{project.category[0]}</div>
-        
+        <img src={project.image} className={project.featured ? `img-fluid rounded-start h-100 w-100 object-fit-cover` : style.cardImgTop} alt={project.title} />
+        <div className={style.categoryBadge}>{project.category[0]}</div>
         {project.featured && (
-          <div className="featured-badge">
+          <div className={style.featuredBadge}>
             <i className="fas fa-star"></i>
             <span>Featured</span>
           </div>
         )}
       </div>
-      <div className="card-body d-flex flex-column">
-        <h3 className="card-title">{project.title}</h3>
-        <p className="card-text">
+      <div className={`${style.cardBody} d-flex flex-column`}>
+        <h3 className={style.cardTitle}>{project.title}</h3>
+        <p className={style.cardText}>
           {project.description}
         </p>
         <div>
-          <h4 className="tech-title">// TECHNOLOGIES_USED</h4>
-          <div className="tech-stack">
+          <h4 className={style.techTitle}>// TECHNOLOGIES_USED</h4>
+          <div className={style.techStack}>
             {project.technologies.map((tech, index) => (
-              <span className="tech-item" key={index}>
+              <span className={style.techItem} key={index}>
                 <i className={tech.icon}></i>
                 <span>{tech.name}</span>
               </span>
             ))}
           </div>
         </div>
-        <div className="mt-auto d-flex gap-2 flex-wrap project-links">
+        <div className={`mt-auto d-flex gap-2 flex-wrap project-links`}>
           <button 
-            className="btn btn-outline-secondary" 
+            className={`btn btn-outline-secondary`} 
             onClick={() => onOpenDetails(project.id)}
           >
             <i className="fas fa-info-circle me-2"></i>
@@ -71,14 +72,14 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, onOpenDetails
           </button>
           
           {project.links.github && (
-            <a href={project.links.github} className="btn btn-outline-secondary">
+            <a href={project.links.github} className={`btn btn-outline-secondary`}>
               <i className="fab fa-github me-2"></i>
               View Code
             </a>
           )}
           
           {project.links.demo && (
-            <a href={project.links.demo} className="btn btn-outline-secondary">
+            <a href={project.links.demo} className={`btn btn-outline-secondary`}>
               <i className="fas fa-external-link-alt me-2"></i>
               Live Demo
             </a>