From 862c0254cbdec5ec8aae517200b282b6ff887e83 Mon Sep 17 00:00:00 2001
From: Inferno2211 <abirjerry2211@gmail.com>
Date: Mon, 26 Aug 2024 21:08:49 +0530
Subject: [PATCH 1/3] add popup

Signed-off-by: Inferno2211 <abirjerry2211@gmail.com>
---
 src/app/home/page.tsx       | 200 +++++++++++++++++++-----------------
 src/components/ui/popup.tsx |  54 ++++++++++
 2 files changed, 159 insertions(+), 95 deletions(-)
 create mode 100644 src/components/ui/popup.tsx

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 1a3d160..f58efa6 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import React from 'react';
+import { useState } from 'react';
 import { Box, Button, Typography } from '@mui/material';
 import { Poppins } from "next/font/google";
+import Popup from '@/components/ui/popup';
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -10,118 +11,127 @@ const poppins = Poppins({
 });
 
 const Home = () => {
-  return (
-    <Box
-      sx={{
-        position: 'relative',
-        minHeight: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 0,
-        overflow: 'hidden',
-      }}
-    >
-      {/* Background Video */}
-      <Box
-        component="video"
-        autoPlay
-        loop
-        muted
-        sx={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          objectFit: 'cover',
-          zIndex: -1,
-          opacity: 0.5,  // Adjust opacity for background video
-        }}
-      >
-        <source src="/4.mp4" type="video/mp4" />
-        Your browser does not support the video tag.
-      </Box>
+  const [isPopupOpen, setIsPopupOpen] = useState(true);
 
-      {/* Content */}
-      <Typography
-        variant="h2"
-        component="h1"
-        className={poppins.className}
-        sx={{
-          fontSize: '5rem',
-          fontWeight: 'bold',
-          color: '#ffff',
-          textAlign: 'center',
-          marginBottom: '3rem',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          borderRight: '.15em solid #001ea5',
-          animation: 'typing 3.5s steps(30, end), blink-caret .75s step-end infinite',
-          '& span': {
-            background: '#001ea5',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            display: 'inline',
-          },
-        }}
-      >
-        Welcome to A.T.O.M Robotics
-      </Typography>
+  const openPopup = () => setIsPopupOpen(true);
+  const closePopup = () => setIsPopupOpen(false);
+
+  return (
+    <>
+      <Popup isOpen={isPopupOpen} onClose={closePopup} />
 
       <Box
         sx={{
+          position: 'relative',
+          minHeight: '100vh',
           display: 'flex',
-          flexDirection: 'row',
-          gap: '2rem',
-          marginTop: '2rem',
-          flexWrap: 'wrap',
+          flexDirection: 'column',
+          alignItems: 'center',
           justifyContent: 'center',
+          padding: 0,
+          overflow: 'hidden',
         }}
       >
-        <Button
+        {/* Background Video */}
+        <Box
+          component="video"
+          autoPlay
+          loop
+          muted
           sx={{
-            background: '#0d47a1',
-            color: 'white',
-            borderRadius: '20px',
-            fontWeight: 'bold',
-            padding: '0.5rem 1rem',
-            '&:hover': {
-              background: '#0a3b6c',
-            },
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            zIndex: -1,
+            opacity: 0.5,  // Adjust opacity for background video
           }}
         >
-          Contact Us
-        </Button>
-        <Button
+          <source src="/4.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </Box>
+
+        {/* Content */}
+        <Typography
+          variant="h2"
+          component="h1"
+          className={poppins.className}
           sx={{
-            background: '#0d47a1',
-            color: 'white',
-            borderRadius: '20px',
+            fontSize: '5rem',
             fontWeight: 'bold',
-            padding: '0.5rem 1rem',
-            '&:hover': {
-              background: '#0a3b6c',
+            color: '#ffff',
+            textAlign: 'center',
+            marginBottom: '3rem',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            borderRight: '.15em solid #001ea5',
+            animation: 'typing 3.5s steps(30, end), blink-caret .75s step-end infinite',
+            '& span': {
+              background: '#001ea5',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              display: 'inline',
             },
           }}
         >
-          Selection Task
-        </Button>
-      </Box>
+          Welcome to A.T.O.M Robotics
+        </Typography>
 
-      <style jsx>{`
-        @keyframes typing {
-          from { width: 0 }
-          to { width: 100% }
-        }
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '2rem',
+            marginTop: '2rem',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+          }}
+        >
+          <Button
+            sx={{
+              background: '#0d47a1',
+              color: 'white',
+              borderRadius: '20px',
+              fontWeight: 'bold',
+              padding: '0.5rem 1rem',
+              '&:hover': {
+                background: '#0a3b6c',
+              },
+            }}
+          >
+            Contact Us
+          </Button>
+          <Button
+            sx={{
+              background: '#0d47a1',
+              color: 'white',
+              borderRadius: '20px',
+              fontWeight: 'bold',
+              padding: '0.5rem 1rem',
+              '&:hover': {
+                background: '#0a3b6c',
+              },
+            }}
+          >
+            Selection Task
+          </Button>
+        </Box>
 
-        @keyframes blink-caret {
-          from, to { border-color: transparent }
-          50% { border-color: #001ea5; }
-        }
-      `}</style>
-    </Box>
+        <style jsx>{`
+          @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+          }
+
+          @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #001ea5; }
+          }
+        `}</style>
+      </Box>
+    </>
   );
 };
 
diff --git a/src/components/ui/popup.tsx b/src/components/ui/popup.tsx
new file mode 100644
index 0000000..c5a1574
--- /dev/null
+++ b/src/components/ui/popup.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const Popup: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <>
+                    <motion.div
+                        className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={onClose}
+                    />
+
+                    {/* parent div to center */}
+                    <motion.div
+                        className="fixed inset-0 flex items-center justify-center z-50"
+                        initial={{ scale: 0.8 }}
+                        animate={{ scale: 1 }}
+                        exit={{ scale: 0.8 }}
+                        role="dialog"
+                        aria-labelledby="popup-title"
+                    >
+                        <div className="bg-white p-6 rounded-lg shadow-lg w-80">
+                            <button
+                                className="absolute top-3 right-3 text-xl text-gray-700 hover:text-red-900"
+                                onClick={onClose}
+                                aria-label="Close"
+                            >
+                                &times;
+                            </button>
+                            
+                            {/* yaha content daal dena  */}
+                            <div className="text-center">
+                                <h2 id="popup-title" className="text-xl text-gray-700 font-semibold mb-4">Orientation Notice</h2>
+                                <p className="text-gray-700 mb-4">The orientation is scheduled for September 7th.</p>
+                                <button
+                                    className="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                                    onClick={onClose}
+                                >
+                                    OK!
+                                </button>
+                            </div>
+                        </div>
+                    </motion.div>
+                </>
+            )}
+        </AnimatePresence>
+    );
+};
+
+export default Popup;
\ No newline at end of file

