login and dashboard

app/src/pages/Dashboard/Dashboard.tsx

@@ -0,0 +1,103 @@
+import { Menu, Search, Share2 } from "lucide-react";
+import styles from "./GalleryDashboard.module.css";
+
+const galleries = [
+  {
+    title: "Salón cúpula",
+    description: "Una colección que refleja el alma de la expresión",
+    image: "/placeholder.svg",
+  },
+  {
+    title: "Habitación de los muros",
+    description: "Muros y más muros",
+    image: "/placeholder.svg",
+  },
+  {
+    title: "Salón vintage",
+    description: "La colección perfecta para tu arte vintage",
+    image: "/placeholder.svg",
+  },
+  {
+    title: "Golden room",
+    description: "Un espacio al estilo del golden hour",
+    image: "/placeholder.svg",
+  },
+  {
+    title: "Arte conexo",
+    description: "Conectando el arte con la realidad",
+    image: "/placeholder.svg",
+  },
+  {
+    title: "Ronda de 3D",
+    description: "Experiencia inmersiva en 3D",
+    image: "/placeholder.svg",
+  },
+];
+
+export const GalleryDashboard = () => {
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <div className={styles.headerContent}>
+          <button className={styles.menuButton}>
+            <Menu className={styles.menuIcon} />
+            <span className={styles.srOnly}>Dashboard</span>
+          </button>
+          <div className={styles.headerRight}>
+            <span className={styles.userName}>Van Gogh</span>
+            <button className={styles.upgradeButton}>Mejora tu plan</button>
+          </div>
+        </div>
+      </header>
+
+      <main className={styles.main}>
+        <div className={styles.profileSection}>
+          <h1 className={styles.profileName}>Rodrigo Alva</h1>
+          <div className={styles.searchContainer}>
+            <Search className={styles.searchIcon} />
+            <input
+              type="search"
+              placeholder="¿Qué estás buscando?"
+              className={styles.searchInput}
+            />
+          </div>
+
+          <div className={styles.filters}>
+            <button className={`${styles.filterButton} ${styles.active}`}>
+              Mis proyectos
+            </button>
+            <button className={styles.filterButton}>
+              Proyectos de la comunidad
+            </button>
+          </div>
+        </div>
+
+        <div className={styles.galleryGrid}>
+          {galleries.map((gallery) => (
+            <div key={gallery.title} className={styles.galleryCard}>
+              <img
+                src={gallery.image}
+                alt={gallery.title}
+                className={styles.galleryImage}
+              />
+              <div className={styles.galleryOverlay}>
+                <h2 className={styles.galleryTitle}>{gallery.title}</h2>
+                <p className={styles.galleryDescription}>
+                  {gallery.description}
+                </p>
+                <div className={styles.galleryActions}>
+                  <button className={styles.openButton}>Abrir</button>
+                  <button className={styles.shareButton}>
+                    <Share2 className={styles.shareIcon} />
+                    Compartir
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}
+

app/src/pages/Dashboard/GalleryDashboard.module.css

@@ -0,0 +1,237 @@
+.container {
+  min-height: 100vh;
+  background-color: white;
+}
+
+.header {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.headerContent {
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.menuButton {
+  padding: 0.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.menuButton:hover {
+  background-color: #f3f4f6;
+  border-radius: 0.375rem;
+}
+
+.menuIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.tierName {
+  font-size: 0.875rem;
+}
+
+.upgradeButton {
+  background-color: black;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  border: none;
+  cursor: pointer;
+}
+
+.main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+.profileSection {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.profileName {
+  font-size: 3rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+
+.socialLinks {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.socialLink {
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: #d1d5db;
+  border-radius: 50%;
+}
+
+.socialLink:hover {
+  background-color: #9ca3af;
+}
+
+.searchContainer {
+  position: relative;
+  max-width: 36rem;
+  margin: 0 auto 2rem;
+}
+
+.searchIcon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.searchInput {
+  width: 100%;
+  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
+  border: 1px solid #e5e5e5;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+}
+
+.searchInput:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.5);
+}
+
+.filters {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.filterButton {
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.filterButton:hover,
+.filterButton.active {
+  background-color: #f3f4f6;
+}
+
+.galleryGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.galleryCard {
+  position: relative;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid #e5e5e5;
+  width: 350px;
+  height: 275px;
+}
+
+.galleryImage {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+}
+
+.galleryOverlay {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  color: white;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1rem;
+}
+
+.galleryCard:hover .galleryOverlay {
+  opacity: 1;
+}
+
+.galleryTitle {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.galleryDescription {
+  font-size: 0.875rem;
+  color: #e5e5e5;
+  margin-bottom: 0.75rem;
+}
+
+.galleryActions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.openButton,
+.shareButton {
+  padding: 0.25rem 1rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  border: none;
+  cursor: pointer;
+}
+
+.openButton {
+  background-color: black;
+  color: white;
+}
+
+.shareButton {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.shareIcon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@media (max-width: 768px) {
+  .galleryGrid {
+    grid-template-columns: 1fr;
+  }
+}

app/src/pages/Dashboard/index.tsx

@@ -0,0 +1,7 @@
+import { GalleryDashboard } from "./Dashboard";
+
+export const Dashboard = () => (
+  <>
+    <GalleryDashboard />
+  </>
+);