Devsh-Graphics-Programming · AnastaZIuk · Jun 14, 2026 · Jun 14, 2026
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -1,19 +1,42 @@
-import { Paragraph, Chapter } from "../components/TextUtils";
 import { aboutParagraphs } from "../data/aboutContent";
+import NablaShaderBackdrop from "../nabla/NablaShaderBackdrop";
+
+const heroStatement = "We are not a traditional software house";
+const extractedSentence = `${heroStatement}.`;
+const bodyParagraphs = aboutParagraphs.map((paragraph) =>
+  paragraph.replace(` ${extractedSentence}`, "")
+);
 
 export default function Page() {
-    return (
-        <main className="site-container-narrow section-pad flex flex-col gap-10 sm:gap-14">
-            <Chapter title="Who We Are">
-                <Paragraph>
-                    {aboutParagraphs.map((paragraph, index) => (
-                        <span key={index}>
-                            {paragraph}
-                            {index < aboutParagraphs.length - 1 && <><br /><br /></>}
-                        </span>
-                    ))}
-                </Paragraph>
-            </Chapter>
-        </main>
-    );
+  return (
+    <main className="about-shell min-h-screen overflow-hidden">
+      <section className="service-hero about-hero flex flex-col items-center justify-center py-16 sm:py-20 lg:py-24">
+        <div aria-hidden="true" className="service-hero-cloud">
+          <div className="service-hero-cloud-base" />
+          <NablaShaderBackdrop />
+          <div className="service-hero-cloud-vignette" />
+        </div>
+        <div className="site-container relative z-10 flex flex-col items-center text-center">
+          <div className="flex max-w-5xl flex-col items-center gap-5">
+            <h1 className="!m-0 bg-[linear-gradient(135deg,#fff_18%,#f4fffb_58%,var(--brand-accent-bright)_100%)] bg-clip-text text-5xl font-semibold leading-[0.96] tracking-tight text-transparent drop-shadow-[0_0_1.8rem_rgba(0,0,0,0.55)] sm:text-6xl lg:text-7xl">
+              Who We Are
+            </h1>
+            <p className="about-hero-statement">
+              {heroStatement}
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="site-container-narrow about-content">
+        <div className="about-editorial">
+          {bodyParagraphs.map((paragraph, index) => (
+            <p key={index} className={index === 0 ? "about-copy about-copy--lead" : "about-copy"}>
+              {paragraph}
+            </p>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
 }
diff --git a/app/components/AboutSection.tsx b/app/components/AboutSection.tsx
@@ -1,24 +1,14 @@
-import CTAButton from "./CTAButton";
-import { aboutParagraphs } from "../data/aboutContent";
+import CTAButton from "./CTAButton";
 
 export default function AboutSection() {
   return (
-    <section id="about" className="scroll-mt-24 pb-14 pt-6 sm:pb-20 sm:pt-6 lg:pb-24 lg:pt-6">
-      <div className="site-container-narrow">
-        <div className="section-head mb-9 sm:mb-10">
+    <section id="about" className="home-about-teaser scroll-mt-24 py-16 sm:py-20 lg:py-24">
+      <div className="site-container">
+        <div className="section-head">
           <h2 className="section-heading">Who We Are</h2>
-        </div>
-
-        <div className="flex flex-col gap-5 text-base leading-relaxed text-neutral-300 sm:text-lg">
-          {aboutParagraphs.map((paragraph, index) => (
-            <p key={index} className="!m-0">
-              {paragraph}
-            </p>
-          ))}
-        </div>
-
-        <div className="mt-10 flex justify-center sm:mt-12">
-          <CTAButton href="/services" />
+          <div className="mt-8 sm:mt-9">
+            <CTAButton href="/about" label="Meet DevSH" />
+          </div>
         </div>
       </div>
     </section>

diff --git a/app/components/CTAButton.tsx b/app/components/CTAButton.tsx
@@ -17,11 +17,10 @@ export default function CTAButton({
   return (
     <a
       href={href}
-      className={`brand-button group relative inline-flex items-center justify-center gap-3 ${sizing} rounded-md border border-[var(--brand-accent)]/70 bg-black/45 font-semibold text-[var(--brand-accent-bright)] transition-all duration-200 hover:-translate-y-0.5 hover:border-[var(--brand-accent-bright)] active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent-bright)] focus:ring-offset-2 focus:ring-offset-black`}
-      style={{ background: "linear-gradient(180deg, rgba(125, 205, 185, 0.16), rgba(85, 181, 166, 0.08))" }}
+      className={`premium-cta brand-button group relative inline-flex items-center justify-center gap-3 ${sizing} rounded-lg border font-semibold transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent-bright)] focus:ring-offset-2 focus:ring-offset-black`}
     >
       <span>{label}</span>
-      <span className="flex h-7 w-7 items-center justify-center rounded border border-[var(--brand-accent)]/70 bg-[var(--brand-accent)] text-[#031111] transition-transform duration-200 group-hover:translate-x-0.5 group-hover:bg-[var(--brand-accent-bright)]">
+      <span className="premium-cta-icon flex h-7 w-7 items-center justify-center rounded border transition-all duration-200 group-hover:translate-x-0.5">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"

diff --git a/app/components/EcosystemSection.tsx b/app/components/EcosystemSection.tsx
@@ -57,7 +57,7 @@ export default function EcosystemSection() {
         className="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_0%,rgba(125,205,185,0.13),transparent_44%),linear-gradient(180deg,rgba(0,0,0,0.96),rgba(0,0,0,1)_58%)]"
       />
       <div className="site-container relative z-10">
-        <div className="section-head mb-9 sm:mb-10">
+        <div className="section-head mb-14 sm:mb-16 lg:mb-20">
           <p className="section-kicker">Community and standards</p>
           <h2 className="section-heading">
             Advancing the Ecosystem
@@ -67,30 +67,32 @@ export default function EcosystemSection() {
             our technical blog and presentations at major conferences like
             Vulkanised and the Shading Languages Symposium.
           </p>
-          <div className="mt-3 flex flex-wrap justify-center gap-3 sm:gap-4">
+          <div className="mt-4 flex flex-wrap justify-center gap-3 sm:gap-4">
             <a
               href="/presentations"
-              className="group inline-flex items-center gap-2.5 rounded-md border bg-black/25 px-5 py-3 text-sm font-medium transition-all duration-300 hover:-translate-y-0.5 hover:bg-black/40 hover:shadow-[0_0_1.5rem_rgba(85,181,166,0.18)] sm:px-6 sm:text-base"
-              style={{ borderColor: "rgba(125, 205, 185, 0.7)", color: "var(--brand-accent-bright)" }}
+              className="ecosystem-action group"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 flex-shrink-0" aria-hidden="true">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
-              </svg>
+              <span className="ecosystem-action-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4" aria-hidden="true">
+                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
+                </svg>
+              </span>
               Watch our Presentations
             </a>
             <a
               href="/blog"
-              className="group inline-flex items-center gap-2.5 rounded-md border bg-black/25 px-5 py-3 text-sm font-medium transition-all duration-300 hover:-translate-y-0.5 hover:bg-black/40 hover:shadow-[0_0_1.5rem_rgba(85,181,166,0.18)] sm:px-6 sm:text-base"
-              style={{ borderColor: "rgba(125, 205, 185, 0.7)", color: "var(--brand-accent-bright)" }}
+              className="ecosystem-action group"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 flex-shrink-0" aria-hidden="true">
-                <path d="M4 19.5A2.5 2.5 0 016.5 17H20" />
-                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" />
-                <line x1="8" y1="7" x2="16" y2="7" />
-                <line x1="8" y1="11" x2="16" y2="11" />
-                <line x1="8" y1="15" x2="12" y2="15" />
-              </svg>
-              Technical Blog
+              <span className="ecosystem-action-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4" aria-hidden="true">
+                  <path d="M4 19.5A2.5 2.5 0 016.5 17H20" />
+                  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" />
+                  <line x1="8" y1="7" x2="16" y2="7" />
+                  <line x1="8" y1="11" x2="16" y2="11" />
+                  <line x1="8" y1="15" x2="12" y2="15" />
+                </svg>
+              </span>
+              See Technical Blog
             </a>
           </div>
         </div>

diff --git a/app/components/ExpertiseGrid.tsx b/app/components/ExpertiseGrid.tsx
@@ -140,9 +140,9 @@ function Card({ title, images, href }: { title: string; images: MediaItem[]; hre
 
 export default function ExpertiseGrid() {
   return (
-    <section className="w-full pb-9 pt-3 sm:pb-11 sm:pt-4 lg:pb-12">
+    <section className="w-full pb-9 pt-10 sm:pb-11 sm:pt-12 lg:pb-12 lg:pt-14">
       <div className="site-container">
-        <div className="section-head mb-7 sm:mb-8">
+        <div className="section-head mb-10 sm:mb-12 lg:mb-14">
           <h2 className="section-heading">Our Expertise</h2>
         </div>
         {/* Two-column mobile grid, then a wrapped centered row on wider screens. */}

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,15 +1,108 @@
-import GP_Links from "./GP_Links"
+import Link from "next/link";
+import GP_Links from "./GP_Links";
 
-export default function footer() {
+const quickLinks = [
+  { label: "Home", href: "/" },
+  { label: "Services", href: "/services" },
+  { label: "Pricing", href: "/pricing.pdf" },
+  { label: "Nabla", href: "/nabla" },
+  { label: "Research", href: "/research" },
+  { label: "Blog", href: "/blog" },
+];
+
+const socialLinks = [
+  { label: "LinkedIn", href: "https://www.linkedin.com/company/devsh-graphics-programming/", icon: "linkedin" },
+  { label: "X", href: "https://x.com/devsh_gfx_prog", icon: "x" },
+  { label: "GitHub", href: "https://github.com/Devsh-Graphics-Programming", icon: "github" },
+];
+
+function SocialIcon({ icon }: { icon: string }) {
+  if (icon === "linkedin") {
+    return (
+      <svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4" aria-hidden="true">
+        <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S.02 4.88.02 3.5 1.13 1 2.5 1s2.48 1.12 2.48 2.5ZM.26 8h4.48v15H.26V8Zm7.08 0h4.29v2.05h.06c.6-1.13 2.06-2.32 4.24-2.32 4.53 0 5.37 2.98 5.37 6.86V23h-4.47v-7.46c0-1.78-.03-4.07-2.48-4.07-2.48 0-2.86 1.94-2.86 3.94V23H7.34V8Z" />
+      </svg>
+    );
+  }
+
+  if (icon === "x") {
     return (
-        <div className="flex flex-col items-center justify-center p-1 border-t border-t-[#181818]">
-            <GP_Links/>
-            <a
-                href="/build-info.json"
-                className="pb-1 text-[10px] leading-none text-neutral-700 transition-colors hover:text-neutral-500"
-            >
-                build info
+      <svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4" aria-hidden="true">
+        <path d="M13.83 10.17 20.9 2h-1.67l-6.14 7.09L8.18 2H2.53l7.42 10.72L2.53 21.3H4.2l6.49-7.5 5.18 7.5h5.65l-7.69-11.13Zm-2.3 2.66-.75-1.07L4.8 3.25h2.58l4.83 6.88.75 1.07 6.27 8.92h-2.58l-5.12-7.29Z" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4" aria-hidden="true">
+      <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2.16c-3.2.7-3.87-1.37-3.87-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.75.4-1.25.73-1.54-2.55-.29-5.23-1.28-5.23-5.68 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.46.11-3.04 0 0 .96-.31 3.16 1.18.92-.26 1.9-.38 2.88-.39.98.01 1.96.13 2.88.39 2.19-1.49 3.15-1.18 3.15-1.18.63 1.58.24 2.75.12 3.04.74.8 1.18 1.83 1.18 3.08 0 4.41-2.69 5.38-5.25 5.67.41.36.78 1.06.78 2.14v3.18c0 .31.21.67.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5Z" />
+    </svg>
+  );
+}
+
+export default function Footer() {
+  return (
+    <footer className="border-t border-t-[#181818] bg-black">
+      <div className="site-container py-6">
+        <div className="grid gap-6 border-b border-white/10 pb-5 lg:grid-cols-[minmax(22rem,1fr)_auto_auto] lg:gap-12">
+          <address className="max-w-xl text-[0.72rem] leading-snug text-neutral-500 not-italic sm:text-xs">
+            <p className="!m-0 text-sm font-semibold text-white">DevSH Graphics Programming Sp. z o.o.</p>
+            <p className="!mb-0 !mt-2 text-[0.95rem] leading-relaxed text-neutral-300 sm:text-base">
+              High-performance software consultancy for demanding visual and compute systems.
+            </p>
+            <div className="mt-4 grid gap-1">
+              <p className="!m-0">ul. Lipuska 36, 80-178 Gdansk, Poland</p>
+              <p className="!m-0">
+                <span className="block sm:inline">NIP 5833334868</span>
+                <span className="hidden sm:inline"> | </span>
+                <span className="block sm:inline">REGON 382168019</span>
+                <span className="hidden sm:inline"> | </span>
+                <span className="block sm:inline">KRS 0000764661</span>
+              </p>
+              <p className="!m-0">Share capital: 15 000 PLN paid in full</p>
+            </div>
+          </address>
+
+          <nav aria-label="Footer navigation" className="grid content-start grid-cols-2 gap-x-8 gap-y-2 text-sm lg:min-w-52">
+            {quickLinks.map((link) => (
+              <Link key={link.href} href={link.href} className="text-neutral-400 transition-colors hover:text-[var(--brand-accent-bright)]">
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+
+          <div className="flex flex-col gap-3 text-xs text-neutral-500 lg:min-w-56 lg:items-end lg:text-right">
+            <a className="transition-colors hover:text-[var(--brand-accent-bright)]" href="mailto:devsh@devsh.eu">
+              mail: devsh@devsh.eu
+            </a>
+
+            <div className="flex items-center gap-2">
+              {socialLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={link.label}
+                  className="grid h-8 w-8 place-items-center rounded border border-white/10 bg-white/[0.025] text-neutral-500 transition hover:border-[var(--brand-accent)]/50 hover:bg-[var(--brand-accent)]/10 hover:text-[var(--brand-accent-bright)] focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:ring-offset-2 focus:ring-offset-black"
+                >
+                  <SocialIcon icon={link.icon} />
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-start justify-between gap-3 pt-4 text-[10px] leading-none text-neutral-700 sm:flex-row sm:items-center">
+          <p className="!m-0">© 2026 DevSH Graphics Programming Sp. z o.o.</p>
+          <div className="flex items-center gap-3">
+            <GP_Links />
+            <a href="/build-info.json" className="transition-colors hover:text-neutral-500">
+              build info
             </a>
+          </div>
         </div>
-    )
+      </div>
+    </footer>
+  );
 }
diff --git a/app/components/HeroHeader.tsx b/app/components/HeroHeader.tsx
@@ -1,22 +1,20 @@
+import NablaShaderBackdrop from "../nabla/NablaShaderBackdrop";
 import CTAButton from "./CTAButton";
 
 export default function HeroHeader() {
   return (
-    <section className="relative isolate w-full overflow-hidden pb-1 pt-10 sm:pt-14 lg:pt-16">
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-full bg-[radial-gradient(ellipse_at_50%_0%,rgba(125,205,185,0.13),transparent_42%),radial-gradient(ellipse_at_50%_48%,rgba(85,181,166,0.07),transparent_58%)]"
-      />
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute left-1/2 top-[12%] -z-10 h-[min(54vw,34rem)] w-[min(84vw,56rem)] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse,rgba(125,205,185,0.12)_0%,rgba(85,181,166,0.05)_36%,transparent_70%)] blur-3xl"
-      />
-      <div className="site-container relative flex flex-col items-center text-center">
+    <section className="home-hero-cloud relative isolate flex w-full items-center overflow-hidden py-12 sm:py-14 lg:py-16">
+      <div aria-hidden="true" className="home-hero-cloud-field">
+        <div className="home-hero-cloud-base" />
+        <NablaShaderBackdrop />
+        <div className="home-hero-cloud-vignette" />
+      </div>
+      <div className="site-container relative z-10 flex flex-col items-center text-center">
         <div className="flex flex-col items-center gap-4">
-          <h1 className="!my-0 max-w-5xl text-4xl font-bold leading-[1.02] sm:text-5xl lg:text-4xl xl:text-5xl">
+          <h1 className="!my-0 max-w-5xl bg-[linear-gradient(135deg,#fff_18%,#f5fffb_62%,var(--brand-accent-bright)_100%)] bg-clip-text text-4xl font-bold leading-[1.02] text-transparent drop-shadow-[0_0_1.4rem_rgba(0,0,0,0.45)] sm:text-5xl lg:text-4xl xl:text-5xl">
             High-Performance Graphics Software Development
           </h1>
-          <p className="!m-0 max-w-3xl text-base leading-relaxed text-neutral-300 sm:text-lg lg:text-xl">
+          <p className="cloud-lead max-w-3xl">
             Supercharge your visually-demanding applications with next-generation rendering solutions, high-performance compute, and relentless optimization.
           </p>
         </div>