phone

app.vue

@@ -100,17 +100,12 @@ const toggleModal = () => {
         <template v-for="item in footerData">
           <div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
         </template>
-      </div>
+        <div class="footer-text footer-text-social">
-      <div class="social">
-        <div class="container prose">
           <template v-for="item in social_networkData">
-            <div class="social_network-name" :class="[{ 'social_network-name-small': item.link }]">
-            <Icon :name="item.icon" />
             <a :href="item.link" target="_blank">
+              <Icon :name="item.icon" />
               {{ item.name }}
-                
             </a>
-            </div>
           </template>
         </div>
       </div>

assets/main.scss

@@ -31,8 +31,12 @@ a[href^="#"] {
 .footer {
     @apply px-2 py-4 bg-slate-200;
 
+    .container {
+        @apply gap-4
+    }
+
     .k-logo {
-        @apply col-span-2 row-span-2 text-9xl text-orange-400;
+        @apply col-span-2 row-span-3 text-9xl text-orange-400;
 
         svg {
             @apply my-0 mx-auto;
@@ -45,6 +49,10 @@ a[href^="#"] {
         &-small {
             @apply col-span-10 text-xs min-w-full prose;
         }
+
+        &-social {
+            @apply col-span-10 flex gap-4
+        }
     }
 }
 

components/calcModels.vue

@@ -5,9 +5,9 @@ import { OrbitControls, vLightHelper } from '@tresjs/cientos'
 import Canvas from './model/canvas.vue';
 
 const controlsState = reactive({
-    minDistance: 6,
+    minDistance: 1,
     maxDistance: 10,
-    // enablePan: false,
+    enablePan: false,
     enableZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
@@ -16,9 +16,6 @@ const controlsState = reactive({
 // const { scene: primaryLight } = await useGLTF('/models_light/primary_light.glb')
 // const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
 // console.log({ backLight, primaryLight, secondaryLight })
-watch(controlsState, ()=>{
-    console.log(controlsState)
-})
 </script>
 <template>
     <div class="container min-w-full">

components/calcValues.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useScroll } from '@vueuse/core';
+
 const lamelles_count = useState('lamelles_count', () => 3)
 const lamelles = reactive({
     min: 3,
@@ -11,6 +13,7 @@ const chanreParametres = () => {
 </script>
 <template>
     <div class="container">
-        <input type="number" :max="lamelles.max" :min="lamelles.min" v-model="lamelles.value" @change="chanreParametres" />
+        <input type="number" :max="lamelles.max" :min="lamelles.min" v-model="lamelles.value"
+            @change="chanreParametres" />
     </div>
 </template>

components/model/canvas.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { useScroll } from '@vueuse/core'
 import Item from './item.vue';
 const lSize = 0.1
 const lamelles_count = useState('lamelles_count')
+const { x, y, isScrolling, arrivedState, directions } = useScroll(document)
+console.log(y)
 </script>
 <template>
     <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow>
-        <TresCircleGeometry :args="[8, 8, 0.05]" />
+        <TresCircleGeometry :args="[8, 8, 1]" />
         <TresMeshStandardMaterial color="pink" />
     </TresMesh>
     <Suspense>

package-lock.json

@@ -13,6 +13,7 @@
         "@tresjs/cientos": "^3.9.0",
         "@tresjs/core": "^4.0.2",
         "@tresjs/nuxt": "^2.1.2",
+        "@vueuse/core": "^10.10.0",
         "nuxt": "^3.11.2",
         "nuxt-svgo": "^4.0.1",
         "sass": "^1.77.4",