@

Footer: curved top edge with scroll-to-top button

- SVG curved top notch matching the Figma (page color shows through the dip)
- Centered scroll-to-top button (ChevronsUp) with smooth scroll, gold hover

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@

src/app/layout/Footer.tsx

@@ -1,5 +1,40 @@
 import { useState } from 'react'
-import { Send, Share2, AtSign, MessageCircle, MapPin, Phone, Mail } from 'lucide-react'
+import { Send, Share2, AtSign, MessageCircle, MapPin, Phone, Mail, ChevronsUp } from 'lucide-react'
+
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+/* curved top edge with a centered scroll-to-top button (matches the Figma) */
+function FooterCurve() {
+  return (
+    <div style={{ position: 'relative', height: 64, lineHeight: 0, background: 'var(--paper)' }}>
+      <svg viewBox="0 0 1440 64" preserveAspectRatio="none" width="100%" height="64" style={{ display: 'block' }}>
+        {/* white (page) above, navy below, with a smooth central dip */}
+        <path
+          d="M0,0 L612,0 C672,0 686,52 720,52 C754,52 768,0 828,0 L1440,0 L1440,64 L0,64 Z"
+          fill="#071d49"
+        />
+      </svg>
+      {/* scroll-to-top button sitting in the dip */}
+      <button
+        onClick={scrollToTop}
+        aria-label="بازگشت به بالا"
+        style={{
+          position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
+          width: 40, height: 40, borderRadius: '50%', cursor: 'pointer',
+          background: '#071d49', border: '2px solid rgba(255,255,255,0.25)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          transition: 'transform 180ms, background 180ms',
+        }}
+        onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%) translateY(-3px)'; (e.currentTarget as HTMLElement).style.background = '#c9a227' }}
+        onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%)'; (e.currentTarget as HTMLElement).style.background = '#071d49' }}
+      >
+        <ChevronsUp size={20} color="#fff" strokeWidth={2.5} />
+      </button>
+    </div>
+  )
+}
 
 const NAVY = '#071d49'
 const GOLD = '#c9a227'
@@ -95,8 +130,10 @@ function NewsletterBox() {
 
 export function Footer() {
   return (
-    <footer dir="rtl" style={{ backgroundColor: NAVY, color: 'rgba(255,255,255,0.6)' }}>
+    <footer dir="rtl" style={{ color: 'rgba(255,255,255,0.6)' }}>
-      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '60px 48px 48px' }} className="max-md:!px-6 max-md:!py-10">
+      <FooterCurve />
+      <div style={{ backgroundColor: NAVY, maxWidth: '100%' }}>
+      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 48px 48px' }} className="max-md:!px-6 max-md:!py-10">
 
         <div className="grid grid-cols-[1.3fr_0.8fr_1.2fr] max-lg:grid-cols-2 max-md:grid-cols-1 gap-12 max-md:gap-10">
 
@@ -154,6 +191,7 @@ export function Footer() {
           </div>
         </div>
       </div>
+      </div>
 
       {/* copyright bar */}
       <div style={{ background: GOLD, color: NAVY }}>