-
+
Why teams choose us for{' '}
@@ -43,58 +103,96 @@ const ValuePillars = () => {
We handle the complexity so you can focus on what you do best.
-
+
{pillars.map((pillar, index) => {
const Icon = pillar.icon;
const isReverse = index % 2 === 1;
-
+ const itemRef = useRef(null);
+ const isInView = useInView(itemRef, { once: true, margin: "-100px" });
+
return (
-
+
{/* Content */}
-
+
{pillar.number}
-
-
+
+
-
+
-
+
{pillar.title}
-
+
{pillar.description}
-
-
window.scrollTo(0, 0)}
- >
-
Learn more
-
-
+
+
+ window.scrollTo(0, 0)}
+ >
+ Learn more
+
+
+
+
+
- {/* Image */}
-
+ {/* Image with 3D Tilt Effect */}
+
-
+
+
+ {/* Simplified shine effect on hover */}
+
+
+
+
);
})}
diff --git a/src/index.css b/src/index.css
index fb1bdcf..0123f34 100644
--- a/src/index.css
+++ b/src/index.css
@@ -88,11 +88,36 @@
scroll-behavior: smooth;
}
+ /* Accessibility: Focus visible styles */
+ *:focus-visible {
+ outline: 2px solid hsl(var(--neon));
+ outline-offset: 3px;
+ border-radius: 4px;
+ }
+
+ /* Skip link for keyboard navigation */
+ .skip-link {
+ position: absolute;
+ top: -40px;
+ left: 0;
+ background: hsl(var(--neon));
+ color: hsl(var(--background));
+ padding: 8px 16px;
+ text-decoration: none;
+ z-index: 100;
+ font-weight: 600;
+ border-radius: 0 0 8px 0;
+ }
+
+ .skip-link:focus {
+ top: 0;
+ }
+
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
-
+
*,
*::before,
*::after {
@@ -101,6 +126,29 @@
transition-duration: 0.01ms !important;
}
}
+
+ /* Screen reader only class */
+ .sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+ }
+
+ .sr-only:focus,
+ .sr-only:active {
+ position: static;
+ width: auto;
+ height: auto;
+ overflow: visible;
+ clip: auto;
+ white-space: normal;
+ }
}
@layer components {
@@ -148,6 +196,26 @@
@apply rounded-[var(--radius)] px-8 py-4 font-semibold;
@apply transition-all duration-300 ease-out;
@apply shadow-[0_0_0_1px_hsl(var(--neon))] hover:shadow-[0_0_20px_hsl(var(--neon)/0.5)];
+ position: relative;
+ overflow: hidden;
+ }
+
+ .btn-neon::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.2);
+ transform: translate(-50%, -50%);
+ transition: width 0.6s, height 0.6s;
+ }
+
+ .btn-neon:hover::before {
+ width: 300px;
+ height: 300px;
}
.btn-ghost {
@@ -155,16 +223,116 @@
@apply rounded-[var(--radius)] px-8 py-4 font-semibold;
@apply transition-all duration-300 ease-out;
@apply hover:shadow-[0_0_15px_hsl(var(--neon)/0.3)];
+ position: relative;
+ overflow: hidden;
+ }
+
+ .btn-ghost::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: linear-gradient(to right, transparent, hsl(var(--neon)), transparent);
+ transform: translateX(-100%);
+ transition: transform 0.5s ease-out;
+ }
+
+ .btn-ghost:hover::after {
+ transform: translateX(100%);
}
/* Card styles */
.card-dark {
@apply bg-card border border-card-border rounded-[var(--radius-lg)];
@apply backdrop-blur-sm shadow-[var(--shadow-card)];
+ position: relative;
+ overflow: hidden;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ .card-dark::before {
+ content: '';
+ position: absolute;
+ top: -2px;
+ left: -2px;
+ right: -2px;
+ bottom: -2px;
+ background: linear-gradient(45deg,
+ transparent 30%,
+ hsl(var(--neon) / 0.1) 50%,
+ transparent 70%);
+ border-radius: inherit;
+ opacity: 0;
+ transition: opacity 0.4s ease;
+ z-index: -1;
+ }
+
+ .card-dark:hover::before {
+ opacity: 1;
+ }
+
+ .card-dark:hover {
+ transform: translateY(-4px);
+ border-color: hsl(var(--neon) / 0.3);
}
/* Typography helpers */
.text-balance {
text-wrap: balance;
}
+
+ /* Smooth focus ring for better UX */
+ .focus-ring {
+ @apply focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2 focus:ring-offset-background;
+ transition: all 0.2s ease;
+ }
+
+ /* Magnetic hover effect for interactive elements */
+ .magnetic-hover {
+ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ .magnetic-hover:hover {
+ transform: translateY(-2px);
+ }
+
+ /* Glassmorphism effect */
+ .glass {
+ background: rgba(255, 255, 255, 0.03);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ /* Shimmer effect for loading states */
+ @keyframes shimmer {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+ }
+
+ .shimmer {
+ position: relative;
+ overflow: hidden;
+ }
+
+ .shimmer::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ rgba(51, 102, 255, 0.1),
+ transparent
+ );
+ animation: shimmer 2s infinite;
+ }
}
\ No newline at end of file
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 97bb198..22d71d0 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -372,6 +372,47 @@ const Contact = () => {