Skip to content

Commit 63d4fff

Browse files
paoloosepaoloose
authored
Merge pull request #3 from fisirc/home-page
feat: home page
2 parents 5ce48d1 + fc17cc8 commit 63d4fff

15 files changed

+732
-2
lines changed

‎app/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
name="viewport"
88
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
99
/>
10-
<title>Nueva galería | Metagallery</title>
10+
<title>Metagallery</title>
1111
<link rel="preconnect" href="https://fonts.googleapis.com">
1212
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1313
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

‎app/public/galleryspace.png

1.17 MB
Loading

‎app/public/left.png

137 KB
Loading

‎app/public/right.png

170 KB
Loading

‎app/src/pages/Home/components/Button.module.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.button {
2+
border: none;
3+
border-radius: 0.5rem;
4+
cursor: pointer;
5+
font-weight: 600;
6+
transition: background-color 0.2s ease-in-out;
7+
}
8+
9+
.primary {
10+
background-color: #18181B;
11+
color: #fff;
12+
}
13+
14+
.secondary {
15+
background-color: transparent;
16+
color: #000;
17+
border: 0.1px solid #d3d3d3;
18+
}
19+
20+
.small {
21+
font-size: 0.875rem;
22+
padding: 0.5rem 0.5rem;
23+
}
24+
25+
.medium {
26+
font-size: 1rem;
27+
padding: 0.75rem 0.75rem;
28+
}
29+
30+
.large {
31+
font-size: 1.125rem;
32+
padding: 0.5rem 1.75rem;
33+
}
34+
35+
.button:hover {
36+
opacity: 0.7;
37+
}

‎app/src/pages/Home/components/Button.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import styles from './Button.module.css';
2+
3+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4+
variant?: 'primary' | 'secondary';
5+
size?: 'small' | 'medium' | 'large';
6+
}
7+
8+
const Button = ({
9+
children,
10+
variant = 'primary',
11+
size = 'medium',
12+
className,
13+
...props
14+
}: ButtonProps) => {
15+
return (
16+
<button
17+
className={`${styles.button} ${styles[variant]} ${styles[size]} ${className}`}
18+
{...props}
19+
>
20+
{children}
21+
</button>
22+
);
23+
};
24+
25+
export default Button;

‎app/src/pages/Home/components/Header.module.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.header {
2+
text-align: center;
3+
padding: 4rem 1rem;
4+
}
5+
6+
.title {
7+
font-size: 3rem;
8+
font-weight: bold;
9+
margin-bottom: 1rem;
10+
}
11+
12+
.description {
13+
max-width: 48rem;
14+
margin: 0 auto 1.8rem;
15+
font-size: 1rem;
16+
color: #666;
17+
}
18+
19+
.buttonGroup {
20+
display: flex;
21+
gap: 1rem;
22+
justify-content: center;
23+
margin-bottom: 4rem;
24+
margin-top: 1rem;
25+
}
26+
27+
.imageContainer {
28+
max-width: 80rem;
29+
margin: 0 auto;
30+
border-radius: 0.5rem;
31+
overflow: hidden;
32+
}
33+
34+
.image {
35+
width: 100%;
36+
height: 100%;
37+
object-fit: cover;
38+
}

