diwali banner, portfolio content changes, and some hero text changes and slider add on homepage

components/portfolio/PortfolioProjectOverview.tsx

@@ -0,0 +1,75 @@
+// components/PortfolioProjectOverview.tsx
+import { motion } from "framer-motion";
+import { ReactNode } from "react";
+
+interface PortfolioProjectOverviewProps {
+  icon: ReactNode;
+  title: string;
+  description?: string;
+  points?: string[];
+  borderColor?: string;
+  hoverColor?: string;
+}
+
+export function PortfolioProjectOverview({
+  icon,
+  title,
+  description,
+  points,
+  borderColor = "border-accent/20",
+  hoverColor = "accent",
+}: PortfolioProjectOverviewProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      whileHover={{
+        scale: 1.05,
+        y: -4,
+        transition: { duration: 0.3, ease: "easeOut" },
+      }}
+      transition={{ duration: 0.6 }}
+      viewport={{ once: true }}
+      className={`bg-card/30 rounded-2xl p-8 border-2 ${borderColor} cursor-pointer group 
+        hover:border-${hoverColor}/40 hover:bg-card/40 
+        hover:shadow-lg hover:shadow-${hoverColor}/10 
+        transition-all duration-300 ease-out`}
+    >
+      {/* Icon */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.8 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.6, delay: 0.2 }}
+        viewport={{ once: true }}
+        className="flex justify-start mb-6"
+      >
+        <div
+          className={`w-16 h-16 bg-background/20 backdrop-blur-sm rounded-full 
+            border border-border/30 flex items-center justify-center 
+            group-hover:border-${hoverColor}/50 group-hover:bg-${hoverColor}/10 
+            transition-all duration-300 ease-out`}
+        >
+          {icon}
+        </div>
+      </motion.div>
+
+      {/* Title */}
+      <h3 className="text-2xl font-semibold text-foreground mb-6">{title}</h3>
+
+      {/* Content */}
+      {description && (
+        <p className="text-muted-foreground leading-relaxed">{description}</p>
+      )}
+      {points && (
+        <div className="space-y-3">
+          {points.map((point, i) => (
+            <div key={i} className="flex items-start gap-3">
+              <span className="w-5 h-5 text-accent mt-0.5 flex-shrink-0">✔</span>
+              <span className="text-muted-foreground text-base">{point}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </motion.div>
+  );
+}