From 203295aab69af4492e1f150e152c0a36f92248f1 Mon Sep 17 00:00:00 2001
From: miranshala <miranshala47@gmail.com>
Date: Tue, 11 Nov 2025 14:49:14 +0100
Subject: [PATCH] responsive

---
 app/page.tsx | 157 ++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 137 insertions(+), 20 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 4fe3ad1..64bca0d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -22,6 +22,7 @@ export default function Home() {
   const { isAuthenticated, user, logout } = useAuth();
   const [showSuccess, setShowSuccess] = useState(false);
   const [userSubscription, setUserSubscription] = useState<any>(null);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   // Check for success message in URL
   useEffect(() => {
@@ -208,6 +209,35 @@ export default function Home() {
                       </button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end" className="w-56">
+                      <DropdownMenuItem asChild>
+                        <a href="/contact" className="cursor-pointer">
+                          Contact
+                        </a>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem asChild>
+                        <a
+                          href="#pricing"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            const pricingSection =
+                              document.getElementById("pricing");
+                            if (pricingSection) {
+                              pricingSection.scrollIntoView({
+                                behavior: "smooth",
+                              });
+                            }
+                          }}
+                          className="cursor-pointer"
+                        >
+                          Pricing
+                        </a>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem asChild>
+                        <a href="/upload" className="cursor-pointer">
+                          Upload File
+                        </a>
+                      </DropdownMenuItem>
+                      <div className="border-t border-gray-200 my-1" />
                       <DropdownMenuItem asChild>
                         <a href="/subscriptions" className="cursor-pointer">
                           My Subscriptions
@@ -230,18 +260,43 @@ export default function Home() {
               ) : (
                 // Show login/signup buttons when not authenticated
                 <>
-                  <a
-                    href="/login"
-                    className="text-gray-700 hover:text-gray-900 px-4 py-2 border border-gray-300 hover:border-gray-400 rounded-md cursor-pointer transition-colors"
+                  {/* Hamburger Button - Mobile (visible when logged out) */}
+                  <button
+                    onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                    className="md:hidden p-2 rounded-md text-gray-700 hover:bg-gray-100"
+                    aria-label="Toggle menu"
                   >
-                    Log In
-                  </a>
-                  <a
-                    href="/signup"
-                    className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-md font-medium cursor-pointer transition-colors"
-                  >
-                    Sign Up
-                  </a>
+                    <svg
+                      className="w-6 h-6"
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      {mobileMenuOpen ? (
+                        <path d="M6 18L18 6M6 6l12 12" />
+                      ) : (
+                        <path d="M4 6h16M4 12h16M4 18h16" />
+                      )}
+                    </svg>
+                  </button>
+                  {/* Desktop Login/Signup Buttons */}
+                  <div className="hidden md:flex items-center space-x-4">
+                    <a
+                      href="/login"
+                      className="text-gray-700 hover:text-gray-900 px-4 py-2 border border-gray-300 hover:border-gray-400 rounded-md cursor-pointer transition-colors"
+                    >
+                      Log In
+                    </a>
+                    <a
+                      href="/signup"
+                      className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-md font-medium cursor-pointer transition-colors"
+                    >
+                      Sign Up
+                    </a>
+                  </div>
                 </>
               )}
             </div>
@@ -249,26 +304,78 @@ export default function Home() {
         </div>
       </nav>
 
+      {/* Mobile Menu Panel - Only show when logged out */}
+      {!isAuthenticated && (
+        <div
+          className={`fixed top-16 right-0 h-[calc(100vh-4rem)] w-64 bg-white border-l border-gray-200 shadow-xl z-50 transform transition-transform duration-300 ease-in-out md:hidden ${
+            mobileMenuOpen ? "translate-x-0" : "translate-x-full"
+          }`}
+        >
+          <div className="flex flex-col p-4 space-y-4">
+            {/* Navigation Links */}
+            <a
+              href="/contact"
+              onClick={() => setMobileMenuOpen(false)}
+              className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
+            >
+              Contact
+            </a>
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                setMobileMenuOpen(false);
+                const pricingSection = document.getElementById("pricing");
+                if (pricingSection) {
+                  pricingSection.scrollIntoView({ behavior: "smooth" });
+                }
+              }}
+              className="px-4 py-2 text-left text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
+            >
+              Pricing
+            </button>
+
+            {/* Divider */}
+            <div className="border-t border-gray-200 my-2" />
+
+            {/* Auth Section - Mobile */}
+            <a
+              href="/login"
+              onClick={() => setMobileMenuOpen(false)}
+              className="px-4 py-2 text-center text-gray-700 border border-gray-300 hover:bg-gray-100 rounded-md transition-colors"
+            >
+              Log In
+            </a>
+            <a
+              href="/signup"
+              onClick={() => setMobileMenuOpen(false)}
+              className="px-4 py-2 text-center bg-orange-500 hover:bg-orange-600 text-white rounded-md transition-colors"
+            >
+              Sign Up
+            </a>
+          </div>
+        </div>
+      )}
+
       {/* Main Content */}
       <div className="flex items-center justify-center min-h-screen">
         <div
