diff --git a/venue-reservation/.vscode/launch.json b/venue-reservation/.vscode/launch.json new file mode 100644 index 00000000..2ba986f6 --- /dev/null +++ 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}" + } + ] +} \ No newline at end of file diff --git a/venue-reservation/package-lock.json b/venue-reservation/package-lock.json index 0396ae58..b84b0534 100644 --- a/venue-reservation/package-lock.json +++ b/venue-reservation/package-lock.json @@ -8,9 +8,10 @@ "name": "venue-reservation", "version": "0.1.0", "dependencies": { - "next": "14.2.15", + "next": "^14.2.15", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^5.3.0" }, "devDependencies": { "@types/node": "^20", @@ -4125,6 +4126,15 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/venue-reservation/package.json b/venue-reservation/package.json index 2f464f8c..97dc4866 100644 --- 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 new file mode 100644 index 00000000..22099290 Binary files /dev/null and b/venue-reservation/public/images/landing image.jpg differ diff --git a/venue-reservation/src/app/layout.tsx b/venue-reservation/src/app/layout.tsx index a36cde01..09b1b8ca 100644 --- 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({ - {children} + + {/* Main content */} +
{children}
+ {/* Global Footer */} + ); diff --git a/venue-reservation/src/app/layout/Footer.tsx b/venue-reservation/src/app/layout/Footer.tsx new file mode 100644 index 00000000..67e57584 --- /dev/null +++ b/venue-reservation/src/app/layout/Footer.tsx @@ -0,0 +1,60 @@ +import React from 'react'; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/venue-reservation/src/app/layout/Header.tsx b/venue-reservation/src/app/layout/Header.tsx new file mode 100644 index 00000000..740036b6 --- /dev/null +++ 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 ( +
+
+
+ {/* Add the Logo here */} + +
+ + {/* Hamburger menu for mobile */} +
+ +
+ + {/* Nav menu for larger screens */} + +
+ + {/* Sidebar menu for mobile */} +
+
+ + +
+ + +
+
+ ); +}; + +export default Header; diff --git a/venue-reservation/src/app/layout/Logo.tsx b/venue-reservation/src/app/layout/Logo.tsx new file mode 100644 index 00000000..3b811196 --- /dev/null +++ b/venue-reservation/src/app/layout/Logo.tsx @@ -0,0 +1,12 @@ +"use client"; +import React from 'react'; + +const Logo = () => { + return ( +
+ MyLogo +
+ ); +}; + +export default Logo; diff --git a/venue-reservation/src/app/layouts/Footer.tsx b/venue-reservation/src/app/layouts/Footer.tsx new file mode 100644 index 00000000..67e57584 --- /dev/null +++ b/venue-reservation/src/app/layouts/Footer.tsx @@ -0,0 +1,60 @@ +import React from 'react'; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/venue-reservation/src/app/layouts/Header.tsx b/venue-reservation/src/app/layouts/Header.tsx new file mode 100644 index 00000000..740036b6 --- /dev/null +++ b/venue-reservation/src/app/layouts/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 ( +
+
+
+ {/* Add the Logo here */} + +
+ + {/* Hamburger menu for mobile */} +
+ +
+ + {/* Nav menu for larger screens */} + +
+ + {/* Sidebar menu for mobile */} +
+
+ + +
+ + +
+
+ ); +}; + +export default Header; diff --git a/venue-reservation/src/app/layouts/Logo.tsx b/venue-reservation/src/app/layouts/Logo.tsx new file mode 100644 index 00000000..3b811196 --- /dev/null +++ b/venue-reservation/src/app/layouts/Logo.tsx @@ -0,0 +1,12 @@ +"use client"; +import React from 'react'; + +const Logo = () => { + return ( +
+ MyLogo +
+ ); +}; + +export default Logo; diff --git a/venue-reservation/src/app/page.tsx b/venue-reservation/src/app/page.tsx index 561a281a..a976a362 100644 --- a/venue-reservation/src/app/page.tsx +++ b/venue-reservation/src/app/page.tsx @@ -1,16 +1,202 @@ -import VenueCard from '@/components/venue_card/user_venue_card'; +"use client"; + +import Carousel from '@/components/carousel'; +import React from 'react'; +import LandingVenueCard from '@/components/venue_card/landing_venue_card'; +import Header from '@/app/layout/Header'; +import Footer from "@/app/layout/Footer"; + +const AdditionalSection = () => { + const images = [ + '/images/image1.jpg', + '/images/image2.jpg', + '/images/image3.jpg' + ]; -const LandingPage = () => { return ( -
- - {/* Main Content */} -
- +
+ {/* Left Column */} +
+ +
+ Row 1 Image + +
+

Explore more to get out of
your comfort zone

+

Find your perfect venue for unforgettable moments

+
+ + +
+ + {/* Second Image */} +
+ Row 2 Image +
+
+ + {/* Right Column with Carousel */} +
+ +
+
+ ); +}; + +// Types of venues +const VenueType = () => { + const venueTypes = [ + { name: "Auditorium", image: "/images/image1.jpg", description: "A large room for public gatherings." }, + { name: "Conference Hall", image: "/images/image2.jpg", description: "Ideal for corporate events." }, + { name: "Outdoor Garden", image: "/images/image3.jpg", description: "Perfect for outdoor celebrations." }, + { name: "Banquet Hall", image: "/images/image2.jpg", description: "Spacious venue for dining events." }, + { name: "Rooftop", image: "/images/image3.jpg", description: "A scenic view for exclusive events." }, + ]; + + return ( +
+

Type of Venues

+
+
+ {venueTypes.map((venue, index) => ( +
+ {venue.name} +
+

{venue.name}

+

{venue.description}

+
+
+ ))} +
+
+
+ ); +}; + +// Main FontsPage component +const FontsPage = (): JSX.Element => { + + return ( +
+ {/* Main Content */} + < Header /> +
+

