bender/4cd4ee6d-41ad-41d9-9a3c-decae07ac257
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_8 into main

Browse Source 
Merge version_8 into main
This commit was merged in pull request #10.
This commit is contained in:
bender
2026-03-14 10:56:18 +00:00
parent 4c323823b3 2654f4064f
commit 6ba976cb34
1 changed files with 79 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/app/page.tsx
View File

@@ -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">