agent: Replace Tech Stack Strip With Client Logos
This commit is contained in:
platform-mcp
+88
-15
@@ -122,6 +122,43 @@ const stats = [
|
||||
{ value: 3, suffix: '', label: 'Team Members', icon: 'clock' },
|
||||
];
|
||||
|
||||
// Technology stack data — relocated below the fold so social proof leads the
|
||||
// hero. Each entry pairs the framework name with a short context line and a
|
||||
// neutral monochrome SVG icon (uses currentColor so the grayscale →
|
||||
// brand-color hover treatment is driven entirely by Tailwind utility classes).
|
||||
const techStack = [
|
||||
{
|
||||
name: 'Angular',
|
||||
context: 'Enterprise front-ends',
|
||||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M12 2.5 2.5 5.7l1.6 12 7.9 3.8 7.9-3.8 1.6-12L12 2.5Zm0 2.3 6.3 11.3h-1.9l-1.3-3.1H9l-1.3 3.1H5.7L12 4.8Zm-2.3 6.5h4.6L12 7.3l-2.3 4Z"/></svg>',
|
||||
},
|
||||
{
|
||||
name: 'Spring Boot',
|
||||
context: 'Backend APIs',
|
||||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M21.6 4.2c-.4 1-1 1.9-1.5 2.7C18.4 4.5 15.4 3 12 3 6.5 3 2 7.5 2 13s4.5 10 10 10c5 0 9.1-3.7 9.9-8.5.5-2.4.1-5-1.3-7.4l1-2.9Zm-9.6 17c-4.6 0-8.4-3.8-8.4-8.4 0-3.4 2.1-6.4 5.1-7.7-1 1.6-1.7 3.4-2.1 5.3l-.1.6 1.1.4c2.4.8 4.8 1.8 7 3.6 1.4 1.1 2.4 2.6 2.8 4.3-1.4 1.2-3.3 1.9-5.4 1.9Zm6.3-2.5c-.8-2.5-3-4.8-6.5-6.5-1.2-.6-2.5-1.1-3.7-1.4.5-2.1 1.5-4 2.9-5.5 1.1-.1 2.2 0 3.3.4 1.8.6 3.4 1.8 4.6 3.4l-.2.3-.1.1c-.8 1.4-1.4 3-1.7 4.6-.5 1.7-.7 3.4-.5 4.6h1.9Z"/></svg>',
|
||||
},
|
||||
{
|
||||
name: 'Next.js',
|
||||
context: 'React SSR & ISR',
|
||||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2Zm-.8 4.5h1.6v9.2H11.3l-3.5-5v5H6.2V6.5h1.5l3.5 5v-5Zm5.9 0h1.5v11h-1.5v-11Z"/></svg>',
|
||||
},
|
||||
{
|
||||
name: 'Astro',
|
||||
context: 'Marketing & docs sites',
|
||||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M8.4 17.8c-.4-1.4-.5-2.7 0-3.4l.1-.1c.4 1.1 1.4 1.6 2.7 2 2 .6 2.6 1.4 1.8 3.1l-.1.2c-.6 1.1-1.8 2-2.6 2-.7 0-1.3-.5-1.6-1.4 0-.3-.1-.6-.1-1l-.2-1.4ZM14.8 2 18 13H6L9.2 2h5.6Zm-2.8 2.6L9.7 12h4.6L12 4.6Z"/></svg>',
|
||||
},
|
||||
{
|
||||
name: 'Golang',
|
||||
context: 'High-throughput services',
|
||||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M2.4 11.6c-.1 0-.1 0 0 0-.1-.1-.1-.1 0-.2l.5-.6c.1-.1.2-.1.3-.1H7c.1 0 .1.1.1.2l-.4.5c-.1.1-.2.2-.3.2l-4 .1v-.1Zm-1.9 1.2c-.1 0-.1-.1 0-.2l.5-.6c.1-.1.2-.1.3-.1h5.4c.1 0 .2.1.1.2l-.2.5c-.1.1-.2.2-.3.2l-5.8 0Zm3.1 1.1c-.1 0-.1-.1 0-.2l.4-.5c.1-.1.2-.1.3-.1h2.4c.1 0 .2.1.2.2l-.1.5c0 .1-.1.2-.2.2l-3-.1Zm12.6-2.6c-.8.2-1.4.4-2.2.6-.2 0-.2 0-.4-.1-.2-.2-.3-.4-.6-.5-.8-.4-1.6-.3-2.4.2-.9.6-1.4 1.4-1.4 2.5 0 1 .7 1.9 1.7 2 .9.1 1.6-.2 2.2-.9.1-.2.2-.3.4-.5h-3.1c-.3 0-.4-.2-.3-.5l.4-.7c.1-.2.3-.3.5-.3h5.8c0 .1 0 .1 0 .2-.2 1.2-.7 2.2-1.5 3.1-1 1-2.3 1.7-3.7 1.8-2.5.3-4.7-.7-5.7-3-.8-1.9-.5-3.7.6-5.4 1.2-1.8 3-2.8 5.2-3.2 1.8-.3 3.5-.1 5 1 1.1.8 1.7 1.9 2 3.2 0 .2 0 .3-.3.3Zm3.5 5.4c-1.6 0-3-.5-4.2-1.7-1-1-1.6-2.2-1.7-3.6-.2-2.1.4-3.9 1.8-5.4 1.5-1.6 3.3-2.5 5.4-2.5 2 0 3.5.7 4.6 2.2.9 1.4 1.2 2.9 1 4.5-.4 3.7-3.2 6.2-6.9 6.5Zm3.9-6.6c0-.3-.1-.5-.1-.8-.2-1.4-1.4-2-2.7-1.7-1.3.3-2.1 1.1-2.4 2.4-.2 1.1.3 2.2 1.3 2.6.8.4 1.6.3 2.3-.2 1.1-.6 1.6-1.5 1.6-2.3Z"/></svg>',
|
||||
},
|
||||
{
|
||||
name: 'PostgreSQL',
|
||||
context: 'Production data layer',
|
||||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M12 3c-3.3 0-6 1-6 2.3v13.5c0 1.3 2.7 2.3 6 2.3s6-1 6-2.3V5.3C18 4 15.3 3 12 3Zm0 1.5c2.9 0 5 .8 5 1.5s-2.1 1.5-5 1.5-5-.8-5-1.5 2.1-1.5 5-1.5Zm5 14.3c0 .7-2.1 1.5-5 1.5s-5-.8-5-1.5v-2.4c1.2.7 3 1.1 5 1.1s3.8-.4 5-1.1v2.4Zm0-4.6c0 .7-2.1 1.5-5 1.5s-5-.8-5-1.5v-2.4c1.2.7 3 1.1 5 1.1s3.8-.4 5-1.1v2.4Zm0-4.6c0 .7-2.1 1.5-5 1.5s-5-.8-5-1.5V7.7c1.2.7 3 1.1 5 1.1s3.8-.4 5-1.1v2.4Z"/></svg>',
|
||||
},
|
||||
];
|
||||
|
||||
// FAQ data
|
||||
const faqs = [
|
||||
{
|
||||
@@ -233,24 +270,14 @@ const faqs = [
|
||||
<span>No commitment</span>
|
||||
</p>
|
||||
|
||||
<!-- Tech stack proof strip -->
|
||||
<div class="mt-16 opacity-0 animate-slide-up" style="animation-delay: 1s;">
|
||||
<p class="text-sm text-secondary-400 uppercase tracking-wider mb-8">Powered By Industry Leaders</p>
|
||||
<div class="flex flex-wrap justify-center items-center gap-12 opacity-60" role="list" aria-label="Technologies we use">
|
||||
<div class="text-2xl font-bold text-white" role="listitem">Angular</div>
|
||||
<div class="text-2xl font-bold text-white" role="listitem">Spring Boot</div>
|
||||
<div class="text-2xl font-bold text-white" role="listitem">Next.js</div>
|
||||
<div class="text-2xl font-bold text-white" role="listitem">Astro</div>
|
||||
<div class="text-2xl font-bold text-white" role="listitem">Golang</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll indicator -->
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 animate-fade-in" style="animation-delay: 1.2s;">
|
||||
<a href="#client-logos" class="flex flex-col items-center text-white/60 hover:text-white transition-colors group" aria-label="Scroll to clients">
|
||||
<span class="text-sm mb-2">Discover More</span>
|
||||
<!-- Scroll indicator — points at the client-logo social-proof strip just
|
||||
below the hero so the first interaction surface is trust, not stack. -->
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 animate-fade-in" style="animation-delay: 1s;">
|
||||
<a href="#client-logos" class="flex flex-col items-center text-white/60 hover:text-white transition-colors group" aria-label="Scroll to client logos">
|
||||
<span class="text-sm mb-2">See who we work with</span>
|
||||
<svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
@@ -635,6 +662,52 @@ const faqs = [
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technologies We Work With — relocated from the hero so social proof
|
||||
leads above the fold. Kept intentionally subdued (border-only cards,
|
||||
neutral grayscale icons) so it reads as supporting context rather than
|
||||
competing with the client-logo trust strip up top. -->
|
||||
<section id="tech-stack" class="py-20 sm:py-24 bg-secondary-50 dark:bg-secondary-900/60 border-y border-secondary-100 dark:border-secondary-800">
|
||||
<div class="container-wrapper">
|
||||
<div class="text-center max-w-3xl mx-auto mb-12 sm:mb-16" data-animate="fade-up">
|
||||
<span class="inline-block px-4 py-2 rounded-full bg-secondary-100 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-300 text-xs sm:text-sm font-bold uppercase tracking-wider mb-4">Tech Stack</span>
|
||||
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-4 sm:mb-6">Technologies we work with</h2>
|
||||
<p class="text-base sm:text-xl text-secondary-600 dark:text-secondary-400">
|
||||
Battle-tested frameworks and runtimes we ship to production across enterprise, university, and government deployments.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 max-w-6xl mx-auto"
|
||||
role="list"
|
||||
aria-label="Technologies we work with"
|
||||
>
|
||||
{techStack.map((tech, index) => (
|
||||
<li
|
||||
class="group flex flex-col items-center justify-center text-center gap-2 sm:gap-3 rounded-2xl border border-secondary-200 dark:border-secondary-700 bg-white dark:bg-secondary-800/70 px-3 py-5 sm:px-4 sm:py-6 min-w-0 transition-all duration-300 hover:-translate-y-1 hover:border-primary-300 hover:shadow-lg dark:hover:border-primary-500/60 focus-within:ring-2 focus-within:ring-primary-400"
|
||||
data-animate="fade-up"
|
||||
data-delay={String(index * 60)}
|
||||
>
|
||||
<span
|
||||
class="text-secondary-400 dark:text-secondary-500 group-hover:text-primary-500 dark:group-hover:text-primary-400 transition-colors"
|
||||
aria-hidden="true"
|
||||
set:html={tech.icon}
|
||||
/>
|
||||
<span class="text-sm sm:text-base font-semibold text-secondary-800 dark:text-secondary-100 leading-tight break-words">
|
||||
{tech.name}
|
||||
</span>
|
||||
<span class="text-[11px] sm:text-xs uppercase tracking-wider text-secondary-500 dark:text-secondary-400 leading-tight">
|
||||
{tech.context}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<p class="text-center text-sm text-secondary-500 dark:text-secondary-400 mt-10 sm:mt-12">
|
||||
Also working with <span class="font-semibold text-secondary-700 dark:text-secondary-200">React Native</span>, <span class="font-semibold text-secondary-700 dark:text-secondary-200">MySQL</span>, <span class="font-semibold text-secondary-700 dark:text-secondary-200">Docker</span>, and <span class="font-semibold text-secondary-700 dark:text-secondary-200">GitHub Actions</span> — <a href="/services" class="text-primary-600 dark:text-primary-400 font-semibold hover:underline">see the full stack →</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Final CTA Section - Enhanced -->
|
||||
<section class="py-24 bg-gradient-to-br from-secondary-900 via-primary-900 to-primary-800 relative overflow-hidden">
|
||||
<!-- Background decorations -->
|
||||
|
||||
Reference in New Issue
Block a user