feat: modal component

public/assets/css/modal.css

@@ -0,0 +1,38 @@
+/* Modal.css */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  position: relative;
+  max-width: 500px;
+  width: 100%;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.modal-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #333;
+}
+
+.modal-close:hover {
+  color: #000;
+}

public/assets/css/styles.css

@@ -5,6 +5,7 @@
 @import "./magnific-popup.css";
 @import "./owl.carousel.css";
 @import "./splitting.css";
+@import "./modal.css";
 @import "./YTPlayer.css";
 @import "./demo-main/demo-main.css";
 @import "./demo-bold/demo-bold.css";

src/app/(main)/page.tsx

@@ -7,7 +7,6 @@ export const metadata = {
   description: "Resonance — One & Multi Page React Nextjs Creative Template",
   keywords: "Cochise Oncology, Oncology, Healthcare, Medical Services, Cancer Treatment",
   author: "Cochise Oncology",
-  viewport: "width=device-width, initial-scale=1.0",
   robots: "index, follow",
   og: {
     title: "HomePage - Cochise Oncology",
@@ -25,6 +24,11 @@ export const metadata = {
   },
 };
 
+export const viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
 export default function Home() {
   return (
     <>

src/components/Hero.tsx

@@ -2,6 +2,7 @@
 
 import { useRef } from "react";
 import Link from "next/link";
+import Modal from "./Modal";
 
 export default function Hero6() {
   const videoRef = useRef<any | null>(null);

src/components/Modal.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+interface ModalProps {
+  isOpen: boolean; // Whether the modal is open or not
+  onClose: () => void; // Function to close the modal
+  children: React.ReactNode; // Content to be displayed inside the modal
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        <button className="modal-close" onClick={onClose}>
+          &times;
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;