{}

+ + {/* Call-to-Action Section */} +
+
+

+ Tailored Spaces,
Reserved for You +

+

+ Instantly discover the best venues for events, meetings, and celebrations.
Start planning your perfect event today. +

+
+ +
+
+
+ + + + + {/* Additional Section */} +
+
+

+ Are you looking for a venue? +

+ +
+
+ + + +
+ 01. Discover Your Ideal Venue + Temukan destinasi selanjutnya yang akan kamu kunjungi dengan Destinize. +
+
+ +
+ + + +
+ 02. Plan Your Event + Discover and select the perfect venue based on your specific needs. +
+
+ +
+ + + +
+ 03. Make A Reservation + Easily reserve your chosen venue online and get instant confirmation. +
+
+
+ + {/* Right Side Image */} +
+ Venue +
+
+
+ + + + +
); }; -export default LandingPage; +export default FontsPage; \ No newline at end of file diff --git a/venue-reservation/src/components/venue_card/landing_venue_card.tsx b/venue-reservation/src/components/venue_card/landing_venue_card.tsx new file mode 100644 index 00000000..e365ed59 --- /dev/null +++ b/venue-reservation/src/components/venue_card/landing_venue_card.tsx @@ -0,0 +1,58 @@ +import Carousel from '../carousel'; + +const LandingVenueCard = () => { + + const images = [ + '/images/image1.jpg', + '/images/image2.jpg', + '/images/image3.jpg' + ]; + + return ( +
+ {/* Image Section */} +
+ +
+ + {/* Details Section */} +
+
+

Trace Auditorium

+

Bay 6, Trace Expert City, Maradana, Colombo, Western Province

+

Type: Auditorium

+

Capacity: 500 seated

+

Size: 5000 sqft

+

Time Schedule: Entire Day

+
+ +
+

Features:

+
    +
  • State-of-the-art acoustics system
    • +
  • Ergonomic seating for maximum comfort
    • +
  • Advanced lighting system
    • +
  • High-definition projector and screen
    • +
+
+ + {/* Reserve Now Button */} +
+ +
+
+
+ ); +}; + +export default LandingVenueCard; \ No newline at end of file diff --git a/venue-reservation/src/components/venue_card/user_venue_card.tsx b/venue-reservation/src/components/venue_card/user_venue_card.tsx index d5b5de60..7cb221a7 100644 --- a/venue-reservation/src/components/venue_card/user_venue_card.tsx +++ b/venue-reservation/src/components/venue_card/user_venue_card.tsx @@ -8,7 +8,7 @@ const VenueCard = () => { ]; return ( -
+
{/* Image Section */}