Skip to content

Commit e5af74c

Browse files
AchalogyAchalogy
committed
Merge branch 'main' of github.com:CapituloJaverianoACM/ACM-Web-Page-UI into feature/league-page-structure
2 parents e1bfcdd + 1bb344a commit e5af74c

File tree

9 files changed

+282
-55
lines changed

9 files changed

+282
-55
lines changed

‎src/app/(auth)/log-in/page.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
"use client";
2+
3+
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/home/ui/card";
4+
import { Button } from "@/components/home/ui/button";
5+
import { useState } from "react";
6+
import Link from "next/link";
7+
8+
export default function LoginPage() {
9+
const [email, setEmail] = useState("");
10+
const [password, setPassword] = useState("");
11+
const [loading, setLoading] = useState(false);
12+
const [error, setError] = useState("");
13+
14+
const handleSubmit = async (e: React.FormEvent) => {
15+
e.preventDefault();
16+
setLoading(true);
17+
setError("");
18+
// Lógica real de autenticación aquí
19+
20+
// Simulación de una llamada a la API
21+
setTimeout(() => {
22+
setLoading(false);
23+
if (email === "" || password === "") {
24+
setError("Por favor, completa todos los campos.");
25+
} else {
26+
// Simulación de éxito
27+
alert("¡Bienvenido/a a ACM Javeriana!");
28+
window.location.href = "/"
29+
}
30+
}, 1200);
31+
};
32+
33+
return (
34+
<div className="min-h-screen flex flex-col items-center justify-center bg-azul-niebla dark:bg-[#121212] p-4">
35+
{/* Logo ACM */}
36+
<Link href="/" className="mb-6 flex flex-col items-center group select-none">
37+
<img
38+
src="/Logo_Oscuro.svg"
39+
alt="Logo ACM Javeriana"
40+
className="h-16 w-auto dark:hidden drop-shadow-md transition-transform group-hover:scale-105"
41+
draggable={false}
42+
/>
43+
<img
44+
src="/Logo_Claro.svg"
45+
alt="Logo ACM Javeriana"
46+
className="h-16 w-auto hidden dark:flex drop-shadow-md transition-transform group-hover:scale-105"
47+
draggable={false}
48+
/>
49+
</Link>
50+
<Card className="w-full max-w-md shadow-lg">
51+
<CardHeader>
52+
<CardTitle className="dark:text-white">Iniciar sesión</CardTitle>
53+
</CardHeader>
54+
<CardContent>
55+
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
56+
<div className="flex flex-col gap-1">
57+
<label htmlFor="email" className="text-sm font-medium text-azul-ultramar dark:text-white">Correo electrónico</label>
58+
<input
59+
id="email"
60+
type="email"
61+
autoComplete="email"
62+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
63+
value={email}
64+
onChange={e => setEmail(e.target.value)}
65+
required
66+
/>
67+
</div>
68+
<div className="flex flex-col gap-1">
69+
<label htmlFor="password" className="text-sm font-medium text-azul-ultramar dark:text-white">Contraseña</label>
70+
<input
71+
id="password"
72+
type="password"
73+
autoComplete="current-password"
74+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
75+
value={password}
76+
onChange={e => setPassword(e.target.value)}
77+
required
78+
/>
79+
</div>
80+
{error && <span className="text-red-600 text-sm">{error}</span>}
81+
<Button type="submit" className="w-full mt-2" disabled={loading}>
82+
{loading ? "Ingresando..." : "Iniciar sesión"}
83+
</Button>
84+
</form>
85+
</CardContent>
86+
<CardFooter className="flex flex-col items-center gap-2">
87+
<a href="#" className="text-xs text-azul-crayon dark:text-white hover:underline">¿Olvidaste tu contraseña?</a>
88+
<Link href="/sign-up" className="text-xs text-azul-crayon dark:text-white hover:underline mt-2">¿No tienes cuenta? Regístrate</Link>
89+
</CardFooter>
90+
</Card>
91+
</div>
92+
);
93+
}

