feat: updated home section like projects section card, referance card

components/home-hero.tsx

@@ -31,7 +31,7 @@ export function HomeHero({ news }: HomeHeroProps) {
   const router = useRouter();
 
   return (
-    <section className="space-y-4">
+    <section>
       <div className="relative grid min-h-[150px] overflow-hidden border-b border-border py-4 sm:grid-cols-[1fr_180px] sm:py-5">
         <div className="flex max-w-2xl flex-col justify-center gap-2">
           <Typography
@@ -105,7 +105,7 @@ export function HomeHero({ news }: HomeHeroProps) {
         </div>
       </div>
 
-      <section className="space-y-3">
+      <section className="space-y-3 pt-12 md:pt-14">
         <div className="flex items-center justify-between gap-4">
           <Typography
             variant="h3"

components/home-projects-section.tsx

@@ -12,10 +12,10 @@ export function HomeProjectsSection() {
   const t = useTranslations("Home");
   const locale = useLocale();
   const router = useRouter();
-  const projects = WEB_APPS.slice(0, 4);
+  const projects = WEB_APPS.slice(0, 5);
 
   return (
-    <section className="space-y-3">
+    <section className="space-y-3 pt-12 md:pt-14">
       <div className="flex items-center justify-between gap-4">
         <Typography
           variant="h3"
@@ -41,7 +41,7 @@ export function HomeProjectsSection() {
       </div>
 
       <div className="relative overflow-hidden py-1">
-        <div className="flex w-max items-stretch gap-3">
+        <div className="flex w-max items-stretch gap-2">
           {projects.map((project) => (
             <ImageCard
               key={project.id}
@@ -54,14 +54,14 @@ export function HomeProjectsSection() {
                   : undefined
               }
               href={project.href}
-              className="aspect-square w-72 shrink-0 rounded-sm border-border"
+              className="aspect-square w-56 shrink-0 rounded-sm border-border md:w-[calc((100vw-8rem)/4)] md:max-w-56"
             />
           ))}
         </div>
 
         <div
           aria-hidden="true"
-          className="pointer-events-none absolute top-0 right-0 h-full w-24 bg-linear-to-l from-background via-background/80 to-transparent"
+          className="pointer-events-none absolute top-0 right-0 h-full w-24 bg-gradient-to-l from-background via-background/80 to-transparent"
         />
       </div>
     </section>

components/home-videos-section.tsx

@@ -10,7 +10,7 @@ export function HomeVideosSection() {
   const t = useTranslations("Content");
 
   return (
-    <section className="space-y-3">
+    <section className="space-y-3 pt-12 md:pt-14">
       <div className="flex items-center justify-between gap-4">
         <Typography
           variant="h3"

components/reference-cards.tsx

@@ -8,9 +8,15 @@ type ReferenceCardsProps = {
   className?: string;
   cardClassName?: string;
   lineClamp?: boolean;
+  showRating?: boolean;
 };
 
-export function ReferenceCards({ className, cardClassName, lineClamp }: ReferenceCardsProps) {
+export function ReferenceCards({
+  className,
+  cardClassName,
+  lineClamp,
+  showRating = true,
+}: ReferenceCardsProps) {
   const locale = useLocale();
   const hoverClassName =
     "transition-colors duration-200 group-hover:border-red-600/40 group-hover:bg-muted/30";
@@ -26,7 +32,7 @@ export function ReferenceCards({ className, cardClassName, lineClamp }: Referenc
             author={item.author}
             role={getLocalizedValue(item.role, locale)}
             avatar={item.avatar}
-            rating={item.rating}
+            rating={showRating ? item.rating : undefined}
             className={`flex flex-col rounded-sm ${lineClamp ? "[&_blockquote]:line-clamp-4" : ""} ${hoverClassName} ${cardClassName || "w-70 shrink-0"}`}
           />
         );

components/references-section.tsx

@@ -11,7 +11,7 @@ export function ReferencesSection() {
   const router = useRouter();
 
   return (
-    <section className="space-y-3">
+    <section className="space-y-3 pt-12 md:pt-14">
       <div className="flex items-center justify-between gap-4">
         <Typography
           variant="h3"
@@ -39,8 +39,8 @@ export function ReferencesSection() {
       <div className="relative overflow-hidden py-1">
         {/* We use two sets of cards for seamless infinite marquee effect */}
         <div className="flex w-max items-start gap-4 animate-marquee pause-on-hover">
-          <ReferenceCards className="flex items-start gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
-          <ReferenceCards className="flex items-start gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
+          <ReferenceCards className="flex items-start gap-4 shrink-0" lineClamp={true} showRating={false} cardClassName="w-80" />
+          <ReferenceCards className="flex items-start gap-4 shrink-0" lineClamp={true} showRating={false} cardClassName="w-80" />
         </div>
         
         <div