From 0f37f1d188e95f8affc0238ec2555967d7ad0044 Mon Sep 17 00:00:00 2001
From: Inferno2211 <abirjerry2211@gmail.com>
Date: Tue, 27 Aug 2024 22:12:35 +0530
Subject: [PATCH 2/3] made popup into a generic wrapper

Signed-off-by: Inferno2211 <abirjerry2211@gmail.com>
---
 src/app/home/page.tsx       |  8 +++++++-
 src/components/ui/popup.tsx | 14 +++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index f58efa6..fd32f59 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -18,7 +18,13 @@ const Home = () => {
 
   return (
     <>
-      <Popup isOpen={isPopupOpen} onClose={closePopup} />
+      <Popup isOpen={isPopupOpen} onClose={closePopup}>
+        {/* Yaha apna content dal lo */}
+        <h2 id="popup-title" className="text-xl text-gray-700 font-bold mb-4">Orientation Notice</h2>
+        <h2 className="text-xl text-gray-700 font-semibold mb-2">Custom Content</h2>
+        <p className="text-gray-700 mb-4">The orientation is scheduled for September 7th.</p>
+        <img src="https://via.placeholder.com/150" alt="Placeholder" className="mx-auto" />
+      </Popup>
 
       <Box
         sx={{
diff --git a/src/components/ui/popup.tsx b/src/components/ui/popup.tsx
index c5a1574..34f6b62 100644
--- a/src/components/ui/popup.tsx
+++ b/src/components/ui/popup.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
-const Popup: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
+// Adjust the props to include children
+const Popup: React.FC<{ isOpen: boolean; onClose: () => void; children?: React.ReactNode }> = ({ isOpen, onClose, children }) => {
     return (
         <AnimatePresence>
             {isOpen && (
@@ -14,7 +15,6 @@ const Popup: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onC
                         onClick={onClose}
                     />
 
-                    {/* parent div to center */}
                     <motion.div
                         className="fixed inset-0 flex items-center justify-center z-50"
                         initial={{ scale: 0.8 }}
@@ -23,7 +23,7 @@ const Popup: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onC
                         role="dialog"
                         aria-labelledby="popup-title"
                     >
-                        <div className="bg-white p-6 rounded-lg shadow-lg w-80">
+                        <div className="bg-white p-6 rounded-lg shadow-lg w-80 relative">
                             <button
                                 className="absolute top-3 right-3 text-xl text-gray-700 hover:text-red-900"
                                 onClick={onClose}
@@ -31,11 +31,11 @@ const Popup: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onC
                             >
                                 &times;
                             </button>
-                            
-                            {/* yaha content daal dena  */}
+
+                            {/* Render the children here */}
                             <div className="text-center">
-                                <h2 id="popup-title" className="text-xl text-gray-700 font-semibold mb-4">Orientation Notice</h2>
-                                <p className="text-gray-700 mb-4">The orientation is scheduled for September 7th.</p>
+                                {/* <h2 id="popup-title" className="text-xl text-gray-700 font-semibold mb-4">Popup Title</h2> */}
+                                {children}
                                 <button
                                     className="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                                     onClick={onClose}

From ae534a481fe35f2a0949e508e344276c760996eb Mon Sep 17 00:00:00 2001
From: Inferno2211 <abirjerry2211@gmail.com>
Date: Tue, 27 Aug 2024 22:26:47 +0530
Subject: [PATCH 3/3] fixed merge conflict

---
 src/app/home/page.tsx | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index fd32f59..a378a86 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -13,7 +13,6 @@ const poppins = Poppins({
 const Home = () => {
   const [isPopupOpen, setIsPopupOpen] = useState(true);
 
-  const openPopup = () => setIsPopupOpen(true);
   const closePopup = () => setIsPopupOpen(false);
 
   return (
@@ -65,11 +64,11 @@ const Home = () => {
           component="h1"
           className={poppins.className}
           sx={{
-            fontSize: '5rem',
+            fontSize: { xs: '1.5rem', sm: '2rem', md: '3rem', lg: '4rem', xl: '5rem' },  // Adjusted responsive font size
             fontWeight: 'bold',
             color: '#ffff',
             textAlign: 'center',
-            marginBottom: '3rem',
+            marginBottom: { xs: '1.5rem', sm: '2rem', md: '3rem' },
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             borderRight: '.15em solid #001ea5',
@@ -89,7 +88,7 @@ const Home = () => {
           sx={{
             display: 'flex',
             flexDirection: 'row',
-            gap: '2rem',
+            gap: { xs: '1rem', sm: '1.5rem', md: '2rem' },
             marginTop: '2rem',
             flexWrap: 'wrap',
             justifyContent: 'center',
@@ -101,7 +100,7 @@ const Home = () => {
               color: 'white',
               borderRadius: '20px',
               fontWeight: 'bold',
-              padding: '0.5rem 1rem',
+              padding: { xs: '0.5rem 1rem', sm: '0.5rem 1.25rem', md: '0.5rem 1.5rem' },
               '&:hover': {
                 background: '#0a3b6c',
               },
@@ -115,7 +114,7 @@ const Home = () => {
               color: 'white',
               borderRadius: '20px',
               fontWeight: 'bold',
-              padding: '0.5rem 1rem',
+              padding: { xs: '0.5rem 1rem', sm: '0.5rem 1.25rem', md: '0.5rem 1.5rem' },
               '&:hover': {
                 background: '#0a3b6c',
               },
@@ -126,19 +125,19 @@ const Home = () => {
         </Box>
 
         <style jsx>{`
-          @keyframes typing {
-            from { width: 0 }
-            to { width: 100% }
-          }
+        @keyframes typing {
+          from { width: 0 }
+          to { width: 90% }
+        }
 
-          @keyframes blink-caret {
-            from, to { border-color: transparent }
-            50% { border-color: #001ea5; }
-          }
-        `}</style>
+        @keyframes blink-caret {
+          from, to { border-color: transparent }
+          50% { border-color: #001ea5; }
+        }
+      `}</style>
       </Box>
     </>
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file