Update src/pages/HomePage/sections/Hero.tsx

Merge version_3_1781030415733 into main

src/components/Layout.tsx

@@ -53,6 +53,20 @@ export default function Layout() {
         <Outlet />
       </main>
       <SectionErrorBoundary name="footer">
+        <div className="w-full bg-background pt-16">
+          <div className="max-w-content-width mx-auto px-4 sm:px-6 lg:px-8">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3293.0000000000005!2d-119.6981901!3d34.4208305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80e914c66f8b7271%3A0x931109e632b26b36!2s123%20Main%20St%2C%20Santa%20Barbara%2C%20CA%2093101!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus"
+              width="100%"
+              height="350"
+              style={{ border: 0, borderRadius: 'var(--radius)' }}
+              allowFullScreen={false}
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Google Maps Location"
+            ></iframe>
+          </div>
+        </div>
         <FooterBrand
       brand="Phở Bờ Biển"
       columns={[
@@ -104,6 +118,14 @@ export default function Layout() {
             },
           ],
         },
+        {
+          items: [
+            {
+              label: "123 Main St, Santa Barbara, CA 93101",
+              href: "https://maps.google.com/?q=123+Main+St,+Santa+Barbara,+CA+93101",
+            },
+          ],
+        },
       ]}
     />
       </SectionErrorBoundary>

src/pages/HomePage/sections/Contact.tsx

@@ -39,8 +39,9 @@ const ContactInline = () => {
                   <Input type="datetime-local" placeholder="Date & Time" required className="w-full" />
                 </div>
                 <Textarea placeholder="Special Requests (Optional)" rows={3} className="w-full" />
-                <div className="flex justify-center mt-4">
+                <div className="flex justify-center mt-4 gap-4">
                   <Button text="Request Reservation" variant="primary" />
+                  <Button text="Call Restaurant" variant="secondary" href="tel:+1234567890" />
                 </div>
               </form>
             </div>

src/pages/HomePage/sections/Hero.tsx

@@ -21,7 +21,7 @@ export default function HeroSection(): React.JSX.Element {
             text: "Find Us",
             href: "#contact",
           }}
-          imageSrc="http://img.b2bpic.net/free-photo/asian-style-soup-with-noodles-pork-green-onions-closely-bowl-table_1150-22827.jpg"
+          imageSrc="https://pixabay.com/get/gfd1cfdd74cf3bc4cf7125084e4844a36671880c841df6cc3b5ab008ea1b8130a0864271d321d66359ad7b042f25ef0b179966e4751c329a32a6634e7eb2b9d9a_1280.jpg?id=6760889"
         />
         </SectionErrorBoundary>
       </div>