86b2rcabb: Updating guest user signup landing page

venue-reservation/src/app/signup-landing/page.tsx

@@ -1,43 +1,33 @@
 import React from "react";
 import Card from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import BrandingSection from "@/components/branding-section";
+import BrandingSection from "@/components/design/branding-section";
+
 const SignupLanding = () => {
   return (
-    <div className="flex flex-col min-h-screen bg-gray-100 items-center justify-center">
-      <div className="flex flex-col lg:flex-row w-full max-w-5xl items-center lg:items-stretch justify-between p-6 lg:p-12 space-y-6 lg:space-y-0 lg:space-x-12">
+    <div className="flex flex-col min-h-screen bg-gray-100 items-center justify-center px-4 sm:px-6 md:px-8 lg:px-16">
+      <div className="flex flex-col sm:flex-row w-full max-w-8xl gap-8 sm:gap-12 items-center justify-center sm:justify-between">
 
-        {/* Left Branding Section  */}
-        <BrandingSection />
+        {/* Branding Section */}
+        <div className="flex-1 w-full sm:w-[50%] lg:w-[45%] xl:w-[40%] flex justify-center items-center">
+          <BrandingSection/>
+        </div>
 
-        {/* Right Sign-Up Section */}
-        <div className="flex flex-1 items-center justify-center">
+        {/* Signup Section */}
+        <div className="flex-1 w-full sm:w-[50%] lg:w-[40%] xl:w-[35%] flex justify-center items-center">
           <Card>
-            <div className="flex flex-col items-center space-y-6 h-[400px] justify-center">
-              <h2 className="text-2xl font-semibold text-center text-[#584822]">Create a New Account</h2>
-
-              <Button
-                style={{ backgroundColor: '#584822' }}
-                className="w-full h-12 text-lg rounded-md text-white hover:bg-[#6A5B3A]"
-              >
+            <div className="flex flex-col items-center space-y-10">
+              <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-center text-[#584822]" style={{ textShadow: "2px 2px 3px rgba(0, 0, 0, 0.3)" }}>
+                Create a New Account
+              </h2>
+              <Button style={{ backgroundColor: '#584822' }} className="w-full h-12 text-lg rounded-md text-white hover:bg-[#6A5B3A]">
                 Sign up
               </Button>
-              <Button
-                style={{ backgroundColor: '#584822' }}
-                className="w-full h-12 text-lg rounded-md text-white hover:bg-[#6A5B3A]"
-              >
+              <Button style={{ backgroundColor: '#584822' }} className="w-full h-12 text-lg rounded-md text-white hover:bg-[#6A5B3A]">
                 Sign up with Email
               </Button>
-              <Button
-                variant="outline"
-                className="w-full h-12 text-lg rounded-md flex items-center justify-center border-[#584822] text-[#584822] hover:bg-gray-100"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 48 48"
-                  fill="none"
-                  style={{ width: "32px", height: "32px", marginRight:"12px" }} 
-                >
+              <Button variant="outline" className="w-full h-12 text-md font-bold rounded-md flex items-center justify-center border-[#584822] text-[#584822] hover:bg-gray-100">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" style={{ width: "32px", height: "32px", marginRight: "12px" }}>
                   <path fill="#4285F4" d="M44.5 20H24v8.5h11.7C34.9 34.3 30.2 38 24 38c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.7 1.1 7.7 2.9L38.4 8C34.7 4.7 29.7 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c10.8 0 19.8-7.8 21.5-18h-1z" />
                   <path fill="#34A853" d="M6.3 14.7l6.6 4.9C14.3 15.3 18.7 12 24 12c3 0 5.7 1.1 7.7 2.9L38.4 8C34.7 4.7 29.7 2 24 2 16.4 2 9.8 6.2 6.3 14.7z" />
                   <path fill="#FBBC05" d="M24 44c5.5 0 10.2-1.8 13.8-5L31 34.3c-2.1 1.4-4.8 2.2-7.6 2.2-5.8 0-10.7-3.9-12.5-9.2l-6.6 5C8.5 37.7 15.8 44 24 44z" />

venue-reservation/src/components/design/branding-section.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface BrandingSectionProps {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+}
+
+const BrandingSection: React.FC<BrandingSectionProps> = ({
+  title = "RS.",
+  subtitle = "Reservation System",
+  description = "Effortlessly book and manage your event with our seamless reservation system, designed for convenience and flexibility.",
+}) => {
+  return (
+    <div className="bg-gradient-to-b from-[#312405] via-[#735203] to-[#906B11] text-white p-4 sm:p-6 md:p-8 lg:p-10 rounded-3xl shadow-lg w-full h-[50vh] sm:h-[60vh] md:h-[70vh] lg:h-[80vh] xl:h-[85vh] flex flex-col justify-between mx-auto max-w-lg sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl">
+      <div className="mt-4 sm:mt-6 md:mt-8 lg:mt-12 text-center sm:text-left">
+        <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold italic mb-2 sm:mb-4">{title}</h1>
+        <h2 className="text-sm sm:text-base md:text-lg lg:text-xl font-semibold mt-2 sm:mt-4">{subtitle}</h2>
+      </div>
+      <div className="mt-4 sm:mt-6 md:mt-8 lg:mt-10">
+        <p className="text-xs sm:text-sm md:text-base lg:text-lg leading-relaxed">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default BrandingSection;

venue-reservation/src/components/ui/card.tsx

@@ -6,7 +6,7 @@ interface CardProps {
 
 const Card: React.FC<CardProps> = ({ children }) => {
   return (
-    <div className="bg-white p-8 md:p-12 lg:p-16 rounded-3xl shadow-lg w-full  h-[450px]  flex flex-col justify-center">
+    <div className="bg-white p-6 sm:p-8 md:p-10 lg:p-12 xl:p-14 rounded-3xl shadow-lg w-full sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl flex flex-col justify-center items-center sm:h-[50vh] md:h-[60vh] lg:h-[70vh] xl:h-[75vh] mx-auto">
       {children}
     </div>
   );

venue-reservation/tailwind.config.ts

@@ -59,7 +59,15 @@ const config: Config = {
   		},
   		zIndex: {
   			'1': '1'
-  		}
+  		},
+		  screens: {
+			'xs': '360px',
+			'sm': '640px',
+			'md': '768px',
+			'lg': '1024px',
+			'xl': '1280px',
+			'2xl': '1536px',
+		  }
   	}
   },
   plugins: [require("tailwindcss-animate")],