feat: replace geometric placeholders with real project and brand images

- Monaco Ocean: monaco_high_res.jpg in featured card
- Port Nimara: anguilla.png in small card
- Port Amador: panama.png in small card
- Philosophy section: philosophy_image.png replaces AbstractGeometry
- About "Our Story": our_story.png replaces StoryGeometry
- Removed all geometric placeholder components (GeometricPlaceholder,
  AbstractGeometry, StoryGeometry)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/(frontend)/[locale]/about/page.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { setRequestLocale } from 'next-intl/server';
 import { Shield, PenTool, Users } from 'lucide-react';
 import ScrollReveal from '@/components/ui/ScrollReveal';
@@ -39,125 +40,6 @@ const PILLARS = [
 
 // ─── Sub-components ───────────────────────────────────────────────────────────
 
-function StoryGeometry() {
-  return (
-    <div
-      className="absolute inset-0 overflow-hidden rounded-xl"
-      aria-hidden="true"
-    >
-      {/* Primary gradient circle — top right */}
-      <div
-        className="absolute rounded-full"
-        style={{
-          width: '70%',
-          height: '70%',
-          top: '-15%',
-          right: '-15%',
-          background:
-            'radial-gradient(circle, rgba(91,164,217,0.10) 0%, rgba(0,100,148,0.05) 55%, transparent 100%)',
-        }}
-      />
-
-      {/* Secondary circle — bottom left */}
-      <div
-        className="absolute rounded-full"
-        style={{
-          width: '55%',
-          height: '55%',
-          bottom: '-10%',
-          left: '-8%',
-          background:
-            'radial-gradient(circle, rgba(46,196,160,0.07) 0%, transparent 70%)',
-        }}
-      />
-
-      {/* Diagonal grid texture */}
-      <div
-        className="absolute inset-0 opacity-[0.025]"
-        style={{
-          backgroundImage:
-            'repeating-linear-gradient(-45deg, var(--color-primary-dark) 0, var(--color-primary-dark) 1px, transparent 0, transparent 50%)',
-          backgroundSize: '28px 28px',
-        }}
-      />
-
-      {/* Tilted rectangle — left center */}
-      <div
-        className="absolute rounded-lg"
-        style={{
-          width: '24%',
-          height: '34%',
-          top: '18%',
-          left: '6%',
-          border: '1.5px solid rgba(91,164,217,0.12)',
-          transform: 'rotate(-6deg)',
-        }}
-      />
-
-      {/* Dot field — right center */}
-      <div
-        className="absolute"
-        style={{
-          width: '28%',
-          height: '28%',
-          top: '30%',
-          right: '8%',
-          backgroundImage:
-            'radial-gradient(circle, rgba(91,164,217,0.22) 1.5px, transparent 1.5px)',
-          backgroundSize: '10px 10px',
-        }}
-      />
-
-      {/* Dashed arc */}
-      <svg
-        className="absolute"
-        style={{ top: '15%', left: '28%', opacity: 0.07 }}
-        width="160"
-        height="160"
-        viewBox="0 0 160 160"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="80"
-          cy="80"
-          r="68"
-          stroke="var(--color-primary-dark)"
-          strokeWidth="1"
-          strokeDasharray="7 5"
-        />
-      </svg>
-
-      {/* Small accent square */}
-      <div
-        className="absolute rounded-sm"
-        style={{
-          width: '5%',
-          height: '5%',
-          bottom: '26%',
-          right: '26%',
-          background: 'rgba(91,164,217,0.18)',
-          transform: 'rotate(14deg)',
-        }}
-      />
-
-      {/* Teal accent line — bottom */}
-      <div
-        className="absolute"
-        style={{
-          width: '30%',
-          height: '2px',
-          bottom: '14%',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          background:
-            'linear-gradient(to right, transparent, rgba(46,196,160,0.35), transparent)',
-        }}
-      />
-    </div>
-  );
-}
-
 function PillarCard({
   Icon,
   title,
@@ -283,7 +165,13 @@ export default async function AboutPage({ params }: Props) {
                   className="relative bg-surface rounded-xl overflow-hidden"
                   style={{ minHeight: '460px' }}
                 >
-                  <StoryGeometry />
+                  <Image
+                    src="/images/our_story.png"
+                    alt="Our story"
+                    fill
+                    className="object-cover rounded-xl"
+                    sizes="(max-width: 1024px) 100vw, 58vw"
+                  />
 
                   {/* Inset rim */}
                   <div