Skip to content

Commit 9c5556b

Browse files
BetoluchencoBetoluchenco
committed
final
1 parent 34d1db9 commit 9c5556b

File tree

4 files changed

+150
-89
lines changed

4 files changed

+150
-89
lines changed

‎src/front/pages/aboutus/AboutUs.jsx‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// AboutUs.jsx
21
import "./aboutus.css";
32
import SilviaImg from "./img/Silvia.png";
43
import AlbertoImg from "./img/Alberto.jpg";
@@ -8,8 +7,7 @@ import { Instagram, Facebook, Mail, Twitter } from "lucide-react";
87

98
export const AboutUs = () => {
109
return (
11-
<section className="about">
12-
{/* HERO */}
10+
<section className="about" id="about">
1311
<header className="about__hero" aria-label="Presentación de la compañía">
1412
<div className="about__hero-bg" />
1513
<div className="about__hero-inner container">
@@ -24,7 +22,6 @@ export const AboutUs = () => {
2422
<div className="about__scroll" aria-hidden="true">▼</div>
2523
</header>
2624

27-
{/* STORY BLURBS */}
2825
<section className="about__story container">
2926
<article className="story story--left">
3027
<div className="story__media">
@@ -65,9 +62,8 @@ export const AboutUs = () => {
6562
</article>
6663
</section>
6764

68-
{/* TEAM */}
6965
<section className="about__team container" aria-label="Nuestro equipo">
70-
<h2 className="team__title">TEAM</h2>
66+
<div><h2 className="team__title">Equipo</h2></div>
7167

7268
<div className="team__grid">
7369
{/* Silvia */}
@@ -80,10 +76,10 @@ export const AboutUs = () => {
8076
<h3 className="team-card__name">Silvia</h3>
8177
<p className="team-card__role">Front-End</p>
8278
<nav className="team-card__social" aria-label="Redes sociales de Silvia">
83-
<a href="#" aria-label="Instagram de Silvia"><Instagram size={18} /></a>
84-
<a href="#" aria-label="Facebook de Silvia"><Facebook size={18} /></a>
85-
<a href="mailto:[email protected]" aria-label="Email de Silvia"><Mail size={18} /></a>
86-
<a href="#" aria-label="Twitter de Silvia"><Twitter size={18} /></a>
79+
<a href="#"><Instagram size={18} /></a>
80+
<a href="#"><Facebook size={18} /></a>
81+
<a href="mailto:[email protected]"><Mail size={18} /></a>
82+
<a href="#"><Twitter size={18} /></a>
8783
</nav>
8884
</div>
8985
</article>
@@ -98,10 +94,10 @@ export const AboutUs = () => {
9894
<h3 className="team-card__name">Alberto</h3>
9995
<p className="team-card__role">Back-End</p>
10096
<nav className="team-card__social" aria-label="Redes sociales de Alberto">
101-
<a href="#" aria-label="Instagram de Alberto"><Instagram size={18} /></a>
102-
<a href="#" aria-label="Facebook de Alberto"><Facebook size={18} /></a>
103-
<a href="mailto:[email protected]" aria-label="Email de Alberto"><Mail size={18} /></a>
104-
<a href="#" aria-label="Twitter de Alberto"><Twitter size={18} /></a>
97+
<a href="#"><Instagram size={18} /></a>
98+
<a href="#"><Facebook size={18} /></a>
99+
<a href="mailto:[email protected]"><Mail size={18} /></a>
100+
<a href="#"><Twitter size={18} /></a>
105101
</nav>
106102
</div>
107103
</article>
@@ -116,15 +112,15 @@ export const AboutUs = () => {
116112
<h3 className="team-card__name">Adrián Beneroso</h3>
117113
<p className="team-card__role">Full-Stack</p>
118114
<nav className="team-card__social" aria-label="Redes sociales de Adrián">
119-
<a href="#" aria-label="Instagram de Adrián"><Instagram size={18} /></a>
120-
<a href="#" aria-label="Facebook de Adrián"><Facebook size={18} /></a>
121-
<a href="mailto:[email protected]" aria-label="Email de Adrián"><Mail size={18} /></a>
122-
<a href="#" aria-label="Twitter de Adrián"><Twitter size={18} /></a>
115+
<a href="#"><Instagram size={18} /></a>
116+
<a href="#"><Facebook size={18} /></a>
117+
<a href="mailto:[email protected]"><Mail size={18} /></a>
118+
<a href="#"><Twitter size={18} /></a>
123119
</nav>
124120
</div>
125121
</article>
126122
</div>
127123
</section>
128124
</section>
129125
);
130-
};
126+
};

‎src/front/pages/aboutus/aboutus.css‎

Lines changed: 61 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,42 @@
33
--gap: 24px;
44
--brand: #7c3aed;
55
--brand-2: #2563eb;
6-
--ink: #0b1020;
6+
--ink: #0b1020;
7+
--nav-h: 72px;
8+
}
9+
10+
.container{
11+
width:min(100% - 32px, var(--container));
12+
margin-inline:auto;
13+
}
14+
15+
.navbar, .site-nav {
16+
position: fixed;
17+
top: 0;
18+
left: 0;
19+
right: 0;
20+
z-index: 2147483647;
21+
pointer-events: auto;
722
}
8-
.container{ width:min(100% - 32px, var(--container)); margin-inline:auto; }
923

1024
.about{
1125
color:#fff;
1226
background: radial-gradient(1200px 500px at 20% -10%, #1b2150 0%, transparent 60%),
1327
radial-gradient(900px 400px at 80% 10%, #1b2150 0%, transparent 60%),
1428
linear-gradient(180deg, #0b1020 0%, #0b0f1a 100%);
1529
overflow: visible;
30+
31+
padding-top: var(--nav-h);
32+
position: relative;
33+
z-index: 0;
1634
}
1735

36+
37+
[id] {
38+
scroll-margin-top: calc(var(--nav-h) + 8px);
39+
}
40+
41+
1842
.about__hero{
1943
position:relative;
2044
min-height: 60vh;
@@ -25,12 +49,14 @@
2549
}
2650

2751
.about__hero-bg{
28-
position:absolute; inset:-20% -5% 0 -5%;
52+
position:absolute;
53+
inset:-20% -5% 0 -5%;
2954
background:
3055
radial-gradient(800px 200px at 20% 0%, rgba(124,58,237,.35), transparent 65%),
3156
radial-gradient(700px 220px at 80% 5%, rgba(37,99,235,.35), transparent 65%);
3257
filter: blur(30px) saturate(120%);
3358
z-index:-1;
59+
pointer-events: none;
3460
animation: pulse 6s ease-in-out infinite alternate;
3561
}
3662
@keyframes pulse{
@@ -146,31 +172,36 @@
146172
line-height: 1.6;
147173
}
148174

175+
149176
.about__team{
150-
padding-block: clamp(48px, 6vw, 96px) clamp(32px, 5vw, 72px);
177+
position: relative;
178+
z-index: 0;
151179
}
152180
.team__title{
153-
text-align:center;
154-
font-size: clamp(1.4rem, 3.5vw, 2.2rem);
155-
font-weight: 900;
181+
display: inline-block;
182+
line-height: 1.2;
183+
padding-block: 12px;
156184
margin: clamp(32px, 4vw, 56px) 0;
185+
font-size: 50px;
186+
font-weight: 900;
157187
letter-spacing: .5px;
188+
158189
background: linear-gradient(135deg, #93c5fd, #a78bfa);
159-
-webkit-background-clip:text;
160-
background-clip:text;
161-
color:transparent;
190+
-webkit-background-clip: text;
191+
background-clip: text;
192+
-webkit-text-fill-color: transparent;
193+
color: transparent;
194+
162195
filter: drop-shadow(0 10px 30px rgba(147,197,253,.25));
163196
}
164197

165-
166198
.team__grid{
167199
display:grid;
168200
gap: clamp(16px, 2.4vw, 28px);
169201
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
170202
align-items: stretch;
171203
}
172204

173-
174205
.team-card{
175206
position: relative;
176207
background: rgba(15, 17, 35, .8);
@@ -182,10 +213,9 @@
182213
transform-style: preserve-3d;
183214
transition: transform .25s ease, box-shadow .25s ease;
184215

185-
186216
display:flex;
187217
flex-direction:column;
188-
min-height: 480px;
218+
min-height: 480px;
189219
}
190220
.team-card:focus-visible{ outline: 2px solid #7c3aed; outline-offset: 3px; }
191221
.team-card:hover{
@@ -200,17 +230,23 @@
200230
pointer-events:none;
201231
}
202232

203-
.team-card__img-wrap{
204-
aspect-ratio: 4 / 3;
205-
border-radius: 12px;
206-
overflow: hidden;
207-
border: 1px solid rgba(255,255,255,.12);
208-
background:#0b0f1a;
209-
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
210-
}
211-
.team-card__img{
212-
width:100%; height:100%; object-fit: cover; display:block;
213-
transition: transform .4s ease, filter .4s ease;
233+
.team-card__img-wrap {
234+
width: 100%;
235+
aspect-ratio: 1 / 1;
236+
border-radius: 50%;
237+
overflow: hidden;
238+
display: flex;
239+
align-items: center;
240+
justify-content: center;
241+
background: #0b0f1a;
242+
border: 2px solid rgba(255,255,255,.12);
243+
}
244+
.team-card__img {
245+
width: 100%;
246+
height: 100%;
247+
object-fit: cover;
248+
object-position: center;
249+
border-radius: 50%;
214250
}
215251
.team-card:hover .team-card__img{ transform: scale(1.04); filter:saturate(1.05); }
216252

‎src/front/pages/carro/Carro.css‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
padding-bottom: 70px;
1414
}
1515

16-
1716
.carro-bg{
1817
position: fixed;
1918
inset: 0;
@@ -56,10 +55,11 @@
5655
display: grid;
5756
grid-template-columns: 1fr 350px;
5857
gap: 2rem;
58+
align-items: start;
5959
}
6060

6161
.carro-box {
62-
background: #1f2937; /* gris oscuro */
62+
background: #1f2937;
6363
border-radius: 10px;
6464
padding: 1.25rem;
6565
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
@@ -142,9 +142,23 @@
142142
}
143143

144144
.carro-summary {
145+
align-self: start;
145146
background: #1f2937;
146147
border-radius: 10px;
147148
padding: 1.5rem;
148149
color: #f3f4f6;
149150
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
151+
152+
position: sticky;
153+
top: 90px;
154+
}
155+
156+
@media (max-width: 900px) {
157+
.carro-grid {
158+
grid-template-columns: 1fr;
159+
}
160+
.carro-summary {
161+
position: static;
162+
top: auto;
163+
}
150164
}

0 commit comments

Comments
 (0)