Hugging Face's logo

Spaces:
JairoDanielMT
/
david
Running

App Files Community
JairoDanielMT commited on
Commit
aedd342
·
1 Parent(s): 3834456

serfd

Browse files
Files changed (33) hide show
  1. .eslintrc.cjs +15 -0
  2. .gitattributes +1 -0
  3. .gitignore +24 -0
  4. index.html +10 -17
  5. package-lock.json +0 -0
  6. package.json +28 -0
  7. public/vite.svg +1 -0
  8. src/App.css +0 -0
  9. src/App.jsx +18 -0
  10. src/assets/Martel-Regular.ttf +0 -0
  11. src/assets/Ubuntu-Bold.ttf +0 -0
  12. src/assets/brownieprincipal.png +3 -0
  13. src/assets/fondoacercade.png +3 -0
  14. src/assets/instagram.png +3 -0
  15. src/assets/logocesarin.png +3 -0
  16. src/assets/react.svg +1 -0
  17. src/assets/tartafresa2.png +3 -0
  18. src/components/Card.css +28 -0
  19. src/components/Card.jsx +19 -0
  20. src/data/aboutMe.js +31 -0
  21. src/index.css +79 -0
  22. src/main.jsx +10 -0
  23. src/sections/AcercaDe.css +48 -0
  24. src/sections/AcercaDe.jsx +40 -0
  25. src/sections/Contacto.css +49 -0
  26. src/sections/Contacto.jsx +32 -0
  27. src/sections/MyInterests.css +20 -0
  28. src/sections/MyInterests.jsx +19 -0
  29. src/sections/NavBar.css +33 -0
  30. src/sections/NavBar.jsx +47 -0
  31. src/sections/Presentation.css +40 -0
  32. src/sections/Presentation.jsx +21 -0
  33. vite.config.js +7 -0
