tracet2t · s92068606 · Oct 22, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024
diff --git a/venue-reservation/.vscode/launch.json b/venue-reservation/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/venue-reservation/package-lock.json b/venue-reservation/package-lock.json
diff --git a/venue-reservation/package.json b/venue-reservation/package.json
@@ -14,13 +14,13 @@
     "next": "14.2.15"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.15",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.15"
+    "typescript": "^5"
   }
 }
diff --git a/venue-reservation/public/images/landing image.jpg b/venue-reservation/public/images/landing image.jpg
diff --git a/venue-reservation/src/app/layout.tsx b/venue-reservation/src/app/layout.tsx
@@ -14,7 +14,7 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Venue Reservation",
   description: "Generated by create next app",
 };
 
@@ -28,7 +28,11 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+
+         {/* Main content */}
+        <main>{children}</main>
+        {/* Global Footer */}
+
       </body>
     </html>
   );

diff --git a/venue-reservation/src/app/layout/Footer.tsx b/venue-reservation/src/app/layout/Footer.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className="bg-[#f7fafc] mt-16">
+      <div className="max-w-8xl mx-auto p-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8">
+        {/* First Column */}
+        <div className="flex flex-col">
+          <h3 className="text-[#6A5B3A] text-xl sm:text-2xl mb-2">Venue Reservation</h3>
+          <p className="text-sm text-gray-600 mb-2">A Venue Reservation System is a streamlined platform that allows users to easily browse, book, and manage reservations for event spaces like auditoriums and conference rooms.</p>
+          <p className="text-sm text-gray-600">+9476-3451121</p>
+          <p className="text-sm text-gray-600">[email protected]</p>
+          <p className="text-sm text-gray-600">533, Maradana Road, Colombo</p>
+        </div>
+
+        {/* Second Column */}
+        <div className="flex flex-col">
+          <h3 className="text-[#6A5B3A] text-xl sm:text-2xl mb-2">Quick Links</h3>
+          <ul className="text-sm text-gray-600">
+            <li> Dashboard</li>
+            <li> Blog</li>
+          </ul>
+        </div>
+
+        {/* Third Column */}
+        <div className="flex flex-col">
+          <h3 className="text-[#6A5B3A] text-xl sm:text-2xl mb-2">Support</h3>
+          <ul className="text-sm text-gray-600">
+            <li> WhatsApp</li>
+            <li> Telegram</li>
+          </ul>
+        </div>
+
+        {/* Fourth Column */}
+        <div className="flex flex-col">
+          <h3 className="text-[#584822] text-xl sm:text-2xl mb-2">Get Updates</h3>
+          <div className="flex flex-col sm:flex-row items-start sm:items-center">
+            <input 
+              type="email" 
+              placeholder="Enter your email" 
+              className="border border-gray-300 p-2 rounded-md mb-2 sm:mb-0 sm:mr-2 w-full"
+            />
+            <button 
+              className="bg-[#584822] text-white px-4 py-2 rounded-md transition-colors duration-200 ease-in-out hover:bg-[#7B6C48] cursor-pointer"
+            >
+              Subscribe
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="text-center py-4 bg-[#e2e8f0]">
+        <p className="text-sm text-gray-600">Created By TeamReserv | &copy; All Rights Reserved</p>
+        <p className="text-sm text-gray-600">Privacy Policy | Terms of Services</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/venue-reservation/src/app/layout/Header.tsx b/venue-reservation/src/app/layout/Header.tsx
@@ -0,0 +1,94 @@
+"use client";
+import React, { useState } from "react";
+import Logo from "./Logo";
+const Header = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <header className="bg-white shadow-lg">
+      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
+        <div>
+          {/* Add the Logo here */}
+          <Logo />
+        </div>
+
+        {/* Hamburger menu for mobile */}
+        <div className="lg:hidden">
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="text-gray-700 focus:outline-none"
+          >
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Nav menu for larger screens */}
+        <nav className="hidden lg:flex items-center space-x-4">
+          <button className="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300 transition duration-200 ease-in-out">
+            Login
+          </button>
+          <button
+            style={{ backgroundColor: "#584822" }}
+            className="text-white px-4 py-2 rounded hover:bg-[#6A5B3A] transition duration-200 ease-in-out"
+          >
+            Signup
+          </button>
+        </nav>
+      </div>
+
+      {/* Sidebar menu for mobile */}
+      <div
+        className={`lg:hidden fixed top-0 left-0 h-full w-64 bg-white shadow-lg transform ${
+          isOpen ? "translate-x-0" : "-translate-x-full"
+        } transition-transform duration-300 ease-in-out`}
+      >
+        <div className="flex justify-between items-center p-4">
+          <Logo />
+          <button onClick={() => setIsOpen(false)} className="text-gray-700">
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <nav className="flex flex-col items-start space-y-4 p-4">
+          <button className="bg-gray-200 text-gray-700 w-full text-left px-4 py-2 rounded hover:bg-gray-300 transition duration-200 ease-in-out text-sm">
+            Login
+          </button>
+          <button
+            style={{ backgroundColor: "#584822" }}
+            className="text-white w-full text-left px-4 py-2 rounded hover:bg-[#6A5B3A] transition duration-200 ease-in-out text-sm"
+          >
+            Signup
+          </button>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/venue-reservation/src/app/layout/Logo.tsx b/venue-reservation/src/app/layout/Logo.tsx
@@ -0,0 +1,12 @@
+"use client";
+import React from 'react';
+
+const Logo = () => {
+  return (
+    <div className="text-2xl font-bold text-gray-800" style={{ marginRight: 'auto' }}>
+      MyLogo 
+    </div>
+  );
+};
+
+export default Logo;
diff --git a/venue-reservation/src/app/layouts/Footer.tsx b/venue-reservation/src/app/layouts/Footer.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className="bg-[#f7fafc] mt-16">
+      <div className="max-w-8xl mx-auto p-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8">
+        {/* First Column */}
+        <div className="flex flex-col">
+          <h3 className="text-[#6A5B3A] text-xl sm:text-2xl mb-2">Venue Reservation</h3>
+          <p className="text-sm text-gray-600 mb-2">A Venue Reservation System is a streamlined platform that allows users to easily browse, book, and manage reservations for event spaces like auditoriums and conference rooms.</p>
+          <p className="text-sm text-gray-600">+9476-3451121</p>
+          <p className="text-sm text-gray-600">[email protected]</p>
+          <p className="text-sm text-gray-600">533, Maradana Road, Colombo</p>
+        </div>
+
+        {/* Second Column */}
+        <div className="flex flex-col">
+          <h3 className="text-[#6A5B3A] text-xl sm:text-2xl mb-2">Quick Links</h3>
+          <ul className="text-sm text-gray-600">
+            <li> Dashboard</li>
+            <li> Blog</li>
+          </ul>
+        </div>
+
+        {/* Third Column */}
+        <div className="flex flex-col">
+          <h3 className="text-[#6A5B3A] text-xl sm:text-2xl mb-2">Support</h3>
+          <ul className="text-sm text-gray-600">
+            <li> WhatsApp</li>
+            <li> Telegram</li>
+          </ul>
+        </div>
+
+        {/* Fourth Column */}
+        <div className="flex flex-col">
+          <h3 className="text-[#584822] text-xl sm:text-2xl mb-2">Get Updates</h3>
+          <div className="flex flex-col sm:flex-row items-start sm:items-center">
+            <input 
+              type="email" 
+              placeholder="Enter your email" 
+              className="border border-gray-300 p-2 rounded-md mb-2 sm:mb-0 sm:mr-2 w-full"
+            />
+            <button 
+              className="bg-[#584822] text-white px-4 py-2 rounded-md transition-colors duration-200 ease-in-out hover:bg-[#7B6C48] cursor-pointer"
+            >
+              Subscribe
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="text-center py-4 bg-[#e2e8f0]">
+        <p className="text-sm text-gray-600">Created By TeamReserv | &copy; All Rights Reserved</p>
+        <p className="text-sm text-gray-600">Privacy Policy | Terms of Services</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;