actualizando glb y corrigiendo errores

yomero243 · Nov 7, 2024 · 949ea88 · 949ea88
1 parent ab80a6f
commit 949ea88
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
     <title>Wine types app</title>
   </head>
   <body>

diff --git a/public/untitled.glb b/public/untitled.glb
diff --git a/src/App.jsx b/src/App.jsx
@@ -19,7 +19,7 @@ function RotatingLights() {
 
     // Rotación de las luces
     const radius = 3;
-    const speed = 0.5;
+    const speed = 1.5;
 
     // Luz 1
     light1Ref.current.position.x = Math.sin(timeRef.current * speed) * radius;
@@ -59,14 +59,19 @@ function Model() {
   const modelRef = useRef();
   const { scene } = useGLTF('/untitled.glb');
 
-  // Configurar escala y posición inicial
-  scene.scale.set(2, 2, 2);
-  scene.position.set(0, 0, 0);
+  scene.scale.set(1.2, 1.2, 1.2);
+  scene.position.set(0, 2, 0);
 
-  // Añadir rotación continua
+  scene.traverse((node) => {
+    if (node.isMesh) {
+      node.castShadow = true;
+      node.receiveShadow = true;
+    }
+  });
+
   useFrame((state, delta) => {
     if (modelRef.current) {
-      modelRef.current.rotation.y -= delta * 0.5; // Valor negativo para girar a la derecha
+      modelRef.current.rotation.y -= delta * 0.5;
     }
   });
 
@@ -75,60 +80,47 @@ function Model() {
 
 function App() {
   return (
-    <div 
-      className="min-h-screen" 
-      style={{
-        backgroundImage: 'url(background.jpg)', //  Tu imagen JPG
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat'
-      }}>
+    <div className="min-h-screen relative pb-[100px]" style={{
+      backgroundImage: 'url(background.jpg)',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat'
+    }}>
       <div className="py-4">
-        <h1 className="text-3xl font-bold text-center text-black mb-4">
+        <h1 className="text-6xl font-['Great_Vibes'] font-bold text-center text-black mb-4 relative z-0">
           Types of wines
         </h1>
 
-        <div className="relative">
-          <div className="absolute top-0 left-1/2 transform -translate-x-1/2 h-[600px] w-full max-w-[800px] z-0">
+        <div className="relative min-h-[800px]">
+          <div className="absolute top-0 left-1/2 transform -translate-x-1/2 h-[800px] w-full max-w-[800px] z-10 overflow-visible">
             <Canvas 
-              shadows 
-              camera={{ 
-                position: [0, 0, 8],
-                fov: 50,
-                near: 0.1,
-                far: 1000
-              }}
+              shadows
+              camera={{ position: [0, 0, 8], fov: 50 }}
               style={{ 
                 position: 'absolute', 
                 top: 0, 
                 left: 0, 
                 width: '100%', 
                 height: '100%',
-                background: 'transparent' // Hacer el canvas transparente
+                background: 'transparent',
+                overflow: 'visible'
               }}>
-
-              <Environment
-                files="/royal_esplanade_4k.hdr"
-                background={false} // Cambiar a false para que no se use como fondo
-              />
-
+              <Environment files="/royal_esplanade_4k.hdr" background={false} />
               <ambientLight intensity={1.5} />
               <RotatingLights />
-
-              <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -2, 0]} receiveShadow>
-                <planeGeometry args={[100, 100]} />
-                <shadowMaterial transparent opacity={0.4} />
-              </mesh>
-
               <Model />
             </Canvas>
           </div>
 
-          <div className="relative z-10 pt-[100px]">
+          <div className="absolute w-full px-4 z-20">
             <WineButtons wineData={vinos} />
           </div>
         </div>
       </div>
+
+      <footer className="bg-black bg-opacity-80 text-white py-4 text-center fixed bottom-0 w-full">
+        <p>© 2024 Types of Wines. Todos los derechos reservados.</p>
+      </footer>
     </div>
   );
 }

diff --git a/src/components/WineButtons.jsx b/src/components/WineButtons.jsx
@@ -35,7 +35,9 @@ function WineButtons({ wineData }) {
         {wines.map((wine) => (
           <div key={wine} className="bg-white p-2 rounded-lg shadow-sm hover:shadow-md border 
                                    border-[#D4B996] hover:border-[#722F37] transition-all duration-300 
-                                   text-center text-[#722F37] text-sm hover:-translate-y-0.5">
+                                   text-center text-[#722F37] text-xs md:text-sm min-h-[40px] 
+                                   flex items-center justify-center whitespace-normal
+                                   hover:-translate-y-0.5">
             {wine}
           </div>
         ))}
@@ -51,9 +53,9 @@ function WineButtons({ wineData }) {
           <button
             onClick={() => handleSubFlavorClick(subFlavor)}
             className={`w-full bg-white hover:bg-[#F5EEE6] text-[#722F37] border 
-                       border-[#D4B996] font-semibold py-1.5 px-3 rounded-lg 
+                       border-[#D4B996] text-sm py-1.5 px-3 rounded-lg 
                        transition duration-300 ease-in-out transform hover:scale-102 
-                       shadow-sm text-sm ${selectedSubFlavor === subFlavor ? 'bg-[#E6D5C1]' : ''}`}
+                       shadow-sm ${selectedSubFlavor === subFlavor ? 'bg-[#E6D5C1]' : ''}`}
           >
             {subFlavor}
           </button>
@@ -77,7 +79,7 @@ function WineButtons({ wineData }) {
             <button
               key={category}
               onClick={() => handleCategoryClick(category)}
-              className={`px-6 py-2 rounded-full font-medium text-sm transition-all duration-300
+              className={`px-6 py-2 rounded-full transition-all duration-300 font-['Great_Vibes'] text-2xl
                 ${selectedCategory === category 
                   ? 'bg-[#722F37] text-white shadow-lg'
                   : 'bg-white text-[#722F37] border border-[#722F37] hover:bg-[#722F37] hover:text-white'
@@ -97,9 +99,10 @@ function WineButtons({ wineData }) {
                   <button
                     onClick={() => handleSubCategoryClick(subCategory)}
                     className={`w-full bg-white hover:bg-[#F5EEE6] text-[#722F37] border 
-                               border-[#D4B996] font-semibold py-1.5 px-3 rounded-lg 
+                               border-[#D4B996] text-xs md:text-sm py-1.5 px-2 md:px-3 rounded-lg 
                                transition duration-300 ease-in-out transform hover:scale-102 
-                               shadow-sm text-sm ${selectedSubCategory === subCategory ? 'bg-[#E6D5C1]' : ''}`}
+                               whitespace-normal min-h-[40px] flex items-center justify-center
+                               shadow-sm ${selectedSubCategory === subCategory ? 'bg-[#E6D5C1]' : ''}`}
                   >
                     {subCategory}
                   </button>
@@ -114,9 +117,10 @@ function WineButtons({ wineData }) {
                             <button
                               onClick={() => handleFlavorClick(flavor)}
                               className={`w-full bg-white hover:bg-[#F5EEE6] text-[#722F37] border 
-                                        border-[#D4B996] font-semibold py-1.5 px-3 rounded-lg 
-                                        transition duration-300 ease-in-out transform hover:scale-102 
-                                        shadow-sm text-sm ${selectedFlavor === flavor ? 'bg-[#E6D5C1]' : ''}`}
+                                        border-[#D4B996] text-xs md:text-sm py-1.5 px-2 md:px-3 rounded-lg 
+                                        transition duration-300 ease-in-out transform hover:scale-102
+                                        whitespace-normal min-h-[40px] flex items-center justify-center 
+                                        shadow-sm ${selectedFlavor === flavor ? 'bg-[#E6D5C1]' : ''}`}
                             >
                               {flavor}
                             </button>
@@ -143,7 +147,7 @@ function WineButtons({ wineData }) {
             <button
               key={category}
               onClick={() => handleCategoryClick(category)}
-              className={`px-6 py-2 rounded-full font-medium text-sm transition-all duration-300
+              className={`px-6 py-2 rounded-full font-medium text-sm transition-all duration-300 font-['Great_Vibes'] text-lg
                 ${selectedCategory === category 
                   ? 'bg-[#722F37] text-white shadow-lg'
                   : 'bg-white text-[#722F37] border border-[#722F37] hover:bg-[#722F37] hover:text-white'

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,11 +1,15 @@
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        'wine': ['Great Vibes', 'Edwardian Script ITC', 'cursive'],
+      },
+    },
   },
   plugins: [],
 }