├── src ├── an1.webp ├── an2.png ├── an3.png ├── an4.webp ├── an5.jpg ├── an6.png ├── an7.png ├── pen1.png ├── pen3.png ├── pen5.png ├── pen6.png ├── pen7.png ├── pul1.png ├── pul2.png ├── pul3.png ├── pul4.png ├── pul5.png ├── pul6.jpg ├── pul7.png ├── pen2.webp ├── pen4.webp ├── setupTests.js ├── App.test.js ├── index.css ├── reportWebVitals.js ├── index.js ├── Buttons.js ├── Home.js ├── App.js ├── ContactUs.js ├── Jewelry.js ├── About.js ├── App.css ├── ContactCss.css ├── AboutUs.css └── data.js ├── public ├── icon.png ├── favicon.ico ├── robots.txt ├── manifest.json └── index.html ├── README.md ├── .gitignore └── package.json /src/an1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/an1.webp -------------------------------------------------------------------------------- /src/an2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/an2.png -------------------------------------------------------------------------------- /src/an3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/an3.png -------------------------------------------------------------------------------- /src/an4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/an4.webp -------------------------------------------------------------------------------- /src/an5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/an5.jpg -------------------------------------------------------------------------------- /src/an6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/an6.png -------------------------------------------------------------------------------- /src/an7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/an7.png -------------------------------------------------------------------------------- /src/pen1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pen1.png -------------------------------------------------------------------------------- /src/pen3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pen3.png -------------------------------------------------------------------------------- /src/pen5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pen5.png -------------------------------------------------------------------------------- /src/pen6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pen6.png -------------------------------------------------------------------------------- /src/pen7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pen7.png -------------------------------------------------------------------------------- /src/pul1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pul1.png -------------------------------------------------------------------------------- /src/pul2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pul2.png -------------------------------------------------------------------------------- /src/pul3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pul3.png -------------------------------------------------------------------------------- /src/pul4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pul4.png -------------------------------------------------------------------------------- /src/pul5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pul5.png -------------------------------------------------------------------------------- /src/pul6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pul6.jpg -------------------------------------------------------------------------------- /src/pul7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pul7.png -------------------------------------------------------------------------------- /src/pen2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pen2.webp -------------------------------------------------------------------------------- /src/pen4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/src/pen4.webp -------------------------------------------------------------------------------- /public/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/public/icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NatachaKey/jewelry-shop/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Website made with React, React hooks, React router, CSS3, JSX. Responsive for all mobile devices. 2 | 3 | ## In the project directory, you can run: 4 | 5 | ## npm i 6 | ## npm start 7 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/Buttons.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { data } from "./data"; 3 | 4 | function Buttons({ filteredJewelry }){ 5 | const [products, setProducts] = useState(data); 6 | 7 | return( 8 |
9 | 10 | 11 | 12 | 13 |
14 | ) 15 | } 16 | 17 | export default Buttons; 18 | 19 | -------------------------------------------------------------------------------- /src/Home.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { data } from "./data"; 3 | import Buttons from "./Buttons"; 4 | import Jewelry from "./Jewelry"; 5 | 6 | function Home(){ 7 | 8 | const [jewelry, setJewelry]= useState(data); 9 | 10 | const chosenJewelry = (searchTerm) =>{ 11 | const newJewelry = data.filter(element=>element.searchTerm === searchTerm); 12 | setJewelry(newJewelry); 13 | } 14 | 15 | return(
16 |
17 |

Envío gratuito para los pedidos superiores a 2000$

18 |
19 | 20 | 21 | 22 |
23 | ) 24 | } 25 | 26 | export default Home; 27 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | BrowserRouter as Router, 4 | Routes, 5 | Route, 6 | Link 7 | } from "react-router-dom"; 8 | import Home from "./Home"; 9 | import About from "./About"; 10 | import ContactUs from "./ContactUs"; 11 | import './App.css'; 12 | 13 | function App() { 14 | return 15 | 20 | 21 | 22 | } /> 23 | } /> 24 | }/> 25 | 26 | 27 | 28 | 29 | } 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /src/ContactUs.js: -------------------------------------------------------------------------------- 1 | import './ContactCss.css' 2 | 3 | function ContactUs(){ 4 | return
5 |
6 |

Contacta con nosotros

7 |

Le contestaremos en 24 horas.

8 |
9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 | 24 |
25 |
26 | 27 | 28 | } 29 | export default ContactUs; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jewelry", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-router": "^6.4.1", 12 | "react-router-dom": "^6.4.1", 13 | "react-scripts": "5.0.1", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/Jewelry.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Link } from 'react-router-dom'; 3 | import ContactUs from "./ContactUs"; 4 | 5 | function Jewelry({password}){ 6 | const [showText,setShowText] = useState(false); 7 | 8 | const showTextClick = (element) => { 9 | element.showMore=!element.showMore 10 | setShowText(!showText) 11 | } 12 | 13 | return(
14 | {password.map((element=>{ 15 | const { id, name, price, image, description, showMore }= element; 16 | return(
17 | 18 | foto 19 |

{ name }

20 |

€ { price }

21 |

{ showMore ? description : description.substring(0, 40)}

22 | 23 | 24 | 25 | 26 | 27 |
) 28 | } 29 | ))} 30 |
) 31 | } 32 | 33 | export default Jewelry; 34 | -------------------------------------------------------------------------------- /src/About.js: -------------------------------------------------------------------------------- 1 | import './AboutUs.css' 2 | function About(){ 3 | return
4 |
5 |
6 |
7 |
8 |
9 |
10 | Sobre nosotros 11 |


Joyeros desde 1872

12 |
13 |
ALTA JOYERÍA es diseño, maestría y buen hacer. Los únicos joyeros españoles que realizan todo el proceso de creación de una joya, de forma completamente artesanal, en nuestros talleres.
14 |
    15 |
  • Alta calidad
    • 16 |
  • Estilo personalizado
    • 17 |
  • Atención postventa
    • 18 |
19 | 20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 | 28 | } 29 | export default About; 30 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 30 | ALTA JOYERÍA 31 | 32 | 33 | 34 |
35 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .link{ 2 | padding: 10px 40px; 3 | text-decoration: none; 4 | text-transform: uppercase; 5 | color: #000000; 6 | } 7 | .link:hover{ 8 | font-weight: bolder; 9 | } 10 | nav{ 11 | display: flex; 12 | justify-content: center; 13 | padding: 10px; 14 | background: #f5f5f5; 15 | font-size: 20px; 16 | text-align: center; 17 | } 18 | .products { 19 | display: flex; 20 | justify-content: space-evenly; 21 | flex-wrap: wrap; 22 | } 23 | .productCard { 24 | text-align: center; 25 | width:32%; 26 | } 27 | body { 28 | background-color: #fff; 29 | } 30 | .cont { 31 | display: flex; 32 | justify-content: center; 33 | } 34 | .back { 35 | background-color: rgb(241,234,217); 36 | flex:1; 37 | text-align: center; 38 | font-size: 15px; 39 | padding: 10px; 40 | margin-top:0; 41 | font-family: 'Roboto', sans-serif; 42 | } 43 | .change { 44 | background-color: #efefef; 45 | color: #212121; 46 | padding: 15px; 47 | border: none; 48 | font-family: 'Roboto', sans-serif; 49 | } 50 | .change:hover{ 51 | background-color: #efefef; 52 | color: rgb(133, 128, 128) ; 53 | cursor: pointer; 54 | } 55 | h3, h4 { 56 | font-family: 'Roboto', sans-serif; 57 | font-weight: lighter; 58 | color:#000000; 59 | } 60 | button { 61 | margin: 15px; 62 | font-family: 'Roboto', sans-serif; 63 | } 64 | img{ 65 | border:rgb(230, 224, 224) 1px solid; 66 | margin-top: 30px; 67 | } 68 | .seeMore{ 69 | border: none; 70 | background-color: #f5f5f5 ; 71 | color:#000000; 72 | padding: 8px; 73 | margin-bottom: 30px; 74 | cursor: pointer; 75 | } 76 | p{ 77 | font-size:12px; 78 | } 79 | .bigger:hover{ 80 | transform: scale(1.1); 81 | margin: 10px; 82 | border: none; 83 | } 84 | .ctaBtn{ 85 | background-color: #000000 ; 86 | color:#fff; 87 | border: none; 88 | padding:8px; 89 | } 90 | 91 | @media all and (max-width:500px){ 92 | nav{ 93 | font-size: 12px; 94 | font-weight:bold; 95 | } 96 | .products { 97 | display: flex; 98 | flex-direction: column; 99 | } 100 | .productCard{ 101 | width:auto; 102 | } 103 | nav{ 104 | padding: 0px; 105 | } 106 | img{ 107 | border:none; 108 | margin-top: 30px; 109 | } 110 | .back { 111 | font-size: 10px; 112 | } 113 | 114 | } 115 | -------------------------------------------------------------------------------- /src/ContactCss.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | -webkit-box-sizing: border-box; 7 | -moz-box-sizing: border-box; 8 | -webkit-font-smoothing: antialiased; 9 | -moz-font-smoothing: antialiased; 10 | -o-font-smoothing: antialiased; 11 | text-rendering: optimizeLegibility; 12 | } 13 | 14 | body { 15 | font-family: "Roboto", Helvetica, Arial, sans-serif; 16 | font-weight: 100; 17 | font-size: 12px; 18 | line-height: 30px; 19 | color: #777; 20 | background: #efefef; 21 | } 22 | 23 | .container { 24 | max-width: 400px; 25 | width: 100%; 26 | margin: 0 auto; 27 | position: relative; 28 | } 29 | 30 | #contact input[type="text"], 31 | #contact input[type="email"], 32 | #contact input[type="tel"], 33 | #contact input[type="url"], 34 | #contact textarea, 35 | #contact button[type="submit"] { 36 | font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; 37 | } 38 | 39 | #contact { 40 | background: #F9F9F9; 41 | padding: 25px; 42 | margin: 150px 0; 43 | box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 44 | } 45 | 46 | #contact h3 { 47 | display: block; 48 | font-size: 30px; 49 | font-weight: 300; 50 | margin-bottom: 10px; 51 | } 52 | 53 | #contact h4 { 54 | margin: 5px 0 15px; 55 | display: block; 56 | font-size: 13px; 57 | font-weight: 400; 58 | } 59 | 60 | fieldset { 61 | border: medium none !important; 62 | margin: 0 0 10px; 63 | min-width: 100%; 64 | padding: 0; 65 | width: 100%; 66 | } 67 | 68 | #contact input[type="text"], 69 | #contact input[type="email"], 70 | #contact input[type="tel"], 71 | #contact input[type="url"], 72 | #contact textarea { 73 | width: 100%; 74 | border: 1px solid #ccc; 75 | background: #FFF; 76 | margin: 0 0 5px; 77 | padding: 10px; 78 | } 79 | 80 | #contact input[type="text"]:hover, 81 | #contact input[type="email"]:hover, 82 | #contact input[type="tel"]:hover, 83 | #contact input[type="url"]:hover, 84 | #contact textarea:hover { 85 | -webkit-transition: border-color 0.3s ease-in-out; 86 | -moz-transition: border-color 0.3s ease-in-out; 87 | transition: border-color 0.3s ease-in-out; 88 | border: 1px solid #aaa; 89 | } 90 | 91 | #contact textarea { 92 | height: 100px; 93 | max-width: 100%; 94 | resize: none; 95 | } 96 | 97 | #contact button[type="submit"] { 98 | cursor: pointer; 99 | width: 100%; 100 | border: none; 101 | background: rgb(241,234,217); 102 | color: #000000; 103 | margin: 0 0 5px; 104 | padding: 10px; 105 | font-size: 15px; 106 | } 107 | 108 | #contact button[type="submit"]:hover { 109 | background: #212121; 110 | color:#fff; 111 | transition: background-color 0.3s ease-in-out; 112 | } 113 | 114 | #contact button[type="submit"]:active { 115 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); 116 | } 117 | 118 | .copyright { 119 | text-align: center; 120 | } 121 | 122 | #contact input:focus, 123 | #contact textarea:focus { 124 | outline: 0; 125 | border: 1px solid #aaa; 126 | } 127 | 128 | ::-webkit-input-placeholder { 129 | color: #888; 130 | } 131 | 132 | :-moz-placeholder { 133 | color: #888; 134 | } 135 | 136 | ::-moz-placeholder { 137 | color: #888; 138 | } 139 | 140 | :-ms-input-placeholder { 141 | color: #888; 142 | } 143 | 144 | h3, h4{ 145 | text-align: center; 146 | } 147 | -------------------------------------------------------------------------------- /src/AboutUs.css: -------------------------------------------------------------------------------- 1 | h1, 2 | h2, 3 | h3, 4 | h4, 5 | h5, 6 | h6 {} 7 | a, 8 | a:hover, 9 | a:focus, 10 | a:active { 11 | text-decoration: none; 12 | outline: none; 13 | } 14 | 15 | a, 16 | a:active, 17 | a:focus { 18 | color: #6f6f6f; 19 | text-decoration: none; 20 | transition-timing-function: ease-in-out; 21 | -ms-transition-timing-function: ease-in-out; 22 | -moz-transition-timing-function: ease-in-out; 23 | -webkit-transition-timing-function: ease-in-out; 24 | -o-transition-timing-function: ease-in-out; 25 | transition-duration: .2s; 26 | -ms-transition-duration: .2s; 27 | -moz-transition-duration: .2s; 28 | -webkit-transition-duration: .2s; 29 | -o-transition-duration: .2s; 30 | } 31 | 32 | ul { 33 | margin: 0; 34 | padding: 0; 35 | list-style: none; 36 | } 37 | img { 38 | max-width: 100%; 39 | height: auto; 40 | } 41 | section { 42 | padding: 60px 0; 43 | } 44 | 45 | .sec-title{ 46 | position:relative; 47 | z-index: 1; 48 | margin-bottom:60px; 49 | } 50 | 51 | .sec-title .title{ 52 | position: relative; 53 | display: block; 54 | font-size: 18px; 55 | line-height: 24px; 56 | color: #ff2222; 57 | font-weight: 500; 58 | margin-bottom: 15px; 59 | } 60 | 61 | .sec-title h2{ 62 | position: relative; 63 | display: block; 64 | font-size:40px; 65 | line-height: 1.28em; 66 | color: #222222; 67 | font-weight: 600; 68 | padding-bottom:18px; 69 | } 70 | 71 | .sec-title h2:before{ 72 | position:absolute; 73 | content:''; 74 | left:0px; 75 | bottom:0px; 76 | width:50px; 77 | height:3px; 78 | background-color:#d1d2d6; 79 | } 80 | 81 | .sec-title .text{ 82 | position: relative; 83 | font-size: 16px; 84 | line-height: 26px; 85 | color: #848484; 86 | font-weight: 400; 87 | margin-top: 35px; 88 | } 89 | 90 | .sec-title.light h2{ 91 | color: #ffffff; 92 | } 93 | 94 | .sec-title.text-center h2:before{ 95 | left:50%; 96 | margin-left: -25px; 97 | } 98 | 99 | .list-style-one{ 100 | position:relative; 101 | } 102 | 103 | .list-style-one li{ 104 | position:relative; 105 | font-size:16px; 106 | line-height:26px; 107 | color: #222222; 108 | font-weight:400; 109 | padding-left:35px; 110 | margin-bottom: 12px; 111 | } 112 | 113 | .list-style-one li:before { 114 | content: "\f058"; 115 | position: absolute; 116 | left: 0; 117 | top: 0px; 118 | display: block; 119 | font-size: 18px; 120 | padding: 0px; 121 | text-align: center; 122 | font-weight: 600; 123 | -moz-font-smoothing: grayscale; 124 | -webkit-font-smoothing: antialiased; 125 | font-style: normal; 126 | font-variant: normal; 127 | text-rendering: auto; 128 | line-height: 1.6; 129 | font-family: "Font Awesome 5 Free"; 130 | } 131 | 132 | .list-style-one li a:hover{ 133 | color: #44bce2; 134 | } 135 | 136 | .btn-style-one{ 137 | position: relative; 138 | display: inline-block; 139 | font-size: 17px; 140 | line-height: 30px; 141 | color: #ffffff; 142 | padding: 10px 30px; 143 | font-weight: 600; 144 | overflow: hidden; 145 | letter-spacing: 0.02em; 146 | background-color: #ff2222; 147 | } 148 | 149 | .btn-style-one:hover{ 150 | background-color: #001e57; 151 | color: #ffffff; 152 | } 153 | .about-section{ 154 | position: relative; 155 | padding: 120px 0 70px; 156 | } 157 | 158 | .about-section .sec-title{ 159 | margin-bottom: 45px; 160 | } 161 | 162 | .about-section .content-column{ 163 | position: relative; 164 | margin-bottom: 50px; 165 | } 166 | 167 | .about-section .content-column .inner-column{ 168 | position: relative; 169 | padding-left: 30px; 170 | } 171 | 172 | .about-section .text{ 173 | margin-bottom: 40px; 174 | font-size: 16px; 175 | line-height: 26px; 176 | color: #848484; 177 | font-weight: 400; 178 | } 179 | 180 | .about-section .list-style-one{ 181 | margin-bottom: 45px; 182 | } 183 | 184 | .about-section .btn-box{ 185 | position: relative; 186 | } 187 | 188 | .about-section .btn-box a{ 189 | padding: 15px 50px; 190 | } 191 | 192 | .about-section .image-column{ 193 | position: relative; 194 | } 195 | 196 | .about-section .image-column .text-layer{ 197 | position: absolute; 198 | right: -110px; 199 | top: 50%; 200 | font-size: 325px; 201 | line-height: 1em; 202 | color: #ffffff; 203 | margin-top: -175px; 204 | font-weight: 500; 205 | } 206 | 207 | .about-section .image-column .inner-column{ 208 | position: relative; 209 | padding-left: 120px; 210 | padding-bottom: 125px; 211 | } 212 | 213 | .about-section .image-column .inner-column:before{ 214 | position: absolute; 215 | left: -75px; 216 | top: 65px; 217 | height: 520px; 218 | width: 520px; 219 | background-image:url(https://i.ibb.co/fxJ1jtC/about-circle-1.png); 220 | content: ""; 221 | } 222 | 223 | .about-section .image-column .image-1{ 224 | position: relative; 225 | } 226 | 227 | .about-section .image-column .image-2{ 228 | position: absolute; 229 | left: 0; 230 | bottom: 0; 231 | } 232 | 233 | .about-section .image-column .image-2 img, 234 | .about-section .image-column .image-1 img{ 235 | box-shadow: 0 30px 50px rgba(8,13,62,.15); 236 | } 237 | 238 | .about-section .image-column .video-link{ 239 | position: absolute; 240 | left: 70px; 241 | top: 170px; 242 | } 243 | 244 | .about-section .image-column .video-link .link{ 245 | position: relative; 246 | display: block; 247 | font-size: 22px; 248 | color: #191e34; 249 | font-weight: 400; 250 | text-align: center; 251 | height: 100px; 252 | width: 100px; 253 | line-height: 100px; 254 | background-color: #ffffff; 255 | border-radius: 50%; 256 | box-shadow: 0 30px 50px rgba(8,13,62,.15); 257 | -webkit-transition: all 300ms ease; 258 | -moz-transition: all 300ms ease; 259 | -ms-transition: all 300ms ease; 260 | -o-transition: all 300ms ease; 261 | transition: all 300ms ease; 262 | } 263 | 264 | .about-section .image-column .video-link .link:hover{ 265 | background-color: #191e34; 266 | color: #fff; 267 | } 268 | -------------------------------------------------------------------------------- /src/data.js: -------------------------------------------------------------------------------- 1 | import an1 from './an1.webp'; 2 | import an2 from './an2.png'; 3 | import an3 from './an3.png'; 4 | import an4 from './an4.webp'; 5 | import an5 from './an5.jpg'; 6 | import an6 from './an6.png'; 7 | import an7 from './an7.png'; 8 | import pen1 from './pen1.png'; 9 | import pen2 from './pen2.webp'; 10 | import pen3 from './pen3.png'; 11 | import pen4 from './pen4.webp'; 12 | import pen5 from './pen5.png'; 13 | import pen6 from './pen6.png'; 14 | import pen7 from './pen7.png'; 15 | import pul1 from './pul1.png'; 16 | import pul2 from './pul2.png'; 17 | import pul3 from './pul3.png'; 18 | import pul4 from './pul4.png'; 19 | import pul5 from './pul5.png'; 20 | import pul6 from './pul6.jpg'; 21 | import pul7 from './pul7.png'; 22 | 23 | export const data = [ 24 | 25 | { 26 | 27 | id: 1, 28 | 29 | name: "ANILLO NEW BERN", 30 | 31 | searchTerm: "anillo", 32 | 33 | price: 2500, 34 | 35 | showMore: false, 36 | description: "Anillo de oro blanco de 18 quilates con esmeralda verde central en talla esmeralda de 1,18 quilates y 32 diamantes en talla redonda con un peso total de 0,38 quilates. ", 37 | 38 | image: an1 39 | }, 40 | 41 | { 42 | 43 | id: 2, 44 | 45 | name: "PENDIENTES DE GRANDES ESPERANZAS", 46 | 47 | searchTerm: "pendientes", 48 | 49 | price: 2100, 50 | showMore: false, 51 | description: "Pendientes de oro blanco de 18 quilates con 2 zafiros azules en talla redonda con un peso total de 0,47 quilates y 16 diamantes blancos en talla redonda con un peso total de 0,45 quilates. ", 52 | 53 | image: pen1 54 | 55 | }, 56 | 57 | 58 | 59 | { 60 | 61 | id: 3, 62 | 63 | name: "PULSERA RIVIERE", 64 | 65 | searchTerm: "pulsera", 66 | 67 | price: 1900, 68 | showMore: false, 69 | description: "Pulsera de oro blanco de 18 quilates con corazón de diamantes talla brillante con un total de 0,06 quilates. ", 70 | 71 | image: pul1 72 | 73 | }, 74 | 75 | 76 | 77 | { 78 | 79 | id: 4, 80 | 81 | name: "ANILLO ROMERIA", 82 | 83 | searchTerm: "anillo", 84 | 85 | price: 3400, 86 | showMore: false, 87 | description: "Anillo de oro blanco de 18 quilates con esmeralda verde central en talla esmeralda de 1,18 quilates y 32 diamantes en talla redonda con un peso total de 0,38 quilates. ", 88 | 89 | image: an2 90 | 91 | }, 92 | 93 | 94 | 95 | { 96 | 97 | id: 5, 98 | 99 | name: "PENDIENTES DE GRACE", 100 | 101 | searchTerm: "pendientes", 102 | 103 | price: 1650, 104 | showMore: false, 105 | description: "Pendientes de oro blanco de 18 quilates con 2 zafiros azules en talla redonda con un peso total de 0,47 quilates y 16 diamantes blancos en talla redonda con un peso total de 0,45 quilates. ", 106 | 107 | image: pen2 108 | 109 | }, 110 | 111 | { 112 | 113 | id: 6, 114 | 115 | name: "PULSERA LA DECO", 116 | 117 | searchTerm: "pulsera", 118 | 119 | price: 2600, 120 | showMore: false, 121 | description: "Pulsera de oro blanco de 18 quilates con corazón de diamantes talla brillante con un total de 0,06 quilates. ", 122 | 123 | image: pul2 124 | 125 | }, 126 | 127 | { 128 | 129 | id: 7, 130 | 131 | name: "ANILLO DE VERIS", 132 | 133 | searchTerm: "anillo", 134 | 135 | price: 2100, 136 | showMore: false, 137 | description: "Anillo de oro blanco de 18 quilates con esmeralda verde central en talla esmeralda de 1,18 quilates y 32 diamantes en talla redonda con un peso total de 0,38 quilates. ", 138 | 139 | image: an3 140 | 141 | }, 142 | 143 | { 144 | 145 | id: 8, 146 | 147 | name: "PENDIENTES DE IDALIA", 148 | 149 | searchTerm: "pendientes", 150 | 151 | price: 3500, 152 | showMore: false, 153 | description: " Pendientes de oro blanco de 18 quilates con 2 zafiros azules en talla redonda con un peso total de 0,47 quilates y 16 diamantes blancos en talla redonda con un peso total de 0,45 quilates.", 154 | 155 | image: pen3 156 | 157 | }, 158 | 159 | { 160 | 161 | id: 9, 162 | 163 | name: "PULSERA DE IDALIA", 164 | 165 | searchTerm: "pulsera", 166 | 167 | price: 6000, 168 | showMore: false, 169 | description: "Pulsera de oro blanco de 18 quilates con corazón de diamantes talla brillante con un total de 0,06 quilates. ", 170 | 171 | image: pul3 172 | 173 | }, 174 | 175 | { 176 | 177 | id: 10, 178 | 179 | name: "ANILLO DE IDALIA", 180 | 181 | searchTerm: "anillo", 182 | 183 | price: 1200, 184 | showMore: false, 185 | description: " Anillo de oro blanco de 18 quilates con esmeralda verde central en talla esmeralda de 1,18 quilates y 32 diamantes en talla redonda con un peso total de 0,38 quilates.", 186 | 187 | image: an4 188 | 189 | }, 190 | 191 | { 192 | 193 | id: 11, 194 | 195 | name: "PENDIENTES DE GERIAS", 196 | 197 | searchTerm: "pendientes", 198 | 199 | price: 9500, 200 | showMore: false, 201 | description: " Pendientes de oro blanco de 18 quilates con 2 zafiros azules en talla redonda con un peso total de 0,47 quilates y 16 diamantes blancos en talla redonda con un peso total de 0,45 quilates.", 202 | 203 | image: pen4 204 | 205 | }, 206 | 207 | { 208 | 209 | id: 12, 210 | 211 | name: "PULSERA DE GRACE", 212 | 213 | searchTerm: "pulsera", 214 | 215 | price: 7500, 216 | showMore: false, 217 | description: "Pulsera de oro blanco de 18 quilates con corazón de diamantes talla brillante con un total de 0,06 quilates. ", 218 | 219 | image: pul4 220 | 221 | }, 222 | 223 | { 224 | 225 | id: 13, 226 | 227 | name: "ANILLO DE ORION", 228 | 229 | searchTerm: "anillo", 230 | 231 | price: 1400, 232 | showMore: false, 233 | description: "Anillo de oro blanco de 18 quilates con esmeralda verde central en talla esmeralda de 1,18 quilates y 32 diamantes en talla redonda con un peso total de 0,38 quilates. ", 234 | 235 | image: an5 236 | 237 | }, 238 | 239 | { 240 | 241 | id: 14, 242 | 243 | name: "PENDIENTES DE VERIS", 244 | 245 | searchTerm: "pendientes", 246 | 247 | price: 9000, 248 | showMore: false, 249 | description: "Pendientes de oro blanco de 18 quilates con 2 zafiros azules en talla redonda con un peso total de 0,47 quilates y 16 diamantes blancos en talla redonda con un peso total de 0,45 quilates. ", 250 | 251 | image: pen5 252 | 253 | }, 254 | 255 | { 256 | 257 | id: 15, 258 | 259 | name: "PULSERA DE ORION", 260 | 261 | searchTerm: "pulsera", 262 | 263 | price: 3200, 264 | showMore: false, 265 | description: " Pulsera de oro blanco de 18 quilates con corazón de diamantes talla brillante con un total de 0,06 quilates.", 266 | 267 | image: pul5 268 | 269 | }, 270 | 271 | { 272 | 273 | id: 16, 274 | 275 | name: "ANILLO DE ORION", 276 | 277 | searchTerm: "anillo", 278 | 279 | price: 1400, 280 | showMore: false, 281 | description: "Anillo de oro blanco de 18 quilates con esmeralda verde central en talla esmeralda de 1,18 quilates y 32 diamantes en talla redonda con un peso total de 0,38 quilates. ", 282 | 283 | image: an6 284 | 285 | }, 286 | 287 | { 288 | 289 | id: 17, 290 | 291 | name: "PENDIENTES DE VERIS", 292 | 293 | searchTerm: "pendientes", 294 | 295 | price: 9000, 296 | showMore: false, 297 | description: " Pendientes de oro blanco de 18 quilates con 2 zafiros azules en talla redonda con un peso total de 0,47 quilates y 16 diamantes blancos en talla redonda con un peso total de 0,45 quilates.", 298 | 299 | image: pen6 300 | 301 | }, 302 | 303 | { 304 | 305 | id: 18, 306 | 307 | name: "PULSERA DE ORION", 308 | 309 | searchTerm: "pulsera", 310 | 311 | price: 3200, 312 | showMore: false, 313 | description: "Pulsera de oro blanco de 18 quilates con corazón de diamantes talla brillante con un total de 0,06 quilates. ", 314 | 315 | image: pul6 316 | 317 | }, 318 | 319 | { 320 | 321 | id: 19, 322 | 323 | name: "ANILLO DE ORION", 324 | 325 | searchTerm: "anillo", 326 | showMore: false, 327 | description: "Anillo de oro blanco de 18 quilates con esmeralda verde central en talla esmeralda de 1,18 quilates y 32 diamantes en talla redonda con un peso total de 0,38 quilates. ", 328 | 329 | price: 1400, 330 | 331 | image: an7 332 | 333 | }, 334 | 335 | { 336 | 337 | id: 20, 338 | 339 | name: "PENDIENTES DE VERIS", 340 | 341 | searchTerm: "pendientes", 342 | 343 | price: 9000, 344 | showMore: false, 345 | description: "Pendientes de oro blanco de 18 quilates con 2 zafiros azules en talla redonda con un peso total de 0,47 quilates y 16 diamantes blancos en talla redonda con un peso total de 0,45 quilates. ", 346 | 347 | image: pen7 348 | 349 | }, 350 | 351 | { 352 | 353 | id: 21, 354 | 355 | name: "PULSERA DE ORION", 356 | 357 | searchTerm: "pulsera", 358 | 359 | price: 3200, 360 | showMore: false, 361 | description: "Pulsera de oro blanco de 18 quilates con corazón de diamantes talla brillante con un total de 0,06 quilates. ", 362 | 363 | image: pul7 364 | 365 | } 366 | ] 367 | 368 | --------------------------------------------------------------------------------