Add src/app/login/page.tsx
This commit is contained in:
149
src/app/login/page.tsx
Normal file
149
src/app/login/page.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { useState } from "react";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const productsData = [
|
||||
{
|
||||
id: "chat-ai", name: "ChatPro AI", price: "$59/mes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTaRoZ4oHiSdZeXqo1tYWxnepc/a-sleek-minimalist-ui-of-a-conversationa-1774515603459-ba4dec43.png", imageAlt: "Chatbot AI interface", rating: 5,
|
||||
reviewCount: "120"},
|
||||
{
|
||||
id: "image-ai", name: "VisionArt Pro", price: "$79/mes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTaRoZ4oHiSdZeXqo1tYWxnepc/a-futuristic-image-generation-ai-interfa-1774515603770-1d954280.png", imageAlt: "Image generation AI interface", rating: 4.5,
|
||||
reviewCount: "90"},
|
||||
{
|
||||
id: "trading-bot", name: "AlgoTrade X", price: "$129/mes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTaRoZ4oHiSdZeXqo1tYWxnepc/a-sophisticated-trading-bot-dashboard-wi-1774515606615-bde1babd.png", imageAlt: "AI Trading Bot dashboard", rating: 5,
|
||||
reviewCount: "150"},
|
||||
];
|
||||
|
||||
const handleLoginSubmit = (data: Record<string, string>) => {
|
||||
console.log('Login data submitted:', data);
|
||||
// Implement actual login logic here
|
||||
alert('Login functionality not implemented in demo. Check console for data.');
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio", id: "hero", // Link back to the home page's hero section
|
||||
},
|
||||
{
|
||||
name: "Categorías", id: "categories"},
|
||||
{
|
||||
name: "Productos", id: "products"},
|
||||
{
|
||||
name: "Estadísticas", id: "stats"},
|
||||
{
|
||||
name: "Testimonios", id: "testimonials"},
|
||||
{
|
||||
name: "Preguntas Frecuentes", id: "faq"},
|
||||
]}
|
||||
brandName="AI Store"
|
||||
button={{
|
||||
text: "Regresar al Inicio", href: "/"}}
|
||||
bottomLeftText="Global AI Community"
|
||||
bottomRightText="hello@aistore.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="login-form" data-section="login-form">
|
||||
<ContactSplitForm
|
||||
title="Iniciar Sesión"
|
||||
description="Accede a tu cuenta para explorar más IAs."
|
||||
inputs={[
|
||||
{ name: "email", type: "email", placeholder: "Correo Electrónico", required: true },
|
||||
{ name: "password", type: "password", placeholder: "Contraseña", required: true },
|
||||
]}
|
||||
buttonText="Entrar"
|
||||
onSubmit={handleLoginSubmit}
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTaRoZ4oHiSdZeXqo1tYWxnepc/an-abstract-futuristic-glowing-brain-or--1774515602831-e74ad597.png"
|
||||
imageAlt="Abstract AI brain illustration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-catalog" data-section="product-catalog">
|
||||
<ProductCatalog
|
||||
layout="section"
|
||||
title="Explora Más IAs"
|
||||
description="Encuentra la herramienta de inteligencia artificial perfecta para tus necesidades."
|
||||
products={productsData}
|
||||
searchValue={searchValue}
|
||||
onSearchChange={setSearchValue}
|
||||
searchPlaceholder="Buscar IAs..."
|
||||
emptyMessage="No se encontraron productos que coincidan con su búsqueda."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="AI Store"
|
||||
columns={[
|
||||
{
|
||||
title: "Explorar", items: [
|
||||
{
|
||||
label: "Inicio", href: "#hero"},
|
||||
{
|
||||
label: "Categorías", href: "#categories"},
|
||||
{
|
||||
label: "Productos", href: "#products"},
|
||||
{
|
||||
label: "Estadísticas", href: "#stats"},
|
||||
{
|
||||
label: "Testimonios", href: "#testimonials"},
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Compañía", items: [
|
||||
{
|
||||
label: "Sobre Nosotros", href: "#"},
|
||||
{
|
||||
label: "Iniciar Sesión", href: "/login"},
|
||||
{
|
||||
label: "Soporte", href: "#"},
|
||||
{
|
||||
label: "Carreras", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Política de Privacidad", href: "#"},
|
||||
{
|
||||
label: "Términos de Servicio", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 AI Store. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user