diff --git a/src/app/page.tsx b/src/app/page.tsx
index 050a199..babbcee 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -74,25 +74,85 @@ export default function LandingPage() {
       </div>
 
       <div id="metrics" data-section="metrics">
-        <MetricCardOne
-          title="Our Impact by the Numbers"
-          description="Measurable success metrics that demonstrate our commitment to excellence and client satisfaction."
-          tag="Performance Metrics"
-          tagIcon={TrendingUp}
-          tagAnimation="slide-up"
-          gridVariant="bento-grid"
-          animationType="scale-rotate"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          metrics={[
-            { id: "projects", value: "500+", title: "Projects Completed", description: "Successful digital projects across diverse industries", icon: CheckCircle },
-            { id: "clients", value: "200+", title: "Happy Clients", description: "Long-term partnerships and satisfied customers", icon: Award },
-            { id: "awards", value: "45+", title: "Industry Awards", description: "Recognition for creative excellence", icon: Sparkles },
-            { id: "growth", value: "300%", title: "Avg. Client Growth", description: "Average revenue increase for our clients", icon: TrendingUp }
-          ]}
-          className="w-full"
-          containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
-        />
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="bg-[var(--background-accent)] rounded-[16px] p-[30px] shadow-md hover:shadow-lg transition-shadow duration-300 group relative overflow-hidden cursor-pointer" style={{
+              perspective: '1000px'
+            }}>
+              <div className="absolute inset-0 pointer-events-none" style={{
+                background: 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 80%)'
+              }} />
+              <div className="relative z-10">
+                <div className="text-4xl font-bold text-[var(--primary-cta)] mb-2">200+</div>
+                <div className="text-sm text-gray-400">Happy Clients</div>
+              </div>
+            </div>
+            <div className="bg-[var(--background-accent)] rounded-[16px] p-[30px] shadow-md hover:shadow-lg transition-shadow duration-300 group relative overflow-hidden cursor-pointer" style={{
+              perspective: '1000px'
+            }}>
+              <div className="absolute inset-0 pointer-events-none" style={{
+                background: 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 80%)'
+              }} />
+              <div className="relative z-10">
+                <div className="text-4xl font-bold text-[var(--primary-cta)] mb-2">500+</div>
+                <div className="text-sm text-gray-400">Projects Completed</div>
+              </div>
+            </div>
+            <div className="bg-[var(--background-accent)] rounded-[16px] p-[30px] shadow-md hover:shadow-lg transition-shadow duration-300 group relative overflow-hidden cursor-pointer" style={{
+              perspective: '1000px'
+            }}>
+              <div className="absolute inset-0 pointer-events-none" style={{
+                background: 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 80%)'
+              }} />
+              <div className="relative z-10">
+                <div className="text-4xl font-bold text-[var(--primary-cta)] mb-2">99%</div>
+                <div className="text-sm text-gray-400">Uptime</div>
+              </div>
+            </div>
+          </div>
+          <style>{`
+            @media (max-width: 768px) {
+              .grid {
+                grid-template-columns: repeat(2, 1fr);
+              }
+            }
+            @media (max-width: 640px) {
+              .grid {
+                grid-template-columns: 1fr;
+              }
+            }
+          `}</style>
+        </div>
+        <script>{`
+          (function() {
+            const cards = document.querySelectorAll('[data-section="metrics"] .bg-\\[var\\(--background-accent\\)\\]');
+            cards.forEach(card => {
+              card.addEventListener('mousemove', (e) => {
+                const rect = card.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const xPercent = (x / rect.width) * 100;
+                const yPercent = (y / rect.height) * 100;
+                
+                card.style.setProperty('--mouse-x', xPercent + '%');
+                card.style.setProperty('--mouse-y', yPercent + '%');
+                
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+                const angleX = (y - centerY) * 0.03;
+                const angleY = (centerX - x) * 0.03;
+                
+                card.style.transform = \`perspective(1000px) rotateX(\${angleX}deg) rotateY(\${angleY}deg) translateZ(10px)\`;
+                card.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+              });
+              
+              card.addEventListener('mouseleave', () => {
+                card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
+                card.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+              });
+            });
+          })();
+        `}</script>
       </div>
 
       <div id="about" data-section="about">