forked from veda/www_veda_2025
		
	add build start scripts
This commit is contained in:
		
							
								
								
									
										105
									
								
								src/components/Gallery.jsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										105
									
								
								src/components/Gallery.jsx
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,105 @@
 | 
			
		||||
import * as React from 'react';
 | 
			
		||||
import ImageList from '@mui/material/ImageList';
 | 
			
		||||
import ImageListItem from '@mui/material/ImageListItem';
 | 
			
		||||
import Box from '@mui/material/Box';
 | 
			
		||||
 | 
			
		||||
function srcset(image, size, rows = 1, cols = 1) {
 | 
			
		||||
  return {
 | 
			
		||||
    src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
 | 
			
		||||
    srcSet: `${image}?w=${size * cols}&h=${
 | 
			
		||||
      size * rows
 | 
			
		||||
    }&fit=crop&auto=format&dpr=2 2x`,
 | 
			
		||||
  };
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const itemData = [
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
 | 
			
		||||
    title: 'Breakfast',
 | 
			
		||||
    rows: 2,
 | 
			
		||||
    cols: 2,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
 | 
			
		||||
    title: 'Burger',
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
 | 
			
		||||
    title: 'Camera',
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
 | 
			
		||||
    title: 'Coffee',
 | 
			
		||||
    cols: 2,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
 | 
			
		||||
    title: 'Hats',
 | 
			
		||||
    cols: 2,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
 | 
			
		||||
    title: 'Honey',
 | 
			
		||||
    author: '@arwinneil',
 | 
			
		||||
    rows: 2,
 | 
			
		||||
    cols: 2,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
 | 
			
		||||
    title: 'Basketball',
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
 | 
			
		||||
    title: 'Fern',
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
 | 
			
		||||
    title: 'Mushrooms',
 | 
			
		||||
    rows: 2,
 | 
			
		||||
    cols: 2,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
 | 
			
		||||
    title: 'Tomato basil',
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
 | 
			
		||||
    title: 'Sea star',
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
 | 
			
		||||
    title: 'Bike',
 | 
			
		||||
    cols: 2,
 | 
			
		||||
  },
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const Gallery = () => {
 | 
			
		||||
  return (
 | 
			
		||||
    <Box
 | 
			
		||||
      display="flex"
 | 
			
		||||
      justifyContent="center"
 | 
			
		||||
      alignItems="center"
 | 
			
		||||
      minHeight="100vh"
 | 
			
		||||
      padding={2}
 | 
			
		||||
    >
 | 
			
		||||
      <ImageList
 | 
			
		||||
        sx={{ width: 500, height: 450 }}
 | 
			
		||||
        variant="quilted"
 | 
			
		||||
        cols={4}
 | 
			
		||||
        rowHeight={121}
 | 
			
		||||
      >
 | 
			
		||||
        {itemData.map((item) => (
 | 
			
		||||
          <ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
 | 
			
		||||
            <img
 | 
			
		||||
              {...srcset(item.img, 121, item.rows, item.cols)}
 | 
			
		||||
              alt={item.title}
 | 
			
		||||
              loading="lazy"
 | 
			
		||||
            />
 | 
			
		||||
          </ImageListItem>
 | 
			
		||||
        ))}
 | 
			
		||||
      </ImageList>
 | 
			
		||||
    </Box>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default Gallery;
 | 
			
		||||
@@ -71,7 +71,7 @@ function MobileNavigation() {
 | 
			
		||||
        <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
 | 
			
		||||
        <MobileNavLink href="/experiences">EXPERIENCES</MobileNavLink>
 | 
			
		||||
        <NavLink href="/itinerary">ITINERARY</NavLink>
 | 
			
		||||
        <MobileNavLink href="#pricing">GALLERY</MobileNavLink>
 | 
			
		||||
        <MobileNavLink href="/gallery">GALLERY</MobileNavLink>
 | 
			
		||||
        <hr className="m-2 border-slate-300/40" />
 | 
			
		||||
        <MobileNavLink href="/login">BOOK NOW</MobileNavLink>
 | 
			
		||||
      </PopoverPanel>
 | 
			
		||||
 
 | 
			
		||||
@@ -2,9 +2,6 @@
 | 
			
		||||
 | 
			
		||||
import { useState } from 'react'
 | 
			
		||||
import {
 | 
			
		||||
  Disclosure,
 | 
			
		||||
  DisclosureButton,
 | 
			
		||||
  DisclosurePanel,
 | 
			
		||||
  Radio,
 | 
			
		||||
  RadioGroup,
 | 
			
		||||
  Tab,
 | 
			
		||||
@@ -14,7 +11,7 @@ import {
 | 
			
		||||
  TabPanels,
 | 
			
		||||
} from '@headlessui/react'
 | 
			
		||||
import { StarIcon } from '@heroicons/react/20/solid'
 | 
			
		||||
import { HeartIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
 | 
			
		||||
import { HeartIcon } from '@heroicons/react/24/outline'
 | 
			
		||||
 | 
			
		||||
const product = {
 | 
			
		||||
  name: 'VEDA I',
 | 
			
		||||
@@ -165,35 +162,17 @@ export default function Example() {
 | 
			
		||||
                Additional details
 | 
			
		||||
              </h2>
 | 
			
		||||
 | 
			
		||||
              <div className="divide-y divide-white border-t">
 | 
			
		||||
                {product.details.map((detail) => (
 | 
			
		||||
                  <Disclosure key={detail.name} as="div">
 | 
			
		||||
                    <h3>
 | 
			
		||||
                      <DisclosureButton className="group relative flex w-full items-center justify-between py-6 text-left">
 | 
			
		||||
                        <span className="text-sm font-medium text-gray-900 group-data-[open]:text-indigo-600">
 | 
			
		||||
                          {detail.name}
 | 
			
		||||
                        </span>
 | 
			
		||||
                        <span className="ml-6 flex items-center">
 | 
			
		||||
                          <PlusIcon
 | 
			
		||||
                            aria-hidden="true"
 | 
			
		||||
                            className="block h-6 w-6 text-gray-400 group-hover:text-gray-500 group-data-[open]:hidden"
 | 
			
		||||
                          />
 | 
			
		||||
                          <MinusIcon
 | 
			
		||||
                            aria-hidden="true"
 | 
			
		||||
                            className="hidden h-6 w-6 text-indigo-400 group-hover:text-indigo-500 group-data-[open]:block"
 | 
			
		||||
                          />
 | 
			
		||||
                        </span>
 | 
			
		||||
                      </DisclosureButton>
 | 
			
		||||
                    </h3>
 | 
			
		||||
                    <DisclosurePanel className="prose prose-sm pb-6">
 | 
			
		||||
                      <ul role="list">
 | 
			
		||||
                        {detail.items.map((item) => (
 | 
			
		||||
                          <li key={item}>{item}</li>
 | 
			
		||||
                        ))}
 | 
			
		||||
                      </ul>
 | 
			
		||||
                    </DisclosurePanel>
 | 
			
		||||
                  </Disclosure>
 | 
			
		||||
                ))}
 | 
			
		||||
              <div className="border-t border-gray-200 pt-6">
 | 
			
		||||
                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
 | 
			
		||||
                <div className="mt-4">
 | 
			
		||||
                  <ul role="list" className="list-disc pl-5 space-y-2">
 | 
			
		||||
                    {product.details[0].items.map((item) => (
 | 
			
		||||
                      <li key={item} className="text-gray-700">
 | 
			
		||||
                        <span className="text-gray-900">{item}</span>
 | 
			
		||||
                      </li>
 | 
			
		||||
                    ))}
 | 
			
		||||
                  </ul>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <form className="mt-6">
 | 
			
		||||
              <div className="mt-10 flex">
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,12 @@
 | 
			
		||||
 | 
			
		||||
import { useState } from 'react'
 | 
			
		||||
import {
 | 
			
		||||
  Disclosure,
 | 
			
		||||
  DisclosureButton,
 | 
			
		||||
  DisclosurePanel,
 | 
			
		||||
  Tab,
 | 
			
		||||
  TabGroup,
 | 
			
		||||
  TabList,
 | 
			
		||||
  TabPanel,
 | 
			
		||||
  TabPanels,
 | 
			
		||||
} from '@headlessui/react'
 | 
			
		||||
import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
 | 
			
		||||
 | 
			
		||||
const product = {
 | 
			
		||||
  name: 'VEDA II',
 | 
			
		||||
@@ -166,35 +162,17 @@ export default function Example() {
 | 
			
		||||
                Additional details
 | 
			
		||||
              </h2>
 | 
			
		||||
 | 
			
		||||
              <div className="divide-y divide-gray-200 border-t">
 | 
			
		||||
                {product.details.map((detail) => (
 | 
			
		||||
                  <Disclosure key={detail.name} as="div">
 | 
			
		||||
                    <h3>
 | 
			
		||||
                      <DisclosureButton className="group relative flex w-full items-center justify-between py-6 text-left">
 | 
			
		||||
                        <span className="text-sm font-medium text-gray-900 group-open:text-indigo-600">
 | 
			
		||||
                          {detail.name}
 | 
			
		||||
                        </span>
 | 
			
		||||
                        <span className="ml-6 flex items-center">
 | 
			
		||||
                          <PlusIcon
 | 
			
		||||
                            aria-hidden="true"
 | 
			
		||||
                            className="block h-6 w-6 text-gray-400 group-hover:text-gray-500 group-open:hidden"
 | 
			
		||||
                          />
 | 
			
		||||
                          <MinusIcon
 | 
			
		||||
                            aria-hidden="true"
 | 
			
		||||
                            className="hidden h-6 w-6 text-indigo-400 group-hover:text-indigo-500 group-open:block"
 | 
			
		||||
                          />
 | 
			
		||||
                        </span>
 | 
			
		||||
                      </DisclosureButton>
 | 
			
		||||
                    </h3>
 | 
			
		||||
                    <DisclosurePanel className="prose prose-sm pb-6">
 | 
			
		||||
                      <ul role="list">
 | 
			
		||||
                        {detail.items.map((item) => (
 | 
			
		||||
                          <li key={item}>{item}</li>
 | 
			
		||||
                        ))}
 | 
			
		||||
                      </ul>
 | 
			
		||||
                    </DisclosurePanel>
 | 
			
		||||
                  </Disclosure>
 | 
			
		||||
                ))}
 | 
			
		||||
              <div className="border-t border-gray-200 pt-6">
 | 
			
		||||
                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
 | 
			
		||||
                <div className="mt-4">
 | 
			
		||||
                  <ul role="list" className="list-disc pl-5 space-y-2">
 | 
			
		||||
                    {product.details[0].items.map((item) => (
 | 
			
		||||
                      <li key={item} className="text-gray-700">
 | 
			
		||||
                        <span className="text-gray-900">{item}</span>
 | 
			
		||||
                      </li>
 | 
			
		||||
                    ))}
 | 
			
		||||
                  </ul>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <form className="mt-6">
 | 
			
		||||
                <div className="mt-10 flex">
 | 
			
		||||
 
 | 
			
		||||
@@ -2,9 +2,6 @@
 | 
			
		||||
 | 
			
		||||
import { useState } from 'react'
 | 
			
		||||
import {
 | 
			
		||||
  Disclosure,
 | 
			
		||||
  DisclosureButton,
 | 
			
		||||
  DisclosurePanel,
 | 
			
		||||
  Radio,
 | 
			
		||||
  RadioGroup,
 | 
			
		||||
  Tab,
 | 
			
		||||
@@ -14,7 +11,7 @@ import {
 | 
			
		||||
  TabPanels,
 | 
			
		||||
} from '@headlessui/react'
 | 
			
		||||
import { StarIcon } from '@heroicons/react/20/solid'
 | 
			
		||||
import { HeartIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
 | 
			
		||||
import { HeartIcon } from '@heroicons/react/24/outline'
 | 
			
		||||
 | 
			
		||||
const product = {
 | 
			
		||||
  name: 'VEDA III',
 | 
			
		||||
@@ -162,35 +159,17 @@ export default function Example() {
 | 
			
		||||
                Additional details
 | 
			
		||||
              </h2>
 | 
			
		||||
 | 
			
		||||
              <div className="divide-y divide-white border-t">
 | 
			
		||||
                {product.details.map((detail) => (
 | 
			
		||||
                  <Disclosure key={detail.name} as="div">
 | 
			
		||||
                    <h3>
 | 
			
		||||
                      <DisclosureButton className="group relative flex w-full items-center justify-between py-6 text-left">
 | 
			
		||||
                        <span className="text-sm font-medium text-gray-900 group-data-[open]:text-indigo-600">
 | 
			
		||||
                          {detail.name}
 | 
			
		||||
                        </span>
 | 
			
		||||
                        <span className="ml-6 flex items-center">
 | 
			
		||||
                          <PlusIcon
 | 
			
		||||
                            aria-hidden="true"
 | 
			
		||||
                            className="block h-6 w-6 text-gray-400 group-hover:text-gray-500 group-data-[open]:hidden"
 | 
			
		||||
                          />
 | 
			
		||||
                          <MinusIcon
 | 
			
		||||
                            aria-hidden="true"
 | 
			
		||||
                            className="hidden h-6 w-6 text-indigo-400 group-hover:text-indigo-500 group-data-[open]:block"
 | 
			
		||||
                          />
 | 
			
		||||
                        </span>
 | 
			
		||||
                      </DisclosureButton>
 | 
			
		||||
                    </h3>
 | 
			
		||||
                    <DisclosurePanel className="prose prose-sm pb-6">
 | 
			
		||||
                      <ul role="list">
 | 
			
		||||
                        {detail.items.map((item) => (
 | 
			
		||||
                          <li key={item}>{item}</li>
 | 
			
		||||
                        ))}
 | 
			
		||||
                      </ul>
 | 
			
		||||
                    </DisclosurePanel>
 | 
			
		||||
                  </Disclosure>
 | 
			
		||||
                ))}
 | 
			
		||||
              <div className="border-t border-gray-200 pt-6">
 | 
			
		||||
                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
 | 
			
		||||
                <div className="mt-4">
 | 
			
		||||
                  <ul role="list" className="list-disc pl-5 space-y-2">
 | 
			
		||||
                    {product.details[0].items.map((item) => (
 | 
			
		||||
                      <li key={item} className="text-gray-700">
 | 
			
		||||
                        <span className="text-gray-900">{item}</span>
 | 
			
		||||
                      </li>
 | 
			
		||||
                    ))}
 | 
			
		||||
                  </ul>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <form className="mt-6">
 | 
			
		||||
              <div className="mt-10 flex">
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,12 @@
 | 
			
		||||
 | 
			
		||||
import { useState } from 'react'
 | 
			
		||||
import {
 | 
			
		||||
  Disclosure,
 | 
			
		||||
  DisclosureButton,
 | 
			
		||||
  DisclosurePanel,
 | 
			
		||||
  Tab,
 | 
			
		||||
  TabGroup,
 | 
			
		||||
  TabList,
 | 
			
		||||
  TabPanel,
 | 
			
		||||
  TabPanels,
 | 
			
		||||
} from '@headlessui/react'
 | 
			
		||||
import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
 | 
			
		||||
 | 
			
		||||
const product = {
 | 
			
		||||
  name: 'VEDA IV',
 | 
			
		||||
@@ -166,35 +162,17 @@ export default function Example() {
 | 
			
		||||
                Additional details
 | 
			
		||||
              </h2>
 | 
			
		||||
 | 
			
		||||
              <div className="divide-y divide-gray-200 border-t">
 | 
			
		||||
                {product.details.map((detail) => (
 | 
			
		||||
                  <Disclosure key={detail.name} as="div">
 | 
			
		||||
                    <h3>
 | 
			
		||||
                      <DisclosureButton className="group relative flex w-full items-center justify-between py-6 text-left">
 | 
			
		||||
                        <span className="text-sm font-medium text-gray-900 group-open:text-indigo-600">
 | 
			
		||||
                          {detail.name}
 | 
			
		||||
                        </span>
 | 
			
		||||
                        <span className="ml-6 flex items-center">
 | 
			
		||||
                          <PlusIcon
 | 
			
		||||
                            aria-hidden="true"
 | 
			
		||||
                            className="block h-6 w-6 text-gray-400 group-hover:text-gray-500 group-open:hidden"
 | 
			
		||||
                          />
 | 
			
		||||
                          <MinusIcon
 | 
			
		||||
                            aria-hidden="true"
 | 
			
		||||
                            className="hidden h-6 w-6 text-indigo-400 group-hover:text-indigo-500 group-open:block"
 | 
			
		||||
                          />
 | 
			
		||||
                        </span>
 | 
			
		||||
                      </DisclosureButton>
 | 
			
		||||
                    </h3>
 | 
			
		||||
                    <DisclosurePanel className="prose prose-sm pb-6">
 | 
			
		||||
                      <ul role="list">
 | 
			
		||||
                        {detail.items.map((item) => (
 | 
			
		||||
                          <li key={item}>{item}</li>
 | 
			
		||||
                        ))}
 | 
			
		||||
                      </ul>
 | 
			
		||||
                    </DisclosurePanel>
 | 
			
		||||
                  </Disclosure>
 | 
			
		||||
                ))}
 | 
			
		||||
              <div className="border-t border-gray-200 pt-6">
 | 
			
		||||
                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
 | 
			
		||||
                <div className="mt-4">
 | 
			
		||||
                  <ul role="list" className="list-disc pl-5 space-y-2">
 | 
			
		||||
                    {product.details[0].items.map((item) => (
 | 
			
		||||
                      <li key={item} className="text-gray-700">
 | 
			
		||||
                        <span className="text-gray-900">{item}</span>
 | 
			
		||||
                      </li>
 | 
			
		||||
                    ))}
 | 
			
		||||
                  </ul>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <form className="mt-6">
 | 
			
		||||
                <div className="mt-10 flex">
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user