Receitas

src/App.js

@@ -10,6 +10,9 @@ import Perfil from "./components/Perfil";
 import Login from "./components/Login"
 import Cadastro from "./components/Cadastro"
 import Contato from "./components/Contato"
+import Receita1 from "./components/Receita1"
+import Receita2 from "./components/Receita2"
+import Receita3 from "./components/Receita3"
 
 
 function App() {
@@ -20,6 +23,9 @@ function App() {
               <Route path='/perfil' element={[<Navbar/>,<NU/>]}/>
               <Route path='/login' element={[<Navbar/>,<Login/>]}/>
               <Route path='/cadastro' element={[<Navbar/>,<Cadastro/>]}/>
+              <Route path='/receita1' element={[<Navbar/>,<Receita1/>, <Footer/>]}/>
+              <Route path='/receita2' element={[<Navbar/>,<Receita2/>, <Footer/>]}/>
+              <Route path='/receita3' element={[<Navbar/>,<Receita3/>, <Footer/>]}/>
           </Routes>
       </div>
 

src/components/NU.js

@@ -20,17 +20,17 @@ function NU(){
                 <div className={styles.nuContainer}>
                     <p className={styles.planos} style={{cursor:"auto"}}>{t("NU.mensal")}</p>
                     <img src={plan1} className={styles.nuImage} alt="Opção 3"/>
-                    <button className={styles.nuButton}>Comprar</button>
+                    <button className={styles.nuButton}>{t("NU.compra")}</button>
                 </div>
                 <div className={styles.nuContainer}>
                     <p className={styles.planos} style={{cursor:"auto"}}>{t("NU.trimestral")}</p>
                     <img src={plan2} className={styles.nuImage} alt="Opção 3"/>
-                    <button className={styles.nuButton}>Comprar</button>
+                    <button className={styles.nuButton}>{t("NU.compra")}</button>
                 </div>
                 <div className={styles.nuContainer}>
                     <p className={styles.planos} style={{cursor:"auto"}}>{t("NU.anual")}</p>
                     <img src={plan3} className={styles.nuImage} alt="Opção 3"/>
-                    <button className={styles.nuButton}>Comprar</button>
+                    <button className={styles.nuButton}>{t("NU.compra")}</button>
                 </div>
             </div>
         </section>

src/components/Navbar.js

@@ -105,16 +105,16 @@ function Navbar(){
                         <img src={uk} className={styles.languageButton} onClick={() => handleChangeLanguage("en")}/>
                     </div>
                     <li className={styles.navItem}>
-                        <Link to ="home" spy={true} smooth={true} offset={0} duration={1000} onClick={closeMenu}>{t("navBar.home")}</Link>
+                        <LinkRouter to ="/" spy={true} smooth={true} offset={0} duration={1000} onClick={closeMenu}>{t("navBar.home")}</LinkRouter>
                     </li>
                     {isHome &&  <li className={styles.navItem}>
                         <Link to ="UR" spy={true} smooth={true} offset={0} duration={1000} onClick={closeMenu}>{t("navBar.UR")}</Link>
                     </li>}
                     {isHome &&  <li className={styles.navItem}>
-                        <Link to ="NU" spy={true} smooth={true} offset={0} duration={1000} onClick={closeMenu}>{t("navBar.NU")}</Link>
+                        <Link to ="Contato" spy={true} smooth={true} offset={0} duration={1000} onClick={closeMenu}>{t("navBar.Contato")}</Link>
                     </li>}
                     {isHome &&  <li className={styles.navItem}>
-                        <Link to ="perfil" spy={true} smooth={true} offset={0} duration={1000} onClick={closeMenu}>{t("navBar.perfil")}</Link>
+                        <LinkRouter to ="/perfil" spy={true} smooth={true} offset={0} duration={1000} onClick={closeMenu}>{t("navBar.perfil")}</LinkRouter>
                     </li>}
                 </ul>
             </nav>

src/components/Receita1.js

@@ -0,0 +1,55 @@
+import styles from './Receita1.module.css'
+import {useTranslation} from "react-i18next"
+import {Link} from 'react-scroll'
+import diamond from '../assets/img/diamond.png'
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faAngleDown} from "@fortawesome/free-solid-svg-icons";
+import {useEffect, useState} from "react";
+import gray from "../assets/img/gray.png";
+import poivre from "../assets/img/poivre.png";
+
+
+function Receita1(){
+    const [t, i18n] = useTranslation("global");
+
+    return (
+        <section id='Receita1' className={styles.ur}>
+            <h1 className={styles.autorTitle} style={{cursor:"auto"}}>{t("Receita1.autor")}</h1>
+            <h1 className={styles.pageTitle} style={{cursor:"auto"}}>{t("Receita1.title")}</h1>
+            <iframe width="50%" height="500" src="https://www.youtube.com/embed/uEO6cj3UoJE?si=npF4PE8iYYcnMVMF"
+                    title="YouTube video player" frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerPolicy="strict-origin-when-cross-origin" allowFullScreen>
+            </iframe>
+            <div className={styles.container}>
+                <div className={styles.ingredienteContainer}>
+                    <h1 className={styles.pageTitle} style={{cursor:"auto"}}>{t("Receita1.ingredientes")}</h1>
+                    <p>3 filés de aprox. 220g de bife ancho<br /><br />
+                        1 ½ colher de sopa de pimenta do reino preta em grãos<br /><br />
+                        2 colheres de sopa de manteiga<br /><br />
+                        1 colher de sopa de azeite de oliva<br /><br />
+                        sal marinho<br /><br />
+                        ⅓ de xícara de chá de conhaque<br /><br />
+                        1 xícara de chá de creme de leite fresco<br /><br />
+                        1 colher de café de molho shoyu (opcional)<br /><br />
+                        1 colher de café de alcaparras picadas (opcional)
+                    </p>
+                </div>
+                <div className={styles.modoPrepContainer}>
+                    <h1 className={styles.pageTitle} style={{cursor:"auto"}}>{t("Receita1.modoPrep")}</h1>
+                    <p>1. Moa grosseiramente os grãos de pimenta.<br /><br />
+                        2. Aqueça uma frigideira de paredes altas.<br /><br />
+                        3. Tempere os filés com sal marinho e em seguida com bastante pimenta moída dos dois lados.<br /><br />
+                        4. Coloque 1 colher de sopa de manteiga e o azeite na frigideira já quente.<br /><br />
+                        5. Cozinhe os filés deixando dourar de um lado, sem mexer, regando com a gordura quente da própria frigideira.Vire e faça o mesmo do outro lado.<br /><br />
+                        6. Retire os filés e descarte a gordura da frigideira. Coloque mais manteiga e volte os filés. Acrescente o conhaque e deixe flambar.<br /><br />
+                        7. Transfira os filés para um prato e acrescente o creme de leite, as alcaparras e o shoyu na mesma frigideira.<br /><br />
+                        8. Deixe ferver por 1 minuto, desligue o fogo e volte com os filés.<br /><br />
+                        9. Deixe a carne descansar no molho por alguns minutos.</p>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default Receita1

src/components/Receita1.module.css

@@ -0,0 +1,218 @@
+.ur{
+    background: #282829;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    top:0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+}
+
+p{
+    color: white;
+}
+
+.autorTitle{
+    padding-top: 30px;
+    font-size: 7vh;
+    color: #E4C576;
+    font-weight: 50;
+    margin-bottom: 10px;
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+
+}
+
+.pageTitle{
+    padding-top: 5px;
+    font-size: 4vh;
+    color: #E4C576;
+    font-weight: 50;
+    margin-bottom: 30px;
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+
+}
+
+.pageTitleActive{
+    padding-top: 15px;
+    font-size: 5.2vh;
+    color: #E4C576;
+    font-weight: 100;
+    margin-bottom: 30px;
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    border-bottom: 2px solid #E4C576;
+}
+
+.pageTitle:hover{
+    cursor: pointer;
+}
+
+.pageTitleActive:hover{
+    cursor: pointer;
+}
+
+.pageDescription{
+    padding-bottom: 70px;
+    text-align: center;
+    font-size: 1.25em;
+    color: #A6A6A6;
+    max-width: 70%;
+    margin: 0 auto;
+    font-weight: 300;
+}
+
+.icon{
+    padding-top: 70px;
+    width: 4vh;
+    height: auto;
+}
+
+.container{
+    margin-top: 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 90%;
+}
+
+.ingredienteContainer{
+    margin-top: 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+    width: 70%;
+}
+
+.modoPrepContainer{
+    margin-top: 60px;
+    margin-bottom: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+    width: 70%;
+}
+
+.urContainer{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-left: 30px;
+    margin-right: 30px;
+}
+
+.urImage{
+    width:90%;
+    height:350px;
+    margin-bottom: 20px;
+}
+
+
+.item{
+    min-width: 33%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
+h2{
+    padding-top: 30px;
+    text-align: center;
+    font-weight: 300;
+    color: #A6A6A6;
+    font-size: 1.25em;
+}
+
+h3{
+    text-align: center;
+    font-weight: 300;
+    color: #A6A6A6;
+    font-size: 1em;
+    margin-bottom: 30px;
+}
+
+.containerArrowDown{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    width: 50px;
+    margin-top: 85vh;
+}
+.containerArrowDown:hover{
+    cursor: pointer;
+}
+.arrowDown{
+    color: #fff;
+    position: absolute;
+    animation: move 2.1s infinite ease-in-out;
+}
+
+.pageTopic{
+    display:none;
+}
+
+.description{
+    margin-top: 100px;
+    font-size:1.5em;
+    display: none;
+}
+
+.descriptionActive{
+    margin-top: 100px;
+    font-size:1.5em;
+}
+
+@media screen and (max-width:1200px) {
+
+    .pageTopic{
+        display:flex;
+    }
+
+    .pageTitleActive{
+        border-bottom: none;
+    }
+
+    .description{
+        display:none;
+    }
+    .descriptionActive{
+        display:none;
+    }
+
+    .container{
+        flex-direction: column;
+        width: 70%;
+        align-items: center;
+    }
+    .item{
+        margin-top: 70px;
+        min-width: 100%;
+    }
+    .containerArrowDown{
+        display: none;
+    }
+}
+
+@media screen and (max-width:600px) {
+    .pageDescription{
+        font-size: 1em;
+        max-width: 91%;
+    }
+}
+
+@keyframes move {
+    0%{margin-top: 0;}
+    50%{margin-top: 25px;}
+    100%{margin-top: 0;}
+}

src/components/Receita2.js

@@ -0,0 +1,53 @@
+import styles from './Receita2.module.css'
+import {useTranslation} from "react-i18next"
+import {Link} from 'react-scroll'
+import diamond from '../assets/img/diamond.png'
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faAngleDown} from "@fortawesome/free-solid-svg-icons";
+import {useEffect, useState} from "react";
+import gray from "../assets/img/gray.png";
+import poivre from "../assets/img/poivre.png";
+
+
+function Receita2(){
+    const [t, i18n] = useTranslation("global");
+
+    return (
+        <section id='Receita2' className={styles.ur}>
+            <h1 className={styles.autorTitle} style={{cursor:"auto"}}>{t("Receita2.autor")}</h1>
+            <h1 className={styles.pageTitle} style={{cursor:"auto"}}>{t("Receita2.title")}</h1>
+            <iframe width="50%" height="500" src="https://www.youtube.com/embed/Yaki4HUsiNM?si=DA1gOiVitoyWa23d"
+                    title="YouTube video player" frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerPolicy="strict-origin-when-cross-origin" allowFullScreen>
+            </iframe>
+            <div className={styles.container}>
+                <div className={styles.ingredienteContainer}>
+                    <h1 className={styles.pageTitle} style={{cursor:"auto"}}>{t("Receita2.ingredientes")}</h1>
+                    <p>- 1 kg de filé de porco, com a pele marcada<br /><br />
+                        - 175 g de queijo Manchego, finamente fatiado<br /><br />
+                        - 150 g de membrillo<br /><br />
+                        - 2 ramos de sálvia<br /><br />
+                        - Azeite de oliva, para regar<br /><br />
+                        - 1 cabeça de alho, cortada ao meio horizontalmente<br /><br />
+                        - 1 ramo de tomilho<br /><br />
+                        - 200 ml de xerez seco<br /><br />
+                        - Sal marinho e pimenta-do-reino moída na hora
+                    </p>
+                </div>
+                <div className={styles.modoPrepContainer}>
+                    <h1 className={styles.pageTitle} style={{cursor:"auto"}}>{t("Receita2.modoPrep")}</h1>
+                    <p>1. Preaqueça o forno a 220°C/Gás 7. <br /><br />
+                        2. Coloque o filé, com a pele voltada para baixo, em uma tábua de corte e faça um corte de três quartos da espessura da carne ao longo do comprimento, de cima para baixo. Abra a carne para formar um retângulo longo e tempere com sal e pimenta.<br /><br />
+                        3. Arrume as fatias de queijo e o membrillo ao longo do centro da carne. Polvilhe as folhas de 1 ramo de sálvia por cima e enrole a carne para fechar o recheio. Amarre a carne em intervalos de 3 cm ao longo do comprimento com um cordão.<br /><br />
+                        4. Coloque o tomilho e a sálvia restante em uma assadeira que possa ir ao fogão junto com o alho. Coloque o filé de porco por cima, com a pele voltada para cima. Regue com azeite de oliva e tempere generosamente com sal e pimenta.<br /><br />
+                        5. Transfira a assadeira para o forno preaquecido e asse por 20 minutos, até que a pele fique crocante e dourada. Reduza a temperatura do forno para 180°C/Gás 4 e cozinhe por mais 50 minutos, até que o porco esteja completamente cozido. Retire o porco da assadeira e reserve em um prato para descansar.<br /><br />
+                        6. Coloque a assadeira no fogão. Adicione o xerez e leve para ferver, raspando qualquer resíduo que esteja no fundo da assadeira. Abaixe o fogo, esprema o alho e retire as ervas. Adicione os sucos que restaram da carne.
+                        7. Para servir, corte o porco em fatias grossas, coe o molho e despeje sobre a carne.</p>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default Receita2