├── src ├── components │ ├── atoms │ │ ├── menuItem │ │ │ ├── index.ts │ │ │ ├── MenuItem.stories.tsx │ │ │ ├── MenuItem.tsx │ │ │ └── MenuItem.module.scss │ │ ├── PopularDishCard │ │ │ ├── index.ts │ │ │ ├── PopularDishCard.module.scss │ │ │ ├── PopularDishCard.stories.tsx │ │ │ └── PopularDishCard.tsx │ │ ├── social-media-bar │ │ │ ├── index.ts │ │ │ ├── SocialMediaBar.module.scss │ │ │ ├── SocialMediaBar.tsx │ │ │ └── SocialMediaBar.stories.tsx │ │ ├── Banner │ │ │ ├── index.ts │ │ │ ├── Banner.stories.tsx │ │ │ ├── Banner.module.scss │ │ │ └── Banner.tsx │ │ ├── button │ │ │ ├── index.ts │ │ │ ├── Button.tsx │ │ │ ├── Button.stories.tsx │ │ │ └── Button.module.scss │ │ ├── navbar │ │ │ ├── index.ts │ │ │ ├── Navbar.module.scss │ │ │ ├── Navbar.stories.tsx │ │ │ └── Navbar.tsx │ │ ├── ItemCard │ │ │ ├── index.ts │ │ │ ├── DiscountOne.tsx │ │ │ ├── DiscountTwo.tsx │ │ │ ├── ItemCard.stories.tsx │ │ │ ├── ItemCard.tsx │ │ │ └── ItemCard.module.scss │ │ ├── infoCard │ │ │ ├── index.ts │ │ │ ├── InfoCard.module.scss │ │ │ ├── InfoCard.tsx │ │ │ └── InfoCard.stories.tsx │ │ ├── BasketButton │ │ │ ├── index.ts │ │ │ ├── BasketButton.stories.tsx │ │ │ ├── BasketButton.module.scss │ │ │ └── BasketButton.tsx │ │ ├── BigOfferCard │ │ │ ├── index.ts │ │ │ ├── BigOfferCard.module.scss │ │ │ ├── BigOfferCard.stories.tsx │ │ │ └── BigOfferCard.tsx │ │ ├── InputField │ │ │ ├── index.ts │ │ │ ├── InputField.module.scss │ │ │ ├── InputField.tsx │ │ │ └── InputField.stories.tsx │ │ ├── BranchSection │ │ │ ├── index.ts │ │ │ ├── BranchSection.stories.tsx │ │ │ ├── BranchSection.tsx │ │ │ └── BranchSection.module.scss │ │ ├── CarouselSlide │ │ │ ├── index.ts │ │ │ ├── CarouselSlide.stories.tsx │ │ │ ├── CarouselSlideMobile.tsx │ │ │ ├── CarouselSlide.tsx │ │ │ └── CarouselSlide.module.scss │ │ ├── CopyrightInfo │ │ │ ├── index.tsx │ │ │ ├── CopyrightInfo.module.scss │ │ │ ├── CopyrightInfo.stories.tsx │ │ │ └── CopyrightInfo.tsx │ │ ├── HighlightCard │ │ │ ├── index.ts │ │ │ ├── HighlightCard.stories.tsx │ │ │ ├── HighlightCard.tsx │ │ │ └── HighlightCard.module.scss │ │ ├── AchievementCard │ │ │ ├── index.ts │ │ │ ├── AchievementCard.stories.tsx │ │ │ ├── AchievementCard.module.scss │ │ │ └── AchievementCard.tsx │ │ ├── deliveryOrderCard │ │ │ ├── index.ts │ │ │ ├── DeliveryOrderCard.stories.tsx │ │ │ ├── DeliveryOrderCard.tsx │ │ │ └── DeliveryOrderCard.module.scss │ │ ├── specialMealCard │ │ │ ├── index.tsx │ │ │ ├── SpecialMealCard.stories.tsx │ │ │ ├── SpecialMealCard.tsx │ │ │ └── SpecialMealCard.module.scss │ │ ├── SpecialServiceCard │ │ │ ├── index.tsx │ │ │ ├── SpecialServiceCard.module.scss │ │ │ ├── SpecialServiceCard.tsx │ │ │ └── SpecialServiceCard.stories.tsx │ │ └── mainContainer │ │ │ ├── MainContainer.module.scss │ │ │ └── MainContainer.tsx │ ├── molecules │ │ ├── Header │ │ │ ├── index.ts │ │ │ ├── Header.stories.tsx │ │ │ ├── Header.module.scss │ │ │ └── Header.tsx │ │ ├── SearchBar │ │ │ ├── index.ts │ │ │ ├── SearchBar.module.scss │ │ │ ├── SearchBar.stories.tsx │ │ │ └── SearchBar.tsx │ │ ├── MainCarousel │ │ │ ├── index.ts │ │ │ ├── swiper.css │ │ │ ├── MainCarousel.module.scss │ │ │ ├── MainCarousel.stories.tsx │ │ │ └── MainCarousel.tsx │ │ ├── SpecialMenu │ │ │ ├── index.ts │ │ │ ├── SpecialMenu.module.scss │ │ │ ├── SpecialMenu.stories.tsx │ │ │ └── SpecialMenu.tsx │ │ ├── branchCard │ │ │ ├── index.tsx │ │ │ ├── BranchCard.stories.tsx │ │ │ ├── BranchCard.module.scss │ │ │ └── BranchCard.tsx │ │ ├── memberCard │ │ │ ├── index.tsx │ │ │ ├── MemberCard.stories.tsx │ │ │ ├── MemberCard.tsx │ │ │ └── MemberCard.module.scss │ │ ├── ourstoryCard │ │ │ ├── index.tsx │ │ │ ├── OurStoryCard.module.scss │ │ │ ├── OurStoryCard.tsx │ │ │ └── OurStoryCard.stories.tsx │ │ ├── DeliverySection │ │ │ ├── index.ts │ │ │ ├── DeliverySection.stories.tsx │ │ │ ├── DeliverySection.module.scss │ │ │ └── DeliverySection.tsx │ │ ├── RichAndHealthy │ │ │ ├── index.ts │ │ │ ├── RichAndHealthy.stories.tsx │ │ │ ├── RichAndHealthy.module.scss │ │ │ └── RichAndHealthy.tsx │ │ ├── stars │ │ │ ├── Stars.module.scss │ │ │ ├── Stars.stories.ts │ │ │ └── Stars.tsx │ │ └── TestimonialCard │ │ │ ├── TestimonialCard.stories.tsx │ │ │ ├── TestimonialCard.module.scss │ │ │ └── TestimonialCard.tsx │ ├── pages │ │ └── ItemsPage │ │ │ ├── index.ts │ │ │ ├── ItemsPage.tsx │ │ │ ├── ItemsPage.module.scss │ │ │ └── ItemsPage.stories.tsx │ └── templates │ │ ├── AuthSection │ │ ├── index.ts │ │ ├── AuthSection.stories.tsx │ │ ├── shared.scss │ │ ├── AuthSection.tsx │ │ └── AuthSection.module.scss │ │ ├── SecondaryHeaderPages │ │ ├── index.ts │ │ ├── SecondaryHeaderPages.stories.tsx │ │ ├── SecondaryHeaderPages.tsx │ │ └── SecondaryHeaderPages.module.scss │ │ ├── bigOfferSection │ │ ├── BigOfferSectio.stories.ts │ │ ├── BigOfferSection.module.scss │ │ └── BigOfferSection.tsx │ │ ├── HighlightSection │ │ ├── HighlightSection.stories.tsx │ │ ├── HighlightSection.module.scss │ │ └── HighlightSection.tsx │ │ ├── testimonialSection │ │ ├── Testimonial.stories.tsx │ │ ├── TestimonialSection.module.scss │ │ └── TestimonialSection.tsx │ │ └── popularDishesSection │ │ ├── populardishes.stories.tsx │ │ ├── PopularDishesSection.module.scss │ │ └── PopularDishesSection.tsx ├── app │ ├── favicon.ico │ ├── global.scss │ ├── login │ │ └── page.tsx │ ├── signup │ │ └── page.tsx │ ├── layout.module.scss │ ├── items │ │ ├── page.tsx │ │ └── mockDate.ts │ ├── layout.tsx │ └── page.tsx └── foundations │ └── sass │ ├── _all.scss │ ├── _overrides.scss │ ├── _mixins.scss │ ├── _reset.scss │ ├── _typography.scss │ └── _variables.scss ├── .husky └── pre-commit ├── .huskyrc ├── public ├── icons │ ├── logo.png │ ├── watch.svg │ ├── watch_icon.svg │ ├── red_star.svg │ ├── phone.svg │ ├── phone_icon.svg │ ├── arrow_right.svg │ └── cart_icon.svg ├── images │ ├── food.png │ ├── man.jpg │ ├── pizza.png │ ├── banner.png │ ├── growth.png │ ├── image1.png │ ├── discountOne.png │ ├── discountTwo.png │ ├── itemsheadbg.png │ ├── image_about_1.png │ ├── image_ourTeam_1.png │ ├── popular_image.png │ ├── image_bigOffer_1.png │ ├── image_bigOffer_2.png │ ├── image_bigOffer_3.png │ ├── image_richHealthy_1.png │ ├── image_richHealthy_2.png │ ├── image_specialManu_1.png │ ├── image_specialManu_10.png │ ├── image_specialManu_2.png │ ├── image_specialManu_3.png │ ├── image_specialManu_4.png │ ├── image_specialManu_5.png │ ├── image_specialManu_6.png │ ├── image_specialManu_7.png │ ├── image_specialManu_8.png │ ├── image_specialManu_9.png │ └── image_delivery_section.png ├── vercel.svg └── next.svg ├── next.config.mjs ├── storybook-static ├── images │ ├── man.jpg │ ├── pizza.png │ ├── banner.png │ ├── image1.png │ ├── discountOne.png │ ├── discountTwo.png │ ├── itemsheadbg.png │ ├── popular_image.png │ ├── image_richHealthy_1.png │ ├── image_richHealthy_2.png │ └── image_delivery_section.png ├── static │ └── media │ │ └── banner.63ce9c75.png ├── icons │ └── red_star.svg ├── 7364.031f95ff.iframe.bundle.js ├── 1352.b5eb1a47.iframe.bundle.js.LICENSE.txt ├── 7648.82cc114c.iframe.bundle.js ├── 3726.9170324c.iframe.bundle.js.LICENSE.txt ├── 7227.9084cb1f.iframe.bundle.js ├── project.json ├── components-atoms-HighlightCard-HighlightCard-stories.a3692757.iframe.bundle.js ├── components-atoms-ItemCard-ItemCard-stories.6e79d6da.iframe.bundle.js ├── components-molecules-TestimonialCard-TestimonialCard-stories.51ba8ad1.iframe.bundle.js ├── components-atoms-specialMealCard-SpecialMealCard-stories.52093414.iframe.bundle.js ├── components-atoms-CarouselSlide-CarouselSlide-stories.3b7d37e4.iframe.bundle.js └── components-atoms-button-Button-stories.99f57721.iframe.bundle.js ├── .eslintignore ├── .prettierignore ├── .lintstagedrc ├── .prettierrc.ts ├── .storybook ├── manager.ts ├── theme.ts ├── preview.ts └── main.ts ├── .gitignore ├── .github └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── tsconfig.json ├── .stylelintrc.json ├── LICENSE ├── .eslintrc.js ├── package.json └── README.md /src/components/atoms/menuItem/index.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/atoms/PopularDishCard/index.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/atoms/social-media-bar/index.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npm run lint:fix 2 | npx lint-staged -------------------------------------------------------------------------------- /src/components/atoms/Banner/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Banner"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/button/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Button"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Navbar"; 2 | -------------------------------------------------------------------------------- /.huskyrc: -------------------------------------------------------------------------------- 1 | { 2 | "hooks": { 3 | "pre-commit": "lint-staged" 4 | } 5 | } -------------------------------------------------------------------------------- /src/components/atoms/ItemCard/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./ItemCard"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/infoCard/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./InfoCard"; 2 | -------------------------------------------------------------------------------- /src/components/molecules/Header/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Header"; 2 | -------------------------------------------------------------------------------- /src/components/pages/ItemsPage/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./ItemsPage"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/BasketButton/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./BasketButton"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/BigOfferCard/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./BigOfferCard"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/InputField/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./InputField"; 2 | -------------------------------------------------------------------------------- /src/components/molecules/SearchBar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./SearchBar"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/BranchSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./BranchSection"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/CarouselSlide/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./CarouselSlide"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/CopyrightInfo/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from "./CopyrightInfo"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/HighlightCard/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./HighlightCard"; 2 | -------------------------------------------------------------------------------- /src/components/molecules/MainCarousel/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./MainCarousel"; 2 | -------------------------------------------------------------------------------- /src/components/molecules/SpecialMenu/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./SpecialMenu"; 2 | -------------------------------------------------------------------------------- /src/components/molecules/branchCard/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from "./BranchCard"; 2 | -------------------------------------------------------------------------------- /src/components/molecules/memberCard/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from "./MemberCard"; 2 | -------------------------------------------------------------------------------- /src/components/molecules/ourstoryCard/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from "./OurStoryCard"; 2 | -------------------------------------------------------------------------------- /src/components/templates/AuthSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./AuthSection"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/AchievementCard/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./AchievementCard"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/deliveryOrderCard/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./DeliveryOrderCard"; 2 | -------------------------------------------------------------------------------- /src/components/atoms/specialMealCard/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from "./SpecialMealCard"; 2 | -------------------------------------------------------------------------------- /src/components/molecules/DeliverySection/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./DeliverySection"; 2 | -------------------------------------------------------------------------------- /src/components/molecules/RichAndHealthy/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./RichAndHealthy"; 2 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /src/components/atoms/SpecialServiceCard/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from "./SpecialServiceCard"; 2 | -------------------------------------------------------------------------------- /public/icons/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/icons/logo.png -------------------------------------------------------------------------------- /public/images/food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/food.png -------------------------------------------------------------------------------- /public/images/man.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/man.jpg -------------------------------------------------------------------------------- /public/images/pizza.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/pizza.png -------------------------------------------------------------------------------- /src/components/templates/SecondaryHeaderPages/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./SecondaryHeaderPages"; 2 | -------------------------------------------------------------------------------- /public/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/banner.png -------------------------------------------------------------------------------- /public/images/growth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/growth.png -------------------------------------------------------------------------------- /public/images/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image1.png -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /public/images/discountOne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/discountOne.png -------------------------------------------------------------------------------- /public/images/discountTwo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/discountTwo.png -------------------------------------------------------------------------------- /public/images/itemsheadbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/itemsheadbg.png -------------------------------------------------------------------------------- /public/images/image_about_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_about_1.png -------------------------------------------------------------------------------- /public/images/image_ourTeam_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_ourTeam_1.png -------------------------------------------------------------------------------- /public/images/popular_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/popular_image.png -------------------------------------------------------------------------------- /storybook-static/images/man.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/man.jpg -------------------------------------------------------------------------------- /storybook-static/images/pizza.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/pizza.png -------------------------------------------------------------------------------- /public/images/image_bigOffer_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_bigOffer_1.png -------------------------------------------------------------------------------- /public/images/image_bigOffer_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_bigOffer_2.png -------------------------------------------------------------------------------- /public/images/image_bigOffer_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_bigOffer_3.png -------------------------------------------------------------------------------- /storybook-static/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/banner.png -------------------------------------------------------------------------------- /storybook-static/images/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/image1.png -------------------------------------------------------------------------------- /public/images/image_richHealthy_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_richHealthy_1.png -------------------------------------------------------------------------------- /public/images/image_richHealthy_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_richHealthy_2.png -------------------------------------------------------------------------------- /public/images/image_specialManu_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_1.png -------------------------------------------------------------------------------- /public/images/image_specialManu_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_10.png -------------------------------------------------------------------------------- /public/images/image_specialManu_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_2.png -------------------------------------------------------------------------------- /public/images/image_specialManu_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_3.png -------------------------------------------------------------------------------- /public/images/image_specialManu_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_4.png -------------------------------------------------------------------------------- /public/images/image_specialManu_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_5.png -------------------------------------------------------------------------------- /public/images/image_specialManu_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_6.png -------------------------------------------------------------------------------- /public/images/image_specialManu_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_7.png -------------------------------------------------------------------------------- /public/images/image_specialManu_8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_8.png -------------------------------------------------------------------------------- /public/images/image_specialManu_9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_specialManu_9.png -------------------------------------------------------------------------------- /public/images/image_delivery_section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/public/images/image_delivery_section.png -------------------------------------------------------------------------------- /storybook-static/images/discountOne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/discountOne.png -------------------------------------------------------------------------------- /storybook-static/images/discountTwo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/discountTwo.png -------------------------------------------------------------------------------- /storybook-static/images/itemsheadbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/itemsheadbg.png -------------------------------------------------------------------------------- /storybook-static/images/popular_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/popular_image.png -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .next 2 | .cache 3 | package-lock.json 4 | storybook-static 5 | public 6 | node_modules 7 | next-env.d.ts 8 | next.config.ts 9 | yarn.lock -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .next 2 | .cache 3 | package-lock.json 4 | public 5 | node_modules 6 | storybook-static 7 | next-env.d.ts 8 | next.config.ts 9 | yarn.lock -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*/**/*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix", "eslint"], 3 | "*/**/*.{json,css,md}": ["prettier --write"] 4 | } 5 | -------------------------------------------------------------------------------- /.prettierrc.ts: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: "all", 4 | singleQuote: true, 5 | printWidth: 100, 6 | tabWidth: 2, 7 | }; 8 | -------------------------------------------------------------------------------- /storybook-static/images/image_richHealthy_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/image_richHealthy_1.png -------------------------------------------------------------------------------- /storybook-static/images/image_richHealthy_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/image_richHealthy_2.png -------------------------------------------------------------------------------- /.storybook/manager.ts: -------------------------------------------------------------------------------- 1 | import { addons } from "storybook/manager-api"; 2 | import theme from "./theme"; 3 | 4 | addons.setConfig({ 5 | theme: theme, 6 | }); 7 | -------------------------------------------------------------------------------- /src/app/global.scss: -------------------------------------------------------------------------------- 1 | @import "../foundations/sass/reset"; 2 | @import "../foundations/sass/all"; 3 | 4 | body { 5 | background-color: $white-floral; 6 | } 7 | -------------------------------------------------------------------------------- /src/foundations/sass/_all.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | @import "./colors"; 3 | @import "./typography"; 4 | @import "./mixins"; 5 | @import "./overrides"; 6 | -------------------------------------------------------------------------------- /storybook-static/images/image_delivery_section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/images/image_delivery_section.png -------------------------------------------------------------------------------- /storybook-static/static/media/banner.63ce9c75.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bruno-keiko/Restaurant-app/HEAD/storybook-static/static/media/banner.63ce9c75.png -------------------------------------------------------------------------------- /src/components/molecules/stars/Stars.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .stars { 4 | display: flex; 5 | gap: px-to-rem(10); 6 | } 7 | -------------------------------------------------------------------------------- /src/app/login/page.tsx: -------------------------------------------------------------------------------- 1 | import AuthSection from "@/components/templates/AuthSection"; 2 | 3 | export default function LoginPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/signup/page.tsx: -------------------------------------------------------------------------------- 1 | import AuthSection from "@/components/templates/AuthSection"; 2 | 3 | export default function SignupPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /.storybook/theme.ts: -------------------------------------------------------------------------------- 1 | import { create } from "storybook/theming"; 2 | 3 | export default create({ 4 | base: "dark", 5 | brandTitle: "Restaurant app components", 6 | brandTarget: "_self", 7 | }); 8 | -------------------------------------------------------------------------------- /src/components/atoms/PopularDishCard/PopularDishCard.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .popular-dish { 4 | border-radius: $br-sm; 5 | height: 100%; 6 | margin: auto; 7 | width: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/app/layout.module.scss: -------------------------------------------------------------------------------- 1 | .layout { 2 | display: flex; 3 | flex-direction: column; 4 | 5 | // align-items: center; 6 | min-height: 100vh; 7 | 8 | &__content { 9 | flex: 1; 10 | margin: auto; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/app/items/page.tsx: -------------------------------------------------------------------------------- 1 | import ItemsPage from "@/components/pages/ItemsPage"; 2 | import React from "react"; 3 | import { mockData } from "./mockDate"; 4 | const Page = () => { 5 | return ; 6 | }; 7 | 8 | export default Page; 9 | -------------------------------------------------------------------------------- /src/components/molecules/SearchBar/SearchBar.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .search-bar { 4 | align-items: center; 5 | display: flex; 6 | justify-content: center; 7 | 8 | & button { 9 | margin-left: px-to-rem(10); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/atoms/navbar/Navbar.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .navbar { 4 | @include center; 5 | 6 | gap: 40px; 7 | 8 | &__items { 9 | color: $navbar-color; 10 | font-size: $fs-lg; 11 | text-decoration: none; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /public/icons/watch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/watch_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/molecules/MainCarousel/swiper.css: -------------------------------------------------------------------------------- 1 | .swiper-slide { 2 | align-items: center; 3 | background: #fff; 4 | display: flex; 5 | font-size: 18px; 6 | justify-content: center; 7 | text-align: center; 8 | 9 | /* Center slide text vertically */ 10 | width: 100%; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/atoms/mainContainer/MainContainer.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .container { 4 | display: flex; 5 | flex-direction: column; 6 | gap: 3.125rem; /* 50px converted to rem */ 7 | margin: 0 auto; 8 | max-width: 76.25rem; /* 1220px converted to rem */ 9 | } 10 | -------------------------------------------------------------------------------- /src/components/molecules/Header/Header.stories.tsx: -------------------------------------------------------------------------------- 1 | import Header from "./Header"; 2 | 3 | export const Default = {}; 4 | 5 | const headerConfig = { 6 | title: "Molecules/Header", 7 | component: Header, 8 | tags: ["autodocs"], 9 | excludeStories: /.*Data$/, 10 | }; 11 | 12 | export default headerConfig; 13 | -------------------------------------------------------------------------------- /src/components/atoms/Banner/Banner.stories.tsx: -------------------------------------------------------------------------------- 1 | import Banner from "./Banner"; 2 | 3 | export const Default = {}; 4 | 5 | const basketButtonConfig = { 6 | title: "Atoms/Banner", 7 | component: Banner, 8 | tags: ["autodocs"], 9 | excludeStories: /.*Data$/, 10 | }; 11 | 12 | export default basketButtonConfig; 13 | -------------------------------------------------------------------------------- /src/components/atoms/social-media-bar/SocialMediaBar.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .social-media-bar { 4 | @include center; 5 | 6 | &--small { 7 | gap: 20px; 8 | } 9 | 10 | &--medium { 11 | gap: 40px; 12 | } 13 | 14 | &--large { 15 | gap: 50px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/atoms/BranchSection/BranchSection.stories.tsx: -------------------------------------------------------------------------------- 1 | import BranchSection from "./BranchSection"; 2 | 3 | export const Default = {}; 4 | 5 | const headerConfig = { 6 | title: "Atoms/Branch", 7 | component: BranchSection, 8 | tags: ["autodocs"], 9 | excludeStories: /.*Data$/, 10 | }; 11 | 12 | export default headerConfig; 13 | -------------------------------------------------------------------------------- /src/components/templates/AuthSection/AuthSection.stories.tsx: -------------------------------------------------------------------------------- 1 | import AuthSection from "./AuthSection"; 2 | 3 | export const Default = {}; 4 | 5 | const headerConfig = { 6 | title: "Molecules/AuthSection", 7 | component: AuthSection, 8 | tags: ["autodocs"], 9 | excludeStories: /.*Data$/, 10 | }; 11 | 12 | export default headerConfig; 13 | -------------------------------------------------------------------------------- /src/components/molecules/stars/Stars.stories.ts: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | 3 | import Stars from "./Stars"; 4 | 5 | export default { 6 | title: "Molecules/Stars", 7 | component: Stars, 8 | tags: ["autodocs"], 9 | } satisfies Meta; 10 | 11 | export const Default = { 12 | args: { 13 | count: 3, 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from "@storybook/nextjs"; 2 | import "../src/app/global.scss"; 3 | 4 | const preview: Preview = { 5 | parameters: { 6 | controls: { 7 | matchers: { 8 | color: /(background|color)$/i, 9 | date: /Date$/i, 10 | }, 11 | }, 12 | }, 13 | }; 14 | 15 | export default preview; 16 | -------------------------------------------------------------------------------- /public/icons/red_star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/foundations/sass/_overrides.scss: -------------------------------------------------------------------------------- 1 | /* ===== SWIPERJS - MAIN CAROUSEL ===== */ 2 | 3 | .swiper { 4 | --swiper-theme-color: #{$primary-color}; 5 | --swiper-pagination-bullet-inactive-opacity: 1; 6 | --swiper-pagination-bullet-inactive-color: #{$white-floral}; 7 | --swiper-pagination-bullet-width: 14px; 8 | --swiper-pagination-bullet-height: 14px; 9 | } 10 | -------------------------------------------------------------------------------- /storybook-static/icons/red_star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/templates/bigOfferSection/BigOfferSectio.stories.ts: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import BigOfferSection from "./BigOfferSection"; 3 | 4 | const bigOfferSection: Meta = { 5 | title: "Templates/BigOfferSection", 6 | component: BigOfferSection, 7 | }; 8 | 9 | export const Default = {}; 10 | 11 | export default bigOfferSection; 12 | -------------------------------------------------------------------------------- /src/components/templates/HighlightSection/HighlightSection.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import HighlightSection from "./HighlightSection"; 3 | 4 | const highlightSection: Meta = { 5 | title: "Templates/HighlightSection", 6 | component: HighlightSection, 7 | }; 8 | 9 | export const Default = {}; 10 | 11 | export default highlightSection; 12 | -------------------------------------------------------------------------------- /src/components/atoms/BasketButton/BasketButton.stories.tsx: -------------------------------------------------------------------------------- 1 | import BasketButton from "./BasketButton"; 2 | 3 | export const Default = { 4 | args: { 5 | count: 1, 6 | }, 7 | }; 8 | 9 | const basketButtonConfig = { 10 | title: "Atoms/BasketButton", 11 | component: BasketButton, 12 | tags: ["autodocs"], 13 | excludeStories: /.*Data$/, 14 | }; 15 | 16 | export default basketButtonConfig; 17 | -------------------------------------------------------------------------------- /src/components/atoms/mainContainer/MainContainer.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./MainContainer.module.scss"; 3 | 4 | interface MainContainerProps { 5 | children: React.ReactNode; 6 | } 7 | 8 | const MainContainer: React.FC = ({ children }) => { 9 | return
{children}
; 10 | }; 11 | 12 | export default MainContainer; 13 | -------------------------------------------------------------------------------- /src/components/templates/testimonialSection/Testimonial.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import TestimonialSection from "./TestimonialSection"; 3 | 4 | const testimonialSection: Meta = { 5 | title: "Templates/TestimonialSection", 6 | component: TestimonialSection, 7 | }; 8 | 9 | export const Default = {}; 10 | 11 | export default testimonialSection; 12 | -------------------------------------------------------------------------------- /src/components/templates/popularDishesSection/populardishes.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import PopularDishesSection from "./PopularDishesSection"; 3 | 4 | const popularDishesSection: Meta = { 5 | title: "Templates/PopularDishesSection", 6 | component: PopularDishesSection, 7 | }; 8 | 9 | export const Default = {}; 10 | 11 | export default popularDishesSection; 12 | -------------------------------------------------------------------------------- /src/components/atoms/CopyrightInfo/CopyrightInfo.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .copyright-info { 4 | @include center; 5 | 6 | background-color: $secondary-color; 7 | color: $white-floral; 8 | font-size: $fs-xs; 9 | font-weight: $fw-semibold; 10 | height: 60px; 11 | 12 | @include laptop { 13 | font-size: $fs-lg; 14 | font-weight: $fw-bold; 15 | height: 100px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/atoms/BigOfferCard/BigOfferCard.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .big-offer-card { 4 | width: 100%; 5 | height: 100%; 6 | margin: 0; 7 | 8 | &__link { 9 | display: block; 10 | height: 100%; 11 | width: 100%; 12 | 13 | &__img { 14 | height: 100%; 15 | width: 100%; 16 | object-fit: cover; 17 | border-radius: 8px; // Cambio aquí 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/atoms/infoCard/InfoCard.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .info-card { 5 | align-items: center; 6 | display: flex; 7 | font-size: $fs-xs; 8 | gap: 15px; 9 | 10 | &__icon { 11 | @include center; 12 | 13 | &__box { 14 | @include center; 15 | } 16 | } 17 | 18 | &__title { 19 | color: $info-card-color; 20 | font-size: $fs-xs; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/atoms/CopyrightInfo/CopyrightInfo.stories.tsx: -------------------------------------------------------------------------------- 1 | import CopyrightInfo from "./CopyrightInfo"; 2 | 3 | export const Default = { 4 | args: { 5 | text: "\u00A9 2024 My Website. All rights reserved", 6 | }, 7 | }; 8 | 9 | const copyrightInfoConfig = { 10 | title: "Atoms/CopyrightInfo", 11 | component: CopyrightInfo, 12 | tags: ["autodocs"], 13 | excludeStories: /.*Data$/, 14 | }; 15 | 16 | export default copyrightInfoConfig; 17 | -------------------------------------------------------------------------------- /src/components/atoms/CopyrightInfo/CopyrightInfo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./CopyrightInfo.module.scss"; 3 | 4 | interface CopyrightInfoProps { 5 | text: string; 6 | } 7 | 8 | const CopyrightInfo: React.FC = ({ text }) => { 9 | return ( 10 |
11 | {text} 12 |
13 | ); 14 | }; 15 | 16 | export default CopyrightInfo; 17 | -------------------------------------------------------------------------------- /src/components/molecules/DeliverySection/DeliverySection.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import DeliverySection from "./DeliverySection"; 3 | 4 | export const Default = () => { 5 | return ; 6 | }; 7 | 8 | const deliverySection: Meta = { 9 | title: "Molecules/DeliverySection", 10 | component: DeliverySection, 11 | tags: ["autodocs"], 12 | }; 13 | 14 | export default deliverySection; 15 | -------------------------------------------------------------------------------- /src/components/atoms/deliveryOrderCard/DeliveryOrderCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import DeliveryOrderCard from "./DeliveryOrderCard"; 2 | 3 | export const Default = { 4 | args: { 5 | title: "Delivery Order", 6 | tel: "+880 1630 225 015", 7 | }, 8 | }; 9 | 10 | const deliveryOrderCard = { 11 | title: "Atoms/DeliveryOrderCard", 12 | component: DeliveryOrderCard, 13 | tags: ["autodocs"], 14 | excludeStories: /.*Data$/, 15 | }; 16 | 17 | export default deliveryOrderCard; 18 | -------------------------------------------------------------------------------- /.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from "@storybook/nextjs"; 2 | 3 | const config: StorybookConfig = { 4 | stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], 5 | addons: [ 6 | "@storybook/addon-onboarding", 7 | "@storybook/addon-links", 8 | "@chromatic-com/storybook", 9 | "@storybook/addon-docs", 10 | ], 11 | framework: { 12 | name: "@storybook/nextjs", 13 | options: {}, 14 | }, 15 | staticDirs: ["../public"], 16 | }; 17 | export default config; 18 | -------------------------------------------------------------------------------- /src/components/atoms/PopularDishCard/PopularDishCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import PopularDishCard from "./PopularDishCard"; 3 | 4 | const PopularDishCardConfig: Meta = { 5 | title: "atoms/PopularDishCard", 6 | component: PopularDishCard, 7 | tags: ["autodocs"], 8 | excludeStories: /.*Data$/, 9 | }; 10 | 11 | export const Default = { 12 | args: { 13 | link: "#", 14 | image: "/images/popular_image.png", 15 | }, 16 | }; 17 | 18 | export default PopularDishCardConfig; 19 | -------------------------------------------------------------------------------- /src/components/atoms/BigOfferCard/BigOfferCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import BigOfferCard from "./BigOfferCard"; 2 | 3 | export const Default = { 4 | args: { 5 | image: 6 | "https://images.pexels.com/photos/1907228/pexels-photo-1907228.jpeg?auto=compress&cs=tinysrgb&w=600", 7 | link: "#", 8 | }, 9 | }; 10 | 11 | const bigOfferCardConfig = { 12 | title: "Atoms/BigOfferCard", 13 | component: BigOfferCard, 14 | tags: ["outodocs"], 15 | excludeStories: /.*Data$/, 16 | }; 17 | 18 | export default bigOfferCardConfig; 19 | -------------------------------------------------------------------------------- /storybook-static/7364.031f95ff.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkrestaurant_app=self.webpackChunkrestaurant_app||[]).push([[7364],{"./node_modules/storybook/core/components/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{createCopyToClipboardFunction:()=>_storybook_core_components__WEBPACK_IMPORTED_MODULE_0__.zH});var _storybook_core_components__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/core/dist/components/index.js")}}]); -------------------------------------------------------------------------------- /src/components/atoms/ItemCard/DiscountOne.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Image from "next/image"; 3 | import styles from "./ItemCard.module.scss"; 4 | 5 | const DiscountOne = ({ discountOne }: { discountOne: string }) => { 6 | return ( 7 |
11 | discount offer 12 |
13 | ); 14 | }; 15 | 16 | export default DiscountOne; 17 | -------------------------------------------------------------------------------- /src/components/templates/popularDishesSection/PopularDishesSection.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .popular-dishes-section { 4 | &__subheading { 5 | color: $popular-dishes-section-subheading-color; 6 | font-size: $fs-sm; 7 | font-weight: $fw-bold; 8 | text-align: center; 9 | } 10 | 11 | &__heading { 12 | color: $popular-dishes-section-color; 13 | font-size: $fs-xl; 14 | line-height: px-to-rem(41); 15 | margin-bottom: px-to-rem(20); 16 | text-align: center; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/atoms/ItemCard/DiscountTwo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Image from "next/image"; 3 | import styles from "./ItemCard.module.scss"; 4 | const DiscountTwo = ({ discountTwo }: { discountTwo: string }) => { 5 | return ( 6 |
10 | discount offer 11 |
12 | ); 13 | }; 14 | 15 | export default DiscountTwo; 16 | -------------------------------------------------------------------------------- /public/icons/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/molecules/RichAndHealthy/RichAndHealthy.stories.tsx: -------------------------------------------------------------------------------- 1 | import RichAndHealthy from "./RichAndHealthy"; 2 | import { FC } from "react"; 3 | 4 | export const Default = {}; 5 | 6 | const richAndHealthyConfig = { 7 | title: "Molecules/RichAndHealthy", 8 | component: RichAndHealthy, 9 | tags: ["autodocs"], 10 | excludeStories: /.*Data$/, 11 | decorators: [ 12 | (Story: FC) => ( 13 |
14 | 15 |
16 | ), 17 | ], 18 | }; 19 | 20 | export default richAndHealthyConfig; 21 | -------------------------------------------------------------------------------- /public/icons/phone_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/atoms/BasketButton/BasketButton.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .basket-button { 4 | @include center; 5 | 6 | background-color: $basket-button-bg; 7 | border: none; 8 | border-radius: $br-full; 9 | flex-direction: column; 10 | height: px-to-rem(61px); 11 | width: px-to-rem(61); 12 | 13 | &__count { 14 | color: $basket-button-text-color; 15 | font-size: $fs-lg; 16 | font-weight: $fw-extrabold; 17 | } 18 | 19 | &__icon { 20 | position: relative; 21 | transform: translate(0, -11%); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/templates/HighlightSection/HighlightSection.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .section { 4 | &__heading { 5 | color: $primary-color; 6 | font-size: $fs-lg; 7 | font-weight: $fw-bold; 8 | line-height: px-to-rem(25); 9 | margin-bottom: px-to-rem(33); 10 | text-align: center; 11 | } 12 | 13 | &__content { 14 | display: flex; 15 | gap: 1rem; 16 | 17 | @include tablet { 18 | align-items: center; 19 | display: flex; 20 | flex-direction: column; 21 | margin: auto; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/atoms/AchievementCard/AchievementCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import AchievementCard from "./AchievementCard"; 2 | 3 | export const Default = { 4 | args: { 5 | title: "Success Story", 6 | image: "/images/growth.png", 7 | description: 8 | "Certain circumstances and owning to the claims of duty obligation sof business it will frequently.", 9 | }, 10 | }; 11 | const achievementCardConfig = { 12 | title: "Atoms/AchievementCard", 13 | component: AchievementCard, 14 | tags: ["autodocs"], 15 | excludeStories: /.*Data$/, 16 | }; 17 | export default achievementCardConfig; 18 | -------------------------------------------------------------------------------- /src/components/atoms/SpecialServiceCard/SpecialServiceCard.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .service-card { 5 | @include center; 6 | 7 | flex-direction: column; 8 | font-family: $playfair; 9 | gap: 15px; 10 | 11 | &__title { 12 | color: $special-service-heading-color; 13 | font-size: $fs-xxl; 14 | font-weight: $fw-bold; 15 | 16 | @include center; 17 | @include margin-bottom($spacing); 18 | } 19 | 20 | &__description { 21 | color: $special-service-description-color; 22 | font-size: $fs-md; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/atoms/navbar/Navbar.stories.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "./Navbar"; 2 | 3 | export const Default = { 4 | args: { 5 | navItems: [ 6 | { title: "Home", href: "/" }, 7 | { title: "About", href: "/" }, 8 | { title: "Items", href: "/" }, 9 | { title: "Pages", href: "/" }, 10 | { title: "Contact", href: "/" }, 11 | ], 12 | size: "medium", 13 | }, 14 | }; 15 | 16 | const navbarConfig = { 17 | title: "Atoms/Navbar", 18 | component: Navbar, 19 | tags: ["autodocs"], 20 | excludeStories: /.*Data$/, 21 | }; 22 | 23 | export default navbarConfig; 24 | -------------------------------------------------------------------------------- /src/components/atoms/ItemCard/ItemCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import ItemCard from "./ItemCard"; 2 | 3 | export const Default = { 4 | args: { 5 | id: 1, 6 | image: "/images/pizza.png", 7 | dishname: "Chicken Supreme Pizza", 8 | price: "150", 9 | description: 10 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 11 | discountOne: "", 12 | discountTwo: "", 13 | }, 14 | }; 15 | 16 | const itemCard = { 17 | title: "Atoms/ItemCard", 18 | component: ItemCard, 19 | tags: ["autodocs"], 20 | excludeStories: /.*Data$/, 21 | }; 22 | 23 | export default itemCard; 24 | -------------------------------------------------------------------------------- /.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 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | /storybook-static 16 | 17 | # production 18 | /build 19 | 20 | # misc 21 | .DS_Store 22 | .idea 23 | *.pem 24 | 25 | # debug 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | 30 | # local env files 31 | .env*.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | next-env.d.ts 39 | 40 | *storybook.log -------------------------------------------------------------------------------- /src/components/atoms/Banner/Banner.module.scss: -------------------------------------------------------------------------------- 1 | %banner { 2 | height: 12rem; 3 | overflow: hidden; 4 | position: relative; 5 | width: 100%; 6 | 7 | img { 8 | height: 100%; 9 | object-fit: cover; 10 | width: 100%; 11 | } 12 | 13 | .overlay { 14 | inset: 0; 15 | position: absolute; 16 | } 17 | 18 | h1 { 19 | color: #fff; 20 | font-size: 2.5rem; 21 | font-weight: bold; 22 | left: 50%; 23 | position: absolute; 24 | top: 50%; 25 | transform: translate(-50%, -50%); 26 | z-index: 1; 27 | } 28 | } 29 | 30 | .banner { 31 | @extend %banner; 32 | } 33 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/atoms/button/Button.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./Button.module.scss"; 3 | 4 | interface ButtonProps extends React.ButtonHTMLAttributes { 5 | children: React.ReactNode; 6 | size: "small" | "medium" | "large"; 7 | } 8 | 9 | const Button: React.FC = ({ 10 | children, 11 | size = "medium", 12 | ...props 13 | }) => { 14 | return ( 15 | 21 | ); 22 | }; 23 | 24 | export default Button; 25 | -------------------------------------------------------------------------------- /src/components/atoms/HighlightCard/HighlightCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import HighlightCard from './HighlightCard'; 2 | 3 | export const Default = { 4 | args: { 5 | image: 'icons/highlight-icon.svg', 6 | title: '100 % Fresh Foods', 7 | description: 8 | 'Beguiled and demoralized by all get charms pleasure the moments ever so blinded by desire.', 9 | link: '/', 10 | badge: '2', 11 | }, 12 | }; 13 | 14 | const highlightCardConfig = { 15 | title: 'Atoms/HighlightCard', 16 | component: HighlightCard, 17 | tags: ['autodocs'], 18 | excludeStories: /.*Data$/, 19 | }; 20 | 21 | export default highlightCardConfig; 22 | -------------------------------------------------------------------------------- /src/components/atoms/InputField/InputField.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .input-field { 4 | @include body-font; 5 | 6 | border: none; 7 | border: px-to-rem(6) solid $primary-color; 8 | border-radius: px-to-rem(18); 9 | color: $secondary-color; 10 | height: px-to-rem(40); 11 | line-height: 21.09px; 12 | outline: none; 13 | padding: px-to-rem(5) px-to-rem(15); 14 | 15 | @include laptop { 16 | border: px-to-rem(10) solid $primary-color; 17 | border-radius: px-to-rem(30); 18 | height: px-to-rem(60); 19 | width: px-to-rem(400); 20 | } 21 | 22 | // as per figma design 23 | } 24 | -------------------------------------------------------------------------------- /src/components/atoms/infoCard/InfoCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./InfoCard.module.scss"; 3 | 4 | interface InfoCardProps { 5 | icon: React.ReactNode; 6 | title: string | React.ReactNode; 7 | } 8 | 9 | const InfoCard: React.FC = ({ icon, title }) => { 10 | return ( 11 |
12 |
13 |
{icon}
14 |
15 |
{title}
16 |
17 | ); 18 | }; 19 | 20 | export default InfoCard; 21 | -------------------------------------------------------------------------------- /storybook-static/1352.b5eb1a47.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * isobject 3 | * 4 | * Copyright (c) 2014-2017, Jon Schlinkert. 5 | * Released under the MIT License. 6 | */ 7 | 8 | /** 9 | * @license 10 | * Lodash (Custom Build) 11 | * Build: `lodash modularize exports="es" -o ./` 12 | * Copyright OpenJS Foundation and other contributors 13 | * Released under MIT license 14 | * Based on Underscore.js 1.8.3 15 | * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors 16 | */ 17 | -------------------------------------------------------------------------------- /src/components/atoms/Banner/Banner.tsx: -------------------------------------------------------------------------------- 1 | import Image, { StaticImageData } from "next/image"; 2 | import React from "react"; 3 | import styles from "./Banner.module.scss"; 4 | 5 | type Props = { 6 | image: StaticImageData; 7 | text: string; 8 | }; 9 | 10 | const Banner = ({ image, text }: Props) => { 11 | return ( 12 |
13 | Banner image 20 |
21 |

{text}

22 |
23 | ); 24 | }; 25 | 26 | export default Banner; 27 | -------------------------------------------------------------------------------- /public/icons/arrow_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/atoms/menuItem/MenuItem.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from "react"; 2 | import MenuItem from "./MenuItem"; 3 | 4 | export const Default = { 5 | args: { 6 | name: "Gazpacho Garlic", 7 | ingredients: 8 | "Marinated seabass with sour sauce, dill & coriander on bread.", 9 | price: 55, 10 | }, 11 | }; 12 | 13 | const menuItemConfig = { 14 | title: "Atoms/MenuItem", 15 | component: MenuItem, 16 | tags: ["autodocs"], 17 | excludeStories: /.*Data$/, 18 | decorators: [ 19 | (Story: FC) => ( 20 |
21 | 22 |
23 | ), 24 | ], 25 | }; 26 | 27 | export default menuItemConfig; 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 11 | 12 | **Describe the solution you'd like** 13 | A clear and concise description of what you want to happen. 14 | 15 | **Describe alternatives you've considered** 16 | A clear and concise description of any alternative solutions or features you've considered. 17 | 18 | **Additional context** 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /src/components/atoms/SpecialServiceCard/SpecialServiceCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./SpecialServiceCard.module.scss"; 3 | 4 | export interface SpecialServiceCardProps { 5 | title: string | React.ReactNode; 6 | description: string | React.ReactNode; 7 | } 8 | 9 | const SpecialServiceCard: React.FC = ({ 10 | title, 11 | description, 12 | }) => { 13 | return ( 14 |
15 |
{title}
16 |
{description}
17 |
18 | ); 19 | }; 20 | 21 | export default SpecialServiceCard; 22 | -------------------------------------------------------------------------------- /src/components/molecules/TestimonialCard/TestimonialCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import TestimonialCard from "./TestimonialCard"; 3 | 4 | export const Default = { 5 | args: { 6 | name: "Robert Food", 7 | description: 8 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. ", 9 | rating: 4, 10 | image: "/images/man.jpg", 11 | isActive: true, 12 | }, 13 | }; 14 | 15 | const TestimonialCardConfig: Meta = { 16 | title: "Molecules/TestimonialCard", 17 | component: TestimonialCard, 18 | tags: ["autodocs"], 19 | }; 20 | 21 | export default TestimonialCardConfig; 22 | -------------------------------------------------------------------------------- /src/components/atoms/BasketButton/BasketButton.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./BasketButton.module.scss"; 3 | import Image from "next/image"; 4 | 5 | interface BasketButtonProps { 6 | count: number; 7 | } 8 | 9 | const BasketButton: React.FC = ({ count }) => { 10 | return ( 11 | 21 | ); 22 | }; 23 | 24 | export default BasketButton; 25 | -------------------------------------------------------------------------------- /src/components/atoms/navbar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from "react"; 2 | import styles from "./Navbar.module.scss"; 3 | import Link from "next/link"; 4 | 5 | type NavBar = { 6 | title: string; 7 | href: string; 8 | }; 9 | type NavBarProps = { 10 | navItems: NavBar[]; 11 | }; 12 | 13 | const NavBar: FC = ({ navItems }) => { 14 | return ( 15 | 26 | ); 27 | }; 28 | 29 | export default NavBar; 30 | -------------------------------------------------------------------------------- /src/components/molecules/MainCarousel/MainCarousel.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .swiper { 4 | box-sizing: border-box; 5 | display: none; 6 | 7 | // height: fit-content; 8 | // min-height: px-to-rem(345); 9 | // padding: px-to-rem(10); 10 | text-align: center; 11 | 12 | // width: px-to-rem(1166); 13 | 14 | & > div:last-of-type { 15 | margin-left: auto; 16 | right: 0; 17 | width: fit-content; 18 | 19 | & > span { 20 | border: 2px solid $primary-color; 21 | 22 | &.swiper-pagination-bullet-active { 23 | background: $primary-color; 24 | } 25 | } 26 | } 27 | 28 | @include laptop { 29 | display: block; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | }, 23 | "target": "ES2017" 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /src/components/atoms/PopularDishCard/PopularDishCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from "react"; 2 | import styles from "./PopularDishCard.module.scss"; 3 | import Link from "next/link"; 4 | import Image from "next/image"; 5 | 6 | type PopularDishCardProps = { 7 | image: string; 8 | link: string; 9 | }; 10 | 11 | const PopularDishCard: FC = ({ image, link }) => { 12 | return ( 13 | 14 | Popular dish 22 | 23 | ); 24 | }; 25 | 26 | export default PopularDishCard; 27 | -------------------------------------------------------------------------------- /src/components/atoms/button/Button.stories.tsx: -------------------------------------------------------------------------------- 1 | import Button from "./Button"; 2 | 3 | export const Default = { 4 | args: { 5 | children: "Button", 6 | size: "medium", 7 | }, 8 | }; 9 | 10 | export const Small = { 11 | args: { 12 | children: "Button", 13 | size: "small", 14 | }, 15 | }; 16 | 17 | export const Medium = { 18 | args: { 19 | children: "Button", 20 | size: "medium", 21 | }, 22 | }; 23 | 24 | export const Large = { 25 | args: { 26 | children: "Go", 27 | size: "large", 28 | }, 29 | }; 30 | 31 | const buttonConfig = { 32 | title: "Atoms/Button", 33 | component: Button, 34 | tags: ["autodocs"], 35 | excludeStories: /.*Data$/, 36 | }; 37 | 38 | export default buttonConfig; 39 | -------------------------------------------------------------------------------- /public/icons/cart_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/molecules/SearchBar/SearchBar.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import React, { SetStateAction } from "react"; 3 | import SearchBar from "./SearchBar"; 4 | 5 | const searchBar: Meta = { 6 | title: "Molecules/SearchBar", 7 | component: SearchBar, 8 | tags: ["autodocs"], 9 | }; 10 | 11 | type SearchBarProps = React.ComponentProps; 12 | 13 | const Template = (args: SearchBarProps) => { 14 | const handleSearch = (searchTerm: SetStateAction): void => { 15 | console.log(searchTerm); 16 | }; 17 | return ; 18 | }; 19 | 20 | export const Default = Template.bind({}); 21 | 22 | export default searchBar; 23 | -------------------------------------------------------------------------------- /src/components/atoms/CarouselSlide/CarouselSlide.stories.tsx: -------------------------------------------------------------------------------- 1 | import CarouselSlide from "./CarouselSlide"; 2 | 3 | export const Default = { 4 | args: { 5 | id: 1, 6 | image: "/images/image1.png", 7 | dishname: "Burger", 8 | price: "10.89", 9 | link: "/", 10 | socialMedia: [ 11 | { icon: "icons/instagram.svg", href: "/" }, 12 | { icon: "icons/facebook.svg", href: "/" }, 13 | { icon: "icons/twitter.svg", href: "/" }, 14 | { icon: "icons/linkedin.svg", href: "/" }, 15 | ], 16 | }, 17 | }; 18 | 19 | const carouselSlide = { 20 | title: "Atoms/CarouselSlide", 21 | component: CarouselSlide, 22 | tags: ["autodocs"], 23 | excludeStories: /.*Data$/, 24 | }; 25 | 26 | export default carouselSlide; 27 | -------------------------------------------------------------------------------- /src/components/templates/bigOfferSection/BigOfferSection.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .big-offer-section { 4 | width: 100%; // Cambio aquí 5 | padding: 2rem 0; 6 | margin: 0; 7 | 8 | &__heading { 9 | color: $big-offer-section-color; 10 | font-size: $fs-xxl; 11 | font-style: italic; 12 | font-weight: $fw-bold; 13 | line-height: 1.2; 14 | margin-bottom: 0.875rem; 15 | text-align: center; 16 | } 17 | 18 | &__subheading { 19 | color: $big-offer-section-subheading-color; 20 | font-size: $fs-sm; 21 | font-weight: $fw-bold; 22 | line-height: 1.438rem; // 23px 23 | margin: 0 auto 1.5rem; 24 | max-width: 28.563rem; // 457px 25 | text-align: center; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/atoms/InputField/InputField.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./InputField.module.scss"; 3 | 4 | interface InputFieldProps { 5 | value: string; 6 | onChange: React.ChangeEventHandler | undefined; 7 | placeholder?: string; 8 | disabled?: boolean; 9 | } 10 | 11 | const InputField: React.FC = ({ 12 | value, 13 | onChange, 14 | placeholder, 15 | disabled, 16 | }) => { 17 | return ( 18 |
19 | 27 |
28 | ); 29 | }; 30 | 31 | export default InputField; 32 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard-scss"], 3 | "plugins": ["stylelint-selector-bem-pattern", "stylelint-order"], 4 | "rules": { 5 | "order/properties-alphabetical-order": true, 6 | "declaration-property-unit-allowed-list": { 7 | "/^border/": ["px"] 8 | }, 9 | "unit-allowed-list": ["%", "deg", "px", "rem", "ms", "vh"], 10 | "color-named": "never", 11 | "function-disallowed-list": ["rgb", "hwb", "lch"], 12 | "plugin/selector-bem-pattern": { 13 | "componentName": "[A-Z]+", 14 | "componentSelectors": { 15 | "initial": "^\\.{componentName}(?:-[a-z]+)?$", 16 | "combined": "^\\.combined-{componentName}-[a-z]+$" 17 | }, 18 | "utilitySelectors": "^\\.util-[a-z]+$" 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/molecules/SpecialMenu/SpecialMenu.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .special-menu { 5 | &__header { 6 | color: $special-menu-header-color; 7 | font-size: $fs-lg; 8 | font-weight: $fw-semibold; 9 | margin-bottom: 20px; 10 | text-align: center; 11 | text-transform: uppercase; 12 | 13 | @include laptop { 14 | @include margin-bottom("xxl"); // Keep only this one, remove the duplicate 15 | 16 | font-size: $fs-xxl; 17 | font-weight: $fw-bold; 18 | } 19 | } 20 | 21 | &__meals-container { 22 | @include center; // Move this to the top 23 | 24 | flex-wrap: wrap; 25 | gap: 16px; 26 | 27 | @include laptop { 28 | gap: map.get($spacing, md); 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/atoms/InputField/InputField.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import React, { useState } from "react"; 3 | import InputField from "./InputField"; 4 | 5 | const inputField: Meta = { 6 | title: "Atoms/InputField", 7 | component: InputField, 8 | tags: ["autodocs"], 9 | }; 10 | 11 | type InputFieldProps = React.ComponentProps; 12 | 13 | const Template = (args: InputFieldProps) => { 14 | const [value, setValue] = useState(args.value); 15 | return ( 16 | setValue(e.target.value)} 21 | /> 22 | ); 23 | }; 24 | 25 | export const Default = Template.bind({}); 26 | 27 | export default inputField; 28 | -------------------------------------------------------------------------------- /src/components/atoms/BigOfferCard/BigOfferCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./BigOfferCard.module.scss"; 3 | import Link from "next/link"; 4 | import Image from "next/image"; 5 | 6 | interface BigOfferCardProps { 7 | image: string; 8 | link: string; 9 | } 10 | 11 | const BigOfferCard: React.FC = ({ image, link }) => { 12 | return ( 13 |
14 | 15 | Big offer 22 | 23 |
24 | ); 25 | }; 26 | 27 | export default BigOfferCard; 28 | -------------------------------------------------------------------------------- /src/components/atoms/specialMealCard/SpecialMealCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from "react"; 2 | import SpecialMealCard from "./SpecialMealCard"; 3 | 4 | export const Default = { 5 | args: { 6 | image: 7 | "https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=600", 8 | 9 | title: "Hot Dogs", 10 | }, 11 | }; 12 | 13 | const specialMealCardConfig = { 14 | title: "Atoms/SpecialMealCard", 15 | component: SpecialMealCard, 16 | tags: ["autodocs"], 17 | excludeStories: /.*Data$/, 18 | decorators: [ 19 | (Story: FC) => ( 20 |
25 | 26 |
27 | ), 28 | ], 29 | }; 30 | 31 | export default specialMealCardConfig; 32 | -------------------------------------------------------------------------------- /src/components/atoms/menuItem/MenuItem.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./MenuItem.module.scss"; 3 | 4 | interface MenuItemProps { 5 | name: string; 6 | ingredients: string; 7 | price: number; 8 | } 9 | 10 | const MenuItem: React.FC = ({ name, ingredients, price }) => { 11 | return ( 12 |
13 |
14 |

{name}

15 |

16 | {ingredients} 17 |

18 |
19 |
20 | {`$${price}`} 21 |
22 |
23 | ); 24 | }; 25 | 26 | export default MenuItem; 27 | -------------------------------------------------------------------------------- /src/components/atoms/specialMealCard/SpecialMealCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Image from "next/image"; 3 | import styles from "./SpecialMealCard.module.scss"; 4 | 5 | interface SpecialMealCardProps { 6 | image: string; 7 | title: string; 8 | } 9 | 10 | const SpecialMealCard: React.FC = ({ image, title }) => { 11 | return ( 12 |
13 |
14 | {title} 21 |
{title}
22 |
23 |
24 | ); 25 | }; 26 | 27 | export default SpecialMealCard; 28 | -------------------------------------------------------------------------------- /src/components/molecules/SpecialMenu/SpecialMenu.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from "react"; 2 | import SpecialMenu from "./SpecialMenu"; 3 | 4 | const meals = Array.from({ length: 10 }, (a, index) => ({ 5 | id: index, 6 | image: 7 | "https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=600", 8 | title: "Hot Dogs", 9 | })); 10 | 11 | export const Default = { 12 | args: { meals }, 13 | }; 14 | 15 | const specialMenuConfig = { 16 | title: "molecules/SpecialMenu", 17 | component: SpecialMenu, 18 | tags: ["autodocs"], 19 | excludeStories: /.*Data$/, 20 | decorators: [ 21 | (Story: FC) => { 22 | return ( 23 |
24 | 25 |
26 | ); 27 | }, 28 | ], 29 | }; 30 | 31 | export default specialMenuConfig; 32 | -------------------------------------------------------------------------------- /src/components/atoms/button/Button.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .button { 4 | background-color: $btn-primary-bg; 5 | border: none; 6 | border-radius: $br-md; 7 | color: $btn-primary-color; 8 | cursor: pointer; 9 | font-size: $fs-xl; 10 | 11 | @include center; 12 | 13 | &--small { 14 | border-radius: $br-sm; 15 | font-size: $fs-sm; 16 | font-weight: $fw-bold; 17 | height: 35px; 18 | min-width: 90px; 19 | } 20 | 21 | &--medium { 22 | border-radius: $br-md; 23 | height: 60px; 24 | min-width: 300px; 25 | } 26 | 27 | &--large { 28 | border-radius: $br-md; 29 | font-size: $fs-xxl; 30 | height: 60px; 31 | min-width: 80px; 32 | 33 | @include laptop { 34 | border-radius: $br-md; 35 | height: 80px; 36 | min-width: 120px; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/molecules/branchCard/BranchCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import BranchCard from "./BranchCard"; 3 | 4 | export const Default = { 5 | args: { 6 | name: "Robert Food", 7 | address: "1986 Hilltop DriveBorger, TX 79007", 8 | time: "7.30 AM - 9.30 PM", 9 | tel: "+880 1630 225 015", 10 | location: "#", 11 | }, 12 | }; 13 | 14 | const branchCard: Meta = { 15 | title: "Molecules/BranchCard", 16 | component: BranchCard, 17 | tags: ["autodocs"], 18 | excludeStories: /.*Data$/, 19 | decorators: [ 20 | (Story) => { 21 | return ( 22 |
25 | 26 |
27 | ); 28 | }, 29 | ], 30 | }; 31 | 32 | export default branchCard; 33 | -------------------------------------------------------------------------------- /src/components/molecules/ourstoryCard/OurStoryCard.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .ourstory-card { 4 | border-radius: $br-sm; 5 | display: flex; 6 | gap: px-to-rem(20); 7 | overflow: hidden; 8 | padding: px-to-rem(20); 9 | transition: all 300ms ease; 10 | 11 | &--primary { 12 | border: 2px solid $ourstory-card-border-color; 13 | } 14 | 15 | &--secondary { 16 | flex-direction: row-reverse; 17 | } 18 | 19 | &__image { 20 | border-radius: $br-sm; 21 | object-fit: cover; 22 | overflow: hidden; 23 | position: relative; 24 | } 25 | 26 | &__image, 27 | &__info { 28 | flex: 1; 29 | } 30 | 31 | &__info { 32 | color: $ourstory-card-color; 33 | gap: px-to-rem(10); 34 | 35 | &__story { 36 | font-size: $fs-md; 37 | margin: $spacing-sm; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/components/templates/SecondaryHeaderPages/SecondaryHeaderPages.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import SecondaryHeaderPages from "./SecondaryHeaderPages"; 3 | 4 | const secondaryHeaderPages: Meta = { 5 | title: "Templates/SecondaryHeaderPages", 6 | component: SecondaryHeaderPages, 7 | tags: ["autodocs"], 8 | decorators: [ 9 | (Story) => { 10 | return ( 11 |
12 | 13 |
14 | ); 15 | }, 16 | ], 17 | }; 18 | 19 | export const Default = { 20 | args: { 21 | title: "ITEMS", 22 | backgroundImg: "/images/itemsheadbg.png", 23 | textContent: 24 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius mod tempor incididunt ut labore et dolore magna.", 25 | }, 26 | }; 27 | 28 | export default secondaryHeaderPages; 29 | -------------------------------------------------------------------------------- /src/components/molecules/SpecialMenu/SpecialMenu.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./SpecialMenu.module.scss"; 3 | import SpecialMealCard from "@/components/atoms/specialMealCard"; 4 | 5 | interface SpecialMenuProps { 6 | meals: { id: number; image: string; title: string }[]; 7 | } 8 | 9 | const SpecialMenu: React.FC = ({ meals }) => { 10 | return ( 11 |
12 |

13 | SPECIALS MANU FOR ALL TIME 14 |

15 |
16 | {meals.map((meal) => ( 17 | 22 | ))} 23 |
24 |
25 | ); 26 | }; 27 | 28 | export default SpecialMenu; 29 | -------------------------------------------------------------------------------- /src/components/templates/SecondaryHeaderPages/SecondaryHeaderPages.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./SecondaryHeaderPages.module.scss"; 3 | 4 | type SecondaryHeaderProps = { 5 | title: string; 6 | textContent: string; 7 | backgroundImg: string; 8 | children: React.ReactNode; 9 | }; 10 | 11 | const SecondaryHeaderPages: React.FC = ({ 12 | title, 13 | textContent, 14 | backgroundImg, 15 | children, 16 | }) => { 17 | return ( 18 | <> 19 |
23 |
24 |

{title}

25 |

{textContent}

26 |
27 |
28 | {children} 29 | 30 | ); 31 | }; 32 | 33 | export default SecondaryHeaderPages; 34 | -------------------------------------------------------------------------------- /src/components/atoms/deliveryOrderCard/DeliveryOrderCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Image from "next/image"; 3 | import styles from "./DeliveryOrderCard.module.scss"; 4 | 5 | interface DeliveryOrderCardProps { 6 | title: string; 7 | tel: string; 8 | } 9 | 10 | const DeliveryOrderCard: React.FC = ({ 11 | title, 12 | tel, 13 | }) => { 14 | return ( 15 |
16 |
17 |

{title}

18 |

{tel}

19 |
20 | {title} 27 |
28 | ); 29 | }; 30 | 31 | export default DeliveryOrderCard; 32 | -------------------------------------------------------------------------------- /src/components/atoms/social-media-bar/SocialMediaBar.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from "react"; 2 | import Image from "next/image"; 3 | import styles from "./SocialMediaBar.module.scss"; 4 | import Link from "next/link"; 5 | 6 | type SocialMedia = { 7 | icon: string; 8 | href: string; 9 | }; 10 | 11 | type SocialMediaBarProps = { 12 | socialMedias: SocialMedia[]; 13 | size?: "small" | "medium" | "large"; 14 | }; 15 | 16 | const SocialMediaBar: FC = ({ 17 | socialMedias, 18 | size = "medium", 19 | }) => { 20 | return ( 21 |
24 | {socialMedias.map((socialMedia, index) => ( 25 | 26 | icon 27 | 28 | ))} 29 |
30 | ); 31 | }; 32 | 33 | export default SocialMediaBar; 34 | -------------------------------------------------------------------------------- /src/components/atoms/infoCard/InfoCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from "react"; 2 | import InfoCard from "./InfoCard"; 3 | 4 | export const Default = { 5 | args: { 6 | icon: ( 7 | 14 | 18 | 19 | ), 20 | title: "7.30 AM - 9.30 PM", 21 | }, 22 | }; 23 | 24 | const infoCardConfig = { 25 | title: "Atoms/InfoCard", 26 | component: InfoCard, 27 | tags: ["autodocs"], 28 | excludeStories: /.*Data$/, 29 | decorators: [ 30 | (Story: FC) => ( 31 |
32 | 33 |
34 | ), 35 | ], 36 | }; 37 | 38 | export default infoCardConfig; 39 | -------------------------------------------------------------------------------- /src/components/atoms/menuItem/MenuItem.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .menu-item { 5 | display: flex; 6 | gap: map.get($spacing, "xs"); 7 | justify-content: space-between; 8 | 9 | &__info-box { 10 | border-bottom: 3px dashed $menu-item-primary-color; 11 | flex-basis: 100%; 12 | 13 | &__title { 14 | color: $menu-item-primary-color; 15 | font-size: $fs-xl; 16 | font-weight: $fw-normal; 17 | margin-bottom: map.get($spacing, "xxs"); 18 | } 19 | 20 | &__ingredients { 21 | color: $menu-item-text-color; 22 | font-size: $fs-md; 23 | font-weight: $fw-normal; 24 | margin-bottom: map.get($spacing, "xs"); 25 | } 26 | } 27 | 28 | &__price-box { 29 | align-self: flex-end; 30 | font-size: $fs-lg; 31 | font-weight: $fw-bold; 32 | 33 | span { 34 | color: $menu-item-primary-color; 35 | position: relative; 36 | top: map.get($spacing, "xxxs"); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/molecules/TestimonialCard/TestimonialCard.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .card { 4 | align-items: center; 5 | background: $white-floral; 6 | display: flex; 7 | flex-direction: column; 8 | gap: px-to-rem(15); 9 | height: px-to-rem(277); 10 | position: relative; 11 | width: px-to-rem(443); 12 | 13 | &--blur { 14 | filter: blur(3px); 15 | } 16 | 17 | &__image { 18 | border: 4px solid $testimonial-card-image-border-color; 19 | border-radius: $br-full; 20 | height: px-to-rem(80); 21 | object-fit: cover; 22 | width: px-to-rem(80); 23 | } 24 | 25 | &__name { 26 | color: $testimonial-card-color; 27 | font-size: $fs-lg; 28 | font-weight: $fw-bold; 29 | text-align: center; 30 | } 31 | 32 | &__description { 33 | color: $testimonial-card-color; 34 | font-size: $fs-md; 35 | text-align: center; 36 | } 37 | 38 | &__rating { 39 | bottom: 0; 40 | position: absolute; 41 | right: 0; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | 28 | - OS: [e.g. iOS] 29 | - Browser [e.g. chrome, safari] 30 | - Version [e.g. 22] 31 | 32 | **Smartphone (please complete the following information):** 33 | 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /src/components/molecules/MainCarousel/MainCarousel.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import MainCarousel from "./MainCarousel"; 3 | 4 | const slides = Array.from({ length: 5 }, (item, index) => ({ 5 | id: index, 6 | image: "/images/image1.png", 7 | dishname: "Burger", 8 | price: "10.89", 9 | link: "/", 10 | socialMedia: [ 11 | { icon: "icons/instagram.svg", href: "/" }, 12 | { icon: "icons/facebook.svg", href: "/" }, 13 | { icon: "icons/twitter.svg", href: "/" }, 14 | { icon: "icons/linkedin.svg", href: "/" }, 15 | ], 16 | })); 17 | 18 | export const Default = { 19 | args: { slides }, 20 | }; 21 | 22 | const mainCarousel: Meta = { 23 | title: "Molecules/MainCarousel", 24 | component: MainCarousel, 25 | tags: ["autodocs"], 26 | excludeStories: /.*Data$/, 27 | decorators: [ 28 | (Story) => { 29 | return ( 30 |
31 | 32 |
33 | ); 34 | }, 35 | ], 36 | }; 37 | 38 | export default mainCarousel; 39 | -------------------------------------------------------------------------------- /src/components/molecules/MainCarousel/MainCarousel.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import { Swiper, SwiperSlide } from "swiper/react"; 4 | import { Pagination } from "swiper/modules"; 5 | import styles from "./MainCarousel.module.scss"; 6 | import CarouselSlide from "@/components/atoms/CarouselSlide"; 7 | import "swiper/css"; 8 | import "swiper/css/pagination"; 9 | 10 | interface MainCarouselProps { 11 | slides: { 12 | id: number; 13 | image: string; 14 | dishname: string; 15 | price: string; 16 | link: string; 17 | socialMedia: { 18 | icon: string; 19 | href: string; 20 | }[]; 21 | }[]; 22 | } 23 | 24 | const MainCarousel: React.FC = ({ slides }) => { 25 | return ( 26 | 27 | {slides.map((item) => ( 28 | 29 | 30 | 31 | ))} 32 | 33 | ); 34 | }; 35 | 36 | export default MainCarousel; 37 | -------------------------------------------------------------------------------- /src/components/atoms/deliveryOrderCard/DeliveryOrderCard.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .delivery-card { 4 | align-items: center; 5 | border-radius: $br-sm; 6 | color: $delivery-order-card-color; 7 | display: flex; 8 | font-family: Roboto, sans-serif; 9 | height: px-to-rem(41); 10 | justify-content: space-between; 11 | overflow: hidden; 12 | padding: px-to-rem(10); 13 | transition: all 300ms ease; 14 | width: fit-content; 15 | 16 | &__info { 17 | display: flex; 18 | flex: 1; 19 | flex-direction: column; 20 | justify-content: center; 21 | min-width: px-to-rem(175); 22 | 23 | &__title { 24 | font-size: $fs-md; 25 | font-weight: $fw-bold; 26 | padding: px-to-rem(2); 27 | } 28 | 29 | &__tel { 30 | font-size: $fs-sm; 31 | font-weight: $fw-normal; 32 | padding: px-to-rem(2); 33 | } 34 | } 35 | 36 | &__image { 37 | border-radius: $br-sm; 38 | height: 3.125rem; 39 | padding: 0.125rem; 40 | width: 3.125rem; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/molecules/TestimonialCard/TestimonialCard.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import React from "react"; 3 | import styles from "./TestimonialCard.module.scss"; 4 | import Stars from "../stars/Stars"; 5 | 6 | interface TestimonialCardProps { 7 | name: string; 8 | description: string; 9 | rating: number; 10 | image: string; 11 | isActive?: boolean; 12 | } 13 | const TestimonialCard: React.FC = ({ 14 | name, 15 | description, 16 | rating, 17 | image, 18 | isActive = true, 19 | }) => { 20 | return ( 21 |
22 | {""} 29 |

{name}

30 |

{description}

31 |
32 | 33 |
34 |
35 | ); 36 | }; 37 | 38 | export default TestimonialCard; 39 | -------------------------------------------------------------------------------- /storybook-static/7648.82cc114c.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkrestaurant_app=self.webpackChunkrestaurant_app||[]).push([[7648],{"./node_modules/@mdx-js/react/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{MDXProvider:()=>MDXProvider,useMDXComponents:()=>useMDXComponents});var react=__webpack_require__("./node_modules/next/dist/compiled/react/index.js");const emptyComponents={},MDXContext=react.createContext(emptyComponents);function useMDXComponents(components){const contextComponents=react.useContext(MDXContext);return react.useMemo((function(){return"function"==typeof components?components(contextComponents):{...contextComponents,...components}}),[contextComponents,components])}function MDXProvider(properties){let allComponents;return allComponents=properties.disableParentContext?"function"==typeof properties.components?properties.components(emptyComponents):properties.components||emptyComponents:useMDXComponents(properties.components),react.createElement(MDXContext.Provider,{value:allComponents},properties.children)}}}]); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Bruno 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/templates/AuthSection/shared.scss: -------------------------------------------------------------------------------- 1 | @mixin form-input { 2 | border: 1px solid #c33; 3 | border-radius: 4px; 4 | overflow: hidden; 5 | padding: 0.5rem 0.75rem; 6 | width: 90%; 7 | 8 | &:focus { 9 | border-color: #4299e1; 10 | box-shadow: 0 0 0 3px #4299e180; 11 | outline: none; 12 | } 13 | } 14 | 15 | @mixin button { 16 | background-color: #e53e3e; 17 | border: none; 18 | border-radius: 4px; 19 | color: #fff; 20 | cursor: pointer; 21 | font-size: 1.25rem; 22 | padding: 1rem 2rem; 23 | transition: background-color 0.3; 24 | 25 | &:hover { 26 | background-color: #c53030; 27 | } 28 | } 29 | 30 | .forms { 31 | align-items: center; 32 | display: flex; 33 | justify-content: center; 34 | min-height: 55%; 35 | } 36 | 37 | .login-form { 38 | background-color: #f7fafc; 39 | border-radius: 8px; 40 | box-shadow: 0 2px 10px #000; 41 | max-width: 400px; 42 | padding: 2rem; 43 | text-align: center; 44 | width: 100%; 45 | 46 | form { 47 | display: flex; 48 | flex-direction: column; 49 | gap: 1rem; 50 | } 51 | 52 | button { 53 | @include button; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/components/atoms/specialMealCard/SpecialMealCard.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .card { 5 | border-radius: $br-sm; 6 | color: $special-meal-card-color; 7 | height: px-to-rem(140); 8 | text-align: center; 9 | transition: all 300ms ease; 10 | width: px-to-rem(140); 11 | 12 | @include laptop { 13 | border-radius: $br-md; 14 | height: px-to-rem(180); 15 | width: px-to-rem(180); 16 | } 17 | 18 | &:hover { 19 | background-color: $special-meal-card-color; 20 | color: $special-meal-card-color-hover; 21 | } 22 | 23 | &__box { 24 | @include center; 25 | 26 | flex-direction: column; 27 | height: 100%; 28 | justify-content: flex-start; 29 | overflow: hidden; 30 | 31 | &__img { 32 | border-radius: $br-sm; 33 | height: px-to-rem(86); 34 | margin-top: map.get($spacing, "sm"); 35 | width: px-to-rem(108.3); 36 | } 37 | 38 | &__title { 39 | @include center; 40 | 41 | flex-grow: 1; 42 | font-size: $fs-xl; 43 | font-weight: $fw-normal; 44 | line-height: px-to-rem(29.3); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/molecules/memberCard/MemberCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta, StoryObj } from "@storybook/nextjs"; 2 | import MemberCard from "./MemberCard"; 3 | 4 | export const Default: StoryObj = { 5 | args: { 6 | name: "Brain Adams", 7 | about: 8 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.Lorem ipsum dolor sitamet", 9 | image: "/images/image_ourTeam_1.png", // Example image path 10 | socialMedia: [ 11 | { icon: "icons/instagram.svg", href: "/" }, 12 | { icon: "icons/facebook.svg", href: "/" }, 13 | { icon: "icons/twitter.svg", href: "/" }, 14 | { icon: "icons/linkedin.svg", href: "/" }, 15 | ], 16 | }, 17 | }; 18 | 19 | const memberCard: Meta = { 20 | title: "Molecules/MemberCard", 21 | component: MemberCard, 22 | tags: ["autodocs"], 23 | excludeStories: /.*Data$/, 24 | decorators: [ 25 | (Story) => { 26 | return ( 27 |
28 | 29 |
30 | ); 31 | }, 32 | ], 33 | }; 34 | 35 | export default memberCard; 36 | -------------------------------------------------------------------------------- /src/components/molecules/ourstoryCard/OurStoryCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react"; 2 | import styles from "./OurStoryCard.module.scss"; 3 | import Image from "next/image"; 4 | 5 | interface OurStoryCardProps { 6 | image: string; 7 | story: ReactNode; 8 | mode?: "primary" | "secondary"; 9 | } 10 | 11 | const OurStoryCard: React.FC = ({ 12 | image, 13 | story, 14 | mode = "primary", 15 | }) => { 16 | return ( 17 |
24 |
25 | Our Story 32 |
33 |
34 |
35 | {story} 36 |
37 |
38 | ); 39 | }; 40 | 41 | export default OurStoryCard; 42 | -------------------------------------------------------------------------------- /src/components/molecules/SearchBar/SearchBar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState } from "react"; 3 | import InputField from "../../atoms/InputField"; 4 | import Button from "../../atoms/button"; 5 | import styles from "./SearchBar.module.scss"; 6 | 7 | interface SearchBarProps { 8 | onSearch: (value: string) => void; 9 | } 10 | 11 | const SearchBar: React.FC = ({ onSearch }) => { 12 | const [searchTerm, setSearchTerm] = useState(""); 13 | 14 | const handleChange = (event: React.ChangeEvent) => { 15 | setSearchTerm(event.target.value); 16 | onSearch(event.target.value); // Real-time search 17 | }; 18 | 19 | const handleClear = () => { 20 | setSearchTerm(""); 21 | onSearch(""); // Clear results 22 | }; 23 | 24 | return ( 25 |
26 | 31 | {searchTerm && ( 32 | 35 | )} 36 |
37 | ); 38 | }; 39 | 40 | export default SearchBar; 41 | -------------------------------------------------------------------------------- /storybook-static/3726.9170324c.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * The buffer module from node.js, for the browser. 3 | * 4 | * @author Feross Aboukhadijeh 5 | * @license MIT 6 | */ 7 | 8 | /*! 9 | * The buffer module from node.js, for the browser. 10 | * 11 | * @author Feross Aboukhadijeh 12 | * @license MIT 13 | */ 14 | 15 | /*! 16 | * cookie 17 | * Copyright(c) 2012-2014 Roman Shtylman 18 | * Copyright(c) 2015 Douglas Christopher Wilson 19 | * MIT Licensed 20 | */ 21 | 22 | /*! 23 | * is-plain-object 24 | * 25 | * Copyright (c) 2014-2017, Jon Schlinkert. 26 | * Released under the MIT License. 27 | */ 28 | 29 | /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh */ 30 | 31 | /*! safe-buffer. MIT License. Feross Aboukhadijeh */ 32 | 33 | /** 34 | * @license React 35 | * react-is.production.min.js 36 | * 37 | * Copyright (c) Facebook, Inc. and its affiliates. 38 | * 39 | * This source code is licensed under the MIT license found in the 40 | * LICENSE file in the root directory of this source tree. 41 | */ 42 | -------------------------------------------------------------------------------- /src/components/atoms/AchievementCard/AchievementCard.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .main-container { 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: start; 8 | margin: 1rem; 9 | width: fit-content; 10 | 11 | &__info-container { 12 | align-items: center; 13 | display: flex; 14 | flex-direction: row; 15 | } 16 | 17 | &__main-content { 18 | align-items: flex-start; 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: flex-start; 22 | } 23 | 24 | &__image { 25 | aspect-ratio: 1/1; 26 | object-fit: cover; 27 | padding: map.get($spacing, sm); 28 | } 29 | 30 | &__image-container { 31 | border: 3px solid $achievement-img-border-color; 32 | border-radius: 50px; 33 | margin-right: map.get($spacing, sm); 34 | } 35 | 36 | &__header { 37 | color: $achievement-header-color; 38 | font-size: $fs-xxl; 39 | font-weight: $fw-bold; 40 | margin-bottom: map.get($spacing, xxs); 41 | } 42 | 43 | &__icon { 44 | height: 20px; 45 | margin-left: map.get($spacing, xxxs); 46 | margin-top: map.get($spacing, xxxs); 47 | width: 20px; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /storybook-static/7227.9084cb1f.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunkrestaurant_app=self.webpackChunkrestaurant_app||[]).push([[7227],{"./node_modules/@storybook/core/dist/components sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/components sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/theming sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/theming sync recursive",module.exports=webpackEmptyContext},"./node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext}}]); -------------------------------------------------------------------------------- /src/components/atoms/HighlightCard/HighlightCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './HighlightCard.module.scss'; 3 | import Link from 'next/link'; 4 | import Image from 'next/image'; 5 | 6 | interface HighlightCardProps { 7 | image: string; 8 | title: string; 9 | description: string; 10 | link: string; 11 | mode: 'primary' | 'secondary'; 12 | badge?: string | number; 13 | } 14 | 15 | const HighlightCard: React.FC = ({ 16 | image, 17 | title, 18 | description, 19 | link, 20 | mode = 'primary', 21 | badge = '2', 22 | }) => { 23 | return ( 24 |
25 |
26 | Card icon 27 |
28 | 29 |

{title}

30 | 31 |

{description}

32 | 33 | 34 | Read More 35 | 36 |
37 | ); 38 | }; 39 | 40 | export default HighlightCard; 41 | -------------------------------------------------------------------------------- /src/components/templates/testimonialSection/TestimonialSection.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .testimonial-section { 4 | text-align: center; 5 | 6 | &__name { 7 | color: $testimonial-section-color; 8 | font-size: $fs-lg; 9 | font-weight: $fw-bold; 10 | margin-bottom: px-to-rem(15); 11 | } 12 | 13 | &__heading { 14 | color: $testimonial-section-color; 15 | font-size: $fs-xxl; 16 | font-weight: $fw-bold; 17 | line-height: 1.2; 18 | margin-bottom: px-to-rem(20); 19 | text-align: center; 20 | 21 | span { 22 | color: $testimonial-section-secondary-color; 23 | } 24 | } 25 | 26 | &__swiper { 27 | box-sizing: border-box; 28 | height: fit-content; 29 | max-width: px-to-rem(1220); 30 | min-height: px-to-rem(345); 31 | padding: px-to-rem(10); 32 | text-align: center; 33 | 34 | & > div { 35 | div { 36 | display: flex; 37 | justify-content: center; 38 | } 39 | } 40 | 41 | & > div:last-of-type { 42 | margin: auto; 43 | 44 | & > span { 45 | border: 2px solid $primary-color; 46 | 47 | &.swiper-pagination-bullet-active { 48 | background: $primary-color; 49 | } 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /storybook-static/project.json: -------------------------------------------------------------------------------- 1 | {"generatedAt":1729335958360,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"Next","packageName":"next","version":"14.2.12"},"testPackages":{},"packageManager":{"type":"npm","version":"10.8.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/nextjs","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","portableStoriesFileCount":3,"storybookVersion":"8.2.7","storybookVersionSpecifier":"^8.2.7","language":"typescript","storybookPackages":{"@storybook/addon-a11y":{"version":"8.2.7"},"@storybook/addon-knobs":{"version":"8.0.1"},"@storybook/addon-storysource":{"version":"8.2.7"},"@storybook/blocks":{"version":"8.2.7"},"@storybook/manager-api":{"version":"8.3.0"},"@storybook/nextjs":{"version":"8.2.7"},"@storybook/react":{"version":"8.2.7"},"@storybook/test":{"version":"8.2.7"},"@storybook/theming":{"version":"8.3.0"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.0"}},"addons":{"@storybook/addon-onboarding":{"version":"8.2.7"},"@storybook/addon-links":{"version":"8.2.7"},"@storybook/addon-essentials":{"version":"8.2.7"},"@chromatic-com/storybook":{"version":"1.6.1"},"@storybook/addon-interactions":{"version":"8.2.7"}}} 2 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next'; 2 | import { Analytics } from '@vercel/analytics/react'; 3 | import { Inter } from 'next/font/google'; 4 | import './global.scss'; 5 | import { SpeedInsights } from '@vercel/speed-insights/next'; 6 | import Header from '@/components/molecules/Header'; 7 | import CopyrightInfo from '@/components/atoms/CopyrightInfo'; 8 | import BranchSection from '@/components/atoms/BranchSection'; 9 | import styles from './layout.module.scss'; 10 | import HighlightSection from '@/components/templates/HighlightSection/HighlightSection'; 11 | const inter = Inter({ subsets: ['latin'] }); 12 | 13 | export const metadata: Metadata = { 14 | title: 'Create Next App', 15 | description: 'Generated by create next app', 16 | }; 17 | 18 | export default function RootLayout({ 19 | children, 20 | }: Readonly<{ 21 | children: React.ReactNode; 22 | }>) { 23 | return ( 24 | 25 | 26 |
{children}
27 | 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /storybook-static/components-atoms-HighlightCard-HighlightCard-stories.a3692757.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkrestaurant_app=self.webpackChunkrestaurant_app||[]).push([[398],{"./src/components/atoms/HighlightCard/HighlightCard.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _HighlightCard__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/atoms/HighlightCard/HighlightCard.tsx");const Default={args:{image:"icons/highlight-icon.svg",title:"100 % Fresh Foods",description:"Beguiled and demoralized by all get charms pleasure the moments ever so blinded by desire.",link:"/"}},__WEBPACK_DEFAULT_EXPORT__={title:"Atoms/HighlightCard",component:_HighlightCard__WEBPACK_IMPORTED_MODULE_0__.A,tags:["autodocs"],excludeStories:/.*Data$/},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n image: "icons/highlight-icon.svg",\n title: "100 % Fresh Foods",\n description: "Beguiled and demoralized by all get charms pleasure the moments ever so blinded by desire.",\n link: "/"\n }\n}',...Default.parameters?.docs?.source}}}}}]); -------------------------------------------------------------------------------- /storybook-static/components-atoms-ItemCard-ItemCard-stories.6e79d6da.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkrestaurant_app=self.webpackChunkrestaurant_app||[]).push([[9566],{"./src/components/atoms/ItemCard/ItemCard.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _ItemCard__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/atoms/ItemCard/ItemCard.tsx");const Default={args:{id:1,image:"/images/pizza.png",dishname:"Chicken Supreme Pizza",price:"150",description:"Topped with chicken, onion, capsicum, black olive & Green chilli",discountOne:"",discountTwo:""}},__WEBPACK_DEFAULT_EXPORT__={title:"Atoms/ItemCard",component:_ItemCard__WEBPACK_IMPORTED_MODULE_0__.A,tags:["autodocs"],excludeStories:/.*Data$/},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n id: 1,\n image: "/images/pizza.png",\n dishname: "Chicken Supreme Pizza",\n price: "150",\n description: "Topped with chicken, onion, capsicum, black olive & Green chilli",\n discountOne: "",\n discountTwo: ""\n }\n}',...Default.parameters?.docs?.source}}}}}]); -------------------------------------------------------------------------------- /src/components/molecules/branchCard/BranchCard.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .branch-card { 4 | align-items: center; 5 | border-radius: $br-sm; 6 | color: $branch-card-color; 7 | display: flex; 8 | font-family: Roboto, sans-serif; 9 | justify-content: space-between; 10 | overflow: hidden; 11 | padding: px-to-rem(20); 12 | transition: all 300ms ease; 13 | width: fit-content; 14 | 15 | &__info { 16 | align-items: center; 17 | display: flex; 18 | flex: 1; 19 | flex-direction: column; 20 | gap: px-to-rem(10); 21 | justify-content: center; 22 | 23 | &__name { 24 | font-size: $fs-xxl; 25 | font-weight: $fw-bold; 26 | padding: px-to-rem(2); 27 | } 28 | 29 | &__address { 30 | font-size: $fs-lg; 31 | font-weight: $fw-bold; 32 | padding: px-to-rem(2); 33 | } 34 | 35 | &__info_block { 36 | display: flex; 37 | justify-content: space-around; 38 | width: 100%; 39 | } 40 | 41 | &__location { 42 | align-items: center; 43 | color: $branch-card-location-color; 44 | cursor: pointer; 45 | display: flex; 46 | font-size: $fs-md; 47 | font-weight: $fw-normal; 48 | justify-content: center; 49 | padding: px-to-rem(2); 50 | text-decoration: none; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/components/molecules/ourstoryCard/OurStoryCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta, StoryObj } from "@storybook/nextjs"; 2 | import OurStoryCard from "./OurStoryCard"; 3 | 4 | export const Default = { 5 | args: { 6 | image: "./images/image_about_1.png", 7 | story: 8 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage", 9 | }, 10 | }; 11 | 12 | export const Primary: StoryObj = { 13 | args: { 14 | ...Default.args, 15 | mode: "primary", 16 | }, 17 | }; 18 | 19 | export const Secondary: StoryObj = { 20 | args: { 21 | ...Default.args, 22 | mode: "secondary", 23 | }, 24 | }; 25 | 26 | const ourStoryCard: Meta = { 27 | title: "Molecules/OurStoryCard", 28 | component: OurStoryCard, 29 | tags: ["autodocs"], 30 | excludeStories: /.*Data$/, 31 | decorators: [ 32 | (Story) => { 33 | return ; 34 | }, 35 | ], 36 | }; 37 | 38 | export default ourStoryCard; 39 | -------------------------------------------------------------------------------- /src/components/molecules/memberCard/MemberCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./MemberCard.module.scss"; 3 | import Image from "next/image"; 4 | import SocialMediaBar from "@/components/atoms/social-media-bar/SocialMediaBar"; 5 | 6 | interface SocialMedia { 7 | icon: string; 8 | href: string; 9 | } 10 | 11 | interface MemberCardProps { 12 | name: string; 13 | about: string; 14 | image: string; 15 | socialMedia: SocialMedia[]; 16 | } 17 | 18 | const MemberCard: React.FC = ({ 19 | name, 20 | about, 21 | image, 22 | socialMedia, 23 | }) => { 24 | return ( 25 |
26 |
27 | {`${name}'s 34 |
35 |
36 |

{name}

37 |

{about}

38 |
39 |
40 | 41 |
42 |
43 | ); 44 | }; 45 | 46 | export default MemberCard; 47 | -------------------------------------------------------------------------------- /storybook-static/components-molecules-TestimonialCard-TestimonialCard-stories.51ba8ad1.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkrestaurant_app=self.webpackChunkrestaurant_app||[]).push([[5631],{"./src/components/molecules/TestimonialCard/TestimonialCard.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _TestimonialCard__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/molecules/TestimonialCard/TestimonialCard.tsx");const Default={args:{name:"Robert Food",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. ",rating:4,image:"/images/man.jpg",isActive:!0}},__WEBPACK_DEFAULT_EXPORT__={title:"Molecules/TestimonialCard",component:_TestimonialCard__WEBPACK_IMPORTED_MODULE_0__.A,tags:["autodocs"]},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n name: "Robert Food",\n description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. ",\n rating: 4,\n image: "/images/man.jpg",\n isActive: true\n }\n}',...Default.parameters?.docs?.source}}}}}]); -------------------------------------------------------------------------------- /src/components/templates/SecondaryHeaderPages/SecondaryHeaderPages.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .secondary-header { 4 | background-position: 100% 50%; 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | box-sizing: border-box; 8 | display: block; 9 | height: 200px; 10 | padding: px-to-rem(20); 11 | width: 100%; 12 | 13 | @include laptop { 14 | height: px-to-rem(280); 15 | max-width: px-to-rem(1440); 16 | width: px-to-rem(1440); 17 | } 18 | 19 | // background: url('/images/itemsheadbg.png'); 20 | &--textContent { 21 | align-items: center; 22 | box-sizing: border-box; 23 | display: flex; 24 | flex-direction: column; 25 | height: 100%; 26 | justify-content: flex-end; 27 | margin: 0 auto; 28 | padding: px-to-rem(20); 29 | width: 100%; 30 | 31 | @include laptop { 32 | width: 50%; 33 | } 34 | 35 | & h2 { 36 | @include secondary-heading; 37 | 38 | color: $white-floral; 39 | line-height: 41.02px; 40 | margin-bottom: px-to-rem(15); 41 | text-align: center; 42 | text-transform: uppercase; 43 | } 44 | 45 | & p { 46 | @include body-font; 47 | 48 | color: $white-floral; 49 | font-size: $fs-lg; 50 | font-weight: $fw-semibold; 51 | line-height: 21.09px; 52 | margin-bottom: px-to-rem(15); 53 | text-align: center; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/templates/HighlightSection/HighlightSection.tsx: -------------------------------------------------------------------------------- 1 | import HighlightCard from '@/components/atoms/HighlightCard'; 2 | import React from 'react'; 3 | import styles from './HighlightSection.module.scss'; 4 | 5 | const HighlightSection = () => { 6 | return ( 7 |
8 |

Why We are the best

9 |
10 | 18 | 26 | 34 |
35 |
36 | ); 37 | }; 38 | 39 | export default HighlightSection; 40 | -------------------------------------------------------------------------------- /src/components/atoms/SpecialServiceCard/SpecialServiceCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Meta, StoryFn } from "@storybook/nextjs"; 3 | import SpecialServiceCard, { 4 | SpecialServiceCardProps, 5 | } from "./SpecialServiceCard"; 6 | 7 | // Define metadata for the Storybook story 8 | const meta: Meta = { 9 | title: "atoms/SpecialServiceCard", 10 | component: SpecialServiceCard, 11 | parameters: { 12 | layout: "centered", 13 | }, 14 | }; 15 | 16 | export default meta; 17 | 18 | // Define a template for the stories 19 | const Template: StoryFn = (args) => ( 20 | 21 | ); 22 | 23 | // Default story 24 | export const Default = Template.bind({}); 25 | Default.args = { 26 | title: "Amazing Service", 27 | description: "This service provides incredible value and benefits.", 28 | }; 29 | 30 | // Story with custom title and description 31 | export const CustomContent = Template.bind({}); 32 | CustomContent.args = { 33 | title:

Custom Title

, 34 | description: ( 35 |

36 | Custom description with HTML content. 37 |

38 | ), 39 | }; 40 | 41 | // Story with only title 42 | export const OnlyTitle = Template.bind({}); 43 | OnlyTitle.args = { 44 | title: "Title Only", 45 | description: "", 46 | }; 47 | 48 | // Story with only description 49 | export const OnlyDescription = Template.bind({}); 50 | OnlyDescription.args = { 51 | title: "", 52 | description: "Description Only", 53 | }; 54 | -------------------------------------------------------------------------------- /storybook-static/components-atoms-specialMealCard-SpecialMealCard-stories.52093414.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkrestaurant_app=self.webpackChunkrestaurant_app||[]).push([[5106],{"./src/components/atoms/specialMealCard/SpecialMealCard.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),_SpecialMealCard__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/atoms/specialMealCard/SpecialMealCard.tsx");const Default={args:{image:"https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=600",title:"Hot Dogs"}},__WEBPACK_DEFAULT_EXPORT__={title:"Atoms/SpecialMealCard",component:_SpecialMealCard__WEBPACK_IMPORTED_MODULE_1__.A,tags:["autodocs"],excludeStories:/.*Data$/,decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{style:{backgroundColor:"#fff8ee"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})]},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n image: "https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=600",\n title: "Hot Dogs"\n }\n}',...Default.parameters?.docs?.source}}}}}]); -------------------------------------------------------------------------------- /storybook-static/components-atoms-CarouselSlide-CarouselSlide-stories.3b7d37e4.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkrestaurant_app=self.webpackChunkrestaurant_app||[]).push([[5550],{"./src/components/atoms/CarouselSlide/CarouselSlide.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _CarouselSlide__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/atoms/CarouselSlide/CarouselSlide.tsx");const Default={args:{id:1,image:"/images/image1.png",dishname:"Burger",price:"10.89",link:"/",socialMedia:[{icon:"icons/instagram.svg",href:"/"},{icon:"icons/facebook.svg",href:"/"},{icon:"icons/twitter.svg",href:"/"},{icon:"icons/linkedin.svg",href:"/"}]}},__WEBPACK_DEFAULT_EXPORT__={title:"Atoms/CarouselSlide",component:_CarouselSlide__WEBPACK_IMPORTED_MODULE_0__.A,tags:["autodocs"],excludeStories:/.*Data$/},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n id: 1,\n image: "/images/image1.png",\n dishname: "Burger",\n price: "10.89",\n link: "/",\n socialMedia: [{\n icon: "icons/instagram.svg",\n href: "/"\n }, {\n icon: "icons/facebook.svg",\n href: "/"\n }, {\n icon: "icons/twitter.svg",\n href: "/"\n }, {\n icon: "icons/linkedin.svg",\n href: "/"\n }]\n }\n}',...Default.parameters?.docs?.source}}}}}]); -------------------------------------------------------------------------------- /src/foundations/sass/_mixins.scss: -------------------------------------------------------------------------------- 1 | /* ============================================= 2 | = Mixins = 3 | ============================================= */ 4 | 5 | /** 6 | * 7 | * Helpful reusable function-like things that will be used to implement 8 | * styles for components. 9 | * 10 | */ 11 | @use "sass:map"; 12 | 13 | @mixin secondary-heading { 14 | font-family: Roboto, sans-serif; 15 | font-size: px-to-rem(35); 16 | font-weight: 700; 17 | } 18 | 19 | @mixin body-font { 20 | font-family: Roboto, sans-serif; 21 | font-size: px-to-rem(18); 22 | font-weight: 400; 23 | } 24 | 25 | @mixin center { 26 | align-items: center; 27 | display: flex; 28 | justify-content: center; 29 | } 30 | 31 | @mixin mobile { 32 | @media (max-width: map.get($breakpoints, "sm")) { 33 | @content; 34 | } 35 | } 36 | 37 | @mixin tablet { 38 | @media (max-width: map.get($breakpoints, "lg")) { 39 | @content; 40 | } 41 | } 42 | 43 | @mixin laptop { 44 | @media (max-width: map.get($breakpoints, "xl")) { 45 | @content; 46 | } 47 | } 48 | 49 | @mixin padding($space) { 50 | padding: map.get($spacing, $space); 51 | } 52 | 53 | @mixin margin($space) { 54 | margin: map.get($spacing, $space); 55 | } 56 | 57 | @mixin margin-bottom($space) { 58 | margin-bottom: map.get($spacing, $space); 59 | } 60 | 61 | @mixin padding-horizontal($space) { 62 | padding-left: map.get($spacing, $space); 63 | padding-right: map.get($spacing, $space); 64 | } 65 | 66 | @mixin padding-vertical($space) { 67 | padding-bottom: map.get($spacing, $space); 68 | padding-top: map.get($spacing, $space); 69 | } 70 | -------------------------------------------------------------------------------- /src/components/molecules/DeliverySection/DeliverySection.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .delivery-section { 4 | font-family: Roboto, sans-serif; 5 | margin: 1rem; 6 | padding: 2rem 0; 7 | 8 | &__sectionTitle { 9 | color: $delivery-section-color; 10 | font-size: $fs-lg; 11 | font-weight: $h-3-font-weight; 12 | margin-bottom: 1.688rem; 13 | padding-left: 10%; 14 | text-align: left; 15 | } 16 | 17 | &__content { 18 | align-items: flex-start; 19 | display: flex; 20 | flex-direction: row; 21 | gap: 4rem; 22 | justify-content: center; 23 | margin: 0 auto; 24 | max-width: 1400px; // Clave: limita el ancho máximo 25 | padding: 0 2rem; 26 | } 27 | 28 | &__left { 29 | display: flex; 30 | flex: 1; 31 | flex-direction: column; 32 | max-width: 600px; // The text will be not big. "Important" 33 | 34 | &__title { 35 | font-family: Roboto, sans-serif; 36 | font-size: 2.188rem; 37 | font-weight: 700; 38 | line-height: 2.564rem; 39 | margin-bottom: 1rem; 40 | 41 | & > span { 42 | color: $delivery-section-color; 43 | } 44 | } 45 | 46 | & > p { 47 | font-size: $fs-md; 48 | font-weight: $fw-normal; 49 | line-height: 1.6; 50 | margin: 1rem 0; 51 | } 52 | } 53 | 54 | &__image { 55 | flex-shrink: 0; 56 | height: auto; 57 | object-fit: contain; 58 | width: 28rem; // Fix size for the image 59 | } 60 | 61 | &__delivery-order-card { 62 | align-items: center; 63 | display: flex; 64 | gap: 1.5rem; 65 | margin: 1.5rem 0; 66 | } 67 | } -------------------------------------------------------------------------------- /src/components/molecules/memberCard/MemberCard.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .member-card { 4 | align-items: center; 5 | color: $member-card-color; 6 | display: flex; 7 | flex-direction: column; 8 | font-family: Roboto, sans-serif; 9 | position: relative; 10 | transition: all 300ms ease; 11 | width: fit-content; 12 | 13 | &__info { 14 | align-items: center; 15 | aspect-ratio: 1; 16 | border: 3px solid $member-card-border-color; 17 | border-radius: $br-full; 18 | box-sizing: border-box; 19 | display: flex; 20 | flex-direction: column; 21 | gap: px-to-rem(10); 22 | height: auto; 23 | justify-content: end; 24 | max-width: px-to-rem(343); 25 | overflow: hidden; 26 | padding: px-to-rem(20); 27 | padding-bottom: px-to-rem(70); 28 | position: relative; 29 | text-align: center; 30 | 31 | &__name { 32 | color: $member-card-color; 33 | font-size: $fs-xl; 34 | font-weight: $fw-bold; 35 | } 36 | 37 | &__about { 38 | color: $member-card-color; 39 | font-size: $fs-md; 40 | font-weight: $fw-normal; 41 | } 42 | } 43 | 44 | &__image-container { 45 | border: 5px solid $member-card-border-color; 46 | border-radius: $br-full; 47 | left: 40%; 48 | overflow: hidden; 49 | position: absolute; 50 | top: -px-to-rem(50); 51 | transform: translate(25%, -25%); 52 | z-index: 100; 53 | 54 | &__image { 55 | height: px-to-rem(217); 56 | object-fit: cover; 57 | width: px-to-rem(217); 58 | } 59 | } 60 | 61 | &__social-media { 62 | margin-top: px-to-rem(10); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/components/atoms/AchievementCard/AchievementCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./AchievementCard.module.scss"; 3 | import Image from "next/image"; 4 | import Button from "../button/Button"; 5 | 6 | interface AchievementProps { 7 | title: string; 8 | description: string; 9 | image: string; 10 | } 11 | 12 | const AchievementCard: React.FC = ({ 13 | title, 14 | description, 15 | image, 16 | }) => { 17 | return ( 18 |
19 |
20 |
21 | achievement 28 |
29 |
30 |

{title}

31 |

{description}

32 |
33 |
34 | 50 |
51 | ); 52 | }; 53 | 54 | export default AchievementCard; 55 | -------------------------------------------------------------------------------- /src/components/atoms/ItemCard/ItemCard.tsx: -------------------------------------------------------------------------------- 1 | import styles from "../../pages/ItemsPage/ItemsPage.module.scss"; 2 | import style from "./ItemCard.module.scss"; 3 | import React from "react"; 4 | import Image from "next/image"; 5 | import DiscountOne from "./DiscountOne"; 6 | import DiscountTwo from "./DiscountTwo"; 7 | interface ItemCardProps { 8 | id: number; 9 | image: string; 10 | dishname: string; 11 | price: number; 12 | description: string; 13 | discountOne: string; 14 | discountTwo: string; 15 | } 16 | 17 | const ItemCard: React.FC = ({ 18 | id, 19 | image, 20 | dishname, 21 | price, 22 | description, 23 | discountOne, 24 | discountTwo, 25 | }) => { 26 | if (dishname) { 27 | return ( 28 |
29 |
30 |

{dishname}

31 |

{description}

32 |

33 | From ${price} 34 |

35 |
36 |
37 | {dishname} 45 |
46 |
47 | ); 48 | } else if (discountOne) { 49 | return ; 50 | } else if (discountTwo) { 51 | return ; 52 | } 53 | }; 54 | 55 | export default ItemCard; 56 | -------------------------------------------------------------------------------- /src/components/atoms/social-media-bar/SocialMediaBar.stories.tsx: -------------------------------------------------------------------------------- 1 | import SocialMediaBar from "./SocialMediaBar"; 2 | 3 | export const Default = { 4 | args: { 5 | socialMedias: [ 6 | { icon: "icons/instagram.svg", href: "/" }, 7 | { icon: "icons/facebook.svg", href: "/" }, 8 | { icon: "icons/twitter.svg", href: "/" }, 9 | { icon: "icons/linkedin.svg", href: "/" }, 10 | ], 11 | size: "medium", 12 | }, 13 | }; 14 | 15 | export const Small = { 16 | args: { 17 | socialMedias: [ 18 | { icon: "icons/instagram.svg", href: "https://www.instagram.com" }, 19 | { icon: "icons/facebook.svg", href: "/" }, 20 | { icon: "icons/twitter.svg", href: "/" }, 21 | { icon: "icons/linkedin.svg", href: "/" }, 22 | ], 23 | size: "small", 24 | }, 25 | }; 26 | 27 | export const Medium = { 28 | args: { 29 | socialMedias: [ 30 | { icon: "icons/instagram.svg", href: "/" }, 31 | { icon: "icons/facebook.svg", href: "/" }, 32 | { icon: "icons/twitter.svg", href: "/" }, 33 | { icon: "icons/linkedin.svg", href: "/" }, 34 | ], 35 | size: "medium", 36 | }, 37 | }; 38 | 39 | export const Large = { 40 | args: { 41 | socialMedias: [ 42 | { icon: "icons/instagram.svg", href: "/" }, 43 | { icon: "icons/facebook.svg", href: "/" }, 44 | { icon: "icons/twitter.svg", href: "/" }, 45 | { icon: "icons/linkedin.svg", href: "/" }, 46 | ], 47 | size: "large", 48 | }, 49 | }; 50 | 51 | const socialMediaBarConfig = { 52 | title: "Atoms/SocialMediaBar", 53 | component: SocialMediaBar, 54 | tags: ["autodocs"], 55 | excludeStories: /.*Data$/, 56 | }; 57 | 58 | export default socialMediaBarConfig; 59 | -------------------------------------------------------------------------------- /src/components/molecules/DeliverySection/DeliverySection.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DeliveryOrderCard from "@/components/atoms/deliveryOrderCard"; 3 | import Button from "@/components/atoms/button/Button"; 4 | import Image from "next/image"; 5 | import styles from "./DeliverySection.module.scss"; 6 | 7 | const DeliverySection = () => { 8 | return ( 9 |
10 |

Delivery

11 |
12 |
13 |

14 | A Moments Of Delivered On Right Time & Place 15 |

16 |

17 | Food Khan is a restaurant, bar and coffee roastery located on a busy 18 | corner site in Farringdon's Exmouth Market. With glazed 19 | frontage on two sides of the building, overlooking the market and a 20 | bustling London inteon. 21 |

22 |
23 | 24 | 25 |
26 |
27 | {"food 35 |
36 |
37 | ); 38 | }; 39 | 40 | export default DeliverySection; 41 | -------------------------------------------------------------------------------- /storybook-static/components-atoms-button-Button-stories.99f57721.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkrestaurant_app=self.webpackChunkrestaurant_app||[]).push([[8064],{"./src/components/atoms/button/Button.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Large:()=>Large,Medium:()=>Medium,Small:()=>Small,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Button__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/atoms/button/Button.tsx");const Default={args:{children:"Button",size:"medium"}},Small={args:{children:"Button",size:"small"}},Medium={args:{children:"Button",size:"medium"}},Large={args:{children:"Go",size:"large"}},__WEBPACK_DEFAULT_EXPORT__={title:"Atoms/Button",component:_Button__WEBPACK_IMPORTED_MODULE_0__.A,tags:["autodocs"],excludeStories:/.*Data$/},__namedExportsOrder=["Default","Small","Medium","Large"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n children: "Button",\n size: "medium"\n }\n}',...Default.parameters?.docs?.source}}},Small.parameters={...Small.parameters,docs:{...Small.parameters?.docs,source:{originalSource:'{\n args: {\n children: "Button",\n size: "small"\n }\n}',...Small.parameters?.docs?.source}}},Medium.parameters={...Medium.parameters,docs:{...Medium.parameters?.docs,source:{originalSource:'{\n args: {\n children: "Button",\n size: "medium"\n }\n}',...Medium.parameters?.docs?.source}}},Large.parameters={...Large.parameters,docs:{...Large.parameters?.docs,source:{originalSource:'{\n args: {\n children: "Go",\n size: "large"\n }\n}',...Large.parameters?.docs?.source}}}}}]); -------------------------------------------------------------------------------- /src/components/atoms/CarouselSlide/CarouselSlideMobile.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./CarouselSlide.module.scss"; 2 | import React from "react"; 3 | import { SwiperSlide } from "swiper/react"; 4 | import Link from "next/link"; 5 | import Image from "next/image"; 6 | import SocialMediaBar from "../social-media-bar/SocialMediaBar"; 7 | 8 | interface SocialMedia { 9 | icon: string; 10 | href: string; 11 | } 12 | interface CarouselSlideProps { 13 | id: number; 14 | image: string; 15 | dishname: string; 16 | price: string; 17 | link: string; 18 | socialMedia: SocialMedia[]; 19 | } 20 | 21 | const CarouselSlide: React.FC = ({ 22 | id, 23 | image, 24 | dishname, 25 | price, 26 | link, 27 | socialMedia, 28 | }) => { 29 | return ( 30 | 31 |
32 |
33 |
34 |

Best In Town

35 |

36 | Enjoy Our Chicken {dishname} Fast Food 37 |

38 |
39 |
40 | {dishname} 41 |
42 |
43 |
44 | Order Now{" "} 45 |

46 | Price: ${price} 47 |

48 |
49 |
50 |
51 | 52 |
53 | 54 | ); 55 | }; 56 | 57 | export default CarouselSlide; 58 | -------------------------------------------------------------------------------- /src/components/atoms/CarouselSlide/CarouselSlide.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./CarouselSlide.module.scss"; 2 | import React from "react"; 3 | import Link from "next/link"; 4 | import Image from "next/image"; 5 | import SocialMediaBar from "../social-media-bar/SocialMediaBar"; 6 | 7 | interface SocialMedia { 8 | icon: string; 9 | href: string; 10 | } 11 | interface CarouselSlideProps { 12 | id: number; 13 | image: string; 14 | dishname: string; 15 | price: string; 16 | link: string; 17 | socialMedia: SocialMedia[]; 18 | } 19 | 20 | const CarouselSlide: React.FC = ({ 21 | image, 22 | dishname, 23 | price, 24 | link, 25 | socialMedia, 26 | }) => { 27 | return ( 28 | <> 29 |
30 |
31 |
32 |

Best In Town

33 |

34 | Enjoy Our Chicken {dishname} Fast Food 35 |

36 |
37 |
38 | {dishname} 45 |
46 |
47 |
48 | Order Now{" "} 49 |

50 | Price: ${price} 51 |

52 |
53 |
54 |
55 | 56 |
57 | 58 | ); 59 | }; 60 | 61 | export default CarouselSlide; 62 | -------------------------------------------------------------------------------- /src/components/atoms/ItemCard/ItemCard.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .card { 4 | align-items: center; 5 | background: $white-floral; 6 | border-radius: 20px; 7 | box-shadow: 0 1px 4px 3px rgba(0 0 0 / 25%); 8 | box-sizing: border-box; 9 | display: flex; 10 | height: px-to-rem(170); 11 | justify-content: space-between; 12 | margin: px-to-rem(10); 13 | max-width: px-to-rem(588); 14 | padding: px-to-rem(10); 15 | 16 | &-image { 17 | border-radius: px-to-rem(20); 18 | height: px-to-rem(120); 19 | overflow: hidden; 20 | width: px-to-rem(120); 21 | 22 | @include laptop { 23 | height: px-to-rem(150); 24 | width: px-to-rem(150); 25 | } 26 | } 27 | 28 | &-text { 29 | box-sizing: border-box; 30 | color: $secondary-color; 31 | display: flex; 32 | flex-direction: column; 33 | height: 100%; 34 | justify-content: space-between; 35 | padding: px-to-rem(10); 36 | 37 | & > h3, 38 | & > h4 { 39 | font-family: Roboto, sans-serif; 40 | font-size: $fs-md; 41 | font-weight: $fw-bold; 42 | 43 | @include laptop { 44 | font-size: px-to-rem(20); 45 | font-weight: 700; 46 | } 47 | } 48 | 49 | p { 50 | @include body-font; 51 | 52 | font-size: $fs-sm; 53 | line-height: 21.09px; 54 | } 55 | } 56 | } 57 | 58 | .discount { 59 | border-radius: 4px; 60 | box-shadow: 0 0 6px 4px rgba(0 0 0 / 25%); 61 | box-sizing: border-box; 62 | grid-row: span 3; 63 | height: px-to-rem(570); 64 | margin: px-to-rem(10); 65 | width: px-to-rem(588); 66 | } 67 | 68 | .discount-full-width { 69 | box-shadow: 0 2px 6px 5px rgba(0 0 0 / 25%); 70 | box-sizing: border-box; 71 | grid-column: span 2; 72 | height: px-to-rem(323); 73 | margin: px-to-rem(10); 74 | width: px-to-rem(1214); 75 | } 76 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: "@typescript-eslint/parser", 3 | parserOptions: { 4 | ecmaVersion: 2021, 5 | sourceType: "module", 6 | ecmaFeatures: { 7 | jsx: true, 8 | }, 9 | }, 10 | env: { 11 | browser: true, 12 | es2021: true, 13 | node: true, 14 | }, 15 | root: true, 16 | extends: [ 17 | "next", 18 | "eslint:recommended", 19 | "prettier", 20 | "next/core-web-vitals", 21 | "plugin:@typescript-eslint/recommended", 22 | "plugin:react/recommended", 23 | "plugin:prettier/recommended", 24 | "plugin:react-hooks/recommended", 25 | ], 26 | plugins: ["prettier", "@typescript-eslint", "react", "react-hooks"], 27 | rules: { 28 | // JavaScript rules 29 | "prefer-const": "warn", 30 | "no-var": "warn", 31 | "no-unused-vars": "warn", 32 | "object-shorthand": "warn", 33 | "quote-props": ["warn", "as-needed"], 34 | // TypeScript rules 35 | "@typescript-eslint/array-type": [ 36 | "warn", 37 | { 38 | default: "array", 39 | }, 40 | ], 41 | "@typescript-eslint/consistent-type-assertions": [ 42 | "warn", 43 | { 44 | assertionStyle: "as", 45 | objectLiteralTypeAssertions: "never", 46 | }, 47 | ], 48 | // React rules 49 | "react/jsx-fragments": ["warn", "syntax"], // Shorthand syntax for React fragments 50 | "react/jsx-filename-extension": [ 51 | "warn", 52 | { 53 | extensions: ["ts", "tsx"], 54 | }, 55 | ], 56 | "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks 57 | "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies 58 | "react/react-in-jsx-scope": "off", 59 | "react/prop-types": "off", 60 | "prettier/prettier": "warn", 61 | }, 62 | settings: { 63 | react: { 64 | version: "detect", 65 | }, 66 | }, 67 | }; 68 | -------------------------------------------------------------------------------- /src/components/molecules/branchCard/BranchCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./BranchCard.module.scss"; 3 | import Image from "next/image"; 4 | import InfoCard from "@/components/atoms/infoCard/InfoCard"; 5 | import Link from "next/link"; 6 | 7 | interface BranchCardProps { 8 | name: string; 9 | address: string; 10 | time: string; 11 | location: string; 12 | tel: string; 13 | } 14 | 15 | const BranchCard: React.FC = ({ 16 | name, 17 | address, 18 | time, 19 | tel, 20 | location, 21 | }) => { 22 | return ( 23 |
24 |
25 |

{name}

26 |

{address}

27 |
28 | 37 | } 38 | title={time} 39 | /> 40 | 49 | } 50 | title={tel} 51 | /> 52 |
53 | 54 | Click to View Google Map 55 | 56 |
57 |
58 | ); 59 | }; 60 | 61 | export default BranchCard; 62 | -------------------------------------------------------------------------------- /src/components/molecules/stars/Stars.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from "react"; 2 | import styles from "./Stars.module.scss"; 3 | interface StarsProps { 4 | count: number; 5 | } 6 | const Stars: FC = ({ count }) => { 7 | return ( 8 |
9 | {[...Array(5)].map((_, i) => { 10 | if (i >= count) 11 | return ( 12 | 20 | 25 | 26 | ); 27 | 28 | return ( 29 | 37 | 41 | 42 | ); 43 | })} 44 |
45 | ); 46 | }; 47 | 48 | export default Stars; 49 | -------------------------------------------------------------------------------- /src/foundations/sass/_reset.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | main, 73 | menu, 74 | nav, 75 | output, 76 | ruby, 77 | section, 78 | summary, 79 | time, 80 | mark, 81 | audio, 82 | video { 83 | border: 0; 84 | font: inherit; 85 | font-size: 100%; 86 | margin: 0; 87 | padding: 0; 88 | vertical-align: baseline; 89 | } 90 | 91 | /* HTML5 display-role reset for older browsers */ 92 | article, 93 | aside, 94 | details, 95 | figcaption, 96 | figure, 97 | footer, 98 | header, 99 | hgroup, 100 | main, 101 | menu, 102 | nav, 103 | section { 104 | display: block; 105 | } 106 | 107 | /* HTML5 hidden-attribute fix for newer browsers */ 108 | *[hidden] { 109 | display: none; 110 | } 111 | 112 | body { 113 | line-height: 1; 114 | } 115 | 116 | menu, 117 | ol, 118 | ul { 119 | list-style: none; 120 | } 121 | 122 | blockquote, 123 | q { 124 | quotes: none; 125 | } 126 | 127 | blockquote::before, 128 | blockquote::after, 129 | q::before, 130 | q::after { 131 | content: ""; 132 | content: none; 133 | } 134 | 135 | table { 136 | border-collapse: collapse; 137 | border-spacing: 0; 138 | } 139 | -------------------------------------------------------------------------------- /src/foundations/sass/_typography.scss: -------------------------------------------------------------------------------- 1 | /* Typography */ 2 | 3 | /* ============================================= 4 | = Foundation - Typography = 5 | ============================================= */ 6 | 7 | /** 8 | * This file defines the default font sizes to be used on headings and texts. The defaults come 9 | * from the palette defined in _variables.scss. 10 | */ 11 | 12 | /* ============================================= 13 | = Body font family = 14 | ============================================= */ 15 | $body-font-family: var(--body-font-family, $playfair) !default; 16 | 17 | /* ============================================= 18 | = Body font sizes = 19 | ============================================= */ 20 | 21 | $body-font-size: var(--body-font-size, $fs-sm) !default; 22 | $body-font-weight: var(--body-font-weight, $fw-normal) !default; 23 | 24 | /* ============================================= 25 | = Heading font sizes = 26 | ============================================= */ 27 | 28 | $h-1-font-size: var(--h1-font-size, $h-1) !default; 29 | $h-2-font-size: var(--h2-font-size, $h-2) !default; 30 | $h-3-font-size: var(--h3-font-size, $h-3) !default; 31 | $h-4-font-size: var(--h4-font-size, $h-4) !default; 32 | $h-5-font-size: var(--h5-font-size, $h-5) !default; 33 | $h-6-font-size: var(--h6-font-size, $h-6) !default; 34 | 35 | /* ============================================= 36 | = Head font weights = 37 | ============================================= */ 38 | 39 | $h-1-font-weight: var(--h1-text-weight, $fw-black) !default; 40 | $h-2-font-weight: var(--h2-text-weight, $fw-semibold) !default; 41 | $h-3-font-weight: var(--h3-text-weight, $fw-bold) !default; 42 | $h-4-font-weight: var(--h4-text-weight, $fw-medium) !default; 43 | $h-5-font-weight: var(--h5-text-weight, $fw-normal) !default; 44 | $h-6-font-weight: var(--h6-text-weight, $fw-light) !default; 45 | -------------------------------------------------------------------------------- /src/components/atoms/BranchSection/BranchSection.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import InfoCard from '../infoCard'; 3 | import Image from 'next/image'; 4 | import styles from './BranchSection.module.scss'; 5 | 6 | const BranchSection = () => { 7 | const branches = [ 8 | { 9 | name: 'Robert Food', 10 | address: '1986 Hilltop Drive, Borger, TX 79007', 11 | }, 12 | { 13 | name: 'Mark A. Reed Food', 14 | address: '4877 Rose Avenue, New Orleans, LA 70112', 15 | }, 16 | { 17 | name: 'Karie K. Hill Food', 18 | address: '1509 Peaceful Lane, Cleveland, OH 44115', 19 | }, 20 | ]; 21 | 22 | return ( 23 |
24 |
25 | {branches.map((branch, index) => { 26 | // Encode the address for use in a URL 27 | const mapsUrl = `https://www.google.com/maps?q=${encodeURIComponent(branch.address)}`; 28 | 29 | return ( 30 |
31 |

{branch.name}

32 |
{branch.address}
33 | 34 |
35 | 39 | } 40 | /> 41 | 45 | } 46 | /> 47 |
48 | 49 | 50 | Click to View Google Map 51 | 52 |
53 | ); 54 | })} 55 |
56 |
57 | ); 58 | }; 59 | 60 | export default BranchSection; 61 | -------------------------------------------------------------------------------- /src/components/molecules/Header/Header.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .header { 5 | box-shadow: 0 5px 5px 0 $header-shadow-color; 6 | 7 | &__top { 8 | background-color: $header-top-bg-color; 9 | 10 | @include padding-horizontal(sm); 11 | 12 | &__container { 13 | align-items: center; 14 | display: flex; 15 | height: px-to-rem(35); 16 | justify-content: space-between; 17 | min-width: px-to-rem(480); 18 | 19 | &__info-box { 20 | display: flex; 21 | gap: map.get($spacing, "xxl"); 22 | min-width: fit-content; 23 | } 24 | 25 | &__link:link, 26 | &__link:visited { 27 | color: $header-bottom-bg-color; 28 | font-size: $fs-xs; 29 | text-decoration: none; 30 | text-transform: uppercase; 31 | 32 | &:hover, 33 | &:active { 34 | text-decoration: underline; 35 | } 36 | } 37 | } 38 | } 39 | 40 | &__bottom { 41 | background-color: $header-bottom-bg-color; 42 | 43 | @include padding-horizontal(sm); 44 | 45 | &__container { 46 | align-items: center; 47 | display: flex; 48 | height: px-to-rem(100); 49 | justify-content: space-between; 50 | 51 | &__info-box { 52 | align-items: center; 53 | display: flex; 54 | gap: map.get($spacing, "xl"); 55 | 56 | &__link:link, 57 | &__link:visited { 58 | background-color: $header-top-bg-color; 59 | border-radius: $br-sm; 60 | color: $header-bottom-bg-color; 61 | font-size: $fs-md; 62 | font-weight: $fw-bold; 63 | text-decoration: none; 64 | text-transform: uppercase; 65 | 66 | @include padding-horizontal(sm); 67 | @include padding-vertical(xxs); 68 | 69 | &:hover, 70 | &:active { 71 | background-color: $header-bottom-link-shade-color; 72 | } 73 | } 74 | } 75 | } 76 | } 77 | 78 | @media (width <= 768px) { 79 | display: none; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/components/atoms/BranchSection/BranchSection.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .branch-section { 5 | background-color: $branch-bg-color; 6 | 7 | h2 { 8 | font-size: $fs-lg; 9 | margin-bottom: 1.5rem; 10 | padding: 2rem; 11 | text-align: center; 12 | 13 | @include laptop { 14 | font-size: 35px; 15 | font-weight: bold; 16 | } 17 | } 18 | 19 | .branches { 20 | background-color: $branch-section-color; 21 | display: flex; 22 | gap: 1rem; 23 | justify-content: space-evenly; 24 | max-width: 100%; 25 | overflow-y: auto; 26 | padding: 2rem; 27 | 28 | .branch { 29 | border-radius: $br-sm; 30 | color: $header-bottom-bg-color; 31 | flex: 1; 32 | min-width: 300px; 33 | padding: 1rem; 34 | text-align: center; 35 | 36 | h3 { 37 | font-size: $fs-lg; 38 | font-weight: bold; 39 | margin-bottom: 0.5rem; 40 | 41 | @include laptop { 42 | font-size: 35px; 43 | } 44 | } 45 | 46 | .info-box { 47 | display: flex; 48 | flex-direction: column; 49 | font-size: $fs-xs; 50 | justify-content: center; 51 | margin-bottom: 1rem; 52 | 53 | @include laptop { 54 | flex-direction: row; 55 | font-size: $fs-xl; 56 | gap: map.get($spacing, "xl"); 57 | } 58 | } 59 | 60 | div { 61 | align-items: center; 62 | display: flex; 63 | font-size: $fs-md; 64 | gap: 5px; 65 | justify-content: center; 66 | margin-bottom: 0.5rem; 67 | 68 | @include laptop { 69 | font-size: 20px; 70 | } 71 | } 72 | 73 | span { 74 | align-items: center; 75 | display: flex; 76 | gap: 20px; 77 | justify-content: center; 78 | margin-bottom: 0.5rem; 79 | } 80 | 81 | .link { 82 | color: $link-color; 83 | font-size: 18px; 84 | text-decoration: none; 85 | 86 | &:hover { 87 | text-decoration: underline; 88 | } 89 | } 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/components/pages/ItemsPage/ItemsPage.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState, useEffect } from "react"; 3 | import styles from "./ItemsPage.module.scss"; 4 | import SecondaryHeaderPages from "@/components/templates/SecondaryHeaderPages"; 5 | import SearchBar from "@/components/molecules/SearchBar"; 6 | import ItemCard from "@/components/atoms/ItemCard"; 7 | 8 | interface ItemsPageProps { 9 | items: { 10 | id: number; 11 | image: string; 12 | dishname: string; 13 | price: number; 14 | description: string; 15 | discountOne: string; 16 | discountTwo: string; 17 | }[]; 18 | } 19 | 20 | const ItemsPage: React.FC = ({ items }) => { 21 | const [filteredItems, setFilteredItems] = useState(items); 22 | 23 | // Update filtered items when items prop changes 24 | useEffect(() => { 25 | setFilteredItems(items); 26 | }, [items]); 27 | 28 | const handleSearch = (searchTerm: string): void => { 29 | if (!searchTerm.trim()) { 30 | setFilteredItems(items); 31 | return; 32 | } 33 | 34 | const filtered = items.filter( 35 | (item) => 36 | item.dishname.toLowerCase().includes(searchTerm.toLowerCase()) || 37 | item.description.toLowerCase().includes(searchTerm.toLowerCase()), 38 | ); 39 | 40 | setFilteredItems(filtered); 41 | }; 42 | 43 | return ( 44 |
45 | 50 |

It's the food and groceries you love, delivered

51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 | {filteredItems.map((item, index) => { 59 | return ; 60 | })} 61 |
62 |
63 | ); 64 | }; 65 | 66 | export default ItemsPage; 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restaurant-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint && stylelint --allow-empty-input \"**/*.{css,scss}\"", 10 | "lint:fix": "next lint --fix && stylelint --allow-empty-input --fix \"**/*.{css,scss}\"", 11 | "storybook": "storybook dev -p 6006", 12 | "build-storybook": "storybook build", 13 | "commit": "cz", 14 | "format": "prettier --check . ", 15 | "format:fix": "prettier --write --list-different .", 16 | "prepare": "husky" 17 | }, 18 | "dependencies": { 19 | "@typescript-eslint/eslint-plugin": "^7.17.0", 20 | "@typescript-eslint/parser": "^7.17.0", 21 | "@vercel/analytics": "^1.3.1", 22 | "@vercel/speed-insights": "^1.0.12", 23 | "husky": "^9.1.3", 24 | "lint-staged": "^15.2.7", 25 | "next": "^15.1.2", 26 | "prettier-plugin-tailwindcss": "^0.6.5", 27 | "react": "^19.0.0-rc.1", 28 | "react-dom": "^19.0.0-rc.1", 29 | "sass": "^1.77.8", 30 | "swiper": "^11.1.14" 31 | }, 32 | "devDependencies": { 33 | "@chromatic-com/storybook": "^4.1.1", 34 | "@storybook/addon-a11y": "^9.1.10", 35 | "@storybook/addon-links": "^9.1.10", 36 | "@storybook/addon-onboarding": "^9.1.10", 37 | "@storybook/addon-storysource": "^8.6.14", 38 | "@storybook/nextjs": "^9.1.10", 39 | "@types/node": "^20", 40 | "@types/react": "^18", 41 | "@types/react-dom": "^18", 42 | "cz-conventional-changelog": "^3.3.0", 43 | "eslint": "^8.57.0", 44 | "eslint-config-next": "^15.1.2", 45 | "eslint-config-prettier": "^9.1.0", 46 | "eslint-plugin-prettier": "^5.2.1", 47 | "eslint-plugin-react": "^7.35.0", 48 | "eslint-plugin-storybook": "^9.1.10", 49 | "prettier": "^3.3.3", 50 | "storybook": "^9.1.10", 51 | "stylelint": "^16.7.0", 52 | "stylelint-config-prettier-scss": "^1.0.0", 53 | "stylelint-config-standard-scss": "^13.1.0", 54 | "stylelint-order": "^6.0.4", 55 | "stylelint-selector-bem-pattern": "^4.0.0", 56 | "typescript": "^5", 57 | "@storybook/addon-docs": "^9.1.10" 58 | }, 59 | "config": { 60 | "commitizen": { 61 | "path": "./node_modules/cz-conventional-changelog" 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import MainContainer from "@/components/atoms/mainContainer/MainContainer"; 2 | import DeliverySection from "@/components/molecules/DeliverySection"; 3 | import MainCarousel from "@/components/molecules/MainCarousel"; 4 | import RichAndHealthy from "@/components/molecules/RichAndHealthy"; 5 | import SpecialMenu from "@/components/molecules/SpecialMenu"; 6 | import BigOfferSection from "@/components/templates/bigOfferSection/BigOfferSection"; 7 | import PopularDishesSection from "@/components/templates/popularDishesSection/PopularDishesSection"; 8 | 9 | const slides = Array.from({ length: 5 }, (item, index) => ({ 10 | id: index, 11 | image: "/images/image1.png", 12 | dishname: "Burger", 13 | price: "10.89", 14 | link: "/", 15 | socialMedia: [ 16 | { icon: "icons/instagram.svg", href: "/" }, 17 | { icon: "icons/facebook.svg", href: "/" }, 18 | { icon: "icons/twitter.svg", href: "/" }, 19 | { icon: "icons/linkedin.svg", href: "/" }, 20 | ], 21 | })); 22 | 23 | export default function Home() { 24 | const meals = [ 25 | { id: 1, image: "/images/image_specialManu_1.png", title: "Burger" }, 26 | { id: 2, image: "/images/image_specialManu_2.png", title: "Fried chicken" }, 27 | { 28 | id: 3, 29 | image: "/images/image_specialManu_3.png", 30 | title: "Donner with Grilled Chicken", 31 | }, 32 | { id: 4, image: "/images/image_specialManu_4.png", title: "Pizza" }, 33 | { id: 5, image: "/images/image_specialManu_5.png", title: "Hot Dogs" }, 34 | { 35 | id: 6, 36 | image: "/images/image_specialManu_6.png", 37 | title: "Chicken Sewers", 38 | }, 39 | { id: 7, image: "/images/image_specialManu_7.png", title: "Greek Salad" }, 40 | { id: 8, image: "/images/image_specialManu_8.png", title: "Dahi Puri" }, 41 | { 42 | id: 9, 43 | image: "/images/image_specialManu_9.png", 44 | title: "Ice Cream with Chocolate", 45 | }, 46 | { 47 | id: 10, 48 | image: "/images/image_specialManu_10.png", 49 | title: "Coctail Glasses", 50 | }, 51 | ]; 52 | 53 | return ( 54 |
55 | 56 |
57 | 58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 | ); 67 | } 68 | -------------------------------------------------------------------------------- /src/components/templates/testimonialSection/TestimonialSection.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import { Swiper, SwiperSlide } from "swiper/react"; 4 | import "swiper/css"; 5 | import "swiper/css/pagination"; 6 | import { Pagination } from "swiper/modules"; 7 | import styles from "./TestimonialSection.module.scss"; 8 | import TestimonialCard from "@/components/molecules/TestimonialCard/TestimonialCard"; 9 | const TestimonialSection = () => { 10 | const [currentSlide, setCurrentSlide] = React.useState(0); 11 | return ( 12 |
13 |

Testimonial

14 |

15 | Review form our guests 16 |

17 | setCurrentSlide(swiper.realIndex)} 41 | initialSlide={1} 42 | pagination={{ clickable: true }} 43 | loop 44 | onSwiper={(swiper) => console.log(swiper.activeIndex)} 45 | autoplay={{ 46 | delay: 3000, 47 | disableOnInteraction: false, 48 | }} 49 | className={styles["testimonial-section__swiper"]} 50 | > 51 | {Array.from({ length: 10 }).map((_, index) => ( 52 | 53 | 62 | 63 | ))} 64 | 65 |
66 | ); 67 | }; 68 | 69 | export default TestimonialSection; 70 | -------------------------------------------------------------------------------- /src/components/templates/bigOfferSection/BigOfferSection.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import styles from "./BigOfferSection.module.scss"; 4 | import { Swiper, SwiperSlide } from "swiper/react"; 5 | import { 6 | Pagination, 7 | Navigation, 8 | Scrollbar, 9 | A11y, 10 | Autoplay, 11 | } from "swiper/modules"; 12 | import "swiper/css"; 13 | import "swiper/css/pagination"; 14 | import BigOfferCard from "@/components/atoms/BigOfferCard"; 15 | 16 | const BigOfferSection = () => { 17 | return ( 18 |
19 |

Big Offer

20 |

21 | For in this week, take your food, buy your best one. 22 |

23 | console.log("slide change")} 27 | initialSlide={1} 28 | loop 29 | breakpoints={{ 30 | 0: { 31 | slidesPerView: 1.1, 32 | spaceBetween: 10, 33 | }, 34 | 640: { 35 | slidesPerView: 1.5, 36 | spaceBetween: 20, 37 | }, 38 | 1024: { 39 | slidesPerView: 2.5, 40 | spaceBetween: 40, 41 | }, 42 | }} 43 | onSwiper={(swiper) => console.log(swiper)} 44 | autoplay={{ 45 | delay: 3000, 46 | disableOnInteraction: false, 47 | }} 48 | scrollbar={{ draggable: false }} 49 | > 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
70 | ); 71 | }; 72 | 73 | export default BigOfferSection; 74 | -------------------------------------------------------------------------------- /src/components/pages/ItemsPage/ItemsPage.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .items-page { 4 | max-width: px-to-rem(1440); 5 | 6 | & > h3 { 7 | color: $secondary-color; 8 | font-size: $fs-xl; 9 | font-weight: $fw-semibold; 10 | margin: px-to-rem(10) 0; 11 | padding: px-to-rem(10); 12 | text-align: center; 13 | 14 | @include laptop { 15 | @include secondary-heading; 16 | 17 | line-height: 41.02px; 18 | } 19 | } 20 | 21 | &-searchbox { 22 | margin: px-to-rem(10) 0; 23 | padding: px-to-rem(10) 0; 24 | } 25 | 26 | &-container { 27 | display: grid; 28 | grid: repeat(2, auto); 29 | grid-gap: 10px; 30 | margin: 0 auto; 31 | max-width: px-to-rem(1254); 32 | 33 | .item-card { 34 | align-items: center; 35 | background: $white-floral; 36 | border-radius: 20px; 37 | box-shadow: 0 1px 4px 3px rgba(0 0 0 / 25%); 38 | box-sizing: border-box; 39 | display: flex; 40 | height: px-to-rem(170); 41 | justify-content: space-between; 42 | margin: px-to-rem(10); 43 | padding: px-to-rem(10); 44 | width: px-to-rem(588); 45 | 46 | &-img { 47 | border-radius: px-to-rem(20); 48 | height: px-to-rem(150); 49 | min-width: px-to-rem(150); 50 | overflow: hidden; 51 | width: px-to-rem(150); 52 | } 53 | 54 | &-text { 55 | box-sizing: border-box; 56 | color: $secondary-color; 57 | display: flex; 58 | flex-direction: column; 59 | height: 100%; 60 | justify-content: space-between; 61 | padding: px-to-rem(10); 62 | 63 | & > h3, 64 | & > h4 { 65 | font-family: Roboto, sans-serif; 66 | font-size: px-to-rem(20); 67 | font-weight: 700; 68 | } 69 | 70 | p { 71 | @include body-font; 72 | 73 | line-height: 21.09px; 74 | } 75 | } 76 | } 77 | 78 | .discount-image { 79 | border-radius: 4px; 80 | box-shadow: 0 0 6px 4px rgba(0 0 0 / 25%); 81 | box-sizing: border-box; 82 | grid-row: span 3; 83 | height: px-to-rem(570); 84 | margin: px-to-rem(10); 85 | width: px-to-rem(588); 86 | } 87 | 88 | .discount-image-full-width { 89 | box-shadow: 0 2px 6px 5px rgba(0 0 0 / 25%); 90 | box-sizing: border-box; 91 | grid-column: span 2; 92 | height: px-to-rem(323); 93 | margin: px-to-rem(10); 94 | width: px-to-rem(1214); 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/components/atoms/CarouselSlide/CarouselSlide.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | .swiper-slide { 4 | margin: 0 auto; 5 | padding-left: 16px; 6 | width: 78%; 7 | 8 | &--main { 9 | display: flex; 10 | 11 | &--headings { 12 | width: 60%; 13 | 14 | & > * { 15 | font-family: Roboto, sans-serif; // Following the figma design 16 | font-style: italic; 17 | font-weight: 500; 18 | text-align: left; 19 | } 20 | 21 | & > h4 { 22 | color: $primary-color; 23 | font-size: px-to-rem(20); 24 | line-height: 23.44px; 25 | } 26 | 27 | & > h2 { 28 | color: $secondary-color; 29 | font-size: $fs-md; 30 | text-align: left; 31 | text-transform: uppercase; 32 | 33 | @include laptop { 34 | font-size: px-to-rem(50); 35 | line-height: 58.59px; 36 | } 37 | 38 | & > span { 39 | color: $primary-color; 40 | } 41 | } 42 | } 43 | 44 | &--image { 45 | max-height: px-to-rem(292); 46 | overflow: hidden; 47 | width: 40%; 48 | 49 | img { 50 | display: block; 51 | height: 100%; 52 | width: 100%; 53 | } 54 | } 55 | 56 | &--cta { 57 | @include center; 58 | 59 | > a { 60 | background-color: $primary-color; 61 | border-radius: px-to-rem(8); 62 | color: $btn-primary-color; 63 | display: block; 64 | font-family: Roboto, sans-serif; 65 | font-size: $fs-sm; 66 | font-weight: 500; 67 | min-width: px-to-rem(100); 68 | padding: px-to-rem(6); 69 | text-align: center; 70 | text-decoration: none; 71 | 72 | @include laptop { 73 | border-radius: px-to-rem(10); 74 | font-size: px-to-rem(25); 75 | font-weight: 700; 76 | min-width: px-to-rem(200); 77 | padding: px-to-rem(14); 78 | } 79 | } 80 | 81 | > p { 82 | color: $secondary-color; 83 | margin: 0 px-to-rem(10); 84 | padding: px-to-rem(10); 85 | 86 | @include laptop { 87 | font-size: px-to-rem(25); 88 | font-weight: 400; 89 | line-height: 29.33px; 90 | } 91 | } 92 | } 93 | } 94 | 95 | &--socials { 96 | display: hidden; 97 | max-width: fit-content; 98 | padding: px-to-rem(15); 99 | padding-left: 20px; 100 | width: fit-content; 101 | 102 | & > div { 103 | align-items: flex-end; 104 | gap: px-to-rem(20); 105 | justify-content: space-between; 106 | } 107 | 108 | @include tablet { 109 | display: block; 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/components/atoms/HighlightCard/HighlightCard.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .highlight-card { 5 | $this: &; 6 | 7 | height: px-to-rem(376); 8 | max-width: px-to-rem(408); 9 | padding: map.get($spacing, "sm"); 10 | position: relative; 11 | 12 | &__image-box { 13 | @include center; 14 | 15 | margin-top: map.get($spacing, "md"); 16 | position: relative; 17 | z-index: 1; 18 | 19 | @include margin-bottom(xl); 20 | 21 | &::after { 22 | border-radius: $br-full; 23 | content: attr(data-badge); 24 | display: block; 25 | font-size: $fs-xxl; 26 | font-weight: $fw-bold; 27 | height: px-to-rem(100); 28 | position: absolute; 29 | transform: translate(75%, -10%); 30 | width: px-to-rem(100); 31 | z-index: -1; 32 | 33 | @include center; 34 | } 35 | } 36 | 37 | &__title { 38 | font-size: $fs-lg; 39 | font-weight: $fw-bold; 40 | text-align: center; 41 | 42 | @include margin-bottom(lg); 43 | } 44 | 45 | &__description { 46 | font-size: $fs-md; 47 | font-weight: $fw-normal; 48 | line-height: 1.2; 49 | 50 | @include padding-horizontal(xs); 51 | } 52 | 53 | &__link { 54 | border-radius: $br-sm; 55 | bottom: map.get($spacing, md); 56 | font-size: $fs-xl; 57 | position: absolute; 58 | right: map.get($spacing, xl); 59 | text-decoration: none; 60 | transition: all #{300}ms; 61 | 62 | @include padding-horizontal(md); 63 | @include padding-vertical(xs); 64 | } 65 | 66 | &--primary { 67 | background-color: $highlight-card-bg; 68 | color: $highlight-card-color; 69 | 70 | #{$this}__image-box { 71 | &::after { 72 | background-color: $highlight-card-color; 73 | color: $highlight-card-bg; 74 | } 75 | } 76 | 77 | #{$this}__link { 78 | &:link, 79 | &:visited { 80 | background-color: $highlight-card-color; 81 | color: $highlight-card-bg; 82 | } 83 | 84 | &:hover, 85 | &:active { 86 | background-color: $highlight-card-link-tint; 87 | } 88 | } 89 | } 90 | 91 | &--secondary { 92 | background-color: $highlight-card-color; 93 | color: $highlight-card-secondary-color; 94 | 95 | #{$this}__image-box { 96 | &::after { 97 | background-color: $highlight-card-bg; 98 | color: $highlight-card-color; 99 | } 100 | } 101 | 102 | #{$this}__link { 103 | &:link, 104 | &:visited { 105 | background-color: $highlight-card-bg; 106 | color: $highlight-card-color; 107 | } 108 | 109 | &:hover, 110 | &:active { 111 | background-color: $highlight-card-secondary-link-shade; 112 | } 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/components/templates/AuthSection/AuthSection.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState } from "react"; 3 | import BannerImage from "@/../../public/images/banner.png"; 4 | import styles from "./AuthSection.module.scss"; 5 | import Banner from "@/components/atoms/Banner/Banner"; 6 | 7 | interface AuthSectionProps { 8 | initialMode?: "login" | "signup"; 9 | } 10 | 11 | const AuthSection: React.FC = ({ initialMode = "login" }) => { 12 | const [mode, setMode] = useState<"login" | "signup">(initialMode); 13 | 14 | const toggleMode = () => { 15 | setMode(mode === "login" ? "signup" : "login"); 16 | }; 17 | 18 | return ( 19 |
20 | 21 |
22 |
23 | {mode === "login" ? ( 24 |
25 |

Login

26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 38 |
39 | 40 |
41 | 42 | 43 |
44 | 45 | Lost your password? 46 | 47 |
48 |
49 | New user?{" "} 50 | 51 | sign up here... 52 | 53 |
54 |
55 | ) : ( 56 |
57 |

Register

58 |
59 |
60 | 61 | 62 |
63 |

64 | A link to set a new password will be sent to your email 65 | address. 66 |

67 | 68 |
69 |

70 | Already have an account?{" "} 71 | 72 | login here... 73 | 74 |

75 |
76 | )} 77 |
78 |
79 |
80 | ); 81 | }; 82 | 83 | export default AuthSection; 84 | -------------------------------------------------------------------------------- /src/components/molecules/Header/Header.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./Header.module.scss"; 2 | 3 | import BasketButton from "@/components/atoms/BasketButton"; 4 | import DeliveryOrderCard from "@/components/atoms/deliveryOrderCard"; 5 | import InfoCard from "@/components/atoms/infoCard"; 6 | import NavBar from "@/components/atoms/navbar/Navbar"; 7 | import Image from "next/image"; 8 | import Link from "next/link"; 9 | import React from "react"; 10 | import MainContainer from "../../atoms/mainContainer/MainContainer"; 11 | 12 | interface HeaderProps {} 13 | 14 | const Header: React.FC = () => { 15 | return ( 16 |
17 |
18 | 19 |
20 |
21 | 30 | } 31 | /> 32 | 41 | } 42 | /> 43 |
44 | 48 | Register 49 | 50 |
51 | 52 |
53 |
54 | 55 |
56 | 57 | Plate and with spoon and fork 64 | 65 |
66 | 75 | 76 | 80 | 84 | Login 85 | 86 |
87 |
88 | 89 |
90 |
91 | ); 92 | }; 93 | 94 | export default Header; 95 | -------------------------------------------------------------------------------- /src/components/templates/popularDishesSection/PopularDishesSection.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import styles from "./PopularDishesSection.module.scss"; 4 | import { Swiper, SwiperSlide } from "swiper/react"; 5 | import { 6 | Pagination, 7 | Navigation, 8 | Scrollbar, 9 | A11y, 10 | Autoplay, 11 | } from "swiper/modules"; 12 | import "swiper/css"; 13 | import "swiper/css/pagination"; 14 | import PopularDishCard from "@/components/atoms/PopularDishCard/PopularDishCard"; 15 | 16 | const PopularDishesSection = () => { 17 | return ( 18 |
19 |

Food Items

20 |

21 | Popular Dishes 22 |

23 | console.log("slide change")} 28 | onSwiper={(swiper) => console.log(swiper)} 29 | loop 30 | breakpoints={{ 31 | 0: { 32 | slidesPerView: 1.1, 33 | spaceBetween: 10, 34 | }, 35 | 321: { 36 | slidesPerView: 1.5, 37 | spaceBetween: 10, 38 | }, 39 | 640: { 40 | slidesPerView: 3, 41 | spaceBetween: 15, 42 | }, 43 | 1024: { 44 | slidesPerView: 5, 45 | spaceBetween: 30, 46 | }, 47 | }} 48 | autoplay={{ 49 | delay: 3000, 50 | disableOnInteraction: false, 51 | }} 52 | scrollbar={{ draggable: false }} 53 | > 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
92 | ); 93 | }; 94 | 95 | export default PopularDishesSection; 96 | -------------------------------------------------------------------------------- /src/components/molecules/RichAndHealthy/RichAndHealthy.module.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @import "../../../foundations/sass/all"; 3 | 4 | .rich-and-healthy { 5 | color: $rich-and-healthy-color; 6 | margin: 16px; 7 | 8 | &__image-1 { 9 | border-radius: $br-md; 10 | height: 100%; 11 | width: 50%; 12 | 13 | @include laptop { 14 | height: px-to-rem(600); 15 | width: px-to-rem(361); 16 | } 17 | } 18 | 19 | &__subheading { 20 | @include margin-bottom("sm"); // Move this to the top 21 | 22 | font-size: $fs-md; 23 | font-weight: $fw-semibold; 24 | text-align: center; 25 | 26 | @include laptop { 27 | font-size: $fs-lg; 28 | font-weight: $fw-bold; 29 | } 30 | } 31 | 32 | &__inner-box { 33 | display: flex; 34 | gap: 10px; 35 | 36 | @include laptop { 37 | gap: map.get($spacing, "lg"); 38 | } 39 | } 40 | 41 | &__heading { 42 | color: $rich-and-healthy-heading-color; 43 | font-size: $fs-lg; 44 | font-weight: $fw-semibold; 45 | margin-bottom: 10px; 46 | max-width: px-to-rem(510); 47 | 48 | @include laptop { 49 | @include margin-bottom("lg"); // Move this to the top of the laptop block 50 | 51 | font-size: $fs-xxl; 52 | font-weight: $fw-bold; 53 | } 54 | } 55 | 56 | &__text { 57 | @include margin-bottom("xs"); // Move this to the top 58 | 59 | font-size: $fs-sm; 60 | 61 | @include laptop { 62 | font-size: $fs-xl; 63 | line-height: 1.4; 64 | max-width: px-to-rem(750); 65 | } 66 | } 67 | 68 | &__feature-and-contact { 69 | display: flex; 70 | gap: 1px; 71 | 72 | @include laptop { 73 | gap: map.get($spacing, "sm"); 74 | } 75 | } 76 | 77 | &__features-wrapper { 78 | display: flex; 79 | flex-direction: column; 80 | gap: 30px; 81 | 82 | @include laptop { 83 | @include padding-vertical( 84 | "lg" 85 | ); // Move this to the top of the laptop block 86 | 87 | gap: 109px; 88 | } 89 | } 90 | 91 | &__features { 92 | display: flex; 93 | flex-direction: column; 94 | gap: 10px; 95 | 96 | @include laptop { 97 | gap: map.get($spacing, "lg"); 98 | } 99 | } 100 | 101 | &__feature-item { 102 | display: flex; 103 | gap: map.get($spacing, "xxs"); 104 | 105 | &__text { 106 | font-size: $fs-md; 107 | 108 | @include laptop { 109 | font-size: $fs-xl; 110 | } 111 | } 112 | } 113 | 114 | &__link-wrapper { 115 | text-align: center; 116 | } 117 | 118 | &__image-2 { 119 | display: none; 120 | 121 | @include laptop { 122 | display: block; 123 | } 124 | } 125 | 126 | &__link:link, 127 | &__link:visited { 128 | background-color: $rich-and-healthy-link-bg; 129 | border-radius: $br-md; 130 | color: $rich-and-healthy-link-color; 131 | font-size: $fs-lg; 132 | padding: 8px 12px; 133 | text-decoration: none; 134 | text-transform: uppercase; 135 | 136 | @include laptop { 137 | @include padding-horizontal("xl"); // Add quotes around xl 138 | @include padding-vertical("xs"); // Add quotes around xs 139 | 140 | font-size: $fs-xxl; 141 | font-weight: $fw-bold; 142 | } 143 | 144 | &:hover, 145 | &:active { 146 | background-color: $header-bottom-link-shade-color; 147 | } 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /src/components/templates/AuthSection/AuthSection.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../../foundations/sass/all"; 2 | 3 | @mixin form-input { 4 | border: 1px solid $auth-section-color; 5 | border-radius: 4px; 6 | overflow: hidden; 7 | padding: 0.5rem 0.75rem; 8 | width: 90%; 9 | 10 | &:focus { 11 | border-color: $auth-section-secondary-color; 12 | box-shadow: 0 0 0 3px $header-shadow-color; 13 | outline: none; 14 | } 15 | } 16 | 17 | @mixin button { 18 | background-color: $auth-section-color; 19 | border: none; 20 | border-radius: 4px; 21 | color: $auth-bg-color; 22 | cursor: pointer; 23 | font-size: 1.25rem; 24 | padding: 1rem 2rem; 25 | 26 | &:hover { 27 | background-color: $auth-card-secondary-link-shade; 28 | } 29 | } 30 | 31 | .container { 32 | display: flex; 33 | flex-direction: column; 34 | min-height: 100%; 35 | } 36 | 37 | .content { 38 | background-color: $auth-bg-color; 39 | flex-grow: 1; 40 | padding: 1.5rem; 41 | } 42 | 43 | .forms { 44 | align-items: center; 45 | display: flex; 46 | justify-content: center; 47 | margin: 0 auto; 48 | max-width: 72rem; 49 | min-height: 55%; 50 | } 51 | 52 | %form-base { 53 | background-color: $header-bottom-bg-color; 54 | border-radius: 8px; 55 | box-shadow: 0 1px 2px 0 $secondary-color; 56 | max-width: 400px; 57 | padding: 2rem; 58 | text-align: center; 59 | width: 100%; 60 | 61 | h2 { 62 | font-size: 35px; 63 | font-weight: bold; 64 | margin-bottom: 1rem; 65 | } 66 | 67 | form { 68 | display: flex; 69 | flex-direction: column; 70 | gap: 1rem; 71 | } 72 | 73 | button { 74 | @include button; 75 | } 76 | } 77 | 78 | .login-form { 79 | @extend %form-base; 80 | 81 | h2 { 82 | color: $primary-color; 83 | } 84 | } 85 | 86 | .register-form { 87 | @extend %form-base; 88 | 89 | h2 { 90 | color: $header-top-bg-color; 91 | } 92 | 93 | p { 94 | text-align: center; 95 | } 96 | } 97 | 98 | .form-group { 99 | margin-bottom: 1rem; 100 | 101 | label { 102 | display: block; 103 | font-size: 18px; 104 | margin-bottom: 0.5rem; 105 | margin-left: 0.5rem; 106 | text-align: left; 107 | } 108 | 109 | input { 110 | @include form-input; 111 | } 112 | } 113 | 114 | .login-form .form-group label { 115 | color: $primary-color; 116 | } 117 | 118 | .register-form .form-group label { 119 | color: $header-top-bg-color; 120 | } 121 | 122 | .remember-me { 123 | align-items: left; 124 | display: flex; 125 | font-size: 16px; 126 | margin-top: 0.5rem; 127 | 128 | input { 129 | margin-right: 0.5rem; 130 | } 131 | } 132 | 133 | .lost-password { 134 | color: $auth-link-color; 135 | display: inline-block; 136 | margin-top: 0.5rem; 137 | 138 | &:hover { 139 | text-decoration: underline; 140 | } 141 | } 142 | 143 | %user-switch { 144 | margin-top: 1rem; 145 | 146 | a { 147 | text-decoration: none; 148 | 149 | &:hover { 150 | text-decoration: underline; 151 | } 152 | } 153 | } 154 | 155 | .new-user { 156 | @extend %user-switch; 157 | 158 | color: $auth-section-secondary-color; 159 | 160 | a { 161 | color: $header-bottom-link-shade-color; 162 | } 163 | } 164 | 165 | .old-user { 166 | @extend %user-switch; 167 | 168 | color: $secondary-color; 169 | 170 | a { 171 | color: $header-bottom-link-shade-color; 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /src/components/molecules/RichAndHealthy/RichAndHealthy.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./RichAndHealthy.module.scss"; 3 | import Image from "next/image"; 4 | import Link from "next/link"; 5 | 6 | const RichAndHealthy: React.FC = () => { 7 | return ( 8 |
9 |

RICH & HEALTHY

10 |
11 | a chef cooking meal 19 |
20 |

21 | Highest quality artisangrains, proteins & seasonal ingredients 22 |

23 |

24 | Righteous indignation and dislike men who are so beguiled and 25 | demoralized by the charms of pleasure of the moment, so blinded by 26 | desires, that they cannot foresee. 27 |

28 |
29 |
30 |
    31 |
  • 32 | red star 38 |

    39 | Simple and easy to distinguish 40 |

    41 |
    • 42 |
  • 43 | red star 49 |

    50 | Pleasure of the momentblinded desire 51 |

    52 |
    • 53 |
  • 54 | red star 60 |

    61 | Able to do what we like best 62 |

    63 |
    • 64 |
65 |
66 | 67 | Read More 68 | 69 |
70 |
71 | someone eating meal 78 |
79 |
80 |
81 |
82 | ); 83 | }; 84 | 85 | export default RichAndHealthy; 86 | -------------------------------------------------------------------------------- /src/app/items/mockDate.ts: -------------------------------------------------------------------------------- 1 | export const mockData: { 2 | id: number; 3 | image: string; 4 | dishname: string; 5 | price: number; 6 | description: string; 7 | discountOne: string; 8 | discountTwo: string; 9 | }[] = [ 10 | { 11 | id: 1, 12 | image: "/images/pizza.png", 13 | dishname: "Chicken Supreme Pizza", 14 | price: 150, 15 | description: 16 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 17 | discountOne: "", 18 | discountTwo: "", 19 | }, 20 | { 21 | id: 2, 22 | image: "/images/pizza.png", 23 | dishname: "Hamburger Burger with Beef", 24 | price: 150, 25 | description: 26 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 27 | discountOne: "", 28 | discountTwo: "", 29 | }, 30 | { 31 | id: 3, 32 | image: "/images/pizza.png", 33 | dishname: "Belgium waffles with strawberries", 34 | price: 150, 35 | description: 36 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 37 | discountOne: "", 38 | discountTwo: "", 39 | }, 40 | { 41 | id: 4, 42 | image: "", 43 | dishname: "", 44 | price: 150, 45 | description: "", 46 | discountOne: "/images/discountOne.png", 47 | discountTwo: "", 48 | }, 49 | { 50 | id: 5, 51 | image: "", 52 | dishname: "", 53 | price: 150, 54 | description: "", 55 | discountOne: "", 56 | discountTwo: "/images/discountTwo.png", 57 | }, 58 | { 59 | id: 6, 60 | image: "/images/pizza.png", 61 | dishname: "Mutton or lamb biriyani", 62 | price: 150, 63 | description: 64 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 65 | discountOne: "", 66 | discountTwo: "", 67 | }, 68 | { 69 | id: 7, 70 | image: "/images/pizza.png", 71 | dishname: "Spicy fried tubtim fish salad", 72 | price: 150, 73 | description: 74 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 75 | discountOne: "", 76 | discountTwo: "", 77 | }, 78 | { 79 | id: 8, 80 | image: "/images/pizza.png", 81 | dishname: "Fresh cola drink with green lime", 82 | price: 150, 83 | description: 84 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 85 | discountOne: "", 86 | discountTwo: "", 87 | }, 88 | { 89 | id: 9, 90 | image: "/images/pizza.png", 91 | dishname: "Ice cream cone", 92 | price: 150, 93 | description: 94 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 95 | discountOne: "", 96 | discountTwo: "", 97 | }, 98 | { 99 | id: 10, 100 | image: "/images/pizza.png", 101 | dishname: "Chocolate ice cream", 102 | price: 150, 103 | description: 104 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 105 | discountOne: "", 106 | discountTwo: "", 107 | }, 108 | { 109 | id: 11, 110 | image: "/images/pizza.png", 111 | dishname: "Chocolate topping for ice cream cups", 112 | price: 150, 113 | description: 114 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 115 | discountOne: "", 116 | discountTwo: "", 117 | }, 118 | { 119 | id: 12, 120 | image: "/images/pizza.png", 121 | dishname: "Healthy breakfast", 122 | price: 150, 123 | description: 124 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 125 | discountOne: "", 126 | discountTwo: "", 127 | }, 128 | { 129 | id: 13, 130 | image: "/images/pizza.png", 131 | dishname: "Breakfast with coffee and fresh croissants", 132 | price: 150, 133 | description: 134 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 135 | discountOne: "", 136 | discountTwo: "", 137 | }, 138 | { 139 | id: 14, 140 | image: "/images/pizza.png", 141 | dishname: "Ried eggs, sausages, zucchini", 142 | price: 150, 143 | description: 144 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 145 | discountOne: "", 146 | discountTwo: "", 147 | }, 148 | { 149 | id: 15, 150 | image: "/images/pizza.png", 151 | dishname: "Salad, fried eggs and pastry", 152 | price: 150, 153 | description: 154 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 155 | discountOne: "", 156 | discountTwo: "", 157 | }, 158 | ]; 159 | -------------------------------------------------------------------------------- /src/components/pages/ItemsPage/ItemsPage.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/nextjs"; 2 | import ItemsPage from "./ItemsPage"; 3 | 4 | const mockData = [ 5 | { 6 | id: 1, 7 | image: "/images/pizza.png", 8 | dishname: "Chicken Supreme Pizza", 9 | price: "150", 10 | description: 11 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 12 | discountOne: "", 13 | discountTwo: "", 14 | }, 15 | { 16 | id: 2, 17 | image: "/images/pizza.png", 18 | dishname: "Hamburger Burger with Beef", 19 | price: 150, 20 | description: 21 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 22 | discountOne: "", 23 | discountTwo: "", 24 | }, 25 | { 26 | id: 3, 27 | image: "/images/pizza.png", 28 | dishname: "Belgium waffles with strawberries", 29 | price: 150, 30 | description: 31 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 32 | discountOne: "", 33 | discountTwo: "", 34 | }, 35 | { 36 | id: 4, 37 | image: "", 38 | dishname: "", 39 | price: 150, 40 | description: "", 41 | discountOne: "/images/discountOne.png", 42 | discountTwo: "", 43 | }, 44 | { 45 | id: 5, 46 | image: "", 47 | dishname: "", 48 | price: "150", 49 | description: "", 50 | discountOne: "", 51 | discountTwo: "/images/discountTwo.png", 52 | }, 53 | { 54 | id: 6, 55 | image: "/images/pizza.png", 56 | dishname: "Mutton or lamb biriyani", 57 | price: "150", 58 | description: 59 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 60 | discountOne: "", 61 | discountTwo: "", 62 | }, 63 | { 64 | id: 7, 65 | image: "/images/pizza.png", 66 | dishname: "Spicy fried tubtim fish salad", 67 | price: "150", 68 | description: 69 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 70 | discountOne: "", 71 | discountTwo: "", 72 | }, 73 | { 74 | id: 8, 75 | image: "/images/pizza.png", 76 | dishname: "Fresh cola drink with green lime", 77 | price: "150", 78 | description: 79 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 80 | discountOne: "", 81 | discountTwo: "", 82 | }, 83 | { 84 | id: 9, 85 | image: "/images/pizza.png", 86 | dishname: "Ice cream cone", 87 | price: "150", 88 | description: 89 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 90 | discountOne: "", 91 | discountTwo: "", 92 | }, 93 | { 94 | id: 10, 95 | image: "/images/pizza.png", 96 | dishname: "Chocolate ice cream", 97 | price: "150", 98 | description: 99 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 100 | discountOne: "", 101 | discountTwo: "", 102 | }, 103 | { 104 | id: 11, 105 | image: "/images/pizza.png", 106 | dishname: "Chocolate topping for ice cream cups", 107 | price: "150", 108 | description: 109 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 110 | discountOne: "", 111 | discountTwo: "", 112 | }, 113 | { 114 | id: 12, 115 | image: "/images/pizza.png", 116 | dishname: "Healthy breakfast", 117 | price: "150", 118 | description: 119 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 120 | discountOne: "", 121 | discountTwo: "", 122 | }, 123 | { 124 | id: 13, 125 | image: "/images/pizza.png", 126 | dishname: "Breakfast with coffee and fresh croissants", 127 | price: "150", 128 | description: 129 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 130 | discountOne: "", 131 | discountTwo: "", 132 | }, 133 | { 134 | id: 14, 135 | image: "/images/pizza.png", 136 | dishname: "Ried eggs, sausages, zucchini", 137 | price: "150", 138 | description: 139 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 140 | discountOne: "", 141 | discountTwo: "", 142 | }, 143 | { 144 | id: 15, 145 | image: "/images/pizza.png", 146 | dishname: "Salad, fried eggs and pastry", 147 | price: "150", 148 | description: 149 | "Topped with chicken, onion, capsicum, black olive & Green chilli", 150 | discountOne: "", 151 | discountTwo: "", 152 | }, 153 | ]; 154 | 155 | const itemsPage: Meta = { 156 | title: "Pages/ItemsPage", 157 | component: ItemsPage, 158 | tags: ["autodocs"], 159 | }; 160 | 161 | export const Default = { 162 | args: { 163 | items: mockData, 164 | }, 165 | }; 166 | 167 | export default itemsPage; 168 | -------------------------------------------------------------------------------- /src/foundations/sass/_variables.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | /* ============================================= 4 | #Variables 5 | ============================================= */ 6 | 7 | /** 8 | * TABLE OF CONTENTS 9 | * 10 | * COLORS 11 | * Brand colors...................These are the main brand colors. They will be used the most 12 | * Neutral colors.................White and black, gray scale, secondary colors. 13 | * Utility colors.................Other colors to represent states: info, warning, success, etc. 14 | * 15 | * TYPOGRAPHY 16 | * Font families..................The fonts used in the design system. 17 | * Font weights...................Font weights 18 | * Sizes..........................Font sizing for body text, paragraphs, inputs 19 | * Heading sizes..................Font sizing for page headings 20 | * 21 | * BREAKPOINTS 22 | * Breakpoints....................Global responsive breakpoints definitions. 23 | * 24 | * SPACING 25 | * Spacing........................Global fixed set of spacing variables 26 | */ 27 | 28 | /* ============================================= 29 | = Colors = 30 | ============================================= */ 31 | 32 | /* Brand Colors */ 33 | 34 | $primary-color: #c33; 35 | $secondary-color: #2a435d; 36 | 37 | /* Neutral Colors */ 38 | 39 | $white-floral: #fff8ee; 40 | 41 | /* Utility colors */ 42 | 43 | $dark-green: #48bb78; 44 | $green-neon: #4bff3c; 45 | $white: #fff; 46 | 47 | /* Brand colors shades */ 48 | 49 | $primary-color-shade: #b82e2e; 50 | 51 | /* Shadow colors */ 52 | 53 | $shadow-color: #0003; 54 | 55 | /* ===== End of Colors ====== */ 56 | 57 | /* ============================================= 58 | = Typography = 59 | ============================================= */ 60 | 61 | /** 62 | * 63 | * 1) The playfair font. We'll use this for headings mostly. 64 | * https://fonts.google.com/specimen/Playfair+Display 65 | * 66 | * 2) The raleway font. We'll use this for the body text. 67 | * https://fonts.google.com/specimen/Raleway 68 | */ 69 | 70 | /* Font families */ 71 | 72 | $playfair: "Playfair Display", serif; /* 1 */ 73 | $raleway: "Raleway", "HelveticaNeue", "Helvetica", sans-serif; /* 2 */ 74 | 75 | /* Font sizes */ 76 | $fs-xs: 0.75rem; // 12px 77 | $fs-sm: 1rem; // 16px 78 | $fs-md: 1.125rem; // 18px 79 | $fs-lg: 1.25rem; // 20px 80 | $fs-xl: 1.5625rem; // 25px 81 | $fs-xxl: 2.1875rem; // 35px 82 | $fs-xxxl: 3.125rem; // 50px 83 | 84 | $fs: ( 85 | xs: 0.75rem, 86 | // 12px 87 | sm: 1rem, 88 | // 16px 89 | md: 1.125rem, 90 | // 18px 91 | lg: 1.25rem, 92 | // 20px 93 | xl: 1.5625rem, 94 | // 25px 95 | xxl: 2.1875rem, 96 | // 35px 97 | xxxl: 3.125rem, 98 | // 50px 99 | ); 100 | 101 | /* Heading font sizes */ 102 | $h-1: 3.125rem; // 50px 103 | $h-2: 2.1875rem; // 35px 104 | $h-3: 1.5625rem; // 25px 105 | $h-4: 1.25rem; // 20px 106 | $h-5: 1.125rem; // 18px 107 | $h-6: 1rem; // 16px 108 | 109 | /* Font weights */ 110 | $fw-light: 300; 111 | $fw-normal: 400; 112 | $fw-medium: 500; 113 | $fw-semibold: 600; 114 | $fw-bold: 700; 115 | $fw-extrabold: 800; 116 | $fw-black: 900; 117 | 118 | /* ===== End of Typography ====== */ 119 | 120 | /* ============================================= 121 | = Breakpoints = 122 | ============================================= */ 123 | 124 | $breakpoints: ( 125 | md: 48rem, 126 | // 768px 127 | lg: 64rem, 128 | // 1024px 129 | xl: 120rem, 130 | // 1920px 131 | ); 132 | 133 | /* ===== End of Breakpoints ====== */ 134 | 135 | /* ============================================= 136 | = Spacing = 137 | ============================================= */ 138 | 139 | $spacing: ( 140 | xxxs: 0.25rem, 141 | // 4px 142 | xxs: 0.5rem, 143 | // 8px 144 | xs: 0.75rem, 145 | // 12px 146 | sm: 1rem, 147 | // 16px 148 | md: 1.5rem, 149 | // 24px 150 | lg: 2rem, 151 | // 32px 152 | xl: 3rem, 153 | // 48px 154 | xxl: 4.5rem, 155 | // 72px 156 | xxxl: 6rem, 157 | // 96px 158 | ) !default; 159 | $spacing-xxxs: 0.25rem; // 4px 160 | $spacing-xxs: 0.5rem; // 8px 161 | $spacing-xs: 0.75rem; // 12px 162 | $spacing-sm: 1rem; // 16px 163 | $spacing-md: 1.5rem; // 24px 164 | $spacing-lg: 2rem; // 32px 165 | $spacing-xl: 3rem; // 48px 166 | $spacing-xxl: 4.5rem; // 72px 167 | $spacing-xxxl: 6rem; // 96px 168 | 169 | @function px-to-rem($px-value) { 170 | // Change 'unit' to 'math.unit' and use math.div() 171 | $unitless-value: if( 172 | math.unit($px-value) == "px", 173 | math.div($px-value, 1px), 174 | $px-value 175 | ); 176 | 177 | @return math.div($unitless-value, 16) * 1rem; 178 | } 179 | 180 | /* ===== End of Spacing ====== */ 181 | 182 | /* Border radius values */ 183 | $br-sm: 10px; 184 | $br-md: 20px; 185 | $br-lg: 25px; 186 | $br-full: 9999px; 187 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🍽️ Restaurant App 2 | 3 | Welcome to the **Restaurant App** project! This application serves as a dynamic learning platform aimed at helping developers master modern web technologies such as **React**, **Sass**, **TypeScript**, and more. 4 | 5 | ## 📚 Purpose 6 | 7 | The primary goal of this project is **educational**. It provides a practical sandbox where developers can experiment with real-world technologies and methodologies. Whether you’re new to web development or looking to sharpen your skills, this project is an excellent place to start. 8 | 9 | ## 🚀 Features 10 | 11 | This app incorporates cutting-edge development practices and design systems, including: 12 | 13 | - 🏗️ [Atomic Design](https://atomicdesign.bradfrost.com/chapter-2/): Create components that scale. 14 | - 🎨 [Sass](https://sass-lang.com/): Write maintainable and flexible stylesheets. 15 | - 🔒 [TypeScript](https://www.typescriptlang.org/): Static typing for robust code. 16 | - ⚡ [Next.js](https://nextjs.org/docs/getting-started/project-structure): Server-side rendering for optimized web apps. 17 | - ✅ [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) & [Commitizen](https://www.npmjs.com/package/commitizen): Maintain clean and standard commit messages. 18 | - 📖 [Storybook](https://storybook.js.org/): Visual development and testing of UI components. 19 | - 🛠️ [BEM Methodology](https://en.bem.info/methodology/css/#html-for-css): Organize your CSS for scalability. 20 | - 🎯 CSS Modules: Isolate CSS to avoid clashes. 21 | - 🧪 [Jest](https://jestjs.io/): Efficient unit testing for JavaScript code. 22 | - 🔍 [Cypress](https://www.cypress.io/): End-to-end testing made simple. 23 | - 🏎️ [User-Centric Performance Metrics](https://web.dev/articles/user-centric-performance-metrics): Improve your app’s user experience. 24 | 25 | ## 💡 Explore the UIX 26 | 27 | Check out the interactive [Figma design]() for a visual preview of what we’re building! 28 | 29 | ## 🛠️ Setup 30 | 31 | Follow these steps to set up the project locally and start exploring: 32 | 33 | 1. Clone the repository: 34 | 35 | ```sh 36 | git clone https://github.com/bruno-keiko/Restaurant-app.git 37 | 38 | ``` 39 | 40 | 2. Navigate to the project directory: 41 | 42 | ``` 43 | cd restaurant-app 44 | 45 | ``` 46 | 47 | 3. Install the dependencies: 48 | ``` 49 | npm install 50 | ``` 51 | 4. Start the storybook for component exploration: 52 | 53 | ``` 54 | npm run storybook 55 | 56 | ``` 57 | 58 | 5. Run the development server: 59 | ``` 60 | npm run dev 61 | ``` 62 | 63 | ## 🎮 Usage 64 | 65 | This project is your playground! Experiment with the codebase, modify components, and try out new features. The app is intended to help you practice and refine your web development skills, so feel free to explore and extend the functionalities. 66 | 67 | Here are a few suggestions to get started: 68 | 69 | 1. **Modify Components**: Customize existing components or add new ones to better understand how component architecture works. 70 | 2. **Experiment with Styling**: Use Sass or CSS Modules to experiment with different styles and see the impact on the app’s design. 71 | 3. **Add New Features**: Implement new features such as a shopping cart, user authentication, or a menu page to challenge yourself. 72 | 4. **Testing**: Write unit tests using Jest and end-to-end tests with Cypress to ensure your code is reliable and bug-free. 73 | 74 | Don't hesitate to break things and learn from the process—that’s the essence of this project! 75 | 76 | ## 🤝 Contribution 77 | 78 | We welcome contributions from developers of all skill levels! Whether you're fixing a bug, adding new features, or improving documentation, your help is appreciated. 79 | 80 | To contribute: 81 | 82 | 1. Fork the repository. 83 | 2. Create a new branch for your feature or fix: 84 | ```sh 85 | git checkout -b feature-or-fix-name 86 | ``` 87 | 3. Make your changes and commit them using Conventional Commits: 88 | ``` 89 | git commit -m "feat: describe your changes" 90 | ``` 91 | 4. Push your branch: 92 | ``` 93 | git push origin feature-or-fix-name 94 | ``` 95 | 5. Open a pull request and describe the changes you made. 96 | 97 | Please refer to the [CONTRIBUTING.md](CONTRIBUTING.md) file for more details on how to get started. 98 | 99 | --- 100 | 101 | ## Our Valuable Contributors ❤️✨ 102 | 103 | This project exists thanks to all the amazing people who have contributed! Check out the [Contributors Graph](https://github.com/bruno-keiko/Restaurant-app/graphs/contributors) to see everyone who has helped out. 104 | 105 | [![Contributors](https://contrib.rocks/image?repo=bruno-keiko/Restaurant-app)](https://github.com/bruno-keiko/Restaurant-app/graphs/contributors) 106 | 107 | --- 108 | 109 | ## 📜 License 110 | 111 | This project is licensed under the MIT License, meaning you’re free to use, modify, and distribute this software as long as the original license is included. For more information, please see the [LICENSE](LICENSE) file. 112 | --------------------------------------------------------------------------------