Skip to content

Commit 1e1de18

Browse files
cesardlinxcesardlinx
committed
refactor: refactorizacion de secciones en home
Refactorizacion del codigo de las secciones ciudades y comunidad en home
1 parent e3bf784 commit 1e1de18

11 files changed

Lines changed: 154 additions & 149 deletions

File tree

‎src/components/cities-section/cities-section.js‎

Lines changed: 8 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,18 @@
11
import React from 'react';
2-
import './cities-section.css';
32
import Card from '../UI/card/card';
4-
import ambatoImg from '../../images/cities/ambato.jpg';
5-
import cuencaImg from '../../images/cities/cuenca.jpg';
6-
import guayaquilImg from '../../images/cities/guayaquil.jpg';
7-
import latacungaImg from '../../images/cities/latacunga.jpg';
8-
import lojaImg from '../../images/cities/loja.jpg';
9-
import quitoImg from '../../images/cities/quito.jpg';
10-
import riobambaImg from '../../images/cities/riobamba.jpg';
113
import Carousel from '../UI/carousel/carousel';
124
import bracketsWidget from '../../images/widgets/brackets.svg'
135
import timesYellowWidget from '../../images/widgets/times-yellow.svg'
146
import timesPurpleWidget from '../../images/widgets/times-purple.svg'
7+
import styles from './cities-section.module.css'
8+
import cities from '../../constants/cities';
159

