├── .eslintrc.json ├── .gitattributes ├── .github └── FUNDING.yml ├── .gitignore ├── README.md ├── components ├── artists │ ├── ArtistBio.js │ └── ArtistBio.module.css ├── common │ ├── ObjectsList.js │ └── ObjectsList.module.css ├── events │ ├── EventTicket.js │ ├── EventTicket.module.css │ ├── EventTickets.js │ ├── EventsList.js │ ├── EventsList.module.css │ ├── tickets │ │ ├── EventBar.js │ │ ├── EventBar.module.css │ │ ├── MultiRangeSlider.js │ │ ├── TicketSelector.js │ │ ├── TicketSelector.module.css │ │ ├── multiRangeSlider.module.css │ │ ├── ticketsList.js │ │ ├── ticketsList.module.css │ │ ├── ticketsListBody.js │ │ └── ticketsListBody.module.css │ └── ui │ │ ├── Button3.js │ │ └── Button3.module.css └── home │ └── homepage1 │ ├── Header │ ├── headerNav.js │ ├── headerNav.module.css │ ├── index.js │ ├── navMenuDraw.js │ └── navMenuDraw.module.css │ ├── americanExpress.js │ ├── americanExpress.module.css │ ├── artsTheater.js │ ├── artsTheater.module.css │ ├── browseCategory.js │ ├── browseCategory.module.css │ ├── discoverMoreEvents.js │ ├── discoverMoreEvents.module.css │ ├── family.js │ ├── family.module.css │ ├── headerBody.js │ ├── headerBody.module.css │ ├── sports.js │ ├── sports.module.css │ ├── topSelling.js │ └── topSelling.module.css ├── data.js ├── data └── tickets.json ├── modules ├── home │ └── HomePage.jsx └── layout │ ├── Header1 │ ├── headerNav.js │ ├── index.jsx │ └── navMenuDraw.jsx │ ├── Layout.jsx │ ├── MainContent.jsx │ └── footer │ ├── index.jsx │ └── index.module.css ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── api │ ├── americanExpress │ │ └── featured.js │ ├── artists │ │ └── featured.js │ ├── artsTheaters │ │ └── featured.js │ ├── browseCategories │ │ └── featured.js │ ├── discoverMoreEvents │ │ └── featured.js │ ├── events │ │ ├── [artistId] │ │ │ └── [eventId] │ │ │ │ ├── dates.js │ │ │ │ └── tickets.js │ │ └── featured.js │ ├── families │ │ └── featured.js │ ├── sports │ │ └── featured.js │ └── topSellings │ │ └── featured.js ├── events │ └── [artistId] │ │ └── [eventId] │ │ ├── Header │ │ ├── headerNav.js │ │ ├── headerNav.module.css │ │ ├── index.jsx │ │ ├── navMenuDraw.jsx │ │ └── navMenuDraw.module.css │ │ ├── [date] │ │ ├── index.js │ │ └── index.module.css │ │ ├── eventsAllConcerts.js │ │ ├── eventsAllConcerts.module.css │ │ ├── eventsEricChurch.js │ │ ├── eventsEricChurch.module.css │ │ ├── eventsFans.js │ │ ├── eventsFans.module.css │ │ ├── eventsHeader.js │ │ ├── eventsHeader.module.css │ │ ├── index.js │ │ └── index.module.css ├── index.js ├── signIn │ ├── index.js │ └── index.module.css └── signUp │ ├── index.js │ └── index.module.css ├── public ├── favicon.ico ├── images │ ├── Events │ │ ├── Group 43.png │ │ ├── Group 44.png │ │ ├── Group 45.png │ │ ├── Group 46.png │ │ ├── Group 47.png │ │ ├── Group 65.png │ │ ├── Group.png │ │ ├── Rectangle 44.png │ │ ├── banner.png │ │ ├── .png │ │ └── .png │ ├── Group 132.png │ ├── Group 133.png │ ├── Group 43.png │ ├── Group 44.png │ ├── Group 45.png │ ├── Group 46.png │ ├── Group 47.png │ ├── Homepage1 │ │ ├── Arrow 1.png │ │ ├── Group 100.png │ │ ├── Group 101.png │ │ ├── Group 102.png │ │ ├── Group 103.png │ │ ├── Group 104.png │ │ ├── Group 108.png │ │ ├── Group 109.png │ │ ├── Group 110.png │ │ ├── Group 111.png │ │ ├── Group 112.png │ │ ├── Group 113.png │ │ ├── Group 114.png │ │ ├── Group 115.png │ │ ├── Group 116.png │ │ ├── Group 117.png │ │ ├── Group 118.png │ │ ├── Group 119.png │ │ ├── Group 120.png │ │ ├── Group 121.png │ │ ├── Group 122.png │ │ ├── Group 123.png │ │ ├── Group 124.png │ │ ├── Group 125.png │ │ ├── Group 126.png │ │ ├── Group 127.png │ │ ├── Group 128.png │ │ ├── Group 129.png │ │ ├── Group 130.png │ │ ├── Group 131.png │ │ ├── Group 89.png │ │ ├── Group 90.png │ │ ├── Group 91.png │ │ ├── Group 92.png │ │ ├── Group 93.png │ │ ├── Group 94.png │ │ ├── Group 95.png │ │ ├── Group 96.png │ │ ├── Group 97.png │ │ ├── Group 98.png │ │ ├── Group 99.png │ │ ├── Mask Group.png │ │ ├── Mask Group1.png │ │ ├── Rectangle 18 (1).png │ │ ├── Rectangle 18 (2).png │ │ ├── Rectangle 18.png │ │ ├── Rectangle 188.png │ │ ├── Rectangle 36 (1).png │ │ ├── Rectangle 36 (2).png │ │ ├── Rectangle 36 (3).png │ │ ├── Rectangle 36 (4).png │ │ ├── Rectangle 36 (5).png │ │ ├── Rectangle 36.png │ │ ├── city-location.png │ │ ├── logo-white 1.png │ │ └── star.png │ ├── Line 1.png │ ├── Rectangle 40.png │ ├── Rectangle 42.png │ ├── Tickets │ │ ├── Rectangle 1.png │ │ ├── Rectangle 2.png │ │ ├── Rectangle 30.png │ │ ├── Screenshot_1 1.png │ │ ├── Vector (1).png │ │ ├── Vector.png │ │ └── image 1.png │ ├── Unity.png │ ├── apple.png │ ├── artists │ │ ├── angeles │ │ │ └── small.webp │ │ ├── maluma │ │ │ └── small.jpg │ │ └── nodal │ │ │ └── small.png │ ├── ative-select-allow.png │ ├── bottom-line.png │ ├── image 2.png │ ├── select-allow.png │ ├── signIn │ │ ├── Group 89.png │ │ ├── lock.png │ │ ├── logo 1.png │ │ └── message.png │ └── venues │ │ ├── PLAZA DE TOROS LAY OUT AF 2020-1.png │ │ ├── caliente │ │ └── small.webp │ │ └── monumental │ │ ├── big.png │ │ └── small.jpg ├── images1 │ ├── artists │ │ ├── angeles │ │ │ └── small.webp │ │ ├── maluma │ │ │ └── small.jpg │ │ └── nodal │ │ │ └── small.png │ ├── events │ │ ├── angeles │ │ │ └── 40años │ │ │ │ └── big.jpg │ │ ├── maluma │ │ │ └── papi │ │ │ │ └── big.webp │ │ └── nodal │ │ │ └── ayayay │ │ │ └── big.jpg │ └── venues │ │ ├── caliente │ │ └── small.webp │ │ └── monumental │ │ ├── big.png │ │ └── small.jpg └── vercel.svg ├── styles ├── Home.module.css └── globals.css └── utils ├── db.js └── nav.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 9This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /components/artists/ArtistBio.js: -------------------------------------------------------------------------------- 1 | import classes from './ArtistBio.module.css'; 2 | import parse from 'html-react-parser'; 3 | 4 | export default function ArtistBio(props) { 5 | const { artistDetails } = props; 6 | 7 | return ( 8 |
9 | {artistDetails?.bio ? parse(artistDetails.bio) : 'No Bio'} 10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /components/artists/ArtistBio.module.css: -------------------------------------------------------------------------------- 1 | .cont { 2 | font-family: Helvetica; 3 | font-style: normal; 4 | font-weight: normal; 5 | font-size: 16px; 6 | line-height: 28px; 7 | padding: 126px 200px 0 200px; 8 | } 9 | -------------------------------------------------------------------------------- /components/common/ObjectsList.js: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import classes from './ObjectsList.module.css'; 3 | 4 | function Card(props) { 5 | const { image, title, desc, href } = props; 6 | 7 | return ( 8 |
9 | 10 | {image && } 11 |

{title}

12 |
{desc}
13 | 14 |
15 | ); 16 | } 17 | 18 | export default function ObjectsList(props) { 19 | const { objs } = props; 20 | 21 | return ( 22 |
23 | {objs?.map((obj, i) => ( 24 | 31 | ))} 32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /components/common/ObjectsList.module.css: -------------------------------------------------------------------------------- 1 | .cont { 2 | display: flex; 3 | justify-content: space-between; 4 | gap: 30px; 5 | } 6 | 7 | .card { 8 | width: 330px; 9 | height: 366px; 10 | 11 | background: #ffffff; 12 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); 13 | border-radius: 8px; 14 | } 15 | 16 | .card:hover { 17 | cursor: pointer; 18 | } 19 | 20 | .card div, 21 | .card h3 { 22 | margin: 5px 15px 0 15px; 23 | } 24 | 25 | .card div { 26 | font-family: Helvetica; 27 | font-style: normal; 28 | font-weight: normal; 29 | font-size: 16px; 30 | line-height: 24px; 31 | /* or 150% */ 32 | 33 | color: #a9bcd0; 34 | } 35 | -------------------------------------------------------------------------------- /components/events/EventTicket.js: -------------------------------------------------------------------------------- 1 | import classes from './EventTicket.module.css'; 2 | 3 | export default function EventTicket(props) { 4 | const { ticket } = props; 5 | 6 | return ( 7 |
8 |
9 | Zone: {ticket.zone.name}, Row: {ticket.row} 10 |
11 |
12 | {ticket.price.value.toLocaleString('en-US', { 13 | style: 'currency', 14 | currency: ticket.price.currency, 15 | })}{' '} 16 | ea 17 |
18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /components/events/EventTicket.module.css: -------------------------------------------------------------------------------- 1 | .cont { 2 | width: 100%; 3 | padding: 5px; 4 | background-color: aliceblue; 5 | border: 1px solid blue; 6 | margin: 2px; 7 | display: flex; 8 | gap: 20px; 9 | } 10 | -------------------------------------------------------------------------------- /components/events/EventTickets.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { useQuery } from 'react-query'; 3 | import Select from 'react-select'; 4 | import { getTickets } from '../../utils/db'; 5 | import EventTicket from './EventTicket'; 6 | 7 | const numberOfTickets = [ 8 | { value: 1, label: '1' }, 9 | { value: 2, label: '2' }, 10 | { value: 3, label: '3' }, 11 | { value: 4, label: '4' }, 12 | { value: 5, label: '5' }, 13 | { value: 6, label: '6' }, 14 | { value: 7, label: '7' }, 15 | { value: 8, label: '8' }, 16 | ]; 17 | const zones = [ 18 | { value: 'BRRR', label: 'BARRERA SOMBRA' }, 19 | { value: 'TND1', label: '1ER TENDIDO SOMBRA' }, 20 | { value: 'TND2', label: '2DO TENDIDO SOMBRA' }, 21 | { value: 'GNRL', label: 'GENERAL SOMBRA' }, 22 | { value: 'TNDA', label: 'T. ALTO' }, 23 | ]; 24 | 25 | export default function EventTickets(props) { 26 | const { event } = props; 27 | const [ticketsCnt, setTicketsCnt] = useState(2); 28 | const [zone, setZone] = useState(); 29 | const [priceRange] = useState(event.priceRange); 30 | 31 | const { data, isLoading, isError } = useQuery(['tickets', zone], () => { 32 | return getTickets(event, ticketsCnt, zone, priceRange); 33 | }); 34 | 35 | if (isLoading) return
React Skelleton should be here
; 36 | if (isError) return
Error component should be here
; 37 | 38 | return ( 39 |
40 |

Event Tickets

41 | setZone(newVal.value)} /> 47 |
48 | {data && 49 | data.map((ticket, idx) => )} 50 |
51 |
52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /components/events/EventsList.js: -------------------------------------------------------------------------------- 1 | import classes from './EventsList.module.css'; 2 | import Link from 'next/link'; 3 | 4 | function EventDate(props) { 5 | const { eventDate } = props; 6 | 7 | return ( 8 |
9 | {eventDate.date} 10 |
11 |

{eventDate.venue}

12 |

{eventDate.city}

13 |
14 | 20 | See Tickets 21 | 22 |
23 | ); 24 | } 25 | 26 | export default function EventsList(props) { 27 | const { eventDates } = props; 28 | 29 | const noEvents = !eventDates || eventDates.length == 0; 30 | 31 | return ( 32 |
33 | {noEvents ? ( 34 |

No events found

35 | ) : ( 36 | <> 37 |
38 |

Here be filters...

39 |
40 |
41 | {eventDates.map((obj, i) => ( 42 | 43 | ))} 44 |
45 | 46 | )} 47 |
48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /components/events/EventsList.module.css: -------------------------------------------------------------------------------- 1 | .cont { 2 | padding-top: 40px; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | .list { 10 | width: 100%; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .row { 18 | position: relative; 19 | display: flex; 20 | align-items: center; 21 | margin: 10px; 22 | gap: 40px; 23 | width: 1410px; 24 | border-bottom: 2px solid #a9bcd0; 25 | } 26 | 27 | .row span { 28 | font-family: Helvetica; 29 | font-style: normal; 30 | font-weight: bold; 31 | font-size: 18px; 32 | line-height: 21px; 33 | /* identical to box height */ 34 | 35 | color: #daa49a; 36 | } 37 | 38 | .row a { 39 | position: absolute; 40 | right: 200px; 41 | width: 128px; 42 | height: 44px; 43 | 44 | background: #daa49a; 45 | border-radius: 5px; 46 | 47 | font-family: Helvetica; 48 | font-style: normal; 49 | font-weight: bold; 50 | font-size: 16px; 51 | line-height: 18px; 52 | 53 | color: #ffffff; 54 | 55 | display: grid; 56 | place-items: center; 57 | } 58 | -------------------------------------------------------------------------------- /components/events/tickets/EventBar.js: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import Button from '../ui/Button3'; 3 | import classes from './EventBar.module.css'; 4 | export default function EventBar(props) { 5 | const { event, eventDate, artist } = props; 6 | if (!event) return null; 7 | return ( 8 |
9 | 15 |
16 |
17 | {event.artist.name} 18 | 19 |
20 | {eventDate.date} 21 | 22 | {eventDate.venue}, {eventDate.venue} 23 | 24 |
25 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /components/events/tickets/EventBar.module.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | width: 100%; 3 | background-color: #58a4b0; 4 | padding: 1.3em 3em 1.3em 3em; 5 | display: flex; 6 | z-index: 90; 7 | } 8 | 9 | .img { 10 | border-radius: 5%; 11 | } 12 | 13 | .det { 14 | padding-left: 30px; 15 | color: white; 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | } 20 | 21 | .tit { 22 | font-size: 1.5em; 23 | font-weight: bold; 24 | margin-bottom: 1em; 25 | margin-right: 1em; 26 | } 27 | 28 | .txt { 29 | font-size: 1.3em; 30 | margin-bottom: 0.5em; 31 | } 32 | -------------------------------------------------------------------------------- /components/events/tickets/MultiRangeSlider.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState, useRef } from "react"; 2 | import classnames from "classnames"; 3 | import PropTypes from "prop-types"; 4 | import classes from "./multiRangeSlider.module.css"; 5 | import './multiRangeSlider.module.css' 6 | 7 | const MultiRangeSlider = ({ min, max, onChange }) => { 8 | const [minVal, setMinVal] = useState(min); 9 | const [maxVal, setMaxVal] = useState(max); 10 | const minValRef = useRef(null); 11 | const maxValRef = useRef(null); 12 | const range = useRef(null); 13 | 14 | // Convert to percentage 15 | const getPercent = useCallback( 16 | (value) => Math.round(((value - min) / (max - min)) * 100), 17 | [min, max] 18 | ); 19 | 20 | // Set width of the range to decrease from the left side 21 | useEffect(() => { 22 | if (maxValRef.current) { 23 | const minPercent = getPercent(minVal); 24 | const maxPercent = getPercent(+maxValRef.current.value); // Preceding with '+' converts the value from type string to type number 25 | 26 | if (range.current) { 27 | range.current.style.left = `${minPercent}%`; 28 | range.current.style.width = `${maxPercent - minPercent}%`; 29 | } 30 | } 31 | }, [minVal, getPercent]); 32 | 33 | // Set width of the range to decrease from the right side 34 | useEffect(() => { 35 | if (minValRef.current) { 36 | const minPercent = getPercent(+minValRef.current.value); 37 | const maxPercent = getPercent(maxVal); 38 | 39 | if (range.current) { 40 | range.current.style.width = `${maxPercent - minPercent}%`; 41 | } 42 | } 43 | }, [maxVal, getPercent]); 44 | 45 | // Get min and max values when their state changes 46 | useEffect(() => { 47 | onChange({ min: minVal, max: maxVal }); 48 | }, [minVal, maxVal, onChange]); 49 | 50 | return ( 51 |
52 | { 59 | const value = Math.min(+event.target.value, maxVal - 1); 60 | setMinVal(value); 61 | event.target.value = value.toString(); 62 | }} 63 | className={classnames(`${classes.thumb} ${classes.thumbZindex3}`, { 64 | [classes.thumbZindex5]: minVal > max - 100 65 | })} 66 | /> 67 | { 74 | const value = Math.max(+event.target.value, minVal + 1); 75 | setMaxVal(value); 76 | event.target.value = value.toString(); 77 | }} 78 | className={`${classes.thumb} ${classes.thumbZindex4}`} 79 | /> 80 | 81 |
82 |
83 |
84 |
${minVal}
85 |
${maxVal}
86 |
87 |
88 | ); 89 | }; 90 | 91 | MultiRangeSlider.propTypes = { 92 | min: PropTypes.number.isRequired, 93 | max: PropTypes.number.isRequired, 94 | onChange: PropTypes.func.isRequired 95 | }; 96 | 97 | export default MultiRangeSlider; 98 | -------------------------------------------------------------------------------- /components/events/tickets/TicketSelector.js: -------------------------------------------------------------------------------- 1 | import classes from './TicketSelector.module.css'; 2 | import { useEffect, useState } from 'react'; 3 | import Select from 'react-select'; 4 | import Skeleton from 'react-loading-skeleton'; 5 | import { getVenueSetupByEvent } from '../../../data'; 6 | import TicketsList from './ticketsList'; 7 | import 'react-loading-skeleton/dist/skeleton.css'; 8 | 9 | export default function TicketSelector(props) { 10 | const { eventid } = props; 11 | const [setup, setSetup] = useState(); 12 | const tickets = []; 13 | 14 | useEffect(() => { 15 | // Here axios will take time to load the data and then... 16 | setTimeout(() => { 17 | const setup = getVenueSetupByEvent(eventid); 18 | setSetup(setup); 19 | }, 1500); 20 | }, []); 21 | 22 | if (setup) 23 | for (let i = 1; i <= setup.maxTickets; ++i) 24 | tickets.push({ value: i, label: i }); 25 | 26 | return ( 27 |
28 | {setup ? ( 29 | 35 | ) : ( 36 | 37 | )} 38 | 39 |
40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /components/events/tickets/TicketSelector.module.css: -------------------------------------------------------------------------------- 1 | .sel { 2 | width: 30%; 3 | background-color: white; 4 | /* padding: 30px 20px; */ 5 | padding: 30px 0 0 0; 6 | margin: 15px 0 0 0; 7 | display: flex; 8 | flex-direction: column; 9 | gap: 20px; 10 | } 11 | .margin { 12 | } 13 | .selectField { 14 | margin: 0 20px; 15 | border: 1px solid #58A4B0; 16 | border-radius: 5px; 17 | z-index: 200!important; 18 | } 19 | .selectField1 { 20 | margin: 0 20px; 21 | border: 1px solid #58A4B0; 22 | border-radius: 5px; 23 | z-index: 100!important; 24 | } 25 | -------------------------------------------------------------------------------- /components/events/tickets/multiRangeSlider.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: auto; 3 | display: flex; 4 | justify-content: center; 5 | margin-top: 30px; 6 | padding: 0 20px; 7 | } 8 | 9 | .slider { 10 | position: relative; 11 | width: 170px; 12 | } 13 | 14 | .slider__track, 15 | .slider__range, 16 | .slider__leftValue, 17 | .slider__rightValue { 18 | position: absolute; 19 | } 20 | .rightValue { 21 | position: absolute; 22 | top: -10px; 23 | right: -70px; 24 | border: 1px solid #58A4B0; 25 | padding: 5px 10px; 26 | } 27 | .leftValue { 28 | position: absolute; 29 | top: -10px; 30 | left: -70px; 31 | border: 1px solid #58A4B0; 32 | padding: 5px 10px; 33 | } 34 | 35 | .slider__track, 36 | .slider__range { 37 | border-radius: 3px; 38 | height: 5px; 39 | } 40 | 41 | .slider__track { 42 | background-color: #ced4da; 43 | width: 100%; 44 | z-index: 1; 45 | } 46 | 47 | .slider__range { 48 | background-color: #9fe5e1; 49 | z-index: 2; 50 | } 51 | 52 | .slider__left-value, 53 | .slider__right-value { 54 | color: #dee2e6; 55 | font-size: 12px; 56 | margin-top: 20px; 57 | } 58 | 59 | .slider__left-value { 60 | left: 6px; 61 | } 62 | 63 | .slider__right-value { 64 | right: -4px; 65 | } 66 | 67 | /* Removing the default appearance */ 68 | .thumb, 69 | .thumb::-webkit-slider-thumb { 70 | -webkit-appearance: none; 71 | -webkit-tap-highlight-color: transparent; 72 | } 73 | 74 | .thumb { 75 | pointer-events: none; 76 | position: absolute; 77 | height: 0; 78 | width: 170px; 79 | outline: none; 80 | } 81 | 82 | .thumbZindex3 { 83 | z-index: 3; 84 | } 85 | 86 | .thumbZindex4 { 87 | z-index: 4; 88 | } 89 | 90 | .thumbZindex5 { 91 | z-index: 5; 92 | } 93 | 94 | /* For Chrome browsers */ 95 | .thumb::-webkit-slider-thumb { 96 | background-color: #f1f5f7; 97 | border: none; 98 | border-radius: 50%; 99 | box-shadow: 0 0 1px 1px #ced4da; 100 | cursor: pointer; 101 | height: 18px; 102 | width: 18px; 103 | margin-top: 4px; 104 | pointer-events: all; 105 | position: relative; 106 | } 107 | 108 | /* For Firefox browsers */ 109 | .thumb::-moz-range-thumb { 110 | background-color: #f1f5f7; 111 | border: none; 112 | border-radius: 50%; 113 | box-shadow: 0 0 1px 1px #ced4da; 114 | cursor: pointer; 115 | height: 18px; 116 | width: 18px; 117 | margin-top: 4px; 118 | pointer-events: all; 119 | position: relative; 120 | } 121 | -------------------------------------------------------------------------------- /components/events/tickets/ticketsList.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react' 2 | import MultiRangeSlider from './MultiRangeSlider'; 3 | import classes from './ticketsList.module.css'; 4 | import TicketsListBody from './ticketsListBody'; 5 | import { getLowestLists, getSectionLists } from '../../../data'; 6 | 7 | const TicketsList = (props) => { 8 | const [ minState, setMin ] = useState(0); 9 | const [ maxState, setMax ] = useState(100); 10 | const [ lowestLists, setLowestLists ] = useState([]) 11 | const [ sectionLists, setSectionLists ] = useState([]) 12 | 13 | const handleChange = ({ min, max }) => { 14 | setMin(min) 15 | setMax(max) 16 | } 17 | useEffect(() => { 18 | console.log(minState, maxState) 19 | const lowestList = getLowestLists(minState, maxState); 20 | const sectionList = getSectionLists(minState, maxState); 21 | setLowestLists(lowestList); 22 | setSectionLists(sectionList); 23 | }, [maxState, minState]); 24 | 25 | return ( 26 |
27 | handleChange({ min, max })} 31 | /> 32 |
33 | 34 |
35 | ) 36 | } 37 | export default TicketsList; -------------------------------------------------------------------------------- /components/events/tickets/ticketsList.module.css: -------------------------------------------------------------------------------- 1 | .ticketsList { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | padding: 30px 0 0 0; 6 | background-color: white; 7 | /* margin: 15px; */ 8 | /* width: 80%; */ 9 | width: 100%; 10 | z-index: 1; 11 | } 12 | .selectField { 13 | width: 100%; 14 | padding: 0 20px; 15 | } 16 | .select { 17 | width: 100%; 18 | border: 1px solid #58A4B0; 19 | padding: 10px; 20 | font-size: 15px; 21 | outline: none; 22 | } 23 | .divider { 24 | border-bottom: 1px solid rgb(205 193 193); 25 | width: 100%; 26 | margin-top: 40px; 27 | } 28 | -------------------------------------------------------------------------------- /components/events/tickets/ticketsListBody.js: -------------------------------------------------------------------------------- 1 | import classes from './ticketsListBody.module.css'; 2 | import React, {useState, useEffect} from 'react'; 3 | 4 | const Lowest = (props) => { 5 | const { lowestLists } = props 6 | return ( 7 |
8 | { lowestLists.map((lowestList) => ( 9 |
10 |
11 |
12 | {lowestList.title} 13 | {lowestList.comment} 14 |
15 |
16 | ${lowestList.price} USD 17 | {lowestList.type} 18 |
19 |
20 |
21 |
22 | )) } 23 |
24 | ) 25 | } 26 | 27 | const Section = (props) => { 28 | const { sectionLists } = props 29 | return ( 30 |
31 | { sectionLists.map((sectionList) => ( 32 |
33 |
34 |
35 | {sectionList.title} 36 | {sectionList.comment} 37 |
38 |
39 | ${sectionList.price} 40 | {sectionList.type} 41 |
42 |
43 |
44 |
45 | )) } 46 |
47 | ) 48 | } 49 | 50 | 51 | const TicketsListBody = (props) => { 52 | const { lowestLists, sectionLists } = props 53 | const [ status, setStatus ] = useState("lowest"); 54 | return ( 55 |
56 |
57 |
setStatus("lowest")} className={classes.left}> 58 | Lowest Price 59 |
60 |
61 |
setStatus("section")} className={classes.right}> 62 | Section 63 |
64 |
65 |
66 | { status==="lowest" ? :
67 | } 68 |
69 | ) 70 | } 71 | 72 | export default TicketsListBody; -------------------------------------------------------------------------------- /components/events/tickets/ticketsListBody.module.css: -------------------------------------------------------------------------------- 1 | .ticketsListBody { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | flex-direction: column; 6 | width: 100%; 7 | 8 | } 9 | .listHeight { 10 | width: 100%; 11 | height: 500px; 12 | overflow: scroll; 13 | } 14 | .TicketsListHeader { 15 | width: 100%; 16 | display: flex; 17 | justify-content: space-between; 18 | align-items: center; 19 | } 20 | .ticketsItem { 21 | width: 100%; 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: space-between; 25 | align-items: center; 26 | } 27 | .dFlexColumn { 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: space-between; 31 | } 32 | .dFlex { 33 | display: flex; 34 | justify-content: space-between; 35 | align-items: center; 36 | } 37 | .width100 { 38 | width: 100%; 39 | padding: 15px 20px 12px 20px; 40 | } 41 | .borderBottom { 42 | border-bottom: 1px solid #d5d5d5; 43 | width: 100%; 44 | } 45 | .lowestTitle { 46 | font-size: 15px; 47 | font-weight: 700; 48 | margin: 0 40px; 49 | } 50 | .sectionTitle { 51 | font-size: 15px; 52 | font-weight: 700; 53 | color: #58A4B0; 54 | margin: 0 40px; 55 | } 56 | .ListHeaderborder { 57 | border-bottom: 3px solid #ebebeb; 58 | margin-top: 10px;; 59 | margin-top: 10px; 60 | } 61 | .activeBorder { 62 | border-bottom: 3px solid #58A4B0; 63 | margin-top: 10px; 64 | } 65 | .left, .right { 66 | width: 50%; 67 | margin-top: 15px; 68 | } 69 | .listSec { 70 | font-size: 14px; 71 | font-weight: 700; 72 | } 73 | .price { 74 | font-size: 14px; 75 | font-weight: 700; 76 | color: #58A4B0; 77 | } 78 | .comoment { 79 | font-weight: 500; 80 | font-size: 14px; 81 | color: #A9BCD0; 82 | margin-top: 5px; 83 | } -------------------------------------------------------------------------------- /components/events/ui/Button3.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | 3 | import classes from './Button3.module.css'; 4 | 5 | export default function Button(props) { 6 | const { link, onClick } = props; 7 | 8 | if (!props.link) 9 | return ( 10 | 13 | ); 14 | 15 | return ( 16 | 17 | {props.children} 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /components/events/ui/Button3.module.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | text-decoration: none; 3 | cursor: pointer; 4 | font: inherit; 5 | background-color: transparent; 6 | color: white; 7 | border: 6px solid white; 8 | border-radius: 40px; 9 | padding: 0.5rem 1rem; 10 | text-align: center; 11 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); 12 | } 13 | 14 | .btn:hover, 15 | .btn:active { 16 | color: white!important; 17 | background-color: #559aa5; 18 | border-color: transparent; 19 | } 20 | 21 | .lnk { 22 | text-decoration: none; 23 | border-radius: 40px; 24 | font: inherit; 25 | padding: 0.5rem 1rem; 26 | border: 1px solid white; 27 | color: white; 28 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); 29 | } 30 | .lik:hover { 31 | color: white!important; 32 | } 33 | -------------------------------------------------------------------------------- /components/home/homepage1/Header/headerNav.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import NavMenuDraw from './navMenuDraw'; 3 | import Link from '@material-ui/core/Link'; 4 | import Toolbar from '@material-ui/core/Toolbar'; 5 | import classes from './headerNav.module.css'; 6 | import { BiSearch } from "react-icons/bi"; 7 | 8 | const sections1 = [ 9 | { title: 'Concerts', url: '#'}, 10 | { title: 'Sports', url: '#' }, 11 | { title: 'Arts & Theater', url: '#' }, 12 | { title: 'Family', url: '#' }, 13 | { title: 'More', url: '#' }, 14 | ]; 15 | const sections2 = [ 16 | { title: 'Sign In', url: '/signIn'}, 17 | { title: 'Sell', url: '#' }, 18 | { title: 'Git Cards', url: '#' }, 19 | { title: 'Help', url: '#' }, 20 | ]; 21 | 22 | 23 | const HeaderNav= () => { 24 | const [scroll, setScroll] = useState(false); 25 | 26 | console.log("Header", scroll) 27 | 28 | useEffect(() => { 29 | window.addEventListener("scroll", () => { 30 | setScroll(window.scrollY > 50); 31 | }); 32 | }, []); 33 | 34 | return ( 35 | <> 36 |
37 | 38 | {sections1.map((section1) => ( 39 | 46 | {section1.title} 47 | 48 | ))} 49 | 50 |
51 | 52 |
53 | 54 | {sections2.map((section2) => ( 55 | 62 | {section2.title} 63 | 64 | ))} 65 | 66 |
67 |
68 | 69 |
70 | 71 |
72 |
73 | {sections2.map((section2) => ( 74 | 81 | {section2.title} 82 | 83 | ))} 84 |
85 |
86 | 91 | SignIn 92 | 93 |
94 |
95 | 96 | ); 97 | } 98 | export default HeaderNav 99 | -------------------------------------------------------------------------------- /components/home/homepage1/Header/headerNav.module.css: -------------------------------------------------------------------------------- 1 | .headerToolScroll { 2 | background: #191a1d; 3 | opacity: 0.7; 4 | position: fixed; 5 | top: 0; 6 | width: 100%; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | height: 30px; 11 | padding: 30px 10px; 12 | z-index: 1000; 13 | } 14 | .headerTool { 15 | position: fixed; 16 | top: 0; 17 | width: 100%; 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | height: 30px; 22 | padding: 40px 10px; 23 | z-index: 1000; 24 | } 25 | .headerToolResponsive { 26 | display: none; 27 | } 28 | .navToolbarLink { 29 | font-size: 16px; 30 | font-weight: 400; 31 | color: white!important; 32 | margin: 0 7px!important; 33 | } 34 | .navbarLogo { 35 | width: 100%; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | cursor: pointer; 40 | } 41 | .navbarLogoImg { 42 | width: 250px; 43 | } 44 | .navbarSearch { 45 | background-image: url("/images/Events/Rectangle 44.png"); 46 | opacity: 0.5; 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | height: 45px; 51 | width: 40%; 52 | padding: 5px; 53 | border-radius: 5px; 54 | margin-bottom: 0!important; 55 | } 56 | .navbarSearchIcon { 57 | font-size: 15px; 58 | color: white; 59 | } 60 | .navbarSearchInput { 61 | background: none; 62 | border: none; 63 | outline: none; 64 | height: 43px; 65 | width: 100%; 66 | margin-left: 5px; 67 | font-size: 12px; 68 | color: white; 69 | } 70 | .navbarSearchInput::placeholder { 71 | color: white; 72 | font-size: 14px; 73 | opacity: 1; 74 | } 75 | .navToolbarLink { 76 | font-size: 16px; 77 | font-weight: 400; 78 | color: white; 79 | margin: 0 7px; 80 | } 81 | .headerToolResponsiveScroll { 82 | display: none; 83 | } 84 | .navResponsiveToolbarLink { 85 | font-size: 14px; 86 | color: white; 87 | margin: 0 7px; 88 | } 89 | .navbarSignInResponsive { 90 | display: none; 91 | } 92 | 93 | @media screen and (max-width: 1160px) { 94 | .headerToolResponsiveScroll { 95 | display: block; 96 | display: none; 97 | background: #191a1d; 98 | opacity: 0.7; 99 | position: fixed; 100 | top: 0; 101 | width: 100%; 102 | display: flex; 103 | justify-content: space-between; 104 | align-items: center; 105 | height: 30px; 106 | padding: 30px 7px; 107 | z-index: 1000; 108 | } 109 | .headerToolResponsive { 110 | opacity: 0.7; 111 | position: fixed; 112 | top: 0; 113 | width: 100%; 114 | display: flex; 115 | justify-content: space-between; 116 | align-items:center; 117 | height: 30px; 118 | padding: 30px 7px; 119 | z-index: 1000; 120 | } 121 | .navResponsiveToolbarLink { 122 | font-size: 14px; 123 | color: white!important; 124 | margin: 0 7px!important; 125 | } 126 | .headerTool { 127 | display: none; 128 | } 129 | .headerToolScroll { 130 | display: none; 131 | } 132 | } 133 | @media screen and (max-width:630px) { 134 | .headerToolResponsive { 135 | background: none; 136 | opacity: 0.7; 137 | position: fixed; 138 | top: 0; 139 | display: flex; 140 | justify-content: space-between; 141 | align-items:center; 142 | height: 25px; 143 | padding: 25px 4px; 144 | z-index: 1000; 145 | } 146 | .navbarLogoImg { 147 | display: none; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /components/home/homepage1/Header/index.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import HeaderNav from './headerNav'; 3 | 4 | const Header = () => { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default Header; 13 | -------------------------------------------------------------------------------- /components/home/homepage1/Header/navMenuDraw.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import { makeStyles, useTheme } from '@material-ui/core/styles'; 4 | import Drawer from '@material-ui/core/Drawer'; 5 | import List from '@material-ui/core/List'; 6 | import Divider from '@material-ui/core/Divider'; 7 | import IconButton from '@material-ui/core/IconButton'; 8 | import MenuIcon from '@material-ui/icons/Menu'; 9 | import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; 10 | import ChevronRightIcon from '@material-ui/icons/ChevronRight'; 11 | import ListItem from '@material-ui/core/ListItem'; 12 | import ListItemText from '@material-ui/core/ListItemText'; 13 | 14 | const drawerWidth = "100%!important"; 15 | 16 | const useStyles = makeStyles((theme) => ({ 17 | root: { 18 | display: 'flex', 19 | }, 20 | appBar: { 21 | transition: theme.transitions.create(['margin', 'width'], { 22 | easing: theme.transitions.easing.sharp, 23 | duration: theme.transitions.duration.leavingScreen, 24 | }), 25 | }, 26 | appBarShift: { 27 | 28 | }, 29 | menuButton: { 30 | marginRight: theme.spacing(2), 31 | }, 32 | hide: { 33 | display: 'none', 34 | }, 35 | drawer: { 36 | width: drawerWidth, 37 | flexShrink: 0, 38 | // background: '#bcd2d6;', 39 | opacity: "0.6!important", 40 | backgroundColor: "#7eaaf8!important" 41 | 42 | }, 43 | drawerPaper: { 44 | width: drawerWidth, 45 | background: 'none', 46 | padding: "0 30px", 47 | }, 48 | content: { 49 | flexGrow: 1, 50 | padding: theme.spacing(3), 51 | transition: theme.transitions.create('margin', { 52 | easing: theme.transitions.easing.sharp, 53 | duration: theme.transitions.duration.leavingScreen, 54 | }), 55 | marginLeft: -drawerWidth, 56 | }, 57 | contentShift: { 58 | transition: theme.transitions.create('margin', { 59 | easing: theme.transitions.easing.easeOut, 60 | duration: theme.transitions.duration.enteringScreen, 61 | }), 62 | marginLeft: 0, 63 | }, 64 | })); 65 | 66 | const NavMenuDraw = () => { 67 | const classes = useStyles(); 68 | const theme = useTheme(); 69 | const [open, setOpen] = React.useState(false); 70 | 71 | const handleDrawerOpen = () => { 72 | setOpen(true); 73 | }; 74 | 75 | const handleDrawerClose = () => { 76 | setOpen(false); 77 | }; 78 | 79 | return ( 80 |
81 | 89 | 90 | 91 | 101 |
102 | 103 | {theme.direction === 'ltr' ? : } 104 | 105 |
Mednu
106 |
107 | 108 | 109 | {['Concerts', 'Sports', 'Arts & Theater', 'Family', 'More'].map((text, index) => ( 110 | 111 | 112 | 113 | ))} 114 | 115 | 116 |
117 | ); 118 | } 119 | export default NavMenuDraw; -------------------------------------------------------------------------------- /components/home/homepage1/Header/navMenuDraw.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/highmountaindev109/ticket_place_nextjs/85eb791b00cbe55a12796fb39a95febcb1e2c8d7/components/home/homepage1/Header/navMenuDraw.module.css -------------------------------------------------------------------------------- /components/home/homepage1/americanExpress.js: -------------------------------------------------------------------------------- 1 | 2 | import classes from './americanExpress.module.css'; 3 | 4 | export default function AmericanExpress(props) { 5 | const { AmericanExpresses } = props 6 | return ( 7 |
8 |
9 |
10 |
11 |

American Express R Presales

12 |
13 |
14 | Card Members get exclusive early access to tickets 15 |
16 | 17 |
18 | 19 |
20 | {AmericanExpresses.map((AmericanExpress) => ( 21 |
22 |
23 | 24 |
{AmericanExpress.time1}
25 |
26 |
27 |
{AmericanExpress.time2}
28 |

{AmericanExpress.title}

29 | {AmericanExpress.text} 30 |
31 |
32 | ))} 33 |
34 |
35 | 36 |
37 |
38 | Card Members enjoy exclusive access to the best of live muisic. 39 | 40 |
41 |
42 |
43 |
44 | ) 45 | } 46 | -------------------------------------------------------------------------------- /components/home/homepage1/americanExpress.module.css: -------------------------------------------------------------------------------- 1 | .americanExpress { 2 | margin-top: 220px; 3 | display: flex; 4 | justify-content: center; 5 | flex-direction: column; 6 | padding: 0 14%; 7 | } 8 | .dFlex { 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | } 13 | .flexColumn { 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: space-between; 17 | } 18 | .americanExpressTitle { 19 | font-size: 25px; 20 | font-weight: 700; 21 | color: #373F51; 22 | } 23 | .borderHor { 24 | border-bottom: 2px solid #373F51; 25 | width: 70px; 26 | height: 17px; 27 | margin-left: 15px; 28 | } 29 | .americanExpressText { 30 | color: #373F51; 31 | font-size: 15px; 32 | font-weight: 400; 33 | margin: 10px 0; 34 | } 35 | .americanExpressBtn { 36 | color: #58A4B0; 37 | border: 1px solid #58A4B0; 38 | padding: 5px; 39 | width: 100px; 40 | height: 38px; 41 | border-radius: 8px; 42 | font-size: 11px; 43 | font-weight: 500; 44 | background: none; 45 | } 46 | .cardsBody { 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | flex-wrap: wrap; 51 | margin-top: 25px; 52 | } 53 | .cards { 54 | width: 24%!important; 55 | height: 285px; 56 | padding-right: 0px!important; 57 | padding-left: 0px!important; 58 | box-shadow: 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5; 59 | margin: 10px 0; 60 | border-radius: 3px; 61 | overflow: hidden; 62 | } 63 | .relative { 64 | position: relative; 65 | } 66 | .cardImg { 67 | width: 100%; 68 | } 69 | .cardPresale { 70 | position: absolute; 71 | bottom: 7px; 72 | left: 7px; 73 | background: #58A4B0; 74 | padding: 3px; 75 | border-radius: 3px; 76 | color: white; 77 | font-size: 13px; 78 | } 79 | .cardTextField { 80 | padding: 10px 20px; 81 | } 82 | .cardTime { 83 | font-size: 15px; 84 | color: #DAA49A; 85 | } 86 | .cardTitle { 87 | font-size: 14px; 88 | color: rgb(46, 46, 45); 89 | } 90 | .cardComment { 91 | font-size: 13px; 92 | color: #A9BCD0; 93 | } 94 | .cardLearnMore { 95 | display: flex; 96 | flex-direction: column; 97 | padding: 10px; 98 | } 99 | .leardMore { 100 | width: 90px; 101 | color: #58A4B0; 102 | font-size: 14px; 103 | font-weight: bold; 104 | border: none; 105 | outline: none; 106 | background: none; 107 | } 108 | .mT1 { 109 | font-size: 13px!important; 110 | margin-top: 10px; 111 | } 112 | 113 | @media screen and (max-width:1130px) { 114 | .cards { 115 | /* .col-md-3 { */ 116 | width: 46%!important; 117 | height: 330px; 118 | padding-right: 0px!important; 119 | padding-left: 0px!important; 120 | } 121 | } 122 | @media screen and (max-width: 830px) { 123 | .americanExpress { 124 | margin-top: 20px; 125 | } 126 | } 127 | @media screen and (max-width: 880px) { 128 | .cards { 129 | height: 280px; 130 | } 131 | } 132 | @media screen and (max-width: 720px) { 133 | .cards { 134 | height: 260px; 135 | } 136 | .americanExpressTitle { 137 | font-size: 20px; 138 | } 139 | .americanExpressBtn { 140 | padding: 3px; 141 | width: 70px; 142 | height: 27px; 143 | } 144 | } 145 | @media screen and (max-width:600px) { 146 | .borderHor { 147 | display: none; 148 | } 149 | } 150 | @media screen and (max-width:550px) { 151 | .cards { 152 | width: 90%!important; 153 | height: 325px; 154 | padding-right: 0px!important; 155 | padding-left: 0px!important; 156 | box-shadow: 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5; 157 | border-radius: 4px; 158 | overflow: hidden; 159 | margin: auto; 160 | margin-bottom: 10px; 161 | } 162 | } 163 | @media screen and (max-width: 500px) { 164 | .americanExpressTitle { 165 | font-size: 18px; 166 | } 167 | .cards { 168 | height: 300px; 169 | } 170 | } 171 | @media screen and (max-width: 400px) { 172 | .americanExpressTitle { 173 | font-size: 17px; 174 | } 175 | .cards { 176 | height: 270px; 177 | } 178 | } -------------------------------------------------------------------------------- /components/home/homepage1/artsTheater.js: -------------------------------------------------------------------------------- 1 | import classes from './artsTheater.module.css'; 2 | 3 | export default function ArtsTheater(props) { 4 | const { ArtsTheaters } = props 5 | return ( 6 |
7 |
8 | {/*
*/} 9 |
10 | Arts & Theater 11 |
12 | 13 | 14 |
15 |
16 | {/*
*/} 17 |
18 |
19 | {ArtsTheaters.map((ArtsTheater) => ( 20 |
21 |
22 | 23 |
24 |
25 | {ArtsTheater.star} 26 | 27 |
28 |
{ArtsTheater.events} Events
29 |
30 |
31 |
32 |

{ArtsTheater.title}

33 | {ArtsTheater.text} 34 |
35 |
36 | ))} 37 |
38 |
39 | ) 40 | } 41 | -------------------------------------------------------------------------------- /components/home/homepage1/artsTheater.module.css: -------------------------------------------------------------------------------- 1 | .topSelling { 2 | display: flex; 3 | justify-content: center; 4 | flex-direction: column; 5 | padding: 0 14%; 6 | } 7 | .borderHor { 8 | border-bottom: 2px solid #373F51; 9 | width: 70px; 10 | height: 17px; 11 | margin-left: 15px; 12 | } 13 | .dFlex { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | } 18 | .concertsField { 19 | display: flex; 20 | justify-content: space-between; 21 | align-content: center; 22 | margin-top: 25px; 23 | margin-bottom: -15px; 24 | width: 100%; 25 | } 26 | .title { 27 | font-weight: 700; 28 | color: #373F51; 29 | font-size: 25px; 30 | } 31 | .seeAllBtn { 32 | color: #58A4B0; 33 | border: none; 34 | outline: none; 35 | background: none; 36 | font-size: 13px; 37 | font-weight: bold; 38 | } 39 | .seeAllIcon { 40 | width: 15px; 41 | height: 11px; 42 | margin-top: 3px; 43 | } 44 | .cardsBody { 45 | display: flex; 46 | flex-wrap: wrap; 47 | justify-content: center; 48 | align-items: center; 49 | margin-top: 25px; 50 | padding-bottom: 20px; 51 | } 52 | .cards { 53 | height: 260px!important; 54 | width: 24%!important; 55 | padding-right: 0px!important; 56 | padding-left: 0px!important; 57 | box-shadow: 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5; 58 | margin: auto!important; 59 | margin-bottom: 10px!important; 60 | margin-top: 10px!important; 61 | border-radius: 3px; 62 | overflow: hidden; 63 | } 64 | .relative { 65 | position: relative; 66 | } 67 | .cardImg { 68 | width: 100%; 69 | } 70 | .cardSelling { 71 | position: absolute; 72 | top: 10px; 73 | left: 10px; 74 | padding: 3px; 75 | display: flex; 76 | justify-content: space-between; 77 | align-content: center; 78 | } 79 | .star { 80 | display: flex; 81 | justify-content: center; 82 | align-items: center; 83 | background: white; 84 | border-radius: 50%; 85 | width: 20px; 86 | height: 20px; 87 | font-size: 9.5px; 88 | font-weight: 700; 89 | } 90 | .starImg { 91 | width: 9px; 92 | height: 9px; 93 | margin-left: 0.8px; 94 | } 95 | .events { 96 | color: #DAA49A; 97 | font-weight: 600; 98 | font-size: 10px; 99 | background: white; 100 | padding: 4px; 101 | width: 65px; 102 | height: 23px; 103 | border-radius: 4px; 104 | text-align: center; 105 | margin-left: 5px; 106 | } 107 | .cardTextField { 108 | padding: 10px 20px; 109 | } 110 | .cardTitle { 111 | color: #373F51; 112 | font-size: 15px; 113 | font-weight: 700; 114 | } 115 | .cardText { 116 | color: #A9BCD0; 117 | font-size: 11px; 118 | } 119 | @media screen and (max-width:1130px) { 120 | .cards { 121 | width: 46%!important; 122 | height: 330px!important; 123 | padding-right: 0px!important; 124 | padding-left: 0px!important; 125 | } 126 | } 127 | @media screen and (max-width: 960px) { 128 | .cards { 129 | height: 290px!important; 130 | } 131 | } 132 | @media screen and (max-width: 730px) { 133 | .cards { 134 | height: 260px!important; 135 | } 136 | } 137 | @media screen and (max-width:550px) { 138 | .borderHor { 139 | display: none; 140 | } 141 | .cards { 142 | width: 90%!important; 143 | height: 305px!important; 144 | padding-right: 0px!important; 145 | padding-left: 0px!important; 146 | } 147 | } 148 | @media screen and (max-width:440px) { 149 | .cards { 150 | height: 270px!important; 151 | } 152 | } -------------------------------------------------------------------------------- /components/home/homepage1/browseCategory.js: -------------------------------------------------------------------------------- 1 | 2 | import classes from './browseCategory.module.css' 3 | 4 | export default function BrowseCategory(props) { 5 | const { BrowseCategories } = props 6 | return ( 7 |
8 |
9 |
10 |

Browse by Category

11 |
12 |
13 |
14 |
15 | {BrowseCategories.map((browseCategory) => ( 16 |
17 |
18 | 19 |
20 |
21 | 22 | {browseCategory.title} 23 |
24 |
25 |
26 |
27 | ))} 28 |
29 |
30 | ) 31 | } 32 | -------------------------------------------------------------------------------- /components/home/homepage1/browseCategory.module.css: -------------------------------------------------------------------------------- 1 | .browseCategory { 2 | margin-top: 45px; 3 | display: flex; 4 | justify-content: center; 5 | flex-direction: column; 6 | padding: 0 14%; 7 | } 8 | .titleField { 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | } 13 | .dFlex { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | } 18 | .title { 19 | font-size: 25px; 20 | font-weight: 700; 21 | color: #373F51; 22 | } 23 | .borderHor { 24 | border-bottom: 2px solid #373F51; 25 | width: 70px; 26 | height: 17px; 27 | margin-left: 15px; 28 | } 29 | .cardsBody { 30 | display: flex; 31 | flex-wrap: wrap; 32 | justify-content: center; 33 | align-content: center; 34 | margin-top: 25px; 35 | } 36 | .cards { 37 | width: 24%!important; 38 | padding-right: 0px!important; 39 | padding-left: 0px!important; 40 | box-shadow: 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5; 41 | margin: auto!important; 42 | margin-bottom: 10px!important; 43 | margin-top: 10px!important; 44 | border-radius: 3px!important; 45 | } 46 | .relative { 47 | position: relative; 48 | } 49 | .cardImg { 50 | width: 100%; 51 | } 52 | .ItemPosition { 53 | display: flex; 54 | align-items: center; 55 | justify-content: center; 56 | width: 100%; 57 | position: absolute; 58 | bottom: -20px; 59 | text-align: center; 60 | } 61 | .concertsItem { 62 | width: 140px; 63 | height: 40px; 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | background: white; 68 | padding: 3px; 69 | border-radius: 7px; 70 | color: #58A4B0; 71 | font-size: 14px; 72 | font-weight: bold; 73 | box-shadow: 0 0px 0px 0 #e5e5e5, 0 -1px 0px 0 #e5e5e5, 0 0px 0px 0 #e5e5e5, 0 1px 10px 0 #e5e5e5 74 | } 75 | .ItemImg { 76 | width: 30px; 77 | margin-right: 7px; 78 | } 79 | 80 | @media screen and (max-width:1130px) { 81 | .cards { 82 | width: 46%!important; 83 | padding-right: 0px!important; 84 | padding-left: 0px!important; 85 | margin-top: 20px!important; 86 | } 87 | } 88 | 89 | @media screen and (max-width: 840px) { 90 | .cards { 91 | margin: 15px 0; 92 | } 93 | } 94 | @media screen and (max-width: 660px) { 95 | .concertsItem { 96 | width: 120px; 97 | height: 34px; 98 | } 99 | } 100 | @media screen and (max-width:550px) { 101 | .borderHor { 102 | display: none; 103 | } 104 | .cards { 105 | width: 90%!important; 106 | padding-right: 0px!important; 107 | padding-left: 0px!important; 108 | } 109 | .concertsItem { 110 | width: 160px; 111 | height: 40px; 112 | } 113 | } -------------------------------------------------------------------------------- /components/home/homepage1/discoverMoreEvents.js: -------------------------------------------------------------------------------- 1 | import classes from './discoverMoreEvents.module.css' 2 | 3 | export default function DiscoverMoreEvent(props) { 4 | const { DiscoverMoreEvents } = props 5 | return ( 6 |
7 |
8 |
9 |

Discover More Events

10 |
11 |
12 |
13 |
14 | {DiscoverMoreEvents.map((DiscoverMoreEvent) => ( 15 |
16 |
17 | 18 |
19 |
20 |

{DiscoverMoreEvent.title}

21 | {DiscoverMoreEvent.text} 22 |
23 |
24 | ))} 25 |
26 |
27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /components/home/homepage1/discoverMoreEvents.module.css: -------------------------------------------------------------------------------- 1 | .topSelling { 2 | display: flex; 3 | justify-content: center; 4 | flex-direction: column; 5 | padding: 0 14%; 6 | } 7 | .borderHor { 8 | border-bottom: 2px solid #373F51; 9 | width: 70px; 10 | height: 17px; 11 | margin-left: 15px; 12 | } 13 | .dFlex { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | } 18 | .concertsField { 19 | display: flex; 20 | justify-content: flex-start; 21 | align-content: center; 22 | margin-top: 25px; 23 | margin-bottom: -15px; 24 | width: 100%; 25 | } 26 | .title { 27 | font-weight: 700; 28 | color: #373F51; 29 | font-size: 25px; 30 | } 31 | .cardsBody { 32 | display: flex; 33 | flex-wrap: wrap; 34 | justify-content: center; 35 | align-items: center; 36 | margin-top: 25px; 37 | padding-bottom: 20px; 38 | } 39 | .cards { 40 | width: 16%!important; 41 | padding-right: 0px!important; 42 | padding-left: 0px!important; 43 | height: 240px; 44 | -webkit-box-shadow: 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5; 45 | box-shadow: 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5; 46 | margin: auto!important; 47 | margin-bottom: 10px!important; 48 | margin-top: 10px!important; 49 | border-radius: 3px; 50 | overflow: hidden; 51 | } 52 | .relative { 53 | position: relative; 54 | padding: 6px; 55 | } 56 | .cardImg { 57 | width: 100%; 58 | } 59 | .cardTextField { 60 | padding: 10px 20px; 61 | } 62 | .cardTitle { 63 | color: #373F51; 64 | font-size: 15px; 65 | font-weight: 700; 66 | } 67 | .cardText { 68 | color: #A9BCD0; 69 | font-size: 11px; 70 | } 71 | 72 | @media screen and (max-width: 1100px) { 73 | .cards { 74 | width: 30%!important; 75 | padding-right: 0px!important; 76 | padding-left: 0px!important; 77 | } 78 | } 79 | @media screen and (max-width : 600px) { 80 | .cards { 81 | width: 45%!important; 82 | padding-right: 0px!important; 83 | padding-left: 0px!important; 84 | } 85 | } 86 | @media screen and (max-width:550px) { 87 | .cards { 88 | width: 90%!important; 89 | height: 300px!important; 90 | padding-right: 0px!important; 91 | padding-left: 0px!important; 92 | } 93 | } 94 | @media screen and (max-width: 400px) { 95 | .cards { 96 | height: 270px!important; 97 | } 98 | } -------------------------------------------------------------------------------- /components/home/homepage1/family.js: -------------------------------------------------------------------------------- 1 | import classes from './family.module.css' 2 | 3 | export default function Family(props) { 4 | const { Families } = props 5 | return ( 6 |
7 |
8 |
9 | Family 10 |
11 | 12 | 13 |
14 |
15 |
16 |
17 | {Families.map((Family) => ( 18 |
19 |
20 | 21 |
22 |
23 | {Family.star} 24 | 25 |
26 |
{Family.events} Events
27 |
28 |
29 |
30 |

{Family.title}

31 | {Family.text} 32 |
33 |
34 | ))} 35 |
36 |
37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /components/home/homepage1/family.module.css: -------------------------------------------------------------------------------- 1 | .family { 2 | display: flex; 3 | justify-content: center; 4 | flex-direction: column; 5 | padding: 0 14%; 6 | background-color: #E9F4FF; 7 | } 8 | .dFlex { 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | } 13 | .concertsField { 14 | display: flex; 15 | justify-content: space-between; 16 | align-content: center; 17 | margin-top: 25px; 18 | margin-bottom: -15px; 19 | width: 100%; 20 | } 21 | .title { 22 | font-weight: 700; 23 | color: #373F51; 24 | font-size: 25px; 25 | } 26 | .seeAllBtn { 27 | color: #58A4B0; 28 | border: none; 29 | outline: none; 30 | background: none; 31 | font-size: 13px; 32 | font-weight: bold; 33 | } 34 | .seeAllIcon { 35 | width: 15px; 36 | height: 11px; 37 | margin-top: 3px; 38 | } 39 | .cardsBody { 40 | display: flex; 41 | flex-wrap: wrap; 42 | justify-content: center; 43 | align-items: center; 44 | margin-top: 25px; 45 | padding-bottom: 20px; 46 | } 47 | .cards { 48 | -webkit-box-shadow: 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5; 49 | box-shadow: 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5; 50 | margin: auto!important; 51 | margin-bottom: 10px!important; 52 | margin-top: 10px!important; 53 | border-radius: 3px; 54 | overflow: hidden; 55 | width: 24%!important; 56 | padding-right: 0px!important; 57 | padding-left: 0px!important; 58 | height: 285px; 59 | background-color: white; 60 | } 61 | .relative { 62 | position: relative; 63 | } 64 | .cardImg { 65 | width: 100%; 66 | } 67 | .cardSelling { 68 | position: absolute; 69 | top: 10px; 70 | left: 10px; 71 | padding: 3px; 72 | display: flex; 73 | justify-content: space-between; 74 | align-content: center; 75 | } 76 | .star { 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | background: white; 81 | border-radius: 50%; 82 | width: 20px; 83 | height: 20px; 84 | font-size: 9.5px; 85 | font-weight: 700; 86 | } 87 | .starImg { 88 | width: 9px; 89 | height: 9px; 90 | margin-left: 0.8px; 91 | } 92 | .events { 93 | color: #DAA49A; 94 | font-weight: 600; 95 | font-size: 10px; 96 | background: white; 97 | padding: 4px; 98 | width: 65px; 99 | height: 23px; 100 | border-radius: 4px; 101 | text-align: center; 102 | margin-left: 5px; 103 | } 104 | .cardTextField { 105 | padding: 10px 20px; 106 | background-color: white; 107 | } 108 | .cardTitle { 109 | color: #373F51; 110 | font-size: 15px; 111 | font-weight: 700; 112 | } 113 | .cardText { 114 | color: #A9BCD0; 115 | font-size: 11px; 116 | } 117 | @media screen and (max-width:1130px) { 118 | .cards { 119 | width: 46%!important; 120 | height: 330px; 121 | padding-right: 0px!important; 122 | padding-left: 0px!important; 123 | } 124 | } 125 | @media screen and (max-width: 960px) { 126 | .cards { 127 | height: 290px!important; 128 | } 129 | } 130 | @media screen and (max-width: 730px) { 131 | .cards { 132 | height: 260px!important; 133 | } 134 | } 135 | @media screen and (max-width:550px) { 136 | .cards { 137 | width: 90%!important; 138 | height: 305px!important; 139 | padding-right: 0px!important; 140 | padding-left: 0px!important; 141 | } 142 | } 143 | @media screen and (max-width:440px) { 144 | .cards { 145 | height: 270px!important; 146 | } 147 | } -------------------------------------------------------------------------------- /components/home/homepage1/headerBody.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import classes from './headerBody.module.css' 3 | import { BiSearch } from "react-icons/bi"; 4 | 5 | const HeaderBody = (props) => { 6 | const { event } = props; 7 | const [ state, setState ] = useState("01"); 8 | 9 | return ( 10 |
11 | {event ? ( 12 | 13 | 14 |
15 |

{event.title}

16 |

{event.text}

17 | 18 |
19 | 20 | ) : null} 21 | 22 |
23 | setState('01')} className={ state === "01" ? classes.sliderItem : classes.sliderItemActive }>01 24 | 25 | setState('02')} className={ state === "02" ? classes.sliderItem : classes.sliderItemActive }>02 26 | 27 | setState('03')} className={ state === "03" ? classes.sliderItem : classes.sliderItemActive }>03 28 |
29 |
30 |

Let's Make Live Happen

31 | Shop millions of live events and discover can't-miss concerts, games, theater and more. 32 |
33 |
34 | 35 | 36 |
37 |
38 |
39 | 45 |
46 |
47 |
48 |
49 | 50 | 51 |
52 |
Search
53 |
54 |
55 | 56 |
57 |
58 |
59 | 60 | 61 |
62 |
63 | 69 |
70 |
71 |
72 |
73 |
74 | 75 | 76 |
77 |
Search
78 |
79 |
80 |
81 |
82 |
83 | ) 84 | } 85 | export default HeaderBody -------------------------------------------------------------------------------- /components/home/homepage1/headerBody.module.css: -------------------------------------------------------------------------------- 1 | .headerBody { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | align-content: center; 7 | } 8 | .headerBodyBg { 9 | width: 100%; 10 | } 11 | .headerTextField { 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | align-items: center; 16 | position: absolute; 17 | top: 23%; 18 | left: 10%; 19 | right: 10%; 20 | text-align: center; 21 | } 22 | .headerTitle { 23 | font-weight: 700; 24 | font-size: 60px; 25 | letter-spacing: 4px; 26 | color: white; 27 | } 28 | .headerText { 29 | color: white; 30 | font-size: 2rem; 31 | margin-top: 1rem !important; 32 | } 33 | .headerBtn { 34 | background-color: #DAA49A; 35 | border: 1px solid white; 36 | border-radius: 3px; 37 | padding: 5px; 38 | width: 120px; 39 | height: 45px; 40 | color: white; 41 | font-size: 14px; 42 | margin-top: 30px; 43 | } 44 | .headerSlider { 45 | width: 1px; 46 | height: 30px; 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: center; 50 | align-items: center; 51 | position: absolute; 52 | top: 41%; 53 | right: 17px; 54 | text-align: center; 55 | } 56 | .sliderItem { 57 | font-size: 18px; 58 | color: white; 59 | font-weight: 700; 60 | cursor: pointer; 61 | } 62 | .sliderItemActive { 63 | font-size: 12px; 64 | color: rgb(163, 161, 161); 65 | font-weight: 500; 66 | cursor: pointer; 67 | } 68 | .headerSliderImg { 69 | width: 1px; 70 | height: 20px; 71 | } 72 | .headerFooter { 73 | background: white; 74 | border-radius: 20px; 75 | padding: 30px; 76 | position: absolute; 77 | bottom: -138px; 78 | right: 14%; 79 | left: 14%; 80 | display: flex; 81 | flex-direction: column; 82 | justify-content: center; 83 | align-items: center; 84 | } 85 | .headerFooterTitle { 86 | font-size: 27px; 87 | font-weight: 700; 88 | color: #373F51; 89 | letter-spacing: 1px; 90 | } 91 | .headerFooterText { 92 | font-size: 14px; 93 | margin-top: 8px; 94 | } 95 | .headerToolBar { 96 | width: 95%; 97 | height: 50px; 98 | border-radius: 35px; 99 | border: 1px solid rgba(169, 188, 208, 0.3); 100 | margin-top: 35px; 101 | display: flex; 102 | justify-content: space-between; 103 | align-items: center; 104 | } 105 | .cityInputField { 106 | display: flex; 107 | justify-content: space-between; 108 | align-items: center; 109 | width: 30%; 110 | padding: 0 20px; 111 | } 112 | .cityInput { 113 | outline: none; 114 | border: none; 115 | height: 40px; 116 | font-size: 14px; 117 | width: 73%; 118 | } 119 | .cityInputIcon { 120 | width: 15px 121 | } 122 | .borderVertical { 123 | border-right: 1px solid rgba(169, 188, 208, 0.3); 124 | height: 50px; 125 | width: 1px; 126 | } 127 | .selectField { 128 | width: 200px; 129 | padding: 0 20px; 130 | } 131 | .select { 132 | border: none; 133 | background: none; 134 | outline: none; 135 | width: 100%; 136 | font-size: 14px; 137 | color: #7a7a7a; 138 | } 139 | .searchBarField { 140 | width: 60%; 141 | padding: 0 0 0 20px; 142 | display: flex; 143 | justify-content: space-between; 144 | align-items: center; 145 | } 146 | .searchBar { 147 | width: 74%; 148 | margin-bottom: 0!important; 149 | display: flex; 150 | align-items: center; 151 | } 152 | .searchBarInput { 153 | outline: none; 154 | border: none; 155 | height: 38px; 156 | font-size: 14px; 157 | width: 99%; 158 | } 159 | .searchBtn { 160 | background-color: #DAA49A; 161 | height: 50px; 162 | width: 100px; 163 | color: white; 164 | font-size: 16px; 165 | display: flex; 166 | justify-content: center; 167 | align-items: center; 168 | border-top-right-radius: 10px; 169 | border-bottom-right-radius: 10px; 170 | cursor: pointer; 171 | } 172 | .responsiveHeaderToolBar { 173 | display: none; 174 | } 175 | .cityTool { 176 | width: 100%; 177 | height: 40px; 178 | border-radius: 10px; 179 | border: 1px solid rgba(169, 188, 208, 0.3); 180 | margin-bottom: 5px; 181 | padding: 0 15px; 182 | display: flex; 183 | justify-content: space-between; 184 | align-items: center; 185 | } 186 | .cityInput1 { 187 | width: 100%; 188 | height: 35px; 189 | border: none; 190 | outline: none; 191 | } 192 | .header .city-tool select { 193 | font-size: 12px!important; 194 | color: #8a8a8a; 195 | border: none; 196 | outline: none; 197 | } 198 | .responsive1HeaderToolBar { 199 | display: none; 200 | margin-top: 20px; 201 | padding: 0 12%; 202 | } 203 | .searchTool { 204 | width: 100%; 205 | height: 40px; 206 | border-radius: 10px; 207 | border: 1px solid rgba(169, 188, 208, 0.3); 208 | display: flex; 209 | justify-content: space-between; 210 | align-items: center; 211 | } 212 | .responsiveSearchBar { 213 | width: 100%; 214 | padding: 0 0 0 10px; 215 | display: flex; 216 | justify-content: space-between; 217 | align-items: center; 218 | } 219 | 220 | @media screen and (max-width: 1086px) { 221 | .headerTitle { 222 | font-size: 50px; 223 | } 224 | } 225 | @media screen and (max-width: 990px) { 226 | .headerFooter { 227 | bottom: -160px; 228 | } 229 | } 230 | @media screen and (max-width: 920px) { 231 | .headerTitle { 232 | font-size: 45px; 233 | } 234 | .headerBtn { 235 | width: 110px; 236 | height: 35px; 237 | } 238 | } 239 | @media screen and (max-width: 846px) { 240 | .headerTitle { 241 | font-size: 40px; 242 | } 243 | } 244 | @media screen and (max-width: 830px) { 245 | .headerFooter { 246 | position: unset!important; 247 | text-align: center; 248 | } 249 | .americanExpress { 250 | margin-top: 20px; 251 | } 252 | .headerSlider { 253 | top: 30%; 254 | } 255 | } 256 | @media screen and (max-width: 766px) { 257 | .headerTitle { 258 | font-size: 30px; 259 | } 260 | .headerText { 261 | color: white; 262 | font-size: 15px; 263 | margin-top: 1rem !important; 264 | } 265 | .headerFooterTitle { 266 | font-size: 23px; 267 | } 268 | } 269 | @media screen and (max-width: 624px) { 270 | .headerToolBar { 271 | display: none; 272 | } 273 | .responsiveHeaderToolBar { 274 | display: block; 275 | margin-top: 30px; 276 | } 277 | .cityInputField { 278 | width: 50%; 279 | padding: 0 10px; 280 | } 281 | .searchBtn { 282 | height: 38px; 283 | font-size: 15px; 284 | } 285 | } 286 | @media screen and (max-width: 608px) { 287 | .headerTitle { 288 | font-size: 30px; 289 | } 290 | .headerText { 291 | color: white; 292 | font-size: 14px; 293 | margin-top: 0.1rem !important; 294 | } 295 | .headerBtn { 296 | font-size: 13px; 297 | margin-top: 10px; 298 | } 299 | .sliderItem { 300 | font-size: 15px; 301 | } 302 | .headerBtn { 303 | width: 100px; 304 | height: 32px; 305 | } 306 | .headerTextField { 307 | top: 16%; 308 | } 309 | } 310 | @media screen and (max-width: 482px) { 311 | .headerText { 312 | display: none; 313 | } 314 | .headerSlider { 315 | top: 22%; 316 | } 317 | } 318 | @media screen and (max-width: 406px) { 319 | .headerTitle { 320 | font-size: 25px; 321 | } 322 | .headerBodyBg { 323 | height: 220px; 324 | } 325 | .headerSlider { 326 | top: 23%; 327 | } 328 | .searchBtn { 329 | width: 60px; 330 | font-size: 14px; 331 | } 332 | } -------------------------------------------------------------------------------- /components/home/homepage1/sports.js: -------------------------------------------------------------------------------- 1 | 2 | import classes from './sports.module.css' 3 | 4 | export default function Sport(props) { 5 | const { Sports } = props 6 | return ( 7 |
8 |
9 |
10 | Sports 11 |
12 | 13 | 14 |
15 |
16 |
17 |
18 | {Sports.map((Sport) => ( 19 |
20 |
21 | 22 |
23 |
24 | {Sport.star} 25 | 26 |
27 |
{Sport.events} Events
28 |
29 |
30 |
31 |

{Sport.title}

32 | {Sport.text} 33 |
34 |
35 | ))} 36 |
37 |
38 | ) 39 | } 40 | -------------------------------------------------------------------------------- /components/home/homepage1/sports.module.css: -------------------------------------------------------------------------------- 1 | .sports { 2 | display: flex; 3 | justify-content: center; 4 | flex-direction: column; 5 | padding: 0 14%; 6 | background-color: #E9F4FF; 7 | } 8 | .dFlex { 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | } 13 | .concertsField { 14 | display: flex; 15 | justify-content: space-between; 16 | align-content: center; 17 | margin-top: 25px; 18 | margin-bottom: -15px; 19 | width: 100%; 20 | } 21 | .title { 22 | font-weight: 700; 23 | color: #373F51; 24 | font-size: 25px; 25 | } 26 | .seeAllBtn { 27 | color: #58A4B0; 28 | border: none; 29 | outline: none; 30 | background: none; 31 | font-size: 13px; 32 | font-weight: bold; 33 | } 34 | .seeAllIcon { 35 | width: 15px; 36 | height: 11px; 37 | margin-top: 3px; 38 | } 39 | .cardsBody { 40 | display: flex; 41 | flex-wrap: wrap; 42 | justify-content: center; 43 | align-items: center; 44 | margin-top: 25px; 45 | padding-bottom: 20px; 46 | } 47 | .cards { 48 | -webkit-box-shadow: 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5; 49 | box-shadow: 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5, 0 3px 5px 0 #e5e5e5; 50 | margin: auto!important; 51 | margin-bottom: 10px!important; 52 | margin-top: 10px!important; 53 | border-radius: 3px; 54 | overflow: hidden; 55 | width: 24%!important; 56 | padding-right: 0px!important; 57 | padding-left: 0px!important; 58 | height: 285px; 59 | background-color: white; 60 | } 61 | .relative { 62 | position: relative; 63 | } 64 | .cardImg { 65 | width: 100%; 66 | } 67 | .cardSelling { 68 | position: absolute; 69 | top: 10px; 70 | left: 10px; 71 | padding: 3px; 72 | display: flex; 73 | justify-content: space-between; 74 | align-content: center; 75 | } 76 | .star { 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | background: white; 81 | border-radius: 50%; 82 | width: 20px; 83 | height: 20px; 84 | font-size: 9.5px; 85 | font-weight: 700; 86 | } 87 | .starImg { 88 | width: 9px; 89 | height: 9px; 90 | margin-left: 0.8px; 91 | } 92 | .events { 93 | color: #DAA49A; 94 | font-weight: 600; 95 | font-size: 10px; 96 | background: white; 97 | padding: 4px; 98 | width: 65px; 99 | height: 23px; 100 | border-radius: 4px; 101 | text-align: center; 102 | margin-left: 5px; 103 | } 104 | .cardTextField { 105 | padding: 10px 20px; 106 | background-color: white; 107 | } 108 | .cardTitle { 109 | color: #373F51; 110 | font-size: 15px; 111 | font-weight: 700; 112 | } 113 | .cardText { 114 | color: #A9BCD0; 115 | font-size: 11px; 116 | } 117 | @media screen and (max-width:1130px) { 118 | .cards { 119 | width: 46%!important; 120 | height: 330px; 121 | padding-right: 0px!important; 122 | padding-left: 0px!important; 123 | } 124 | } 125 | @media screen and (max-width: 960px) { 126 | .cards { 127 | height: 290px!important; 128 | } 129 | } 130 | @media screen and (max-width: 730px) { 131 | .cards { 132 | height: 260px!important; 133 | } 134 | } 135 | @media screen and (max-width:550px) { 136 | .cards { 137 | width: 90%!important; 138 | height: 305px!important; 139 | padding-right: 0px!important; 140 | padding-left: 0px!important; 141 | } 142 | } 143 | @media screen and (max-width:440px) { 144 | .cards { 145 | height: 270px!important; 146 | } 147 | } -------------------------------------------------------------------------------- /components/home/homepage1/topSelling.js: -------------------------------------------------------------------------------- 1 | import classes from './topSelling.module.css'; 2 | 3 | export default function TopSelling(props) { 4 | const { TopSellings } = props 5 | return ( 6 |
7 |
8 |
9 |
10 |

Top Selling

11 |
12 |
13 |
14 | Concerts 15 |
16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 | {TopSellings.map((TopSelling) => ( 24 |
25 |
26 | 27 |
28 |
29 | {TopSelling.star} 30 | 31 |
32 |
{TopSelling.events} Events
33 |
34 |
35 |
36 |

{TopSelling.title}

37 | {TopSelling.text} 38 |
39 |
40 | ))} 41 |
42 |
43 | ) 44 | } 45 | -------------------------------------------------------------------------------- /components/home/homepage1/topSelling.module.css: -------------------------------------------------------------------------------- 1 | .topSelling { 2 | margin-top: 50px; 3 | display: flex; 4 | justify-content: center; 5 | flex-direction: column; 6 | padding: 0 14%; 7 | } 8 | .dFlex { 9 | display: flex; 10 | justify-content: flex-start; 11 | align-items: center; 12 | } 13 | .flexColumn { 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: space-between; 17 | width: 100%; 18 | } 19 | .topTitle { 20 | font-size: 25px; 21 | font-weight: 700; 22 | color: #373F51; 23 | } 24 | .title { 25 | font-weight: 700; 26 | color: #373F51; 27 | } 28 | .borderHor { 29 | border-bottom: 2px solid #373F51; 30 | width: 70px; 31 | height: 17px; 32 | margin-left: 15px; 33 | } 34 | .concertsField { 35 | display: flex; 36 | justify-content: space-between; 37 | align-content: center; 38 | margin-top: 25px; 39 | margin-bottom: -15px; 40 | width: 100%; 41 | } 42 | .title { 43 | font-weight: 700; 44 | color: #373F51; 45 | font-size: 20px; 46 | } 47 | .seeAllBtn { 48 | color: #58A4B0; 49 | border: none; 50 | outline: none; 51 | background: none; 52 | font-size: 13px; 53 | font-weight: bold; 54 | } 55 | .seeAllIcon { 56 | width: 15px; 57 | height: 11px; 58 | margin-top: 3px; 59 | } 60 | .cardsBody { 61 | display: flex; 62 | flex-wrap: wrap; 63 | justify-content: center; 64 | align-items: center; 65 | margin-top: 25px; 66 | padding-bottom: 20px; 67 | } 68 | .cards { 69 | height: 260px!important; 70 | width: 24%!important; 71 | padding-right: 0px!important; 72 | padding-left: 0px!important; 73 | box-shadow: 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5, 0 3px 5px 0 #E5E5E5; 74 | margin: auto!important; 75 | margin-bottom: 10px!important; 76 | margin-top: 10px!important; 77 | border-radius: 3px; 78 | overflow: hidden; 79 | } 80 | .relative { 81 | position: relative; 82 | } 83 | .cardImg { 84 | width: 100%; 85 | } 86 | .cardSelling { 87 | position: absolute; 88 | top: 10px; 89 | left: 10px; 90 | padding: 3px; 91 | display: flex; 92 | justify-content: space-between; 93 | align-content: center; 94 | } 95 | .star { 96 | display: flex; 97 | justify-content: center; 98 | align-items: center; 99 | background: white; 100 | border-radius: 50%; 101 | width: 20px; 102 | height: 20px; 103 | font-size: 9.5px; 104 | font-weight: 700; 105 | } 106 | .starImg { 107 | width: 9px; 108 | height: 9px; 109 | margin-left: 0.8px; 110 | } 111 | .events { 112 | color: #DAA49A; 113 | font-weight: 600; 114 | font-size: 10px; 115 | background: white; 116 | padding: 4px; 117 | width: 65px; 118 | height: 23px; 119 | border-radius: 4px; 120 | text-align: center; 121 | margin-left: 5px; 122 | } 123 | .cardTextField { 124 | padding: 10px 20px; 125 | } 126 | .cardTitle { 127 | color: #373F51; 128 | font-size: 15px; 129 | font-weight: 700; 130 | } 131 | .cardText { 132 | color: #A9BCD0; 133 | font-size: 11px; 134 | } 135 | @media screen and (max-width:1130px) { 136 | .cards { 137 | width: 46%!important; 138 | height: 310px!important; 139 | padding-right: 0px!important; 140 | padding-left: 0px!important; 141 | } 142 | } 143 | @media screen and (max-width: 960px) { 144 | .cards { 145 | height: 290px!important; 146 | } 147 | } 148 | @media screen and (max-width: 730px) { 149 | .cards { 150 | height: 260px!important; 151 | } 152 | } 153 | @media screen and (max-width:550px) { 154 | .borderHor { 155 | display: none; 156 | } 157 | .cards { 158 | width: 90%!important; 159 | height: 305px!important; 160 | padding-right: 0px!important; 161 | padding-left: 0px!important; 162 | } 163 | } 164 | @media screen and (max-width:440px) { 165 | .cards { 166 | height: 270px!important; 167 | } 168 | } -------------------------------------------------------------------------------- /data/tickets.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "BRRR", "name": "BARRERA SOMBRA"}, "row": 1, "seats": { "from": 1, "to": 147, "count": 147 }, "price": { "value": 1500, "currency": "USD" } }, 4 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "BRRR", "name": "BARRERA SOMBRA"}, "row": 2, "seats": { "from": 62, "to": 112, "count": 51 }, "price": { "value": 1000, "currency": "USD" } }, 5 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "BRRR", "name": "BARRERA SOMBRA"}, "row": 3, "seats": { "from": 64, "to": 115, "count": 52 }, "price": { "value": 1000, "currency": "USD" } }, 6 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "BRRR", "name": "BARRERA SOMBRA"}, "row": 4, "seats": { "from": 66, "to": 119, "count": 54 }, "price": { "value": 1000, "currency": "USD" } }, 7 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "TND1", "name": "1ER TENDIDO"}, "row": 1, "seats": { "from": 61, "to": 116, "count": 56 }, "price": { "value": 800, "currency": "USD" } }, 8 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "TND1", "name": "2do TENDIDO"}, "row": 2, "seats": { "from": 63, "to": 121, "count": 59 }, "price": { "value": 750, "currency": "USD" } }, 9 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "TND1", "name": "3er TENDIDO"}, "row": 3, "seats": { "from": 65, "to": 124, "count": 60 }, "price": { "value": 750, "currency": "USD" } }, 10 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "TND1", "name": "4to TENDIDO"}, "row": 4, "seats": { "from": 67, "to": 128, "count": 62 }, "price": { "value": 750, "currency": "USD" } }, 11 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "TND1", "name": "5to TENDIDO"}, "row": 5, "seats": { "from": 78, "to": 141, "count": 64 }, "price": { "value": 750, "currency": "USD" } }, 12 | { "event": {"id": "ayayay", "artist": {"id": "nodal" } }, "zone": {"id": "TND1", "name": "6to TENDIDO"}, "row": 6, "seats": { "from": 79, "to": 193, "count": 115 }, "price": { "value": 750, "currency": "USD" } } 13 | 14 | ] -------------------------------------------------------------------------------- /modules/home/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Layout from '../layout/Layout'; 2 | import Home from '../../components/home'; 3 | 4 | 5 | const HomePage = () => { 6 | 7 | return ( 8 | 9 | 10 | 11 | ) 12 | }; 13 | 14 | export default HomePage; 15 | export async function getServerSideProps() { 16 | console.log("fdsfsdfsd") 17 | const HeaderEvents = await getHeaderEvents(); 18 | 19 | // const featuredArtists = insertLinks(await getFeaturedArtists(), 'artists'); 20 | // const featuredVenues = insertLinks(await getFeaturedVenues(), 'venues'); 21 | return { 22 | props: { HeaderEvents }, 23 | }; 24 | } -------------------------------------------------------------------------------- /modules/layout/Header1/headerNav.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import NavMenuDraw from './navMenuDraw'; 3 | import Link from '@material-ui/core/Link'; 4 | import Toolbar from '@material-ui/core/Toolbar'; 5 | 6 | const sections1 = [ 7 | { title: 'Concerts', url: '#'}, 8 | { title: 'Sports', url: '#' }, 9 | { title: 'Arts & Theater', url: '#' }, 10 | { title: 'Family', url: '#' }, 11 | { title: 'More', url: '#' }, 12 | ]; 13 | const sections2 = [ 14 | { title: 'Sign In', url: '#'}, 15 | { title: 'Sell', url: '#' }, 16 | { title: 'Git Cards', url: '#' }, 17 | { title: 'Help', url: '#' }, 18 | ]; 19 | 20 | 21 | 22 | const HeaderNav= (props) => { 23 | const { height, setHeight } = props 24 | const [scroll, setScroll] = useState(false); 25 | 26 | useEffect(() => { 27 | window.addEventListener("scroll", () => { 28 | setScroll(window.scrollY > 50); 29 | }); 30 | }, []); 31 | 32 | return ( 33 | <> 34 |
35 | 36 | {sections1.map((section1) => ( 37 | 44 | {section1.title} 45 | 46 | ))} 47 | 48 |
49 | 50 |
51 | 52 | {sections2.map((section2) => ( 53 | 60 | {section2.title} 61 | 62 | ))} 63 | 64 |
65 |
66 | 67 |
68 | 69 |
70 |
71 | {sections2.map((section2) => ( 72 | 79 | {section2.title} 80 | 81 | ))} 82 |
83 |
84 | 89 | SignIn 90 | 91 |
92 |
93 | 94 | ); 95 | } 96 | export default HeaderNav 97 | -------------------------------------------------------------------------------- /modules/layout/Header1/index.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import HeaderNav from './headerNav'; 3 | 4 | const Header = () => { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default Header; 13 | -------------------------------------------------------------------------------- /modules/layout/Header1/navMenuDraw.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import { makeStyles, useTheme } from '@material-ui/core/styles'; 4 | import Drawer from '@material-ui/core/Drawer'; 5 | import List from '@material-ui/core/List'; 6 | import Divider from '@material-ui/core/Divider'; 7 | import IconButton from '@material-ui/core/IconButton'; 8 | import MenuIcon from '@material-ui/icons/Menu'; 9 | import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; 10 | import ChevronRightIcon from '@material-ui/icons/ChevronRight'; 11 | import ListItem from '@material-ui/core/ListItem'; 12 | import ListItemText from '@material-ui/core/ListItemText'; 13 | 14 | const drawerWidth = "100%"; 15 | 16 | const useStyles = makeStyles((theme) => ({ 17 | root: { 18 | display: 'flex', 19 | }, 20 | appBar: { 21 | transition: theme.transitions.create(['margin', 'width'], { 22 | easing: theme.transitions.easing.sharp, 23 | duration: theme.transitions.duration.leavingScreen, 24 | }), 25 | }, 26 | appBarShift: { 27 | 28 | }, 29 | menuButton: { 30 | marginRight: theme.spacing(2), 31 | }, 32 | hide: { 33 | display: 'none', 34 | }, 35 | drawer: { 36 | width: drawerWidth, 37 | flexShrink: 0, 38 | background: '#bcd2d6;' 39 | 40 | }, 41 | drawerPaper: { 42 | width: drawerWidth, 43 | background: '#bcd2d6;', 44 | padding: "0 30px", 45 | }, 46 | content: { 47 | flexGrow: 1, 48 | padding: theme.spacing(3), 49 | transition: theme.transitions.create('margin', { 50 | easing: theme.transitions.easing.sharp, 51 | duration: theme.transitions.duration.leavingScreen, 52 | }), 53 | marginLeft: -drawerWidth, 54 | }, 55 | contentShift: { 56 | transition: theme.transitions.create('margin', { 57 | easing: theme.transitions.easing.easeOut, 58 | duration: theme.transitions.duration.enteringScreen, 59 | }), 60 | marginLeft: 0, 61 | }, 62 | })); 63 | 64 | const NavMenuDraw = () => { 65 | const classes = useStyles(); 66 | const theme = useTheme(); 67 | const [open, setOpen] = React.useState(false); 68 | 69 | const handleDrawerOpen = () => { 70 | setOpen(true); 71 | }; 72 | 73 | const handleDrawerClose = () => { 74 | setOpen(false); 75 | }; 76 | 77 | return ( 78 |
79 | 87 | 88 | 89 | 99 |
100 | 101 | {theme.direction === 'ltr' ? : } 102 | 103 |
Menu
104 |
105 | 106 | 107 | {['Concerts', 'Sports', 'Arts & Theater', 'Family', 'More'].map((text, index) => ( 108 | 109 | 110 | 111 | ))} 112 | 113 | 114 |
115 | ); 116 | } 117 | export default NavMenuDraw; -------------------------------------------------------------------------------- /modules/layout/Layout.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | // import Header from './Header'; 3 | import MainContent from './MainContent'; 4 | import Footer from './Footer'; 5 | 6 | const Layout = ({ children }) => { 7 | 8 | return ( 9 | 10 | {/*
*/} 11 | {children} 12 |