AlexRG/LayoutLaSalle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Efecto 3D

Browse Source
This commit is contained in:
Your Name
2025-03-03 07:34:40 -06:00
parent cfd9385702
commit 58f6610ea7
4 changed files with 45 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -8,7 +8,7 @@
<title>Vite + React + TS</title>
</head>
<body>
<div class="min-h-screen bg-blue-50 flex flex-col items-center justify-center p-5 gap-20" id="root"></div>
<div class="min-h-screen bg-blue-800 flex flex-col items-center justify-center p-5 gap-20" id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

BIN
public/la-salle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

26
src/App.tsx
View File

@@ -5,29 +5,41 @@ import { Input } from './components/ui/input';
function App() {
return (
<div className="w-full bg-gray-50 flex flex-col items-center justify-center p-5 gap-20 rounded-lg">
<Card className="w-[350px]">
<div className="w-full grow bg-gradient-to-br from-gray-100 to-gray-300/20 shadow-xl shadow-gray-400/10 flex flex-col items-center justify-center p-5 gap-20 rounded-lg backdrop-blur-lg">
<Card className="w-fit">
<CardHeader>
<CardTitle className='font-display'>Crear nuevo proyecto</CardTitle>
<CardDescription>Presenta tus proyectos 3D y compartelos con tu profesor</CardDescription>
<CardDescription>Presenta tus proyectos 3D y compártelos con tu profesor</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">Nombre del proyecto</Label>
<Label htmlFor="name" className="border-l-4 border-red-500 pl-2 font-bold">
Nombre del proyecto
</Label>
<Input id="name" placeholder="Soporte de Motor" />
</div>
<div className="flex flex-col space-y-1.5">
<Label htmlFor="model">Modelo 3D</Label>
<Label htmlFor="model" className="border-l-4 border-red-500 pl-2 font-bold">
Modelo 3D
</Label>
<Input id="model" type="file" />
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">Cancelar</Button>
<Button className='font-display'>Presentar</Button>
<Button
variant="outline"
className="px-6 py-3 text-gray-700 border border-gray-300 rounded-lg shadow-md shadow-gray-300/50 bg-white transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:shadow-sm"
>
Cancelar
</Button>
<Button className="font-display px-6 py-3 text-lg font-bold text-white bg-gradient-to-b from-blue-500 to-blue-700 rounded-lg shadow-lg shadow-blue-500/50 transform transition-all duration-300 hover:shadow-xl hover:scale-105 active:translate-y-1 active:shadow-md cursor-pointer">
Presentar
</Button>
</CardFooter>
</Card>
</div>

25
src/styles.css
View File

@@ -18,6 +18,20 @@
--color-blue-900: #000a2a;
--color-blue-950: oklch(0.10 0.04 259);
--color-red-50: #fdecef;
--color-red-100: #f9cdd5;
--color-red-200: #f4a9b8;
--color-red-300: #ef768d;
--color-red-400: #ea425f;
--color-red-500: #d21034;
/* Base Red */
--color-red-600: #b30d2d;
--color-red-700: #8e0a23;
--color-red-800: #690719;
--color-red-900: #45050f;
--color-red-950: oklch(0.25 0.16 20);
}
@plugin "tailwindcss-animate";
@@ -50,6 +64,8 @@
--chart-4: hsl(43 74% 66%);
--chart-5: hsl(27 87% 67%);
--radius: 1rem;
font-size: calc(100% + 0.5rem);
}
.dark {
@@ -110,6 +126,15 @@
--radius-xl: calc(var(--radius) + 4px);
}
#root {
background-image: url('/la-salle.png');
/* Replace with your image path */
background-position: bottom right;
background-repeat: no-repeat;
background-size: contain;
/* Adjust based on needs */
}
@layer base {
* {
@apply border-border outline-ring/50;