‎src/app/(auth)/sign-up/page.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
"use client";
2+
3+
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/home/ui/card";
4+
import { Button } from "@/components/home/ui/button";
5+
import { useState } from "react";
6+
import Link from "next/link";
7+
8+
export default function SignUpPage() {
9+
const [nombre, setNombre] = useState("");
10+
const [apellido, setApellido] = useState("");
11+
const [email, setEmail] = useState("");
12+
const [password, setPassword] = useState("");
13+
const [loading, setLoading] = useState(false);
14+
const [error, setError] = useState("");
15+
16+
const handleSubmit = async (e: React.FormEvent) => {
17+
e.preventDefault();
18+
setLoading(true);
19+
setError("");
20+
// Lógica real de autenticación aquí
21+
22+
// Simulación de una llamada a la API
23+
setTimeout(() => {
24+
setLoading(false);
25+
if (!nombre || !apellido || !email || !password) {
26+
setError("Por favor, completa todos los campos.");
27+
} else {
28+
// Simulación de éxito
29+
alert("¡Registro exitoso! Ahora puedes iniciar sesión.");
30+
window.location.href = "/"
31+
}
32+
}, 1200);
33+
};
34+
35+
return (
36+
<div className="min-h-screen flex flex-col items-center justify-center bg-azul-niebla dark:bg-[#121212] p-4">
37+
{/* Logo ACM */}
38+
<Link href="/" className="mb-6 flex flex-col items-center group select-none">
39+
<img
40+
src="/Logo_Oscuro.svg"
41+
alt="Logo ACM Javeriana"
42+
className="h-16 w-auto dark:hidden drop-shadow-md transition-transform group-hover:scale-105"
43+
draggable={false}
44+
/>
45+
<img
46+
src="/Logo_Claro.svg"
47+
alt="Logo ACM Javeriana"
48+
className="h-16 w-auto hidden dark:flex drop-shadow-md transition-transform group-hover:scale-105"
49+
draggable={false}
50+
/>
51+
</Link>
52+
<Card className="w-full max-w-md shadow-lg">
53+
<CardHeader>
54+
<CardTitle className="dark:text-white">Crear cuenta</CardTitle>
55+
</CardHeader>
56+
<CardContent>
57+
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
58+
<div className="flex flex-col gap-1">
59+
<label htmlFor="nombre" className="text-sm font-medium text-azul-ultramar dark:text-white">Nombre</label>
60+
<input
61+
id="nombre"
62+
type="text"
63+
autoComplete="given-name"
64+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
65+
value={nombre}
66+
onChange={e => setNombre(e.target.value)}
67+
required
68+
/>
69+
</div>
70+
<div className="flex flex-col gap-1">
71+
<label htmlFor="apellido" className="text-sm font-medium text-azul-ultramar dark:text-white">Apellido</label>
72+
<input
73+
id="apellido"
74+
type="text"
75+
autoComplete="family-name"
76+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
77+
value={apellido}
78+
onChange={e => setApellido(e.target.value)}
79+
required
80+
/>
81+
</div>
82+
<div className="flex flex-col gap-1">
83+
<label htmlFor="email" className="text-sm font-medium text-azul-ultramar dark:text-white">Correo electrónico</label>
84+
<input
85+
id="email"
86+
type="email"
87+
autoComplete="email"
88+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
89+
value={email}
90+
onChange={e => setEmail(e.target.value)}
91+
required
92+
/>
93+
</div>
94+
<div className="flex flex-col gap-1">
95+
<label htmlFor="password" className="text-sm font-medium text-azul-ultramar dark:text-white">Contraseña</label>
96+
<input
97+
id="password"
98+
type="password"
99+
autoComplete="new-password"
100+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
101+
value={password}
102+
onChange={e => setPassword(e.target.value)}
103+
required
104+
/>
105+
</div>
106+
{error && <span className="text-red-600 text-sm">{error}</span>}
107+
<Button type="submit" className="w-full mt-2" disabled={loading}>
108+
{loading ? "Registrando..." : "Registrarse"}
109+
</Button>
110+
</form>
111+
</CardContent>
112+
<CardFooter className="flex flex-col items-center gap-2">
113+
<Link href="/log-in" className="text-xs text-azul-crayon dark:text-white hover:underline mt-2">¿Ya tienes cuenta? Inicia sesión</Link>
114+
</CardFooter>
115+
</Card>
116+
</div>
117+
);
118+
}

‎src/app/page.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Hero } from "@/components/home/sections/hero";
66
import { Members } from "@/components/home/sections/members";
77
import { HeroUIProvider } from "@heroui/react";
88
import MainNavbar from '@/components/shared/main-navbar';
9+
import { CursorWrapper } from "@/components/home/ui/CursorWrapper";
910

