Oslob Whale Shark Booking System

Let me create a responsive booking system for Oslob Whale Shark tours with a clean, ocean-themed design.

Features of the Booking System

This Oslob Whale Shark Booking System includes:

1. Responsive Design - Works on mobile, tablet, and desktop devices
2. Engaging Hero Section - With a call-to-action button to scroll to the booking form
3. Informative About Section - Provides details about the whale shark experience and important guidelines
4. Pricing Section - Displays different tour packages with features and pricing

5. Interactive Booking Form with:

   • Date picker with past dates disabled
   • Package selection
   • Guest count inputs (adults and children)
   • Contact information fields
   • Real-time price calculation
6. Booking Summary - Shows all booking details and payment information
7. Footer - Contains contact information, social media links, and operating hours

How to Use

1. Browse through the information about the whale shark tours
2. Select your preferred package from the pricing section

3. Fill out the booking form with your details:

   • Choose a date
   • Select your package
   • Enter the number of guests
   • Provide your contact information
4. Review your booking summary
5. Confirm and proceed to payment

You can install this code in your Next.js project by clicking the "Add to codebase" button in the Block view. The system uses Tailwind CSS for styling and shadcn/ui components for the UI elements.

To run this code on your PC, you'll need to set up a Next.js project. Here's a step-by-step guide:

Prerequisites

1. Make sure you have Node.js installed (version 18.17 or later recommended)
2. A code editor like Visual Studio Code

Step-by-Step Instructions

1. Create a new Next.js project: Open your terminal/command prompt and run:

   npx create-next-app@latest oslob-booking

   When prompted, select these options:

   • Would you like to use TypeScript? → Yes
   • Would you like to use ESLint? → Yes
   • Would you like to use Tailwind CSS? → Yes
   • Would you like to use the src/ directory? → No
   • Would you like to use App Router? → Yes
   • Would you like to customize the default import alias (@/*)? → Yes (press Enter to accept the default)

2. Navigate to your project folder:

   cd oslob-booking

3. Install required dependencies:

   npm install date-fns clsx tailwind-merge lucide-react

4. Install shadcn/ui components:

   npx shadcn@latest init

   When prompted, select these options:

   • Would you like to use TypeScript? → Yes
   • Which style would you like to use? → Default
   • Which color would you like to use as base color? → Slate
   • Where is your global CSS file? → app/globals.css
   • Do you want to use CSS variables? → Yes
   • Are you using a custom tailwind prefix? → No
   • Where is your tailwind.config.js located? → tailwind.config.js
   • Configure the import alias for components? → @/components
   • Configure the import alias for utils? → @/lib/utils
   • Are you using React Server Components? → Yes

5. Install the required shadcn/ui components:

   npx shadcn@latest add button input label select popover calendar card

6. Copy the code files:

   • Replace the contents of the files that already exist in your project with the code I provided
   • Create new files for components that don't exist yet

7. Start the development server:

   npm run dev
8. View your application: Open your browser and go to http://localhost:3000

Project Structure

Make sure your project structure looks like this:

Troubleshooting

If you encounter any issues:

1. Make sure all dependencies are installed correctly
2. Check for any error messages in the terminal
3. Verify that your file structure matches the one above
4. Ensure you've copied all the code correctly

This setup will give you a fully functional Oslob Whale Shark booking system running locally on your PC. You can then modify it as needed for your specific requirements.