-          className="w-[90%] h-[600px] rounded-2xl flex justify-between items-start relative"
+          className="w-[90%] md:w-[90%] h-auto md:h-[600px] rounded-2xl flex flex-col md:flex-row justify-between items-start relative"
           style={{
             backgroundColor: "#FF580F",
             margin: "20px",
             marginTop: "5px",
           }}
         >
-          <div className="ml-8 mt-16">
+          <div className="px-4 md:ml-8 mt-8 md:mt-16 w-full md:w-auto pb-8 md:pb-0">
             <h1
-              className="text-white text-6xl font-bold mb-4"
+              className="text-white text-3xl md:text-6xl font-bold mb-4"
               style={{ fontFamily: "Inter, sans-serif" }}
             >
               Welcome to reYa Render
             </h1>
             <p
-              className="text-white text-2xl"
-              style={{ width: "600px", fontFamily: "Inter, sans-serif" }}
+              className="text-white text-sm md:text-2xl max-w-full md:max-w-[600px] mb-6 md:mb-0 leading-relaxed pr-2 md:pr-0"
+              style={{ fontFamily: "Inter, sans-serif" }}
             >
               Whether you're working on animations, visualizations, or still
               images, our render farm is optimized to deliver high-quality
@@ -276,22 +383,32 @@ export default function Home() {
               take care of the rendering process, saving you time and computing
               power so you can focus on the creative side of your work.
             </p>
-            <div className="flex gap-4 mt-6">
+            <div className="flex flex-col md:flex-row gap-3 md:gap-4 mt-4 md:mt-6 w-full md:w-auto">
               <a
                 href="/contact"
-                className="bg-white text-orange-500 px-6 py-3 rounded-md font-medium hover:bg-gray-100 cursor-pointer transition-colors"
+                className="bg-white text-orange-500 px-4 py-2 md:px-6 md:py-3 rounded-md font-medium hover:bg-gray-100 cursor-pointer transition-colors text-center md:text-left text-sm md:text-base w-full md:w-auto"
               >
                 Contact Us
               </a>
               <a
                 href="/signup"
-                className="bg-transparent border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-orange-500 cursor-pointer transition-colors"
+                className="bg-transparent border-2 border-white text-white px-4 py-2 md:px-6 md:py-3 rounded-md font-medium hover:bg-white hover:text-orange-500 cursor-pointer transition-colors text-center md:text-left text-sm md:text-base w-full md:w-auto"
               >
                 Get Started
               </a>
             </div>
+            {/* Image below text on mobile */}
+            <div className="mt-6 md:hidden flex justify-center">
+              <img
+                src="/creativity.png"
+                alt="3D Model"
+                className="w-full max-w-[250px] h-auto"
+                style={{ display: "block" }}
+              />
+            </div>
           </div>
-          <div className="absolute bottom-4 right-4">
+          {/* Image on desktop */}
+          <div className="absolute bottom-4 right-4 hidden md:block">
             <img
               src="/creativity.png"
               alt="3D Model"