‎app/src/pages/Home/components/Header.tsx

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
import { useState } from 'react';
2+
import Button from './Button';
3+
import styles from './Header.module.css';
4+
import Popup from './PopUp/Popup';
5+
import popupStyles from './PopUp/Popup.module.css';
6+
7+
export const Header = () => {
8+
const [loginPopup, setLoginPopup] = useState(false);
9+
const [registerPopup, setRegisterPopup] = useState(false);
10+
const [loginStep, setLoginStep] = useState(1);
11+
const [registerStep, setRegisterStep] = useState(1);
12+
13+
const [username, setUsername] = useState('');
14+
const [email, setEmail] = useState('');
15+
const [password, setPassword] = useState('');
16+
const [address, setAddress] = useState('');
17+
const [postalCode, setPostalCode] = useState('');
18+
const [cardNumber, setCardNumber] = useState('');
19+
const [cvv, setCvv] = useState('');
20+
21+
const resetLoginFlow = () => {
22+
setLoginPopup(false);
23+
setLoginStep(1);
24+
};
25+
26+
const resetRegisterFlow = () => {
27+
setRegisterPopup(false);
28+
setRegisterStep(1);
29+
setUsername('');
30+
setEmail('');
31+
setPassword('');
32+
setAddress('');
33+
setPostalCode('');
34+
setCardNumber('');
35+
setCvv('');
36+
};
37+
38+
return (
39+
<header className={styles.header}>
40+
<h1 className={styles.title}>Metagallery</h1>
41+
<p className={styles.description}>
42+
Crea tu propia galería virtual, exhibe tus obras o descubre las de otros artistas. Interactúa con una comunidad creativa, conecta con compradores interesados y transforma tu visión en una experiencia visual única. ¡Únete y lleva tus creaciones a un nuevo nivel de interacción!
43+
</p>
44+
<div className={styles.buttonGroup}>
45+
<Button variant="secondary" size="large" onClick={() => setLoginPopup(true)}>Iniciar sesión</Button>
46+
47+
<Popup trigger={loginPopup} setTrigger={resetLoginFlow}>
48+
{loginStep === 1 ? (
49+
<>
50+
<h3 className={popupStyles.title}>Inicio de sesión</h3>
51+
<p className={popupStyles.description}>Descubre tu experiencia Metagallery</p>
52+
<form onSubmit={(e) => { e.preventDefault(); setLoginStep(2); }}>
53+
<div className={popupStyles.formgroup}>
54+
<label className={popupStyles.label} htmlFor="username">
55+
Nombre de usuario
56+
</label>
57+
<input
58+
className={popupStyles.forminput}
59+
id="username"
60+
type="text"
61+
placeholder="Nombre de usuario"
62+
required
63+
/>
64+
</div>
65+
<div className={popupStyles.formgroup}>
66+
<label className={popupStyles.label} htmlFor="password">
67+
Contraseña
68+
</label>
69+
<input
70+
className={popupStyles.forminput}
71+
id="password"
72+
type="password"
73+
placeholder="Contraseña"
74+
required
75+
/>
76+
</div>
77+
<button className={popupStyles.button} type="submit">
78+
Ingresar
79+
</button>
80+
<div className={popupStyles.dividerContainer}>
81+
<div className={popupStyles.divider}></div>
82+
<span className={popupStyles.dividerText}>OR</span>
83+
<div className={popupStyles.divider}></div>
84+
</div>
85+
<button className={popupStyles.buttongoogle} type="button">
86+
Ingresar con Google
87+
</button>
88+
</form>
89+
</>
90+
) : (
91+
<>
92+
<h3 className={popupStyles.title}>Bienvenido de nuevo</h3>
93+
<p className={popupStyles.description}>Has iniciado sesión exitosamente.</p>
94+
<button className={popupStyles.button} onClick={resetLoginFlow}>
95+
Cerrar
96+
</button>
97+
</>
98+
)}
99+
</Popup>
100+
101+
<Button variant="primary" size="large" onClick={() => setRegisterPopup(true)}>Comienza ahora</Button>
102+
103+
<Popup trigger={registerPopup} setTrigger={resetRegisterFlow}>
104+
{registerStep === 1 ? (
105+
<>
106+
<h3 className={popupStyles.title}>Registro de usuario</h3>
107+
<p className={popupStyles.description}>Únete a una nueva forma de arte</p>
108+
<form onSubmit={(e) => { e.preventDefault(); setRegisterStep(2); }}>
109+
<div className={popupStyles.formgroup}>
110+
<label className={popupStyles.label} htmlFor="username">
111+
Nombre de usuario
112+
</label>
113+
<input
114+
className={popupStyles.forminput}
115+
id="username"
116+
type="text"
117+
placeholder="Nombre de usuario"
118+
value={username}
119+
onChange={(e) => setUsername(e.target.value)}
120+
required
121+
/>
122+
</div>
123+
<div className={popupStyles.formgroup}>
124+
<label className={popupStyles.label} htmlFor="mail">
125+
Correo electrónico
126+
</label>
127+
<input
128+
className={popupStyles.forminput}
129+
id="mail"
130+
type="email"
131+
placeholder="[email protected]"
132+
value={email}
133+
onChange={(e) => setEmail(e.target.value)}
134+
required
135+
/>
136+
</div>
137+
<div className={popupStyles.formgroup}>
138+
<label className={popupStyles.label} htmlFor="password">
139+
Contraseña
140+
</label>
141+
<input
142+
className={popupStyles.forminput}
143+
id="password"
144+
type="password"
145+
placeholder="Contraseña"
146+
value={password}
147+
onChange={(e) => setPassword(e.target.value)}
148+
required
149+
/>
150+
</div>
151+
<button className={popupStyles.button} type="submit">
152+
Siguiente
153+
</button>
154+
<div className={popupStyles.dividerContainer}>
155+
<div className={popupStyles.divider}></div>
156+
<span className={popupStyles.dividerText}>OR</span>
157+
<div className={popupStyles.divider}></div>
158+
</div>
159+
<button className={popupStyles.buttongoogle} type="button">
160+
Registrarse con Google
161+
</button>
162+
</form>
163+
</>
164+
) : registerStep === 2 ? (
165+
<>
166+
<h3 className={popupStyles.title}>Registro de usuario</h3>
167+
<p className={popupStyles.description}>Completa tus datos adicionales</p>
168+
<form onSubmit={(e) => {
169+
e.preventDefault();
170+
setRegisterStep(3);
171+
}}>
172+
<div className={popupStyles.formgroup}>
173+
<label className={popupStyles.label} htmlFor="address">
174+
Dirección
175+
</label>
176+
<input
177+
className={popupStyles.forminput}
178+
id="address"
179+
type="text"
180+
placeholder="Dirección de Domicilio"
181+
value={address}
182+
onChange={(e) => setAddress(e.target.value)}
183+
required
184+
/>
185+
</div>
186+
<div className={popupStyles.formgroup}>
187+
<label className={popupStyles.label} htmlFor="postalcode">
188+
Código Postal
189+
</label>
190+
<input
191+
className={popupStyles.forminput}
192+
id="postalcode"
193+
type="text"
194+
placeholder="Código Postal"
195+
value={postalCode}
196+
onChange={(e) => setPostalCode(e.target.value)}
197+
/>
198+
</div>
199+
<div className={popupStyles.formgroup}>
200+
<label className={popupStyles.label} htmlFor="card">
201+
Número de Tarjeta
202+
</label>
203+
<input
204+
className={popupStyles.forminput}
205+
id="card"
206+
type="text"
207+
placeholder="XXXX XXXX XXXX XXXX"
208+
value={cardNumber}
209+
onChange={(e) => setCardNumber(e.target.value)}
210+
required
211+
/>
212+
</div>
213+
<div className={popupStyles.formgroup}>
214+
<label className={popupStyles.label} htmlFor="cvv">
215+
CVV
216+
</label>
217+
<input
218+
className={popupStyles.forminput}
219+
id="cvv"
220+
type="text"
221+
placeholder="123"
222+
value={cvv}
223+
onChange={(e) => setCvv(e.target.value)}
224+
required
225+
/>
226+
</div>
227+
<div className={popupStyles.buttonContainer}>
228+
<button
229+
className={popupStyles.buttonBack}
230+
type="button"
231+
onClick={() => setRegisterStep(1)}
232+
>
233+
Atrás
234+
</button>
235+
<button className={popupStyles.buttonStart} type="submit">
236+
Comenzar
237+
</button>
238+
</div>
239+
</form>
240+
</>
241+
) : (
242+
<>
243+
<h3 className={popupStyles.title}>Bienvenido a Metagallery</h3>
244+
<p className={popupStyles.description}>Has creado tu cuenta exitosamente.</p>
245+
<button className={popupStyles.button} onClick={resetRegisterFlow}>
246+
Cerrar
247+
</button>
248+
</>
249+
)}
250+
</Popup>
251+
</div>
252+
<div className={styles.imageContainer}>
253+
<img
254+
src="/galleryspace.png"
255+
alt="Espacio de galería con obras de arte"
256+
className={styles.image}
257+
/>
258+
</div>
259+
</header>
260+
);
261+
};

0 commit comments

Comments
 (0)