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