diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 6d82974..46b39d1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,10 +10,12 @@ "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", - "@mui/material": "^5.15.15", + "@mui/material": "^5.15.16", + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-icons": "^5.1.0" + "react-icons": "^5.1.0", + "react-router-dom": "^6.23.0" }, "devDependencies": { "@types/react": "^18.2.66", @@ -1106,22 +1108,22 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.15", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz", - "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==", + "version": "5.15.16", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz", + "integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/material": { - "version": "5.15.15", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz", - "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==", + "version": "5.15.16", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz", + "integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==", "dependencies": { "@babel/runtime": "^7.23.9", "@mui/base": "5.0.0-beta.40", - "@mui/core-downloads-tracker": "^5.15.15", + "@mui/core-downloads-tracker": "^5.15.16", "@mui/system": "^5.15.15", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.14", @@ -1338,6 +1340,14 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@remix-run/router": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz", + "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.14.3", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz", @@ -1856,6 +1866,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -1871,6 +1886,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-plugin-macros": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", @@ -2022,6 +2047,17 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -2175,6 +2211,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -2815,6 +2859,25 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2824,6 +2887,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3666,6 +3742,25 @@ "yallist": "^3.0.2" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -4014,6 +4109,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -4088,6 +4188,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", + "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==", + "dependencies": { + "@remix-run/router": "1.16.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz", + "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==", + "dependencies": { + "@remix-run/router": "1.16.0", + "react-router": "6.23.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index 3647e28..3594c20 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,10 +12,12 @@ "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", - "@mui/material": "^5.15.15", + "@mui/material": "^5.15.16", + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-icons": "^5.1.0" + "react-icons": "^5.1.0", + "react-router-dom": "^6.23.0" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/frontend/src/PersPastel1.jsx b/frontend/src/PersPastel1.jsx new file mode 100644 index 0000000..af1fae8 --- /dev/null +++ b/frontend/src/PersPastel1.jsx @@ -0,0 +1,116 @@ +import React, { useState } from "react"; +import './PersPastelStyle.css'; + +function Pastel() { + + return ( + <> +
Pastel
+
+
+ {/* Contenido de tu contenedor de imagen */} +
+
+
+ Pastel Arcoiris + +
+ +
+
+
+

Personaliza tu pastel

+
+

Tipo de Pastel

+
+ + + + +
+
+
+

Inscription (30 Character Limit)

+ +
+
+
+
+ +
+ +
+ +
+
+

Descripción

+ +
+
+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Laboriosam iure provident atque voluptatibus reiciendis quae + rerum, maxime placeat enim cupiditate voluptatum, temporibus + quis iusto. Enim eum qui delectus deleniti similique? Lorem, + ipsum dolor sit amet consectetur adipisicing elit. Sint autem + magni earum est dolorem saepe perferendis repellat ipsam + laudantium cum assumenda quidem quam, vero similique? Iusto + officiis quod blanditiis iste? +

+
+
+ +
+
+

Información adicional

+ +
+
+

-----------

+
+
+ +
+
+

Reseñas

+ +
+
+

-----------

+
+
+ +
+ Compartir +
+ + + + + +
+
+
+
+ + ); +} + +export default Pastel; \ No newline at end of file diff --git a/frontend/src/PersPastelStyle.css b/frontend/src/PersPastelStyle.css new file mode 100644 index 0000000..d69c28b --- /dev/null +++ b/frontend/src/PersPastelStyle.css @@ -0,0 +1,407 @@ +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Ubuntu'; + max-width: 1200px; + margin: 0 auto; +} + +img { + max-width: 100%; +} + +header { + display: flex; + align-items: center; + padding: 30px; + justify-content: center; +} + + +main { + display: flex; + gap: 30px; + margin-bottom: 80px; +} + +.container-title { + padding: 30px; + background-color: #eee; + margin-bottom: 50px; + color: #222; +} + +.container-img-1 { + background-color: #f7f7f9; + background-image: url('assets/pastel1.jpg'); + flex: 1; + width: 55%; + height: 100%; + padding-top: 60.4%; + background-size: 100% auto; +} + +.container-info-product { + flex: 1; + display: flex; + flex-direction: column; +} + +.container-price { + padding-bottom: 20px; + border-bottom: 1px solid #e4e4e4; + display: flex; + align-items: center; + justify-content: space-between; +} + +.container-price span { + font-size: 24px; + font-weight: 300; +} + +.container-details-product { + padding: 30px 0; + padding-bottom: 0px; +} + +.opcionesPers{ + +} + +.textPersPastel{ + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; +} + +.pastel-Type{ + font-size: 18px; + font-weight: lighter; + margin-bottom: 10px; +} + +.botones-pastel{ + display: flex; + gap: 4; + margin-bottom: 20px; + +} + +.boton-1{ + margin-right: 10px; + border: none; + color: white; + padding: 14px 28px; + cursor: pointer; + border-radius: 5px; + background-color: #8B374A +} + +.boton-1:hover { + background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */ + } + + .boton-1:active { + transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */ + } + + .boton-2{ + margin-right: 10px; + border: none; + color: white; + padding: 14px 28px; + cursor: pointer; + border-radius: 5px; + background-color: #8B374A +} + +.boton-2:hover { + background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */ + } + + .boton-2:active { + transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */ + } + + .boton-3{ + margin-right: 10px; + border: none; + color: white; + padding: 14px 28px; + cursor: pointer; + border-radius: 5px; + background-color: #8B374A +} + +.boton-3:hover { + background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */ + } + + .boton-3:active { + transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */ + } + + .boton-4{ + border: none; + color: white; + padding: 14px 28px; + cursor: pointer; + border-radius: 5px; + background-color: #8B374A +} + +.boton-4:hover { + background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */ + } + + .boton-4:active { + transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */ + } + +.label-text-pers{ + margin-top: 10px; + font-size: 16px; + font-weight: lighter; + margin-bottom: 10px; + +} + +.input-text-pers{ + margin-top: 10px; + font-size: 16px; + margin-bottom: 10px; + text-indent: 5px; + width: 100%; + height: 50px; + +} + +.form-group { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 15px; +} + +.form-group label { + width: 100px; + color: #222; + font-weight: 700; +} + +.form-group select { + width: 300px; + border: none; + padding: 12px 15px; + background-color: #f7f7f7; + outline: none; + color: #666; +} + +.btn-clean { + border: none; + background: none; + color: #666; + margin-left: 120px; + cursor: pointer; +} + +.btn-clean:hover { + color: #1bbeb4; +} + +.container-add-cart { + display: flex; + gap: 20px; + padding-bottom: 30px; + border-bottom: 1px solid #e4e4e4; +} + +.container-quantity { + position: relative; +} + +.input-quantity { + background-color: #f7f7f7; + border: none; + padding: 10px; + width: 60px; + height: 100%; + color: #666; + font-weight: 500; + line-height: 0; +} + +.input-quantity:focus { + outline: none; +} + +.input-quantity::-webkit-inner-spin-button, +.input-quantity::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; +} + + +.fa-chevron-down:hover { + color: #1bbeb4; +} + +.fa-chevron-up:hover { + color: #1bbeb4; +} + +.btn-add-to-cart{ + border: none; + color: white; + padding: 14px 28px; + cursor: pointer; + border-radius: 5px; + background-color: #8B374A +} + +.btn-add-to-cart:hover { + background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */ + } + + .btn-add-to-cart:active { + transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */ + } + +.hidden { + display: none; +} + +.container-description, +.container-additional-information, +.container-reviews { + display: flex; + flex-direction: column; + border-bottom: 1px solid #e4e4e4; + padding: 10px 0; +} + +.title-description, +.title-additional-information, +.title-reviews { + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; +} + +.title-description h4, +.title-additional-information h4, +.title-reviews h4 { + font-weight: 300; + color: #666; + font-size: 14px; +} + +.text-description, +.text-additional-information, +.text-reviews { + font-size: 13px; + color: #252525; + line-height: 22px; + margin-top: 25px; +} + +.container-social { + display: flex; + justify-content: space-between; + padding: 10px 0; + align-items: center; + border-bottom: 1px solid #e4e4e4; +} + +.container-social span { + font-weight: 300; + color: #252525; +} + +.container-buttons-social { + display: flex; + gap: 15px; + align-items: center; +} + +.container-buttons-social a:link, +.container-buttons-social a:visited { + color: #666; + font-size: 15px; +} + +.container-buttons-social a:hover { + color: #1bbeb4; +} + +.container-related-products h2 { + text-align: center; + margin-bottom: 30px; +} + +.card-list-products { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 25px; +} + +.card { + cursor: pointer; +} + +.card-img { + background: transparent; + margin-bottom: 15px; +} + +.card-img img { + height: 400px; + object-fit: cover; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); +} + +.info-card { + display: flex; + justify-content: space-between; +} + +.text-product { + color: #252525; + font-weight: 300; + line-height: 1.4; +} + +.text-product h3{ + color: inherit; + font-weight: inherit; + font-size: 15px; +} + +.text-product h3:hover{ + color: #1bbeb4; +} + +.text-product p{ + color: #666; + font-size: 13px; +} + +.text-product p:hover{ + color: #1bbeb4; +} + +footer { + padding: 30px; + background-color: #eee; + margin-top: 50px; + color: #222; +} \ No newline at end of file diff --git a/frontend/src/assets/pastel1.jpg b/frontend/src/assets/pastel1.jpg new file mode 100644 index 0000000..1324fee Binary files /dev/null and b/frontend/src/assets/pastel1.jpg differ diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 9514f25..2031e83 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -1,12 +1,25 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -//import LoginForm from './LoginForm.jsx' -//import './index.css' +import React from 'react'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import { createRoot } from 'react-dom/client'; import AppInicio from './AppInicio.jsx' +import PersPastel1 from './PersPastel1.jsx' -ReactDOM.createRoot(document.getElementById('root')).render( + +createRoot(document.getElementById('root')).render( - {/**/} - + + + }/> + }/> + + , -) +); + + + + + + + +