1610
const CitiesSection = () => {
17-
const cities = [
18-
{
19-
imgURL: quitoImg,
20-
topic: 'Quito.js',
21-
description:
22-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
23-
link: '#',
24-
},
25-
{
26-
imgURL: guayaquilImg,
27-
topic: 'Guayaquil.js',
28-
description:
29-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
30-
link: '#',
31-
},
32-
{
33-
imgURL: cuencaImg,
34-
topic: 'Cuenca.js',
35-
description:
36-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
37-
link: '#',
38-
},
39-
{
40-
imgURL: lojaImg,
41-
topic: 'Loja.js',
42-
description:
43-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
44-
link: '#',
45-
},
46-
{
47-
imgURL: riobambaImg,
48-
topic: 'Riobamba.js',
49-
description:
50-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
51-
link: '#',
52-
},
53-
{
54-
imgURL: ambatoImg,
55-
topic: 'Ambato.js',
56-
description:
57-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
58-
link: '#',
59-
},
60-
{
61-
imgURL: latacungaImg,
62-
topic: 'Latacunga.js',
63-
description:
64-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
65-
link: '#',
66-
},
67-
];
11+
6812
return (
69-
<section className="cities-section ec-container">
70-
<img className="small-widget times-yellow" src={timesYellowWidget} />
71-
<h2 className="section-title">Ciudades</h2>
13+
<section className={`ec-container ${styles.cities}`}>
14+
<img className={`small-widget ${styles.widget__timesYellow}`} src={timesYellowWidget} />
15+
<h2 className={`section-title ${styles.cities__title}`}>Ciudades</h2>
7216
<Carousel>
7317
{cities.map(({ imgURL, topic, description, link }) => (
7418
<Card
@@ -80,8 +24,8 @@ const CitiesSection = () => {
8024
/>
8125
))}
8226
</Carousel>
83-
<img className="small-widget bracket" src={bracketsWidget} />
84-
<img className="small-widget times-purple" src={timesPurpleWidget} />
27+
<img className={`small-widget ${styles.widget__bracket}`} src={bracketsWidget} />
28+
<img className={`small-widget ${styles.widget__timesPurple}`} src={timesPurpleWidget} />
8529
</section>
8630
);
8731
};

src/components/cities-section/cities-section.css renamed to src/components/cities-section/cities-section.module.css

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
.cities-section {
1+
.cities {
22
background: #fff;
33
height: 840px;
44
padding-top: 10em;
55
position: relative;
66
}
77

8-
.cities-section .section-title {
8+
.cities__title {
99
margin-bottom: 1em;
1010
}
1111

12+
1213
/* Widgets */
13-
.bracket {
14+
15+
.widget__bracket {
1416
bottom: 38.5em;
1517
right: 13em;
1618
}
1719

18-
.times-yellow {
20+
.widget__times--yellow {
1921
bottom: 25em;
2022
left: 22.4em;
2123
z-index: 0;
2224
}
2325

24-
.times-purple {
26+
.widget__times--purple {
2527
bottom: 2em;
2628
right: 31em;
27-
}
29+
}

‎src/components/community-section/community-section.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
justify-content: space-between;
6767
}
6868

69-
.call-to-action .community-button {
69+
.call-to-action button {
7070
margin-bottom: 1em;
7171
}
7272

@@ -75,7 +75,7 @@
7575
flex-direction: row;
7676
}
7777

78-
.call-to-action .community-button {
78+
.call-to-action button {
7979
margin-bottom: 0;
8080
}
8181
}

‎src/components/community-section/community-section.js‎

Lines changed: 25 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,61 +4,33 @@ import CommunityDescription from "./community-description/community-description"
44
import PhotoSlider from "./photo-slider/photo-slider";
55
import circleWidget from "../../images/widgets/circle.svg";
66
import squareWidget from "../../images/widgets/square.svg";
7-
import photo1 from "../../images/slider/1era meetup cuenca.jpg";
8-
import photo2 from "../../images/slider/segunda meetup.jpg";
7+
import photos from '../../constants/slider'
98
import "./community-section.css";
109

11-
const CommunitySection = () => {
12-
const photos = [
13-
{
14-
name: "1era meetup",
15-
photoURL: photo1,
16-
},
17-
{
18-
name: "2da meetup - Trabajo remoto mitos y realidades",
19-
photoURL: photo2,
20-
},
21-
{
22-
name: "photo3",
23-
photoURL:
24-
"https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68",
25-
},
26-
{
27-
name: "photo4",
28-
photoURL:
29-
"https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w",
30-
},
31-
{
32-
name: "photo5",
33-
photoURL:
34-
"https://i.picsum.photos/id/864/598/386.jpg?hmac=DOo0-DGwCVWdAnQAN_IHDZ2kKK_t10AGle49ztEbyYM",
35-
},
36-
];
37-
return (
38-
<section className="community-section ec-container">
39-
<div className="section-block slider">
40-
<PhotoSlider photos={photos} />
10+
const CommunitySection = () => (
11+
<section className="community-section ec-container">
12+
<div className="section-block slider">
13+
<PhotoSlider photos={photos} />
14+
</div>
15+
<div className="section-block info">
16+
<ul className="headings">
17+
<li className="heading-item-title">
18+
<h3 className="heading title">Comunidad</h3>
19+
</li>
20+
<li className="heading-item-subtitle">
21+
<h4 className="heading subtitle">Javascript del Ecuador</h4>
22+
</li>
23+
</ul>
24+
<CommunityDescription />
25+
<div className="call-to-action">
26+
<Button type="secondary">Conocer a la Comunidad</Button>
27+
<Button type="secondary">Cómo ayudar?</Button>
28+
<Button type="primary">Código de Conducta</Button>
4129
</div>
42-
<div className="section-block info">
43-
<ul className="headings">
44-
<li className="heading-item-title">
45-
<h3 className="heading title">Comunidad</h3>
46-
</li>
47-
<li className="heading-item-subtitle">
48-
<h4 className="heading subtitle">Javascript del Ecuador</h4>
49-
</li>
50-
</ul>
51-
<CommunityDescription />
52-
<div className="call-to-action">
53-
<Button type="secondary">Conocer a la Comunidad</Button>
54-
<Button type="secondary">Cómo ayudar?</Button>
55-
<Button type="primary">Código de Conducta</Button>
56-
</div>
57-
</div>
58-
<img className="widget circle" src={circleWidget} />
59-
<img className="widget square" src={squareWidget} />
60-
</section>
61-
);
62-
};
30+
</div>
31+
<img className="widget circle" src={circleWidget} />
32+
<img className="widget square" src={squareWidget} />
33+
</section>
34+
);
6335

6436
export default CommunitySection;

‎src/constants/cities.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import ambatoImg from '../images/cities/ambato.jpg';
2+
import cuencaImg from '../images/cities/cuenca.jpg';
3+
import guayaquilImg from '../images/cities/guayaquil.jpg';
4+
import latacungaImg from '../images/cities/latacunga.jpg';
5+
import lojaImg from '../images/cities/loja.jpg';
6+
import quitoImg from '../images/cities/quito.jpg';
7+
import riobambaImg from '../images/cities/riobamba.jpg';
8+
9+
const cities = [
10+
{
11+
imgURL: quitoImg,
12+
topic: "Quito.js",
13+
description:
14+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.",
15+
link: "#",
16+
},
17+
{
18+
imgURL: guayaquilImg,
19+
topic: "Guayaquil.js",
20+
description:
21+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.",
22+
link: "#",
23+
},
24+
{
25+
imgURL: cuencaImg,
26+
topic: "Cuenca.js",
27+
description:
28+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.",
29+
link: "#",
30+
},
31+
{
32+
imgURL: lojaImg,
33+
topic: "Loja.js",
34+
description:
35+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.",
36+
link: "#",
37+
},
38+
{
39+
imgURL: riobambaImg,
40+
topic: "Riobamba.js",
41+
description:
42+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.",
43+
link: "#",
44+
},
45+
{
46+
imgURL: ambatoImg,
47+
topic: "Ambato.js",
48+
description:
49+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.",
50+
link: "#",
51+
},
52+
{
53+
imgURL: latacungaImg,
54+
topic: "Latacunga.js",
55+
description:
56+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.",
57+
link: "#",
58+
},
59+
];
60+
61+
export default cities;

‎src/constants/eventos.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
import React from "react";
21
import imgEvent1 from "../images/events/event-1.jpg";
32
import imgEvent2 from "../images/events/event-2.jpg";
43
import imgEvent3 from "../images/events/event-3.jpg";
54
import imgEvent4 from "../images/events/event-1.jpg";
65
import imgEvent5 from "../images/events/event-2.jpg";
76

8-
// import { FaCode, FaCopyright, FaBriefcase } from "react-icons/fa"
97
export default [
108
{
119
id: 1,
1210
imagen: imgEvent1,
1311
titulo: "Trabajo Remoto",
1412
fechaHora: "enero 16 - 17:00",
1513
disertantes: "Crysfel Villa, Freddy Santacruz",
16-
resumen: `Nisi chambray plaid fugiat lyft vape everyday carry woke cliche in selfies kinfolk kogi. Fixie slow-carb occaecat mumblecore in. `,
14+
resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`,
1715
url: "#",
1816
},
1917
{
@@ -22,7 +20,7 @@ export default [
2220
titulo: "Metodologías",
2321
fechaHora: "enero 16 - 17:00",
2422
disertantes: "Crysfel Villa, Freddy Santacruz",
25-
resumen: `Nisi chambray plaid fugiat lyft vape everyday carry woke cliche in selfies kinfolk kogi. Fixie slow-carb occaecat mumblecore in. `,
23+
resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`,
2624
url: "#",
2725
},
2826
{
@@ -31,7 +29,7 @@ export default [
3129
titulo: "GraphQL",
3230
fechaHora: "enero 16 - 17:00",
3331
disertantes: "Crysfel Villa, Freddy Santacruz",
34-
resumen: `Nisi chambray plaid fugiat lyft vape everyday carry woke cliche in selfies kinfolk kogi. Fixie slow-carb occaecat mumblecore in. `,
32+
resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`,
3533
url: "#",
3634
},
3735
{
@@ -40,7 +38,7 @@ export default [
4038
titulo: "GraphQL 2",
4139
fechaHora: "enero 16 - 17:00",
4240
disertantes: "Crysfel Villa, Freddy Santacruz",
43-
resumen: `Nisi chambray plaid fugiat lyft vape everyday carry woke cliche in selfies kinfolk kogi. Fixie slow-carb occaecat mumblecore in. `,
41+
resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`,
4442
url: "#",
4543
},
4644
{
@@ -49,7 +47,7 @@ export default [
4947
titulo: "Gatsby",
5048
fechaHora: "enero 16 - 17:00",
5149
disertantes: "Crysfel Villa, Freddy Santacruz",
52-
resumen: `Nisi chambray plaid fugiat lyft vape everyday carry woke cliche in selfies kinfolk kogi. Fixie slow-carb occaecat mumblecore in. `,
50+
resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`,
5351
url: "#",
5452
},
5553
]

‎src/constants/slider.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import photo1 from "../images/slider/1era meetup cuenca.jpg";
2+
import photo2 from "../images/slider/segunda meetup.jpg";
3+
4+
const photos = [
5+
{
6+
name: "1era meetup",
7+
photoURL: photo1,
8+
},
9+
{
10+
name: "2da meetup - Trabajo remoto mitos y realidades",
11+
photoURL: photo2,
12+
},
13+
{
14+
name: "photo3",
15+
photoURL:
16+
"https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68",
17+
},
18+
{
19+
name: "photo4",
20+
photoURL:
21+
"https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w",
22+
},
23+
{
24+
name: "photo5",
25+
photoURL:
26+
"https://i.picsum.photos/id/864/598/386.jpg?hmac=DOo0-DGwCVWdAnQAN_IHDZ2kKK_t10AGle49ztEbyYM",
27+
},
28+
];
29+
30+
export default photos

0 commit comments

Comments
 (0)