|
|
|
|
@@ -1,53 +1,64 @@
|
|
|
|
|
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
|
|
|
|
// file as the canonical source for the "services" section.
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
|
|
|
|
|
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
|
|
|
|
import TextAnimation from '@/components/ui/TextAnimation';
|
|
|
|
|
import ScrollReveal from '@/components/ui/ScrollReveal';
|
|
|
|
|
|
|
|
|
|
export default function ServicesSection(): React.JSX.Element {
|
|
|
|
|
export default function ServicesSection() {
|
|
|
|
|
return (
|
|
|
|
|
<div id="services" data-section="services">
|
|
|
|
|
<SectionErrorBoundary name="services">
|
|
|
|
|
<FeaturesDetailedCards
|
|
|
|
|
tag="Expertise"
|
|
|
|
|
title="What we do"
|
|
|
|
|
description="We balance clarity with depth."
|
|
|
|
|
items={[
|
|
|
|
|
{
|
|
|
|
|
title: "Web Design",
|
|
|
|
|
description: "Custom layouts and interaction design built around content, not templates.",
|
|
|
|
|
tags: [
|
|
|
|
|
"UX",
|
|
|
|
|
"UI",
|
|
|
|
|
"Creative",
|
|
|
|
|
],
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-smooth-brown-wall-background-layout-design-studio-room-web-template-business-report-with-smooth-circle-gradient-color_1258-71972.jpg",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Brand & Identity",
|
|
|
|
|
description: "Type systems, color, and voice that define your presence.",
|
|
|
|
|
tags: [
|
|
|
|
|
"Strategy",
|
|
|
|
|
"Visuals",
|
|
|
|
|
"Voice",
|
|
|
|
|
],
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-luxury-plain-blur-grey-black-gradient-used-as-background-studio-wall-display-your-products_1258-52733.jpg",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Development",
|
|
|
|
|
description: "Fast, accessible builds handed over clean.",
|
|
|
|
|
tags: [
|
|
|
|
|
"Code",
|
|
|
|
|
"Perf",
|
|
|
|
|
"Delivery",
|
|
|
|
|
],
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/dark-grunge-texture_1048-4055.jpg",
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
textAnimation="fade"
|
|
|
|
|
/>
|
|
|
|
|
</SectionErrorBoundary>
|
|
|
|
|
<section id="services" data-webild-section="services" className="relative w-full py-24 md:py-32 bg-background">
|
|
|
|
|
<div className="w-content-width mx-auto">
|
|
|
|
|
{/* Header */}
|
|
|
|
|
<div className="max-w-4xl mx-auto text-center flex flex-col items-center">
|
|
|
|
|
<ScrollReveal variant="slide-up">
|
|
|
|
|
<span className="text-2xl md:text-3xl font-bold text-primary-cta uppercase tracking-widest [text-shadow:0_0_20px_var(--primary-cta)]">
|
|
|
|
|
What we do
|
|
|
|
|
</span>
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
|
|
|
|
|
<TextAnimation
|
|
|
|
|
text="Custom layouts and interaction design built around content"
|
|
|
|
|
variant="slide-up"
|
|
|
|
|
tag="h2"
|
|
|
|
|
className="mt-6 text-4xl md:text-5xl lg:text-6xl font-serif text-foreground leading-tight"
|
|
|
|
|
gradientText={false}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<ScrollReveal variant="slide-up" delay={0.2}>
|
|
|
|
|
<p className="mt-6 text-lg md:text-xl text-foreground/80 font-sans max-w-3xl mx-auto leading-relaxed">
|
|
|
|
|
Three disciplines, one team — design, code, and identity working from the same brief instead of handed off between departments.
|
|
|
|
|
</p>
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Services Grid */}
|
|
|
|
|
<div className="mt-20 grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-foreground/10 border-t border-foreground/10">
|
|
|
|
|
{/* Service 1 */}
|
|
|
|
|
<ScrollReveal variant="slide-up" delay={0.3} className="py-8 md:py-12 md:px-8 first:md:pl-0 last:md:pr-0 flex flex-col">
|
|
|
|
|
<span className="text-sm font-medium text-primary-cta mb-6">I.</span>
|
|
|
|
|
<h3 className="text-2xl md:text-3xl font-serif text-foreground mb-4">Web Design</h3>
|
|
|
|
|
<p className="text-base text-foreground/70 font-sans leading-relaxed">
|
|
|
|
|
Custom layouts and interaction design built around your content, not page builder's defaults.
|
|
|
|
|
</p>
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
|
|
|
|
|
{/* Service 2 */}
|
|
|
|
|
<ScrollReveal variant="slide-up" delay={0.4} className="py-8 md:py-12 md:px-8 first:md:pl-0 last:md:pr-0 flex flex-col">
|
|
|
|
|
<span className="text-sm font-medium text-primary-cta mb-6">II.</span>
|
|
|
|
|
<h3 className="text-2xl md:text-3xl font-serif text-foreground mb-4">Brand & Identity</h3>
|
|
|
|
|
<p className="text-base text-foreground/70 font-sans leading-relaxed">
|
|
|
|
|
Type systems, colour, and voice — the details that make your brand unmistakably yours.
|
|
|
|
|
</p>
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
|
|
|
|
|
{/* Service 3 */}
|
|
|
|
|
<ScrollReveal variant="slide-up" delay={0.5} className="py-8 md:py-12 md:px-8 first:md:pl-0 last:md:pr-0 flex flex-col">
|
|
|
|
|
<span className="text-sm font-medium text-primary-cta mb-6">III.</span>
|
|
|
|
|
<h3 className="text-2xl md:text-3xl font-serif text-foreground mb-4">Development</h3>
|
|
|
|
|
<p className="text-base text-foreground/70 font-sans leading-relaxed">
|
|
|
|
|
Reliable, accessible builds on modern tooling, handed over clean.
|
|
|
|
|
</p>
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|