Redesign: engineering-console — our design on current infrastructure

src/App.scss

@@ -7,7 +7,7 @@
   isolation: isolate;
   background: $color-bg;
 
-  // Blueprint guide lines – faint vertical structure spanning the page,
+  // Blueprint guide lines — faint vertical structure spanning the page,
   // sits behind all content and the WebGL field. Reads as an engineering grid.
   &::before {
     content: "";

src/App.tsx

@@ -1,5 +1,5 @@
-import { lazy, Suspense } from 'react';
 import './App.scss';
+import Scene from './components/three/Scene';
 import Navbar from './components/sections/Navbar';
 import Hero from './components/sections/Hero';
 import About from './components/sections/About';
@@ -8,14 +8,10 @@ import Services from './components/sections/Services';
 import Contact from './components/sections/Contact';
 import Footer from './components/sections/Footer';
 
-const Scene = lazy(() => import('./components/three/Scene'));
-
 function App() {
   return (
     <div className="App">
-      <Suspense fallback={null}>
-        <Scene />
-      </Suspense>
+      <Scene />
       <Navbar />
       <main>
         <Hero />

src/components/sections/About.tsx

@@ -14,8 +14,13 @@ export const About = React.memo(function About() {
   return (
     <Section id="about" index="01" label="About">
       <SectionHeader
-        title="Senior engineers, end to end – no hand-offs to juniors"
-        lead="We take Web3 infrastructure, AI products and full-stack platforms from idea to production – and keep them running clean, without the technical debt that slows you down later"
+        title={
+          <>
+            Senior engineers, end to end –<br />
+            no hand-offs to juniors.
+          </>
+        }
+        lead="We take Web3 infrastructure, AI products and full-stack platforms from idea to production – and keep them running clean, without the technical debt that slows you down later."
       />
 
       <ul className="about__facts">

src/components/sections/Contact.scss

@@ -4,20 +4,15 @@
 .contact {
   &__email {
     position: relative;
-    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: $space-md;
-    width: 100%;
     padding: $space-lg;
     margin-top: $space-lg;
     @include glass;
     border-radius: $radius-md;
     color: $color-text;
-    text-decoration: none;
-    cursor: pointer;
-    pointer-events: auto;
 
     &:hover {
       border-color: $color-glass-edge;

src/components/sections/Contact.tsx

@@ -22,7 +22,7 @@ export const Contact = React.memo(function Contact() {
         </a>
 
         <p className="contact__note">
-          Tell us what you're building, we reply within a day
+          Tell us what you're building. We reply within a day.
         </p>
       </div>
     </Section>

src/components/sections/Footer.tsx

@@ -11,8 +11,6 @@ const socials = [
 ];
 
 export const Footer = React.memo(function Footer() {
-  const currentYear = new Date().getFullYear();
-
   return (
     <footer className="footer">
       <div className="footer__container">
@@ -22,7 +20,7 @@ export const Footer = React.memo(function Footer() {
         </div>
 
         <p className="footer__copyright">
-          © 2021-{currentYear} Ever Guild · All rights reserved · ever-guild.net
+          © 2026 Ever Guild
         </p>
 
         <div className="footer__socials">

src/components/sections/Hero.scss

@@ -6,7 +6,8 @@
   z-index: $z-content;
   display: flex;
   align-items: center;
-  min-height: 88vh;
+  min-height: 100vh;
+  min-height: 100svh; // full screen — keep the next section from peeking in
   padding-block: 8rem 4rem;
 
   &__inner {

src/components/sections/Hero.tsx

@@ -28,14 +28,14 @@ const Hero = React.memo(function Hero() {
         </p>
 
         <h1 className="hero__tagline">
-          Software that lasts
+          Software that lasts.
           <br />
-          <span className="hero__tagline-accent">Community</span> that builds
+          <span className="hero__tagline-accent">Community</span> that builds.
         </h1>
 
         <p className="hero__description">
           Senior engineers who ship Web3, AI and full-stack products built to
-          survive production – and stay maintainable long after launch
+          survive production – and stay maintainable long after launch.
         </p>
 
         <div className="hero__actions">

src/components/sections/Navbar.scss

@@ -16,7 +16,7 @@
     inset: 0 0 -24px 0;
     z-index: -1;
     pointer-events: none;
-    // Blur only – no darkening tint.
+    // Blur only — no darkening tint.
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     // Feather the bottom edge so there is no hard line under the header.

src/components/sections/Navbar.tsx

@@ -8,6 +8,7 @@ const navLinks = [
   { label: "About", href: "#about" },
   { label: "Team", href: "#team" },
   { label: "Services", href: "#services" },
+  { label: "Contact", href: "#contact" },
 ];
 
 const Navbar = React.memo(function Navbar() {
@@ -31,7 +32,7 @@ const Navbar = React.memo(function Navbar() {
     <header className={`navbar ${isScrolled ? "navbar--scrolled" : ""}`}>
       <div className="navbar__container">
         <a href="#" className="navbar__brand" onClick={closeMobileMenu}>
-          <img src={logo} alt="Ever Guild" className="navbar__logo" width={1020} height={157} />
+          <img src={logo} alt="Ever Guild" className="navbar__logo" />
         </a>
 
         <nav

src/components/sections/Services.scss

@@ -19,7 +19,7 @@
     padding: $space-lg;
     overflow: hidden;
 
-    // Gold top edge – strengthens on hover.
+    // Gold top edge — strengthens on hover.
     &::before {
       content: "";
       position: absolute;
@@ -41,37 +41,27 @@
     }
   }
 
-  &__sigil {
-    display: block;
-    width: 3.5rem;
-    height: 3.5rem;
-    margin-bottom: $space-sm;
-    color: $color-accent;
-    filter: drop-shadow(0 0 10px rgba(241, 184, 0, 0.12));
-  }
-
-  &__sigil-ring,
-  &__sigil-ray,
-  &__sigil-glyph {
-    fill: none;
-    stroke: currentColor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: $space-md;
   }
 
-  &__sigil-ring {
-    stroke-width: 1.2;
-    opacity: 0.62;
-  }
+  &__icon {
+    display: inline-flex;
+    font-size: 1.6rem;
+    color: $color-accent;
 
-  &__sigil-ray {
-    stroke-width: 1;
-    opacity: 0.32;
+    svg { display: block; }
   }
 
-  &__sigil-glyph {
-    stroke-width: 2;
-    opacity: 0.9;
+  &__num {
+    font-family: $font-mono;
+    font-size: $text-xs;
+    font-weight: 600;
+    letter-spacing: $tracking-wide;
+    color: $color-text-3;
   }
 
   &__title {
@@ -91,7 +81,7 @@
   &__marquee {
     margin-top: $space-xl;
     overflow: hidden;
-    // Ends dissolve into a gradient – text appears to fade away.
+    // Ends dissolve into a gradient — text appears to fade away.
     mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
     -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
 

src/components/sections/Services.tsx

@@ -5,80 +5,44 @@ import {
   SiTypescript, SiReact, SiNextdotjs, SiNodedotjs, SiPython, SiRust,
   SiGo, SiSolidity, SiDocker, SiPostgresql, SiGraphql, SiFigma,
 } from 'react-icons/si';
+import {
+  LuBlocks, LuCpu, LuLayers, LuPenTool, LuBadgeCheck, LuLifeBuoy,
+} from 'react-icons/lu';
 import './Services.scss';
 
 const services = [
   {
+    Icon: LuBlocks,
     title: 'Web3 & Blockchain',
-    description: 'Production-grade smart contracts and protocol integrations on TON, EVM and NEAR – audited patterns, built to hold real value',
+    description: 'Production-grade smart contracts and protocol integrations on TON, EVM and NEAR – audited patterns, built to hold real value.',
   },
   {
+    Icon: LuCpu,
     title: 'AI & Automation',
-    description: 'LLM integrations, AI agents and workflow automation wired into your product – not bolted on as an afterthought',
+    description: 'LLM integrations, AI agents and workflow automation wired into your product – not bolted on as an afterthought.',
   },
   {
+    Icon: LuLayers,
     title: 'Full-Stack Development',
-    description: 'React, Next.js and Node.js SaaS platforms, dashboards and marketplaces – shipped fast, built to scale',
+    description: 'React, Next.js and Node.js SaaS platforms, dashboards and marketplaces – shipped fast, built to scale.',
   },
   {
+    Icon: LuPenTool,
     title: 'Product Design & UI/UX',
-    description: 'Interfaces, prototypes and design systems that stay clean and responsive across every screen',
+    description: 'Interfaces, prototypes and design systems that stay clean and responsive across every screen.',
   },
   {
+    Icon: LuBadgeCheck,
     title: 'Candidate Experience Verification',
-    description: 'Independent verification of claimed engineering experience for safer technical hiring decisions',
+    description: 'Independent verification of claimed engineering experience for safer, sharper technical hiring decisions.',
   },
   {
+    Icon: LuLifeBuoy,
     title: 'Crisis Engineering Management',
-    description: 'Rapid intervention for software projects facing delivery, quality or team breakdowns',
+    description: 'Rapid intervention for software projects facing delivery, quality or team breakdowns – back on track, fast.',
   },
 ];
 
-const morphemes: Record<string, React.ReactNode> = {
-  axis: <path d="M32 16v32" />,
-  break: <path d="M22 22l9 10-7 10M42 22l-9 10 7 10" />,
-  core: <circle cx="32" cy="32" r="5" />,
-  frame: <path d="M20 20h24v24H20z" />,
-  gate: <path d="M18 24h28v18H18zM18 24l14 12 14-12" />,
-  link: <path d="M18 32h28M24 24l16 16M40 24 24 40" />,
-  stack: <path d="M20 24h24l-12 8-12-8Zm0 16h24l-12-8-12 8Z" />,
-  spark: <path d="M32 16v32M16 32h32M22 22l20 20M42 22 22 42" />,
-  seal: <path d="M20 38c4-10 20-10 24 0M24 24h16" />,
-  sight: <path d="M18 32c6-9 22-9 28 0-6 9-22 9-28 0Z" />,
-};
-
-const serviceSigils = [
-  ['core', 'link', 'stack'],
-  ['core', 'spark', 'axis'],
-  ['core', 'stack', 'axis'],
-  ['core', 'frame', 'sight'],
-  ['core', 'seal', 'sight'],
-  ['core', 'break', 'link'],
-];
-
-function ServiceSigil({ variant }: { variant: number }) {
-  const parts = serviceSigils[variant % serviceSigils.length];
-
-  return (
-    <svg
-      className="services__sigil"
-      viewBox="0 0 64 64"
-      role="img"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <circle className="services__sigil-ring" cx="32" cy="32" r="26" />
-      <path className="services__sigil-ray" d="M32 4v10M32 50v10M4 32h10M50 32h10" />
-      <path className="services__sigil-ray" d="M12.2 12.2l7.1 7.1M44.7 44.7l7.1 7.1M51.8 12.2l-7.1 7.1M19.3 44.7l-7.1 7.1" />
-      <g className="services__sigil-glyph">
-        {parts.map((part) => (
-          <React.Fragment key={part}>{morphemes[part]}</React.Fragment>
-        ))}
-      </g>
-    </svg>
-  );
-}
-
 const stack = [
   { name: 'TypeScript', Icon: SiTypescript },
   { name: 'React', Icon: SiReact },
@@ -97,12 +61,19 @@ const stack = [
 export const Services = React.memo(function Services() {
   return (
     <Section id="services" index="03" label="Services">
-      <SectionHeader title="What we build for you" />
+      <SectionHeader title="What we build for you." />
 
       <div className="services__grid">
         {services.map((service, i) => (
           <article key={service.title} className="services__card">
-            <ServiceSigil variant={i} />
+            <div className="services__head">
+              <span className="services__icon" aria-hidden="true">
+                <service.Icon />
+              </span>
+              <span className="services__num" aria-hidden="true">
+                {String(i + 1).padStart(2, '0')}
+              </span>
+            </div>
             <h3 className="services__title">{service.title}</h3>
             <p className="services__desc">{service.description}</p>
           </article>