From 4482a30793f49045da23f33e029af599a7516fd8 Mon Sep 17 00:00:00 2001
From: kfj001 <kfj001@gmail.com>
Date: Thu, 11 Jun 2026 22:42:35 +0000
Subject: [PATCH] new background asset

---
 public/svg/mountain-landscape.svg | 490 ++++++++++++++++++++++++++++++
 src/app/hero/hero.component.html  |   2 +-
 2 files changed, 491 insertions(+), 1 deletion(-)
 create mode 100644 public/svg/mountain-landscape.svg

diff --git a/public/svg/mountain-landscape.svg b/public/svg/mountain-landscape.svg
new file mode 100644
index 0000000..e68a6e1
--- /dev/null
+++ b/public/svg/mountain-landscape.svg
@@ -0,0 +1,490 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 1200 630"
+   width="100%"
+   height="100%"
+   version="1.1"
+   id="svg70"
+   sodipodi:docname="gemini-svg.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview70"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.75416667"
+     inkscape:cx="577.45856"
+     inkscape:cy="379.22652"
+     inkscape:window-width="1920"
+     inkscape:window-height="961"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg70" />
+  <defs
+     id="defs11">
+    <linearGradient
+       id="skyGrad"
+       x1="0%"
+       y1="0%"
+       x2="0%"
+       y2="100%">
+      <stop
+         offset="0%"
+         stop-color="#0099e5"
+         id="stop1" />
+      <stop
+         offset="100%"
+         stop-color="#2ab0ff"
+         id="stop2" />
+    </linearGradient>
+    <linearGradient
+       id="riverGrad"
+       x1="0%"
+       y1="0%"
+       x2="100%"
+       y2="100%">
+      <stop
+         offset="0%"
+         stop-color="#4ba3e3"
+         id="stop3" />
+      <stop
+         offset="100%"
+         stop-color="#7fc7ff"
+         id="stop4" />
+    </linearGradient>
+    <linearGradient
+       id="bgMountainGrad"
+       x1="0%"
+       y1="0%"
+       x2="0%"
+       y2="100%">
+      <stop
+         offset="0%"
+         stop-color="#bcd3e6"
+         id="stop5" />
+      <stop
+         offset="100%"
+         stop-color="#8baec4"
+         id="stop6" />
+    </linearGradient>
+    <g
+       id="pineTree">
+      <polygon
+         points="0,-24 -8,-12 8,-12"
+         fill="#2d5a27"
+         id="polygon6" />
+      <polygon
+         points="0,-16 -11,0 11,0"
+         fill="#244a1f"
+         id="polygon7" />
+      <polygon
+         points="0,-6 -14,12 14,12"
+         fill="#1b3b17"
+         id="polygon8" />
+      <rect
+         x="-2"
+         y="12"
+         width="4"
+         height="6"
+         fill="#422917"
+         id="rect8" />
+    </g>
+    <g
+       id="smallTree">
+      <polygon
+         points="0,-16 -6,-8 6,-8"
+         fill="#35632f"
+         id="polygon9" />
+      <polygon
+         points="0,-10 -9,2 9,2"
+         fill="#2b5426"
+         id="polygon10" />
+      <polygon
+         points="0,-3 -11,10 11,10"
+         fill="#20421c"
+         id="polygon11" />
+      <rect
+         x="-1.5"
+         y="10"
+         width="3"
+         height="4"
+         fill="#422917"
+         id="rect11" />
+    </g>
+  </defs>
+  <rect
+     width="1200"
+     height="630"
+     fill="url(#skyGrad)"
+     id="rect12" />
+  <g
+     transform="translate(1100, 130)"
+     id="g12">
+    <path
+       d="M0,-50 L0,-35 M0,35 L0,50 M-50,0 L-35,0 M35,0 L50,0 M-35,-35 L-25,-25 M25,25 L35,35 M-35,35 L-25,25 M25,-25 L35,-35"
+       stroke="#fcd116"
+       stroke-width="4"
+       stroke-linecap="round"
+       id="path12" />
+    <circle
+       cx="0"
+       cy="0"
+       r="26"
+       fill="#ffcc00"
+       id="circle12" />
+  </g>
+  <g
+     fill="#ffffff"
+     opacity="0.95"
+     id="g13">
+    <path
+       d="M 120,200               A 35,35 0 0,1 170,160               A 45,45 0 0,1 250,150               A 40,40 0 0,1 310,180               A 30,30 0 0,1 350,210               L 120,210 Z"
+       id="path13" />
+  </g>
+  <g
+     fill="#ffffff"
+     opacity="0.9"
+     id="g14">
+    <path
+       d="M 470,170               A 30,30 0 0,1 510,135               A 45,45 0 0,1 590,120               A 40,40 0 0,1 650,150               A 25,25 0 0,1 680,175               L 470,175 Z"
+       id="path14" />
+  </g>
+  <g
+     fill="#ffffff"
+     opacity="0.95"
+     id="g15">
+    <path
+       d="M 800,230               A 35,35 0 0,1 850,190               A 50,50 0 0,1 940,180               A 40,40 0 0,1 1010,210               A 30,30 0 0,1 1050,240               L 800,240 Z"
+       id="path15" />
+  </g>
+  <g
+     fill="url(#bgMountainGrad)"
+     id="g19">
+    <polygon
+       points="-50,450 60,330 180,450"
+       opacity="0.6"
+       id="polygon15" />
+    <polygon
+       points="700,480 840,320 950,480"
+       opacity="0.5"
+       id="polygon16" />
+    <polygon
+       points="850,480 960,300 1100,480"
+       opacity="0.4"
+       id="polygon17" />
+    <polygon
+       points="180,450 340,300 500,450"
+       opacity="0.5"
+       id="polygon18" />
+    <polygon
+       points="550,450 680,290 820,450"
+       opacity="0.6"
+       id="polygon19" />
+  </g>
+  <g
+     id="g22">
+    <polygon
+       points="850,500 1150,240 1250,500"
+       fill="#324d61"
+       id="polygon20" />
+    <polygon
+       points="1150,240 1250,500 1120,500"
+       fill="#253a4a"
+       id="polygon21" />
+    <polygon
+       points="1150,240 1115,270 1140,280 1150,300 1165,275 1185,270"
+       fill="#eef5fa"
+       id="polygon22" />
+  </g>
+  <g
+     id="g25">
+    <polygon
+       points="10,500 240,310 450,550"
+       fill="#4f6e85"
+       id="polygon23" />
+    <polygon
+       points="240,310 450,550 310,520"
+       fill="#3b5366"
+       id="polygon24" />
+    <polygon
+       points="240,310 210,335 230,345 242,365 255,340 275,340"
+       fill="#eef5fa"
+       id="polygon25" />
+  </g>
+  <g
+     id="g28">
+    <polygon
+       points="560,550 780,280 1000,550"
+       fill="#415e73"
+       id="polygon26" />
+    <polygon
+       points="780,280 1000,550 840,550"
+       fill="#2e4454"
+       id="polygon27" />
+    <polygon
+       points="780,280 740,330 765,335 775,360 795,330 825,320"
+       fill="#eef5fa"
+       id="polygon28" />
+  </g>
+  <g
+     id="g31">
+    <polygon
+       points="130,550 380,260 620,550"
+       fill="#3b566b"
+       id="polygon29" />
+    <polygon
+       points="380,260 620,550 460,550"
+       fill="#293d4d"
+       id="polygon30" />
+    <polygon
+       points="380,260 340,310 365,315 375,340 395,315 420,305"
+       fill="#eef5fa"
+       id="polygon31" />
+  </g>
+  <g
+     id="g37">
+    <polygon
+       points="350,600 600,170 660,600"
+       fill="#526f87"
+       id="polygon32" />
+    <polygon
+       points="600,170 900,600 660,600"
+       fill="#344b5c"
+       id="polygon33" />
+    <polygon
+       points="600,170 540,260 565,270 550,290 580,285 590,320 600,310"
+       fill="#ffffff"
+       id="polygon34" />
+    <polygon
+       points="600,170 600,310 615,295 630,315 640,275 680,280 650,250"
+       fill="#d0e1ed"
+       id="polygon35" />
+    <polygon
+       points="510,310 540,260 530,330"
+       fill="#435d73"
+       id="polygon36" />
+    <polygon
+       points="670,300 640,275 690,340"
+       fill="#293b4a"
+       id="polygon37" />
+  </g>
+  <path
+     d="M-50,480 Q 200,450 450,490 T 900,460 T 1250,440 L 1250,650 L-50,650 Z"
+     fill="#609143"
+     id="path37" />
+  <path
+     d="M 550,550 Q 800,460 1250,490 L 1250,650 L 550,650 Z"
+     fill="#518237"
+     id="path38" />
+  <path
+     d="M 680,530 Q 950,470 1250,410 L 1250,550 Z"
+     fill="#43702b"
+     id="path39" />
+  <path
+     d="M -50,500 Q 250,460 600,560 L 600,650 L -50,650 Z"
+     fill="#5c8f3f"
+     id="path40" />
+  <path
+     d="M -50,410 Q 150,470 400,530 L 400,650 L -50,650 Z"
+     fill="#4b7d34"
+     id="path41" />
+  <path
+     d="M-50,520 Q 300,540 600,630 L-50,630 Z"
+     fill="#7cb855"
+     id="path42" />
+  <path
+     d="M-50,560 Q 200,560 500,630 L-50,630 Z"
+     fill="#8ecd67"
+     id="path43" />
+  <path
+     d="M 550,630 Q 850,500 1250,510 L 1250,650 L 550,650 Z"
+     fill="#6fa848"
+     id="path44" />
+  <polygon
+     points="720,535 900,520 1050,580 800,610"
+     fill="#9ecc72"
+     opacity="0.8"
+     id="polygon44" />
+  <polygon
+     points="900,520 1150,505 1250,550 1050,580"
+     fill="#598c36"
+     opacity="0.6"
+     id="polygon45" />
+  <polygon
+     points="800,610 1050,580 1220,630 900,630"
+     fill="#7bad4c"
+     opacity="0.9"
+     id="polygon46" />
+  <path
+     d="M 600,555             Q 550,550 510,560             T 470,575            T 530,590            T 580,610            Q 620,625 550,650            L 330,650            Q 460,620 480,605            T 430,585            T 480,565            Q 530,550 580,552 Z"
+     fill="url(#riverGrad)"
+     id="path46" />
+  <path
+     d="M 520,563 Q 490,568 465,578"
+     stroke="#ffffff"
+     stroke-width="2"
+     fill="none"
+     opacity="0.6"
+     stroke-linecap="round"
+     id="path47" />
+  <path
+     d="M 480,583 Q 520,590 550,600"
+     stroke="#ffffff"
+     stroke-width="2"
+     fill="none"
+     opacity="0.6"
+     stroke-linecap="round"
+     id="path48" />
+  <path
+     d="M 580,612 Q 600,620 540,642"
+     stroke="#e3f2fd"
+     stroke-width="3"
+     fill="none"
+     opacity="0.8"
+     stroke-linecap="round"
+     id="path49" />
+  <use
+     href="#smallTree"
+     x="320"
+     y="500"
+     id="use49" />
+  <use
+     href="#smallTree"
+     x="340"
+     y="505"
+     id="use50" />
+  <use
+     href="#smallTree"
+     x="300"
+     y="508"
+     id="use51" />
+  <use
+     href="#smallTree"
+     x="360"
+     y="512"
+     id="use52" />
+  <use
+     href="#pineTree"
+     x="275"
+     y="520"
+     transform="scale(1.2)"
+     id="use53" />
+  <use
+     href="#pineTree"
+     x="245"
+     y="525"
+     transform="scale(1.1)"
+     id="use54" />
+  <use
+     href="#pineTree"
+     x="220"
+     y="535"
+     transform="matrix(1.3,0,0,1.3,324.9,-149.4)"
+     id="use55" />
+  <use
+     href="#pineTree"
+     x="200"
+     y="540"
+     transform="scale(1.0)"
+     id="use56" />
+  <use
+     href="#pineTree"
+     x="260"
+     y="500"
+     transform="scale(0.9)"
+     id="use57" />
+  <use
+     href="#pineTree"
+     x="285"
+     y="505"
+     transform="matrix(0.8,0,0,0.8,440.8,116.4)"
+     id="use58" />
+  <use
+     href="#pineTree"
+     x="310"
+     y="500"
+     transform="scale(0.95)"
+     id="use59" />
+  <use
+     href="#smallTree"
+     x="730"
+     y="500"
+     id="use60" />
+  <use
+     href="#smallTree"
+     x="745"
+     y="498"
+     id="use61" />
+  <use
+     href="#smallTree"
+     x="760"
+     y="495"
+     id="use62" />
+  <use
+     href="#smallTree"
+     x="775"
+     y="497"
+     id="use63" />
+  <use
+     href="#smallTree"
+     x="790"
+     y="502"
+     id="use64" />
+  <path
+     d="M 445,615             c -5,-5 -15,-5 -20,0             c -7,-3 -18,2 -18,10             c -5,2 -7,10 -3,15             b c 5,5 25,2 35,-5             c 5,-5 10,-15 6,-20 z"
+     fill="#3a6926"
+     id="path64" />
+  <g
+     fill="#2d521e"
+     id="g67">
+    <circle
+       cx="680"
+       cy="630"
+       r="25"
+       id="circle64" />
+    <circle
+       cx="710"
+       cy="625"
+       r="30"
+       id="circle65" />
+    <circle
+       cx="650"
+       cy="640"
+       r="20"
+       id="circle66" />
+    <circle
+       cx="735"
+       cy="645"
+       r="22"
+       id="circle67" />
+  </g>
+  <g
+     fill="#366324"
+     id="g70">
+    <circle
+       cx="675"
+       cy="625"
+       r="20"
+       id="circle68" />
+    <circle
+       cx="705"
+       cy="615"
+       r="22"
+       id="circle69" />
+    <circle
+       cx="645"
+       cy="635"
+       r="15"
+       id="circle70" />
+  </g>
+</svg>
diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html
index 45ac298..7153da8 100644
--- a/src/app/hero/hero.component.html
+++ b/src/app/hero/hero.component.html
@@ -1,7 +1,7 @@
 <section class="hero">
   <!-- Mountain background layer -->
   <div class="hero-mountains" aria-hidden="true">
-    <img src="svg/mountain-silhouette.svg" alt="">
+    <img src="svg/mountain-landscape.svg" alt="">
   </div>
 
   <!-- Gradient overlay -->