diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..4a3e02cb8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,39 @@ +# Node.js / Angular +node_modules/ +dist/ +npm-debug.log +yarn-error.log +package-lock.json +yarn.lock +coverage/ +src/**/*.spec.ts +*.tsbuildinfo + +# Python / Flask +__pycache__/ +*.pyc +*.pyo +*.pyd +*.db +*.sqlite3 +*.log +*.env +instance/ +venv/ +*.egg-info/ +*.egg +*.whl +.Python +*.py[cod] + +# System Files +.DS_Store +Thumbs.db +ehthumbs.db +*.swp +*.swo + +# IDE Files +.vscode/ +.idea/ +*.iml diff --git a/README.md b/README.md index 802192f46..99e791c4b 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,60 @@ -# GroupProjectTemplate -Please make sure to modify this readme file as well as the "about" property of the project! +# MenuMatch + +## Overview +This project focuses on building a restaurant review platform tailored for users with specific dietary needs such as vegan, gluten-free, and halal. The platform aims to make it easier for users to find suitable dining options based on their dietary preferences. Users can filter restaurant reviews according to their needs and view curated ratings for specific food categories, ensuring they choose the best dining option. + +## Motivation +The idea for this project emerged from the challenges faced by international students and others with dietary restrictions, particularly in Boston. General restaurant reviews often lack specific information about how suitable a restaurant is for particular diets. This platform addresses that gap, offering users a way to filter restaurants and reviews to meet their unique requirements. + +### JIRA Link: https://menumatch.atlassian.net/browse/MENUMATCH +## Features +### Essential Features +- **Food Type Selection**: Users can filter restaurants based on dietary preferences such as vegan, gluten-free, and halal. +- **Overall Restaurant Review**: Users can view the overall rating of a restaurant. +- **Curated Reviews Based on User Choices**: Reviews will be tailored to the user's selected dietary preference. +- **User-Submitted Reviews**: Users can submit reviews for specific food types. +- **Mobile & Web Accessibility**: The platform is accessible on both web and mobile devices. +- **User Registration & Profile Management**: Users can sign up, log in, and manage their profile. + +### Desirable Features +- **User Nationality Input**: Users can add their nationality to help others with similar taste preferences find relevant reviews. + +### Optional Features +- **Food Flavor Descriptions**: Users can describe the flavors of dishes (e.g., sweet, spicy, savory). +- **Food Photo Uploads**: Users can upload photos of the food they ordered. + +## Non-functional Requirements +- **Security & Privacy**: Data encryption via HTTPS to ensure user privacy and secure communication. +- **Performance**: The platform can handle up to 10,000 concurrent users, with search results returning within 2-3 seconds. +- **Scalability**: Horizontal and vertical scaling for future growth. +- **Availability**: Minimum 99.9% uptime with proper notifications for scheduled maintenance. +- **Usability**: Intuitive and responsive design for both web and mobile versions. +- **Compliance**: Adherence to GDPR for users in the European Union. + +## Technology Stack +- **Frontend**: Angular +- **Backend**: Flask +- **Database**: MongoDB / MySQL (TBD) +- **Version Control**: Git/GitHub +- **CI/CD**: Jenkins +- **Hosting**: AWS (EC2) +- **Containerization**: Docker +- **Task Management**: JIRA + +## Installation & Setup +### Prerequisites +- Python 3.x +- Docker (optional for containerization) +- TODO: Add further Prerequisites as decided + +### TODO: Add steps to setup the project + + +### Branching Strategy +We follow the **GitHub Flow** strategy: +- Create feature branches from the `main` branch. +- Submit a pull request after peer review and passing tests. +- The main branch is always deployable. + +## License +This project is licensed under the MIT License. diff --git a/code/Jenkinsfile b/code/Jenkinsfile new file mode 100644 index 000000000..91992aaad --- /dev/null +++ b/code/Jenkinsfile @@ -0,0 +1,103 @@ +pipeline { + agent { + label 'develop' + } + + environment { + DOCKER_COMPOSE_DEV = 'docker-compose.dev.yml' + DOCKER_COMPOSE_PROD = 'docker-compose.prod.yml' + } + + stages { + stage('Build Backend') { + steps { + script { + // Build the backend container (Flask) + sh ''' + cd code/server + docker build -f Dockerfile.dev -t menumatch-backend . + ''' + } + } + } + + stage('Build Frontend') { + steps { + script { + // Build the frontend container (React) + sh ''' + cd code/menumatch + docker build -f Dockerfile.dev -t menumatch-frontend . + ''' + } + } + } + + stage('Run Tests') { + parallel { + stage('Backend Tests') { + steps { + // Run tests for backend (if any) + sh ''' + cd code/server + echo "Backend Tests to be run here" + ''' + } + } + + stage('Frontend Tests') { + steps { + // Run tests for frontend (if any) + sh ''' + cd code/menumatch + echo 'Frontend Tests to be run here' + ''' + } + } + } + } + + stage('Deploy to Development') { + steps { + script { + // Deploy the app to development environment + sh ''' + cd code + docker-compose -f $DOCKER_COMPOSE_DEV up -d + ''' + } + } + } + + stage('Build and Deploy to Production') { + agent { + label 'production' + } + when { + branch 'main' + } + steps { + script { + // Build and deploy for production + sh ''' + cd code + docker-compose -f $DOCKER_COMPOSE_PROD up -d --build + ''' + } + } + } + } + + post { + always { + // Clean up Docker containers and networks + sh 'cd code && docker-compose down' + } + success { + echo 'Pipeline succeeded!' + } + failure { + echo 'Pipeline failed.' + } + } +} diff --git a/code/Readme.md b/code/Readme.md index ca77aa307..120190731 100644 --- a/code/Readme.md +++ b/code/Readme.md @@ -1 +1,129 @@ -This folder contains all source code and test code. + +# MenuMatch | Code + +## Overview + +**MenuMatch** is a restaurant review platform designed specifically for users with special dietary needs. It allows users to filter restaurant reviews based on their dietary preferences (e.g., vegan, halal, gluten-free), making it easier to find dining options that fit their requirements. + +The project consists of two components: +1. **Backend (Flask)**: This handles the API and business logic. +2. **Frontend (React)**: This is the user interface for the platform. + +## Prerequisites + +Before running the project, make sure you have the following installed: + +- [Node.js](https://nodejs.org/) (for running the React frontend locally) +- [Python 3.x](https://www.python.org/) (for running the Flask backend locally) +- [Docker](https://www.docker.com/) (for running the project using Docker) +- [Docker Compose](https://docs.docker.com/compose/) (to orchestrate multi-container Docker applications) + +--- + +## Running the Project Using Docker + +You can run the entire project (both frontend and backend) using Docker in two different environments: **development** and **production**. + +### 1. Development Environment + +In the development environment, the backend Flask app runs in development mode, and the React app runs with hot-reloading. + +#### Steps: + +1. Build and start the containers: + + ```bash + docker-compose -f docker-compose.dev.yml up --build + ``` +2. The services should now be accessible at: + +- **Frontend (React)**: http://localhost:8000 +- **Backend (Flask)**: http://localhost:8080 +#### Notes: + +- Any changes you make to the source code will be reflected immediately due to the volume mappings in the development setup. + +### 2. Production Environment + +In the production environment, the Flask app is served via `gunicorn`, and the React app is built and served using `nginx`. + +#### Steps: + +1. Build and start the containers in detached mode: + ```bash + docker-compose -f docker-compose.prod.yml up --build -d + ``` + +2. The services should now be accessible at: + + - **Frontend (React)**: http://localhost:80 + - **Backend (Flask)**: http://localhost:5000 + +#### Notes: + +- In production mode, the frontend is optimized and served by Nginx. +----- +## Running the Project Locally + +If you prefer to run the project locally without Docker, you can run the backend and frontend independently. Below are the steps for both. + +### 1. Backend (Flask) Setup + +#### Steps: + +1. Navigate to the `server` directory: + ```bash + cd server + ``` +2. - Create a virtual environment (optional but recommended): + ```bash + python3 -m venv venv + source venv/bin/activate + ``` + +- Install dependencies: + ```bash + pip install -r requirements.txt + ``` + +- Run the Flask app: + ```bash + python run.py + ``` + +- The backend should now be running at: http://localhost:8000 + +### 2. Frontend (React) Setup + +#### Steps: + +1. Navigate to the `menumatch` directory: + ```bash + cd menumatch + ``` + +2. Install dependencies: + ```bash + npm install + ``` + +3. Start the React development server: + ```bash + npm start + ``` + +4. The frontend should now be running at: http://localhost:8080 + +## Docker Tips + +### Building and Rebuilding Containers + +- To **build** or **rebuild** a Docker container, use the following command: + ```bash + docker-compose up --build + ``` + +- To **stop** and **remove** containers, networks, and volumes: + ```bash + docker-compose down + ``` \ No newline at end of file diff --git a/code/docker-compose.dev.yml b/code/docker-compose.dev.yml new file mode 100644 index 000000000..802b654ca --- /dev/null +++ b/code/docker-compose.dev.yml @@ -0,0 +1,23 @@ +version: '3' +services: + backend: + build: + context: ./server + dockerfile: Dockerfile.dev + ports: + - "8000:5000" + volumes: + - ./server:/app + environment: + - FLASK_ENV=development + + frontend: + build: + context: ./menumatch + dockerfile: Dockerfile.dev + ports: + - "3000:3000" + volumes: + - ./menumatch:/app + environment: + - CHOKIDAR_USEPOLLING=true diff --git a/code/docker-compose.prod.yml b/code/docker-compose.prod.yml new file mode 100644 index 000000000..f5a68743e --- /dev/null +++ b/code/docker-compose.prod.yml @@ -0,0 +1,17 @@ +version: '3' +services: + backend: + build: + context: ./server + dockerfile: Dockerfile.prod + ports: + - "8000:5000" + environment: + - FLASK_ENV=production + + frontend: + build: + context: ./menumatch + dockerfile: Dockerfile.prod + ports: + - "8080:80" diff --git a/code/menumatch/.gitignore b/code/menumatch/.gitignore new file mode 100644 index 000000000..4d29575de --- /dev/null +++ b/code/menumatch/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/code/menumatch/Dockerfile.dev b/code/menumatch/Dockerfile.dev new file mode 100644 index 000000000..4e3887c8d --- /dev/null +++ b/code/menumatch/Dockerfile.dev @@ -0,0 +1,18 @@ +# Stage 1: Development - Build the React app +FROM node:18-alpine + +# Set working directory +WORKDIR /app + +# Install dependencies +COPY package.json /app/package.json +RUN npm install --silent + +# Copy the rest of the source code +COPY . /app + +# Expose port 3000 for React development server +EXPOSE 3000 + +# Start React development server +CMD ["npm", "start"] diff --git a/code/menumatch/Dockerfile.prod b/code/menumatch/Dockerfile.prod new file mode 100644 index 000000000..c20f55640 --- /dev/null +++ b/code/menumatch/Dockerfile.prod @@ -0,0 +1,25 @@ +# Stage 1: Build the React app +FROM node:18-alpine AS build + +# Set working directory +WORKDIR /app + +# Install dependencies +COPY package.json /app/package.json +RUN npm install --silent + +# Copy the rest of the source code and build the app +COPY . /app +RUN npm run build + +# Stage 2: Serve the React app using Nginx +FROM nginx:alpine + +# Copy built app to Nginx's default html folder +COPY --from=build /app/build /usr/share/nginx/html + +# Expose port 80 +EXPOSE 80 + +# Start Nginx server +CMD ["nginx", "-g", "daemon off;"] diff --git a/code/menumatch/README.md b/code/menumatch/README.md new file mode 100644 index 000000000..58beeaccd --- /dev/null +++ b/code/menumatch/README.md @@ -0,0 +1,70 @@ +# Getting Started with Create React App + +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.\ +Open [http://localhost:3000](http://localhost:3000) to view it in your browser. + +The page will reload when you make changes.\ +You may also see any lint errors in the console. + +### `npm test` + +Launches the test runner in the interactive watch mode.\ +See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. + +### `npm run build` + +Builds the app for production to the `build` folder.\ +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.\ +Your app is ready to be deployed! + +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can't go back!** + +If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. + +You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. + +## Learn More + +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). + +To learn React, check out the [React documentation](https://reactjs.org/). + +### Code Splitting + +This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) + +### Analyzing the Bundle Size + +This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) + +### Making a Progressive Web App + +This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) + +### Advanced Configuration + +This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) + +### Deployment + +This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) + +### `npm run build` fails to minify + +This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) diff --git a/code/menumatch/package.json b/code/menumatch/package.json new file mode 100644 index 000000000..5937e1aaa --- /dev/null +++ b/code/menumatch/package.json @@ -0,0 +1,62 @@ +{ + "name": "menumatch", + "version": "0.1.0", + "private": true, + "dependencies": { + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "feather-icons": "^4.29.2", + "framer-motion": "^7.10.3", + "react": "^18.3.1", + "react-anchor-link-smooth-scroll": "^1.0.12", + "react-dom": "^18.3.1", + "react-github-btn": "^1.4.0", + "react-modal": "^3.16.1", + "react-rnd": "^10.4.13", + "react-router-dom": "^6.27.0", + "react-scripts": "^5.0.1", + "react-slick": "^0.29.0", + "slick-carousel": "^1.8.1", + "styled-components": "^5.3.11", + "tailwindcss": "^3.4.14", + "twin.macro": "^3.4.1", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ], + "overrides": [ + { + "files": [ + "src/**/*.js" + ], + "rules": { + "import/no-anonymous-default-export": "off" + } + } + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/code/menumatch/public/favicon.ico b/code/menumatch/public/favicon.ico new file mode 100644 index 000000000..487244df9 Binary files /dev/null and b/code/menumatch/public/favicon.ico differ diff --git a/code/menumatch/public/index.html b/code/menumatch/public/index.html new file mode 100644 index 000000000..0149c2b23 --- /dev/null +++ b/code/menumatch/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + MenuMatch + + + +
+ + + diff --git a/code/menumatch/public/logo192.png b/code/menumatch/public/logo192.png new file mode 100644 index 000000000..fc44b0a37 Binary files /dev/null and b/code/menumatch/public/logo192.png differ diff --git a/code/menumatch/public/logo512.png b/code/menumatch/public/logo512.png new file mode 100644 index 000000000..a4e47a654 Binary files /dev/null and b/code/menumatch/public/logo512.png differ diff --git a/code/menumatch/public/manifest.json b/code/menumatch/public/manifest.json new file mode 100644 index 000000000..080d6c77a --- /dev/null +++ b/code/menumatch/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/code/menumatch/public/robots.txt b/code/menumatch/public/robots.txt new file mode 100644 index 000000000..e9e57dc4d --- /dev/null +++ b/code/menumatch/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/code/menumatch/src/App.css b/code/menumatch/src/App.css new file mode 100644 index 000000000..74b5e0534 --- /dev/null +++ b/code/menumatch/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/code/menumatch/src/App.js b/code/menumatch/src/App.js new file mode 100644 index 000000000..5b85b52e9 --- /dev/null +++ b/code/menumatch/src/App.js @@ -0,0 +1,25 @@ +import React from "react"; +import GlobalStyles from './styles/GlobalStyles.js'; +import { css } from "styled-components/macro"; //eslint-disable-line + +import LandingPage from "./pages/LandingPage.js"; + +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Login from "./pages/Login.js"; +import SignUp from "./pages/SignUp.js" + +export default function App() { + + return ( + <> + + + + } /> + } /> + } /> + + + + ); +} diff --git a/code/menumatch/src/App.test.js b/code/menumatch/src/App.test.js new file mode 100644 index 000000000..1f03afeec --- /dev/null +++ b/code/menumatch/src/App.test.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/code/menumatch/src/components/features.js b/code/menumatch/src/components/features.js new file mode 100644 index 000000000..df6b5c6be --- /dev/null +++ b/code/menumatch/src/components/features.js @@ -0,0 +1,117 @@ +import React from "react"; +import styled from "styled-components"; +import tw from "twin.macro"; +import { css } from "styled-components/macro"; //eslint-disable-line +import { SectionHeading, Subheading as SubheadingBase } from "./misc/Headings.js"; +import { SectionDescription } from "./misc/Typography.js"; +import { Container, ContentWithPaddingXl } from "./misc/Layouts.js"; +import { ReactComponent as ArrowRightIcon } from "../images/arrow-right-icon.svg"; +import ReliableIconImage from "../images/reliable-icon.svg"; +import ShieldIconImage from "../images/shield-icon.svg"; +import CustomizeIconImage from "../images/customize-icon.svg"; +import { ReactComponent as SvgDecoratorBlob3 } from "../images/svg-decorator-blob-3.svg"; + +const Heading = tw(SectionHeading)``; +const Subheading = tw(SubheadingBase)`text-center mb-3`; +const Description = tw(SectionDescription)`text-center mx-auto`; +const ThreeColumnContainer = styled.div` + ${tw`mt-10 flex flex-col items-center lg:items-stretch lg:flex-row flex-wrap lg:justify-center max-w-screen-lg mx-auto`} +`; +const Column = styled.div` + ${tw`lg:w-1/3 max-w-xs`} +`; + +const Card = styled.a` + ${tw`flex flex-col items-center text-center h-full mx-4 px-4 py-8 rounded transition-transform duration-300 hover:cursor-pointer transform hover:scale-105 `} + .imageContainer { + ${tw`text-center rounded-full p-4 bg-gray-100`} + img { + ${tw`w-8 h-8`} + } + } + + .title { + ${tw`mt-4 font-bold text-xl leading-none`} + } + + .description { + ${tw`mt-4 text-sm font-medium text-secondary-300`} + } + + .link { + ${tw`mt-auto inline-flex items-center pt-5 text-sm font-bold text-primary-300 leading-none hocus:text-primary-900 transition duration-300`} + .icon { + ${tw`ml-2 w-4`} + } + } +`; + +const DecoratorBlob = styled(SvgDecoratorBlob3)` + ${tw`pointer-events-none absolute right-0 bottom-0 w-64 opacity-25 transform translate-x-32 translate-y-40`} +`; + +export default ({ + cards = [ + { + imageSrc: ShieldIconImage, + title: "Secure", + description: "We strictly only deal with vendors that provide top notch security.", + url: "#" + }, + { + imageSrc: ReliableIconImage, + title: "Reliable", + description: "Lorem ipsum donor amet siti ceali placeholder text", + url: "#" + }, + { + imageSrc: CustomizeIconImage, + title: "Customizable", + description: "Lorem ipsum donor amet siti ceali placeholder text", + url: "#" + } + ], + linkText = "Learn More", + heading = "", + subheading = "", + description = "", + imageContainerCss = null, + imageCss = null +}) => { + /* + * This componets accepts a prop - `cards` which is an array of object denoting the cards. Each object in the cards array can have the following keys (Change it according to your need, you can also add more objects to have more cards in this feature component): + * 1) imageSrc - the image shown at the top of the card + * 2) title - the title of the card + * 3) description - the description of the card + * 4) url - the url that the card should goto on click + */ + return ( + + + {subheading && {subheading}} + {heading && {heading}} + {description && {description}} + + {cards.map((card, i) => ( + + + + + + {card.title} +