.eslintrc.cjs ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ module.exports = {
2
+ env: { browser: true, es2020: true },
3
+ extends: [
4
+ 'eslint:recommended',
5
+ 'plugin:react/recommended',
6
+ 'plugin:react/jsx-runtime',
7
+ 'plugin:react-hooks/recommended',
8
+ ],
9
+ parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
10
+ settings: { react: { version: '18.2' } },
11
+ plugins: ['react-refresh'],
12
+ rules: {
13
+ 'react-refresh/only-export-components': 'warn',
14
+ },
15
+ }
.gitattributes CHANGED
@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ *.png filter=lfs diff=lfs merge=lfs -text
.gitignore ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Logs
2
+ logs
3
+ *.log
4
+ npm-debug.log*
5
+ yarn-debug.log*
6
+ yarn-error.log*
7
+ pnpm-debug.log*
8
+ lerna-debug.log*
9
+
10
+ node_modules
11
+ dist
12
+ dist-ssr
13
+ *.local
14
+
15
+ # Editor directories and files
16
+ .vscode/*
17
+ !.vscode/extensions.json
18
+ .idea
19
+ .DS_Store
20
+ *.suo
21
+ *.ntvs*
22
+ *.njsproj
23
+ *.sln
24
+ *.sw?
index.html CHANGED
@@ -1,19 +1,12 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Cesarin | Landing Page</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ <script type="module" src="/src/main.jsx"></script>
11
+ </body>
 
 
 
 
 
 
 
12
  </html>
package-lock.json ADDED
The diff for this file is too large to render. See raw diff
 
package.json ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "practicandoreact",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vite build",
9
+ "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10
+ "preview": "vite preview"
11
+ },
12
+ "dependencies": {
13
+ "react": "^18.2.0",
14
+ "react-dom": "^18.2.0",
15
+ "react-scroll": "^1.8.9",
16
+ "scroll": "^3.0.1"
17
+ },
18
+ "devDependencies": {
19
+ "@types/react": "^18.0.37",
20
+ "@types/react-dom": "^18.0.11",
21
+ "@vitejs/plugin-react-swc": "^3.0.0",
22
+ "eslint": "^8.38.0",
23
+ "eslint-plugin-react": "^7.32.2",
24
+ "eslint-plugin-react-hooks": "^4.6.0",
25
+ "eslint-plugin-react-refresh": "^0.3.4",
26
+ "vite": "^4.3.9"
27
+ }
28
+ }
public/vite.svg ADDED
src/App.css ADDED
File without changes
src/App.jsx ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import "./App.css";
2
+ import MyInterests from "./sections/MyInterests";
3
+ import Presentation from "./sections/Presentation";
4
+ import AcercaDe from "./sections/AcercaDe";
5
+ import Contacto from "./sections/Contacto";
6
+
7
+ function App() {
8
+ return (
9
+ <>
10
+ <Presentation id="presentacion"/>
11
+ <AcercaDe id="acercade"/>
12
+ <MyInterests id="carta"/>
13
+ <Contacto id="contacto"/>
14
+ </>
15
+ );
16
+ }
17
+
18
+ export default App;
src/assets/Martel-Regular.ttf ADDED
Binary file (168 kB). View file
 
src/assets/Ubuntu-Bold.ttf ADDED
Binary file (270 kB). View file
 
src/assets/brownieprincipal.png ADDED

Git LFS Details

  • SHA256: 91790d86fd4b3e37f53a20951b7d2a4f759390855cb76c5e39bfc95ccb02bc3c
  • Pointer size: 132 Bytes
  • Size of remote file: 1.15 MB
src/assets/fondoacercade.png ADDED

Git LFS Details

  • SHA256: dbb6b20b32d8ee1c6672b8093192bffeb68fd192606c87981da5814a571f6d52
  • Pointer size: 132 Bytes
  • Size of remote file: 1.39 MB
src/assets/instagram.png ADDED

Git LFS Details

  • SHA256: 496c0b62aff0af29be1d2ed4dcd53d6415a43bf372500718777e1e8e8850d8a5
  • Pointer size: 131 Bytes
  • Size of remote file: 151 kB
src/assets/logocesarin.png ADDED

Git LFS Details

  • SHA256: 7a06fa40c6ac506c05eaa21b78dced014523b618c8ce7a22ab1483154136b8e9
  • Pointer size: 130 Bytes
  • Size of remote file: 42.1 kB
src/assets/react.svg ADDED
src/assets/tartafresa2.png ADDED

Git LFS Details

  • SHA256: 049948310baa22b89e528b6764bbfe202918c02c46c8d112a6b3a78c562397b1
  • Pointer size: 132 Bytes
  • Size of remote file: 2.46 MB
src/components/Card.css ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .InterestCard img{
2
+ max-width: 250px;
3
+ height: 250px;
4
+ border-radius: 10%;
5
+ }
6
+
7
+ .InterestCard {
8
+ width: 280px;
9
+ background-color: #fff4cc;
10
+ border-radius: 20px;
11
+ padding: 20px;
12
+ text-align: center;
13
+ }
14
+
15
+ .InterestCard:hover {
16
+ transform: scale(1.1);
17
+ }
18
+
19
+ .InterestCard h3 {
20
+ font-family: 'Times New Roman', Times, serif;
21
+ font-size: 22px;
22
+ color: var(--azuloscuro);
23
+ }
24
+
25
+ .texto-card{
26
+ width: 280px;
27
+ align-items: center;
28
+ }
src/components/Card.jsx ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+ import "./Card.css";
3
+
4
+ function InterestCard({ interest }) {
5
+ return (
6
+ <div className="InterestCard">
7
+ <div className="img-circle">
8
+ <img src={interest.image} alt="" />
9
+ </div>
10
+
11
+ <div className="texto-card">
12
+ <h3>{interest.name}</h3>
13
+ <p>{interest.description}</p>
14
+ </div>
15
+ </div>
16
+ );
17
+ }
18
+
19
+ export default InterestCard;
src/data/aboutMe.js ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const interests = [
2
+ {
3
+ name: "Corazón de chocolate",
4
+ description: "I have loved music since I was a kid. The instrument I play is the guitar and I used to play in many bands. My music taste is very diverse from bossa nova to death metal.",
5
+ image: "./../src/assets/corazonchocolatecerrado.png"
6
+ },
7
+ {
8
+ name: "Cupcakes Red Velvet",
9
+ description: "I discovered this passion when I started studyng Systems Engineering. I had some skills in python but nothing special but then I started learning algorythms and it catch my attention,",
10
+ image: "./../src/assets/cupcakeredvelvet.png"
11
+ },
12
+ {
13
+ name: "Tarta de fresa",
14
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida lobortis ligula, at condimentum diam porttitor at. Cras ornare enim dui, et volutpat lacus iaculis ut. Donec sed velit",
15
+ image: "./../src/assets/tartafresa.png"
16
+ },
17
+ {
18
+ name: "Brownies con toppings",
19
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida lobortis ligula, at condimentum diam porttitor at. Cras ornare enim dui, et volutpat lacus iaculis ut. Donec sed velit",
20
+ image: "./../src/assets/brownietoppings3.png"
21
+ },
22
+ {
23
+ name: "Brownies",
24
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida lobortis ligula, at condimentum diam porttitor at. Cras ornare enim dui, et volutpat lacus iaculis ut. Donec sed velit",
25
+ image: "./../src/assets/brownies.png"
26
+ },
27
+ ]
28
+
29
+
30
+
31
+ export default interests;
src/index.css ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --amarilloclaro: #F5EAA9;
3
+ --celeste: #D2F1F8;
4
+ --azuloscuro: #003B46;
5
+ --amarillooscuro: #FBCF1C;
6
+ --blanco: #F4F5F7;
7
+ --bgcard: #FFF8D1E5;
8
+ --bghome: #D2F1F81A;
9
+ --rojoclaro: #E07959;
10
+ }
11
+
12
+ :root {
13
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
14
+ line-height: 1.5;
15
+ font-weight: 400;
16
+
17
+ color-scheme: light dark;
18
+ color: rgba(255, 255, 255, 0.87);
19
+ background-color: #242424;
20
+
21
+ font-synthesis: none;
22
+ text-rendering: optimizeLegibility;
23
+ -webkit-font-smoothing: antialiased;
24
+ -moz-osx-font-smoothing: grayscale;
25
+ -webkit-text-size-adjust: 100%;
26
+ }
27
+
28
+ a {
29
+ font-weight: 500;
30
+ color: #646cff;
31
+ text-decoration: inherit;
32
+ }
33
+ a:hover {
34
+ color: #535bf2;
35
+ }
36
+
37
+ body {
38
+ margin: 0;
39
+ min-width: 320px;
40
+ min-height: 100vh;
41
+ }
42
+
43
+ h1 {
44
+ font-size: 3.2em;
45
+ line-height: 1.1;
46
+ }
47
+
48
+ button {
49
+ border-radius: 8px;
50
+ border: 1px solid transparent;
51
+ padding: 0.6em 1.2em;
52
+ font-size: 1em;
53
+ font-weight: 500;
54
+ font-family: inherit;
55
+ background-color: #1a1a1a;
56
+ cursor: pointer;
57
+ transition: border-color 0.25s;
58
+ }
59
+ button:hover {
60
+ border-color: #8f301f;
61
+ }
62
+ button:focus,
63
+ button:focus-visible {
64
+ outline: 4px auto -webkit-focus-ring-color;
65
+ }
66
+
67
+ @media (prefers-color-scheme: light) {
68
+ :root {
69
+ color: #213547;
70
+ background-color: #ffffff;
71
+ }
72
+ a:hover {
73
+ color: #747bff;
74
+ }
75
+ button {
76
+ background-color: #f9f9f9;
77
+ }
78
+ }
79
+
src/main.jsx ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from 'react'
2
+ import ReactDOM from 'react-dom/client'
3
+ import App from './App.jsx'
4
+ import './index.css'
5
+
6
+ ReactDOM.createRoot(document.getElementById('root')).render(
7
+ <React.StrictMode>
8
+ <App />
9
+ </React.StrictMode>,
10
+ )
src/sections/AcercaDe.css ADDED
@@ -0,0 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .informacion {
2
+ padding: 10rem;
3
+ background-image: url("./../src/assets/fondoacercade.png");
4
+ background-size: cover;
5
+ background-position: center;
6
+ }
7
+
8
+ .foto img {
9
+ height: 13rem;
10
+ border-radius: 30%;
11
+ }
12
+
13
+ .cesar {
14
+ padding: 10px;
15
+ display: flex;
16
+ gap: 2rem;
17
+ justify-content: center;
18
+ align-items: center;
19
+ }
20
+
21
+ .texto-cesar span {
22
+ font-family: "Times New Roman", Times, serif;
23
+ font-size: 4.8rem;
24
+ line-height: 0.5;
25
+ }
26
+
27
+ .texto-cesar p {
28
+ width: 38rem;
29
+ }
30
+
31
+ .cesarin-contenedor {
32
+ display: flex;
33
+ justify-content: center;
34
+ align-items: center;
35
+ }
36
+
37
+ .cesarin {
38
+ width: 53rem;
39
+ display: flex;
40
+ flex-direction: column;
41
+ text-align: center;
42
+ }
43
+
44
+ .cesarin span {
45
+ font-family: cursive;
46
+ line-height: 1;
47
+ font-size: 4rem;
48
+ }
src/sections/AcercaDe.jsx ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+ import "./AcercaDe.css";
3
+
4
+ function AcercaDe() {
5
+ return (
6
+ <div className="informacion">
7
+ <div className="cesar">
8
+ <div className="foto">
9
+ <img src="./../src/assets/cesar.jpg" alt="cesar" />
10
+ </div>
11
+ <div className="texto-cesar">
12
+ <span>¡Hola! Soy Cesar,</span>
13
+ <p>
14
+ chef y creador de Cesarin. Mi pasión por la repostería nació desde
15
+ temprana edad y desde entonces he perfeccionado mis habilidades en
16
+ la creación de postres que deleitan a todos los paladares. Mi
17
+ enfoque se basa en utilizar ingredientes frescos y de calidad para
18
+ brindarte sabores auténticos en cada bocado.
19
+ </p>
20
+ </div>
21
+ </div>
22
+ <div className="cesarin-contenedor">
23
+ <div className="cesarin">
24
+ <p>En </p>
25
+ <span>Cesarin</span>
26
+ <p>
27
+ cada creación es única y refleja mi dedicación y amor por la
28
+ repostería. Me enorgullece ofrecerte deliciosos tartas
29
+ personalizados, cupcakes irresistibles y brownies artesanales que te
30
+ transportarán a un mundo de dulzura. Cada detalle está
31
+ cuidadosamente diseñado para hacer de tus momentos especiales algo
32
+ inolvidable.
33
+ </p>
34
+ </div>
35
+ </div>
36
+ </div>
37
+ );
38
+ }
39
+
40
+ export default AcercaDe;
src/sections/Contacto.css ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .contacto-container {
2
+ display: flex;
3
+ justify-content: center;
4
+ align-items: center;
5
+ background: var(--azuloscuro);
6
+ padding: 5rem;
7
+ }
8
+
9
+ .texto-contacto {
10
+ text-align: center;
11
+ width: 40rem;
12
+ padding: 0 rem 3rem;
13
+ }
14
+
15
+ .texto-contacto h2 {
16
+ color: var(--amarilloclaro);
17
+ font-size: 3.5rem;
18
+ line-height: 1;
19
+ }
20
+
21
+ .texto-contacto p {
22
+ color: var(--blanco);
23
+ }
24
+
25
+
26
+ .contacto-boton {
27
+ text-align: center;
28
+ padding: 4rem;
29
+ color: var(--amarillooscuro);
30
+ }
31
+
32
+ .contacto-boton:hover {
33
+ transform: scale(1.1);
34
+ }
35
+
36
+ .contacto-instagram {
37
+ text-align: center;
38
+ }
39
+
40
+ .contacto-instagram p{
41
+ color: var(--blanco);
42
+ line-height: 0.2;
43
+ }
44
+
45
+ .contacto-instagram img {
46
+ width: 6rem;
47
+ }
48
+
49
+
src/sections/Contacto.jsx ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+ import "./Contacto.css";
3
+
4
+ function Contacto() {
5
+ return (
6
+ <div className="contacto-container">
7
+ <div className="contacto">
8
+ <div className="texto-contacto">
9
+ <h2>CONTACTO</h2>
10
+ <p>
11
+ ¡Me encantaría saber de ti! Si tienes alguna pregunta, consulta o
12
+ deseas realizar un pedido personalizado, puedes contactarme a través
13
+ de nuestro chat en Instagram. Haz clic en el enlace a continuación
14
+ para redirigirte directamente al chat y comenzar a disfrutar de
15
+ nuestros deliciosos postres
16
+ </p>
17
+ </div>
18
+ <div className="contacto-boton">
19
+ <a href="https://www.instagram.com/cesarin.artesanal/">
20
+ <button>REALIZAR PEDIDO</button>
21
+ </a>
22
+ </div>
23
+ <div className="contacto-instagram">
24
+ <img src="./../src/assets/instagram.png" alt="" />
25
+ <p>@cesarin.artesanal</p>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ );
30
+ }
31
+
32
+ export default Contacto;
src/sections/MyInterests.css ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .container {
2
+ display: flex;
3
+ gap: 30px;
4
+ flex-wrap: wrap;
5
+ justify-content: center;
6
+
7
+ }
8
+
9
+ .my-interests {
10
+ text-align: center;
11
+ background-color: var(--amarilloclaro);
12
+ padding-top: 0.5rem;
13
+ padding-bottom: 5rem;
14
+ }
15
+
16
+ .my-interests h2{
17
+ font-family: 'Times New Roman', Times, serif;
18
+ font-size: 60px;
19
+ color: var(--rojoclaro);
20
+ }
src/sections/MyInterests.jsx ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+ import InterestCard from "../components/Card";
3
+ import myInterest from "../data/aboutMe";
4
+ import "./../sections/MyInterests.css";
5
+
6
+ function MyInterests() {
7
+ const interestList = myInterest.map((i) => {
8
+ return <InterestCard interest={i} />;
9
+ });
10
+
11
+ return (
12
+ <div className="my-interests" id="carta">
13
+ <h2>Carta</h2>
14
+ <div className="container">{interestList}</div>
15
+ </div>
16
+ );
17
+ }
18
+
19
+ export default MyInterests;
src/sections/NavBar.css ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .navbar {
2
+ display: flex;
3
+ justify-content: space-between;
4
+ align-items: center;
5
+ padding: 1rem 25rem 1rem 15rem;
6
+ background-color: transparent;
7
+ position: fixed;
8
+ top: 0;
9
+ left: 0;
10
+ right: 0;
11
+ z-index: 999;
12
+ }
13
+
14
+ .navbar-logo img {
15
+ height: 50px;
16
+ }
17
+
18
+ .navbar-links {
19
+ display: flex;
20
+ justify-content: flex-end;
21
+ }
22
+
23
+ .navbar-links a {
24
+ margin-left: 10px;
25
+ text-decoration: none;
26
+ color: var(--amarilloclaro);
27
+ cursor: pointer;
28
+ }
29
+
30
+ .navbar-links a:hover {
31
+ color: var(--amarillooscuro);
32
+ }
33
+
src/sections/NavBar.jsx ADDED
@@ -0,0 +1,47 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+ import "./NavBar.css";
3
+ import { Link } from "react-scroll";
4
+
5
+ function NavBar() {
6
+ return (
7
+ <nav className="navbar">
8
+ <div className="navbar-logo">
9
+ <img src="./../src/assets/logocesarin.png" alt="logo navbar" />
10
+ </div>
11
+ <div className="navbar-links">
12
+ <Link
13
+ activeClass="active"
14
+ to="acercade"
15
+ spy={true}
16
+ smooth={true}
17
+ offset={-70}
18
+ duration={500}
19
+ >
20
+ Acerca de
21
+ </Link>
22
+ <Link
23
+ activeClass="active"
24
+ to="carta"
25
+ spy={true}
26
+ smooth={true}
27
+ offset={-70}
28
+ duration={500}
29
+ >
30
+ Carta
31
+ </Link>
32
+ <Link
33
+ activeClass="active"
34
+ to="contacto"
35
+ spy={true}
36
+ smooth={true}
37
+ offset={-70}
38
+ duration={500}
39
+ >
40
+ Contacto
41
+ </Link>
42
+ </div>
43
+ </nav>
44
+ );
45
+ }
46
+
47
+ export default NavBar;
src/sections/Presentation.css ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .presentation {
2
+ background: var(--azuloscuro);
3
+ position: relative;
4
+ }
5
+
6
+ .container-presentation {
7
+ padding-left: 20rem;
8
+ padding-right: 20rem;
9
+ align-items: center;
10
+ display: flex;
11
+ justify-content: center;
12
+ }
13
+
14
+ .container-presentation p {
15
+ width: 600px;
16
+ }
17
+
18
+ .container-presentation p span {
19
+ color: #9e3623;
20
+ }
21
+
22
+ .container-presentation img {
23
+ padding-left: 50px;
24
+ }
25
+
26
+ .izquierda {
27
+ padding-top: 5%;
28
+ padding-bottom: 5%;
29
+ }
30
+
31
+ .izquierda h1 {
32
+ color: var(--amarilloclaro);
33
+ line-height: 1.8;
34
+ }
35
+
36
+ .izquierda p {
37
+ color: var(--celeste);
38
+ font-family: 'Times New Roman', Times, serif;
39
+ font-size: 20px;
40
+ }
src/sections/Presentation.jsx ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+ import "./../sections/Presentation.css";
3
+ import NavBar from "./NavBar";
4
+
5
+ function Presentation() {
6
+ return (
7
+ <div className="presentation" id="principal">
8
+ <NavBar />
9
+
10
+ <div className="container-presentation">
11
+ <div className="izquierda">
12
+ <h1>SABORES ARTESANALES, PARA OCASIONES INOLVIDABLES</h1>
13
+ <p>Regala momentos dulces llenos de amor y sabor</p>
14
+ </div>
15
+ <img src="./../src/assets/brownieprincipal.png" alt="personal photo" />
16
+ </div>
17
+ </div>
18
+ );
19
+ }
20
+
21
+ export default Presentation;
vite.config.js ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ import { defineConfig } from 'vite'
2
+ import react from '@vitejs/plugin-react-swc'
3
+
4
+ // https://vitejs.dev/config/
5
+ export default defineConfig({
6
+ plugins: [react()],
7
+ })