1011
const navLinks = [
1112
{ key: "home", label: "Home", href: "#home" },
@@ -17,13 +18,13 @@ const navLinks = [
1718
export default function HomePage() {
1819
return (
1920
<HeroUIProvider>
20-
<MainNavbar navLinks={navLinks} />
21-
<div>
21+
<CursorWrapper>
22+
<MainNavbar navLinks={navLinks} />
2223
<Hero />
2324
<AboutUs />
2425
<Members />
2526
<Activities />
26-
</div>
27+
</CursorWrapper>
2728
</HeroUIProvider>
2829
);
2930
}

‎src/components/home/member-modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const MemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
2525

2626
return (
2727
<Dialog open={isOpen} onOpenChange={onClose}>
28-
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-scroll bg-white dark:border-none dark:bg-[#1a1a1a]">
28+
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-scroll bg-white dark:border-none dark:bg-[#1a1a1a] cursor-none">
2929
<DialogHeader>
3030
<DialogTitle className="text-2xl font-bold text-gray-900 dark:text-gray-100">
3131
Sobre {member.name}
@@ -66,7 +66,7 @@ const MemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
6666
<Building className="w-4 h-4" />
6767
<span className="font-medium">{member.title}</span>
6868
</div>
69-
<div className="text-[var(--azul-niebla)]">{member.role}</div>
69+
<div className="dark:text-[var(--azul-niebla)]">{member.role}</div>
7070
<Button
7171
variant="outline"
7272
className="mt-4 dark:hover:bg-[#121212] hover:bg-[var(--azul-niebla)] hover:text-[var(--azul-electrico)] hover:border-[var(--azul-crayon)] transition-colors duration-200"

‎src/components/home/sections/hero.tsx‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,8 @@
11
"use client";
2-
import React, { useEffect } from "react";
2+
import React from "react";
33
import ThreeBlobs from "../three-blobs";
44

55
export function Hero() {
6-
// Add mouse movement handler for the cursor
7-
useEffect(() => {
8-
const handleMouseMove = (event: MouseEvent) => {
9-
const cursor = document.getElementById('custom-cursor');
10-
if (cursor) {
11-
cursor.style.left = `${event.clientX}px`;
12-
cursor.style.top = `${event.clientY}px`;
13-
}
14-
};
15-
16-
window.addEventListener('mousemove', handleMouseMove);
17-
18-
// Cleanup
19-
return () => {
20-
window.removeEventListener('mousemove', handleMouseMove);
21-
};
22-
}, []);
236

247
return (
258
<section
@@ -75,19 +58,6 @@ export function Hero() {
7558
{/* Enhanced gradient overlay for depth */}
7659
<div
7760
className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white/25 dark:to-white/15 pointer-events-none z-10"></div>
78-
79-
{/* Custom cursor with higher z-index to ensure it's always on top */}
80-
<div
81-
className="hidden xl:flex fixed rounded-full w-6 h-6 border-2 border-azul-noche dark:border-white pointer-events-none"
82-
style={{
83-
left: 0,
84-
top: 0,
85-
transform: 'translate(-50%, -50%)',
86-
transition: 'transform 0.05s ease',
87-
zIndex: 999 // Very high z-index to stay above all other elements
88-
}}
89-
id="custom-cursor"
90-
/>
9161
</section>
9262
);
9363
}

‎src/components/home/ui/CursorWrapper.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { useEffect } from "react";
2+
3+
export const CursorWrapper = ({ children }) => {
4+
5+
// Add mouse movement handler for the cursor
6+
useEffect(() => {
7+
const handleMouseMove = (event: MouseEvent) => {
8+
const cursor = document.getElementById('custom-cursor');
9+
if (cursor) {
10+
cursor.style.left = `${event.clientX}px`;
11+
cursor.style.top = `${event.clientY}px`;
12+
}
13+
};
14+
15+
window.addEventListener('mousemove', handleMouseMove);
16+
17+
// Cleanup
18+
return () => {
19+
window.removeEventListener('mousemove', handleMouseMove);
20+
};
21+
}, []);
22+
23+
return <div className="cursor-none">
24+
25+
{children}
26+
27+
{/* Custom cursor with higher z-index to ensure it's always on top */}
28+
<div
29+
className="hidden xl:flex fixed rounded-full w-6 h-6 border-2 border-azul-noche dark:border-white pointer-events-none"
30+
style={{
31+
left: 0,
32+
top: 0,
33+
transform: 'translate(-50%, -50%)',
34+
transition: 'transform 0.05s ease',
35+
zIndex: 999 // Very high z-index to stay above all other elements
36+
}}
37+
id="custom-cursor"
38+
/>
39+
</div>
40+
}

‎src/components/home/ui/card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
99
<div
1010
ref={ref}
1111
className={cn(
12-
"rounded-lg border bg-card text-card-foreground shadow-sm",
12+
"rounded-lg border bg-card text-card-foreground shadow-sm dark:border-[rgb(var(--azul-niebla-rgb)_/_0.4)]",
1313
className
1414
)}
1515
{...props}

0 commit comments

Comments
 (0)