{card.description}

+ {linkText && ( + + {linkText} + + + )} + + + ))} + + + + + ); +}; diff --git a/code/menumatch/src/components/footer.js b/code/menumatch/src/components/footer.js new file mode 100644 index 000000000..97a669734 --- /dev/null +++ b/code/menumatch/src/components/footer.js @@ -0,0 +1,65 @@ +import React from "react"; +import tw from "twin.macro"; +import styled from "styled-components"; +import {Container as ContainerBase } from "./misc/Layouts.js" +import logo from "../images/logo.svg"; +import { ReactComponent as FacebookIcon } from "../images/facebook-icon.svg"; +import { ReactComponent as TwitterIcon } from "../images/twitter-icon.svg"; +import { ReactComponent as YoutubeIcon } from "../images/youtube-icon.svg"; + + +const Container = tw(ContainerBase)`bg-gray-900 text-gray-100 -mx-8 -mb-8` +const Content = tw.div`max-w-screen-xl mx-auto py-20 lg:py-24`; + +const Row = tw.div`flex items-center justify-center flex-col px-8` + +const LogoContainer = tw.div`flex items-center justify-center md:justify-start`; +const LogoImg = tw.img`w-8`; +const LogoText = tw.h5`ml-2 text-2xl font-black tracking-wider`; + +const LinksContainer = tw.div`mt-8 font-medium flex flex-wrap justify-center items-center flex-col sm:flex-row` +const Link = tw.a`border-b-2 border-transparent hocus:text-gray-300 hocus:border-gray-300 pb-1 transition duration-300 mt-2 mx-4`; + +const SocialLinksContainer = tw.div`mt-10`; +const SocialLink = styled.a` + ${tw`cursor-pointer inline-block text-gray-100 hover:text-gray-500 transition duration-300 mx-4`} + svg { + ${tw`w-5 h-5`} + } +`; + +const CopyrightText = tw.p`text-center mt-10 font-medium tracking-wide text-sm text-gray-600` +export default () => { + return ( + + + + + + MenuMatch + + + Home + About + Contact Us + Reviews + + + + + + + + + + + + + + © Copyright 2024, MenuMatch + + + + + ); +}; diff --git a/code/menumatch/src/components/header.js b/code/menumatch/src/components/header.js new file mode 100644 index 000000000..0590d171f --- /dev/null +++ b/code/menumatch/src/components/header.js @@ -0,0 +1,127 @@ +import React from "react"; +import { motion } from "framer-motion"; +import tw from "twin.macro"; +import styled from "styled-components"; +import { css } from "styled-components/macro"; //eslint-disable-line + +import useAnimatedNavToggler from "../helpers/useAnimatedNavToggler.js"; + +import logo from "../images/logo.svg"; +import { ReactComponent as MenuIcon } from "feather-icons/dist/icons/menu.svg"; +import { ReactComponent as CloseIcon } from "feather-icons/dist/icons/x.svg"; + +const Header = tw.header` + flex justify-between items-center + max-w-screen-xl mx-auto +`; + +export const NavLinks = tw.div`inline-block`; + +/* hocus: stands for "on hover or focus" + * hocus:bg-primary-700 will apply the bg-primary-700 class on hover or focus + */ +export const NavLink = tw.a` + text-lg my-2 lg:text-sm lg:mx-6 lg:my-0 + font-semibold tracking-wide transition duration-300 + pb-1 border-b-2 border-transparent hover:border-primary-500 hocus:text-primary-500 +`; + +export const PrimaryLink = tw(NavLink)` + lg:mx-0 + px-8 py-3 rounded bg-primary-500 text-gray-100 + hocus:bg-primary-700 hocus:text-gray-200 focus:shadow-outline + border-b-0 +`; + +export const LogoLink = styled(NavLink)` + ${tw`flex items-center font-black border-b-0 text-2xl! ml-0!`}; + + img { + ${tw`w-10 mr-3`} + } +`; + +export const MobileNavLinksContainer = tw.nav`flex flex-1 items-center justify-between`; +export const NavToggle = tw.button` + lg:hidden z-20 focus:outline-none hocus:text-primary-500 transition duration-300 +`; +export const MobileNavLinks = motion(styled.div` + ${tw`lg:hidden z-10 fixed top-0 inset-x-0 mx-4 my-6 p-8 border text-center rounded-lg text-gray-900 bg-white`} + ${NavLinks} { + ${tw`flex flex-col items-center`} + } +`); + +export const DesktopNavLinks = tw.nav` + hidden lg:flex flex-1 justify-between items-center +`; + +export default ({ roundedHeaderButton = false, logoLink, links, className, collapseBreakpointClass = "lg" }) => { + + const defaultLinks = [ + + About + Blog + Pricing + Contact Us + + Login + + Sign Up + + ]; + + const { showNavLinks, animation, toggleNavbar } = useAnimatedNavToggler(); + const collapseBreakpointCss = collapseBreakPointCssMap[collapseBreakpointClass]; + + const defaultLogoLink = ( + + logo + MenuMatch + + ); + + logoLink = logoLink || defaultLogoLink; + links = links || defaultLinks; + + return ( +
+ + {logoLink} + {links} + + + + + {links} + + + {showNavLinks ? : } + + +
+ ); +}; + +const collapseBreakPointCssMap = { + sm: { + mobileNavLinks: tw`sm:hidden`, + desktopNavLinks: tw`sm:flex`, + mobileNavLinksContainer: tw`sm:hidden` + }, + md: { + mobileNavLinks: tw`md:hidden`, + desktopNavLinks: tw`md:flex`, + mobileNavLinksContainer: tw`md:hidden` + }, + lg: { + mobileNavLinks: tw`lg:hidden`, + desktopNavLinks: tw`lg:flex`, + mobileNavLinksContainer: tw`lg:hidden` + }, + xl: { + mobileNavLinks: tw`lg:hidden`, + desktopNavLinks: tw`lg:flex`, + mobileNavLinksContainer: tw`lg:hidden` + } +}; diff --git a/code/menumatch/src/components/hero.js b/code/menumatch/src/components/hero.js new file mode 100644 index 000000000..3db6452f4 --- /dev/null +++ b/code/menumatch/src/components/hero.js @@ -0,0 +1,88 @@ +import React from "react"; +import tw from "twin.macro"; +import styled from "styled-components"; +import { css } from "styled-components/macro"; //eslint-disable-line + +import Header, { LogoLink, NavLinks, NavLink as NavLinkBase } from "./header.js"; + +const StyledHeader = styled(Header)` + ${tw`justify-between`} + ${LogoLink} { + ${tw`mr-8 pb-0`} + } +`; + +const NavLink = tw(NavLinkBase)` + sm:text-sm sm:mx-6 +`; + +const Container = tw.div`relative -mx-8 -mt-8`; +const TwoColumn = tw.div`flex flex-col lg:flex-row bg-gray-100`; +const LeftColumn = tw.div`ml-8 mr-8 xl:pl-10 py-8`; +const RightColumn = styled.div` + background-image: url("https://res.cloudinary.com/simpleview/image/upload/v1485793494/clients/chattanooga/Restaurants_cb227c1b-1c14-4eb5-b22f-c67b8dbf4d45.jpg"); + ${tw`bg-green-500 bg-cover bg-center xl:ml-24 h-96 lg:h-auto lg:w-1/2 lg:flex-1`} +`; + +const Content = tw.div`mt-24 lg:mt-24 lg:mb-24 flex flex-col sm:items-center lg:items-stretch`; +const Heading = tw.h1`text-3xl sm:text-5xl md:text-6xl lg:text-5xl font-black leading-none`; +const Paragraph = tw.p`max-w-md my-8 lg:my-5 lg:my-8 sm:text-lg lg:text-base xl:text-lg leading-loose`; + +const Actions = styled.div` + ${tw`mb-8 lg:mb-0`} + .action { + ${tw`text-center inline-block w-full sm:w-48 py-4 font-semibold tracking-wide rounded hocus:outline-none focus:shadow-outline transition duration-300`} + } + .primaryAction { + ${tw`bg-primary-500 text-gray-100 hover:bg-primary-700`} + } + .secondaryAction { + ${tw`mt-4 sm:mt-0 sm:ml-4 bg-gray-300 text-gray-700 hover:bg-gray-400 hover:text-gray-800`} + } +`; + +export default ({ + navLinks = [ + + About + Map + Login + + ], + heading = ( + <> + Find Perfect Restaurants + +
+ anywhere you go. + + ), + description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lacus faucibus, pharetra dui eu, bibendum libero.", + primaryActionUrl = "/signup", + primaryActionText = "Sign Up", + secondaryActionUrl = "#", + secondaryActionText = "Search Resaturants" +}) => { + return ( + + + + + + {heading} + {description} + + + {primaryActionText} + + + {secondaryActionText} + + + + + + + + ); +}; diff --git a/code/menumatch/src/components/misc/Buttons.js b/code/menumatch/src/components/misc/Buttons.js new file mode 100644 index 000000000..83e84ef04 --- /dev/null +++ b/code/menumatch/src/components/misc/Buttons.js @@ -0,0 +1,2 @@ +import tw from "twin.macro"; +export const PrimaryButton = tw.button`px-8 py-3 font-bold rounded bg-primary-500 text-gray-100 hocus:bg-primary-700 hocus:text-gray-200 focus:shadow-outline focus:outline-none transition duration-300`; diff --git a/code/menumatch/src/components/misc/Headings.js b/code/menumatch/src/components/misc/Headings.js new file mode 100644 index 000000000..bfaccaa2c --- /dev/null +++ b/code/menumatch/src/components/misc/Headings.js @@ -0,0 +1,4 @@ +import tw from "twin.macro"; + +export const SectionHeading = tw.h2`text-4xl sm:text-5xl font-black tracking-wide text-center` +export const Subheading = tw.h5`font-bold text-primary-500` diff --git a/code/menumatch/src/components/misc/Layouts.js b/code/menumatch/src/components/misc/Layouts.js new file mode 100644 index 000000000..824d06d31 --- /dev/null +++ b/code/menumatch/src/components/misc/Layouts.js @@ -0,0 +1,7 @@ +import tw from "twin.macro"; + +export const Container = tw.div`relative`; +export const ContentWithPaddingXl= tw.div`max-w-screen-xl mx-auto py-20 lg:py-24`; +export const ContentWithPaddingLg= tw.div`max-w-screen-lg mx-auto py-20 lg:py-24`; +export const ContentWithVerticalPadding = tw.div`py-20 lg:py-24`; +export const Content2Xl= tw.div`max-w-screen-2xl mx-auto`; diff --git a/code/menumatch/src/components/misc/Links.js b/code/menumatch/src/components/misc/Links.js new file mode 100644 index 000000000..edf3c03d3 --- /dev/null +++ b/code/menumatch/src/components/misc/Links.js @@ -0,0 +1,3 @@ +import tw from "twin.macro"; + +export const PrimaryLink = tw.a`cursor-pointer font-bold text-primary-500 border-b-2 border-transparent hocus:border-primary-500 hocus:text-primary-800 transition duration-300`; diff --git a/code/menumatch/src/components/misc/Typography.js b/code/menumatch/src/components/misc/Typography.js new file mode 100644 index 000000000..588fd6135 --- /dev/null +++ b/code/menumatch/src/components/misc/Typography.js @@ -0,0 +1,2 @@ +import tw from "twin.macro"; +export const SectionDescription = tw.p`mt-4 text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100 max-w-xl`; diff --git a/code/menumatch/src/components/slider.js b/code/menumatch/src/components/slider.js new file mode 100644 index 000000000..19ecaaea3 --- /dev/null +++ b/code/menumatch/src/components/slider.js @@ -0,0 +1,172 @@ +import React, { useState } from "react"; +import Slider from "react-slick"; +import tw from "twin.macro"; +import styled from "styled-components"; +import { SectionHeading } from "./misc/Headings"; +import { PrimaryButton as PrimaryButtonBase } from "./misc/Buttons"; +import { ReactComponent as PriceIcon } from "feather-icons/dist/icons/dollar-sign.svg"; +import { ReactComponent as LocationIcon } from "feather-icons/dist/icons/map-pin.svg"; +import { ReactComponent as StarIcon } from "feather-icons/dist/icons/star.svg"; +import { ReactComponent as ChevronLeftIcon } from "feather-icons/dist/icons/chevron-left.svg"; +import { ReactComponent as ChevronRightIcon } from "feather-icons/dist/icons/chevron-right.svg"; + +const Container = tw.div`relative`; +const Content = tw.div`max-w-screen-xl mx-auto py-16 lg:py-20`; + +const HeadingWithControl = tw.div`flex flex-col items-center sm:items-stretch sm:flex-row justify-between`; +const Heading = tw(SectionHeading)``; +const Controls = tw.div`flex items-center`; +const ControlButton = styled(PrimaryButtonBase)` + ${tw`mt-4 sm:mt-0 first:ml-0 ml-6 rounded-full p-2`} + svg { + ${tw`w-6 h-6`} + } +`; +const PrevButton = tw(ControlButton)``; +const NextButton = tw(ControlButton)``; + +const CardSlider = styled(Slider)` + ${tw`mt-16`} + .slick-track { + ${tw`flex`} + } + .slick-slide { + ${tw`h-auto flex justify-center mb-1`} + } +`; +const Card = tw.div`h-full flex! flex-col sm:border max-w-sm sm:rounded-tl-4xl sm:rounded-br-5xl relative focus:outline-none`; +const CardImage = styled.div(props => [ + `background-image: url("${props.imageSrc}");`, + tw`w-full h-56 sm:h-64 bg-cover bg-center rounded sm:rounded-none sm:rounded-tl-4xl` +]); + +const TextInfo = tw.div`py-6 sm:px-10 sm:py-6`; +const TitleReviewContainer = tw.div`flex flex-col sm:flex-row sm:justify-between sm:items-center`; +const Title = tw.h5`text-2xl font-bold`; + +const RatingsInfo = styled.div` + ${tw`flex items-center sm:ml-4 mt-2 sm:mt-0`} + svg { + ${tw`w-6 h-6 text-yellow-500 fill-current`} + } +`; +const Rating = tw.span`ml-2 font-bold`; + +const Description = tw.p`text-sm leading-loose mt-2 sm:mt-4`; + +const SecondaryInfoContainer = tw.div`flex flex-col sm:flex-row mt-2 sm:mt-4`; +const IconWithText = tw.div`flex items-center mr-6 my-2 sm:my-0`; +const IconContainer = styled.div` + ${tw`inline-block rounded-full p-2 bg-gray-700 text-gray-100`} + svg { + ${tw`w-3 h-3`} + } +`; +const Text = tw.div`ml-2 text-sm font-semibold text-gray-800`; + +const PrimaryButton = tw(PrimaryButtonBase)`mt-auto sm:text-lg rounded-none w-full rounded sm:rounded-none sm:rounded-br-4xl py-3 sm:py-6`; +export default () => { + // useState is used instead of useRef below because we want to re-render when sliderRef becomes available (not null) + const [sliderRef, setSliderRef] = useState(null); + const sliderSettings = { + arrows: false, + slidesToShow: 3, + responsive: [ + { + breakpoint: 1280, + settings: { + slidesToShow: 2, + } + }, + + { + breakpoint: 900, + settings: { + slidesToShow: 1, + } + }, + ] + }; + + /* Change this according to your needs */ + const cards = [ + { + imageSrc: "https://ewscripps.brightspotcdn.com/dims4/default/9728054/2147483647/strip/true/crop/1024x576+0+54/resize/1280x720!/quality/90/?url=https%3A%2F%2Fewscripps.brightspotcdn.com%2Fc9%2Fb5%2F1d1db7644bf9b8191f07690c0323%2Fap23026751888870.jpg", + title: "Chipotle", + description: "Lorem ipsum dolor sit amet, consectur dolori adipiscing elit, sed do eiusmod tempor nova incididunt ut labore et dolore magna aliqua.", + locationText: "Rome, Italy", + pricingText: "USD 10-15", + rating: "4.8", + }, + { + imageSrc: "https://cdn.vox-cdn.com/thumbor/LsnwXGxtC3ezGt3DLnaabSJQfT0=/0x0:1080x803/2000x1333/filters:focal(526x421:527x422)/cdn.vox-cdn.com/uploads/chorus_asset/file/23613883/Exterior_Evening__Taco_Bell_Defy_1_1080x1080_1_crop.jpg", + title: "Taco Bell", + description: "Lorem ipsum dolor sit amet, consectur dolori adipiscing elit, sed do eiusmod tempor nova incididunt ut labore et dolore magna aliqua.", + locationText: "Ibiza, Spain", + pricingText: "USD 8-12", + rating: 4.9, + }, + { + imageSrc: "https://image.cnbcfm.com/api/v1/image/107408068-1714480095054-gettyimages-2040998551-zawrzel-economya240229_npoRp.jpeg?v=1723478266&w=1858&h=1045&vtcrop=y", + title: "Starbucks", + description: "Lorem ipsum dolor sit amet, consectur dolori adipiscing elit, sed do eiusmod tempor nova incididunt ut labore et dolore magna aliqua.", + locationText: "Palo Alto, CA", + pricingText: "USD 4-10", + rating: "5.0", + }, + { + imageSrc: "https://images.unsplash.com/photo-1606720335177-3d04e70fb13b?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bWNkb25hbGRzfGVufDB8fDB8fHww", + title: "Mc Donalds", + description: "Lorem ipsum dolor sit amet, consectur dolori adipiscing elit, sed do eiusmod tempor nova incididunt ut labore et dolore magna aliqua.", + locationText: "Arizona, RAK", + pricingText: "USD 5-10", + rating: 4.5, + }, + ] + + return ( + + + + Popular Restaurants + + + + + + + {cards.map((card, index) => ( + + + + + {card.title} + + + {card.rating} + + + + + + + + {card.locationText} + + + + + + {card.pricingText} + + + {card.description} + + Review Now + + ))} + + + + ); +}; diff --git a/code/menumatch/src/helpers/AnimationRevealPage.js b/code/menumatch/src/helpers/AnimationRevealPage.js new file mode 100644 index 000000000..f58b85b18 --- /dev/null +++ b/code/menumatch/src/helpers/AnimationRevealPage.js @@ -0,0 +1,58 @@ +import React from "react"; +import tw from "twin.macro"; + +/* framer-motion and useInView here are used to animate the sections in when we reach them in the viewport + */ +import { motion } from "framer-motion"; +import useInView from "./useInView"; + +const StyledDiv = tw.div`font-display min-h-screen text-secondary-500 p-8 overflow-hidden`; +function AnimationReveal({ disabled, children }) { + if (disabled) { + return <>{children}; + } + + if (!Array.isArray(children)) children = [children]; + + const directions = ["left", "right"]; + const childrenWithAnimation = children.map((child, i) => { + return ( + + {child} + + ); + }); + return <>{childrenWithAnimation}; +} + +function AnimatedSlideInComponent({ direction = "left", offset = 30, children }) { + const [ref, inView] = useInView({ margin: `-${offset}px 0px 0px 0px`}); + + const x = { target: "0%" }; + + if (direction === "left") x.initial = "-150%"; + else x.initial = "150%"; + + return ( +
+ + {children} + +
+ ); +} + +export default props => ( + + + +); diff --git a/code/menumatch/src/helpers/useAnimatedNavToggler.js b/code/menumatch/src/helpers/useAnimatedNavToggler.js new file mode 100644 index 000000000..a294548d0 --- /dev/null +++ b/code/menumatch/src/helpers/useAnimatedNavToggler.js @@ -0,0 +1,17 @@ +import { useState } from "react"; +import { useAnimation, useCycle } from "framer-motion"; + +//Below logic is for toggling the navbar when toggleNavbar is called. It is used on mobile toggling of navbar. +export default function useAnimatedNavToggler() { + const [showNavLinks, setShowNavLinks] = useState(false); + const [x, cycleX] = useCycle("0%", "150%"); + const animation = useAnimation(); + + const toggleNavbar = () => { + setShowNavLinks(!showNavLinks); + animation.start({ x: x, display: "block" }); + cycleX(); + }; + + return {showNavLinks,animation, toggleNavbar } +} diff --git a/code/menumatch/src/helpers/useInView.js b/code/menumatch/src/helpers/useInView.js new file mode 100644 index 000000000..172c29b90 --- /dev/null +++ b/code/menumatch/src/helpers/useInView.js @@ -0,0 +1,11 @@ +import { useRef } from "react" +import { useInView as useInViewFromFramer } from 'framer-motion' + +export default function useInView({ once = true, margin = "-30px 0px 0px 0px"} = {}) { + const ref = useRef(null) + const isInView = useInViewFromFramer(ref, { + once: once + }) + + return [ref, isInView] +} \ No newline at end of file diff --git a/code/menumatch/src/images/arrow-right-icon.svg b/code/menumatch/src/images/arrow-right-icon.svg new file mode 100644 index 000000000..ed82bebf2 --- /dev/null +++ b/code/menumatch/src/images/arrow-right-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/code/menumatch/src/images/chipotle.jpeg b/code/menumatch/src/images/chipotle.jpeg new file mode 100644 index 000000000..43d812539 Binary files /dev/null and b/code/menumatch/src/images/chipotle.jpeg differ diff --git a/code/menumatch/src/images/customize-icon.svg b/code/menumatch/src/images/customize-icon.svg new file mode 100644 index 000000000..772e6286e --- /dev/null +++ b/code/menumatch/src/images/customize-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/menumatch/src/images/facebook-icon.svg b/code/menumatch/src/images/facebook-icon.svg new file mode 100644 index 000000000..e91a941d5 --- /dev/null +++ b/code/menumatch/src/images/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/code/menumatch/src/images/google-icon.png b/code/menumatch/src/images/google-icon.png new file mode 100644 index 000000000..55fd61d26 Binary files /dev/null and b/code/menumatch/src/images/google-icon.png differ diff --git a/code/menumatch/src/images/login-illustration.svg b/code/menumatch/src/images/login-illustration.svg new file mode 100644 index 000000000..de6827d4b --- /dev/null +++ b/code/menumatch/src/images/login-illustration.svg @@ -0,0 +1 @@ +enter \ No newline at end of file diff --git a/code/menumatch/src/images/logo.svg b/code/menumatch/src/images/logo.svg new file mode 100644 index 000000000..e4f28706f --- /dev/null +++ b/code/menumatch/src/images/logo.svg @@ -0,0 +1,225 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/code/menumatch/src/images/reliable-icon.svg b/code/menumatch/src/images/reliable-icon.svg new file mode 100644 index 000000000..b6f4a73d8 --- /dev/null +++ b/code/menumatch/src/images/reliable-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/menumatch/src/images/shield-icon.svg b/code/menumatch/src/images/shield-icon.svg new file mode 100644 index 000000000..f77e1f1a2 --- /dev/null +++ b/code/menumatch/src/images/shield-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/menumatch/src/images/signup-illustration.svg b/code/menumatch/src/images/signup-illustration.svg new file mode 100644 index 000000000..9696a4f35 --- /dev/null +++ b/code/menumatch/src/images/signup-illustration.svg @@ -0,0 +1 @@ +3333 \ No newline at end of file diff --git a/code/menumatch/src/images/support-icon.svg b/code/menumatch/src/images/support-icon.svg new file mode 100644 index 000000000..fcc07da75 --- /dev/null +++ b/code/menumatch/src/images/support-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/menumatch/src/images/svg-decorator-blob-3.svg b/code/menumatch/src/images/svg-decorator-blob-3.svg new file mode 100644 index 000000000..819afc6a2 --- /dev/null +++ b/code/menumatch/src/images/svg-decorator-blob-3.svg @@ -0,0 +1,12 @@ + + + + + + + \ No newline at end of file diff --git a/code/menumatch/src/images/twitter-icon copy.svg b/code/menumatch/src/images/twitter-icon copy.svg new file mode 100644 index 000000000..2d8082a77 --- /dev/null +++ b/code/menumatch/src/images/twitter-icon copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/code/menumatch/src/images/twitter-icon.png b/code/menumatch/src/images/twitter-icon.png new file mode 100644 index 000000000..d2bb23f51 Binary files /dev/null and b/code/menumatch/src/images/twitter-icon.png differ diff --git a/code/menumatch/src/images/twitter-icon.svg b/code/menumatch/src/images/twitter-icon.svg new file mode 100644 index 000000000..2d8082a77 --- /dev/null +++ b/code/menumatch/src/images/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/code/menumatch/src/images/youtube-icon.svg b/code/menumatch/src/images/youtube-icon.svg new file mode 100644 index 000000000..c0c58ddf4 --- /dev/null +++ b/code/menumatch/src/images/youtube-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/code/menumatch/src/index.css b/code/menumatch/src/index.css new file mode 100644 index 000000000..ec2585e8c --- /dev/null +++ b/code/menumatch/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/code/menumatch/src/index.js b/code/menumatch/src/index.js new file mode 100644 index 000000000..2ba950889 --- /dev/null +++ b/code/menumatch/src/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import { createRoot } from 'react-dom/client'; +import App from "./App"; +import Modal from "react-modal"; + +Modal.setAppElement("#root"); + +const container = document.getElementById('root'); +const root = createRoot(container); +root.render(); \ No newline at end of file diff --git a/code/menumatch/src/pages/LandingPage.js b/code/menumatch/src/pages/LandingPage.js new file mode 100644 index 000000000..9f1ed3551 --- /dev/null +++ b/code/menumatch/src/pages/LandingPage.js @@ -0,0 +1,15 @@ +import React from "react"; +import AnimationRevealPage from "../helpers/AnimationRevealPage.js"; +import Hero from "../components/hero.js"; +import Features from "../components/features.js"; +import Slider from "../components/slider.js"; +import Footer from "../components/footer.js"; + +export default () => ( + + + + +