Efecto 3D

src/App.tsx

@@ -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>

src/styles.css

@@ -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;