Design: Redesigned UI to a compact, light 'Apple-style' aesthetic

src/components/Footer.vue

@@ -1,61 +1,55 @@
 <template>
-  <footer class="bg-card border-t border-border/50 pt-16 pb-8">
+  <footer class="bg-white border-t border-black/[0.04] pt-12 pb-6">
     <div class="container mx-auto px-4">
       <div class="grid sm:grid-cols-2 lg:grid-cols-5 gap-12 mb-12">
         <!-- Brand -->
         <div class="lg:col-span-2">
           <Logo />
-          <p class="text-muted-foreground mt-4 mb-6 max-w-sm">{{ t("footer.tagline") }}</p>
-          <div class="space-y-3">
-            <a href="mailto:hello@forge3d.com" class="flex items-center gap-3 text-muted-foreground hover:text-foreground transition-colors">
-              <Mail class="w-4 h-4 text-primary" />hello@forge3d.com
+          <p class="text-foreground/40 text-sm mt-3 mb-4 max-w-sm font-medium leading-relaxed">{{ t("footer.tagline") }}</p>
+          <div class="space-y-2">
+            <a href="mailto:hello@radionica3d.com" class="flex items-center gap-2 text-xs font-bold text-foreground/40 hover:text-primary transition-colors">
+              <Mail class="w-3.5 h-3.5" />hello@radionica3d.com
             </a>
-            <a href="tel:+1234567890" class="flex items-center gap-3 text-muted-foreground hover:text-foreground transition-colors">
-              <Phone class="w-4 h-4 text-primary" />+1 (234) 567-890
-            </a>
-            <div class="flex items-center gap-3 text-muted-foreground">
-              <MapPin class="w-4 h-4 text-primary" />San Francisco, CA
+            <div class="flex items-center gap-2 text-xs font-bold text-foreground/40">
+              <MapPin class="w-3.5 h-3.5" />Podgorica, Montenegro
             </div>
           </div>
         </div>
 
         <!-- Services -->
+        <!-- Links -->
         <div>
-          <h4 class="font-display font-semibold text-foreground mb-4">{{ t("footer.services") }}</h4>
-          <ul class="space-y-3">
+          <h4 class="font-display text-xs font-bold uppercase tracking-widest text-foreground/40 mb-3">{{ t("footer.services") }}</h4>
+          <ul class="space-y-1.5">
             <li v-for="link in footerLinks.services" :key="link.label">
-              <a :href="link.href" class="text-muted-foreground hover:text-foreground transition-colors">{{ link.label }}</a>
+              <a :href="link.href" class="text-xs font-bold text-foreground/60 hover:text-primary transition-colors">{{ link.label }}</a>
             </li>
           </ul>
         </div>
-
-        <!-- Company -->
         <div>
-          <h4 class="font-display font-semibold text-foreground mb-4">{{ t("footer.company") }}</h4>
-          <ul class="space-y-3">
+          <h4 class="font-display text-xs font-bold uppercase tracking-widest text-foreground/40 mb-3">{{ t("footer.company") }}</h4>
+          <ul class="space-y-1.5">
             <li v-for="link in footerLinks.company" :key="link.label">
-              <a :href="link.href" class="text-muted-foreground hover:text-foreground transition-colors">{{ link.label }}</a>
+              <a :href="link.href" class="text-xs font-bold text-foreground/60 hover:text-primary transition-colors">{{ link.label }}</a>
             </li>
           </ul>
         </div>
-
-        <!-- Support -->
         <div>
-          <h4 class="font-display font-semibold text-foreground mb-4">{{ t("footer.support") }}</h4>
-          <ul class="space-y-3">
+          <h4 class="font-display text-xs font-bold uppercase tracking-widest text-foreground/40 mb-3">{{ t("footer.support") }}</h4>
+          <ul class="space-y-1.5">
             <li v-for="link in footerLinks.support" :key="link.label">
-              <a :href="link.href" class="text-muted-foreground hover:text-foreground transition-colors">{{ link.label }}</a>
+              <a :href="link.href" class="text-xs font-bold text-foreground/60 hover:text-primary transition-colors">{{ link.label }}</a>
             </li>
           </ul>
         </div>
       </div>
 
       <!-- Bottom -->
-      <div class="pt-8 border-t border-border/50 flex flex-col sm:flex-row justify-between items-center gap-4">
-        <p class="text-sm text-muted-foreground">© 2024 Radionica 3D. {{ t("footer.allRightsReserved") }}</p>
-        <div class="flex gap-6">
-          <a href="#" class="text-sm text-muted-foreground hover:text-foreground transition-colors">{{ t("footer.privacy") }}</a>
-          <a href="#" class="text-sm text-muted-foreground hover:text-foreground transition-colors">{{ t("footer.terms") }}</a>
+      <div class="pt-6 border-t border-black/[0.04] flex flex-col sm:flex-row justify-between items-center gap-4">
+        <p class="text-[10px] font-bold text-foreground/30 uppercase tracking-widest">© 2024 Radionica 3D. {{ t("footer.allRightsReserved") }}</p>
+        <div class="flex gap-4">
+          <a href="#" class="text-[10px] font-bold text-foreground/30 hover:text-primary transition-colors uppercase tracking-widest">{{ t("footer.privacy") }}</a>
+          <a href="#" class="text-[10px] font-bold text-foreground/30 hover:text-primary transition-colors uppercase tracking-widest">{{ t("footer.terms") }}</a>
         </div>
       </div>
     </div>

src/components/Header.vue

@@ -1,7 +1,7 @@
 <template>
-  <header class="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-lg border-b border-border/50">
+  <header class="fixed top-0 left-0 right-0 z-50 bg-white/70 backdrop-blur-xl border-b border-black/[0.04]">
     <div class="container mx-auto px-4">
-      <div class="flex items-center justify-between h-16 lg:h-20">
+      <div class="flex items-center justify-between h-14 lg:h-16">
         <!-- Logo -->
         <RouterLink to="/"><Logo /></RouterLink>
 
@@ -12,7 +12,7 @@
             :key="link.href"
             :is="link.isInternal ? RouterLink : 'a'"
             v-bind="link.isInternal ? { to: link.href } : { href: link.href }"
-            class="text-muted-foreground hover:text-foreground transition-colors duration-300 font-medium"
+            class="text-foreground/50 hover:text-primary transition-colors duration-300 font-bold text-[13px] tracking-tight"
           >
             {{ link.label }}
           </component>
@@ -47,10 +47,10 @@
             </Button>
           </template>
           <template v-else>
-            <Button variant="ghost" size="sm" :as="RouterLink" to="/auth">
+            <Button variant="ghost" size="sm" :as="RouterLink" to="/auth" class="text-[13px] font-bold">
               {{ t("nav.logIn") }}
             </Button>
-            <Button variant="default" size="sm" :as="RouterLink" to="/auth">
+            <Button variant="default" size="sm" :as="RouterLink" to="/auth" class="text-[13px] font-bold shadow-md">
               {{ t("nav.register") }}
             </Button>
           </template>

src/components/HeroSection.vue

@@ -1,23 +1,21 @@
 <template>
-  <section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-hero">
+  <section class="relative min-h-[85vh] flex items-center justify-center overflow-hidden bg-white">
     <div class="absolute inset-0 grid-pattern opacity-50" />
     <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-glow rounded-full blur-3xl" />
 
-    <div class="container mx-auto px-4 pt-20 lg:pt-0">
+    <div class="container mx-auto px-4 pt-16 lg:pt-0">
       <div class="grid lg:grid-cols-2 gap-12 items-center">
         <!-- Text -->
         <div class="text-center lg:text-left animate-slide-up">
-          <div class="inline-flex items-center gap-2 px-4 py-2 bg-secondary/50 rounded-full border border-border/50 mb-6 font-display font-medium tracking-wider uppercase">
-            <span class="w-2 h-2 bg-primary rounded-full animate-pulse-glow" />
-            <span class="text-sm text-muted-foreground">{{ t("hero.badge") }}</span>
+            <span class="text-xs text-primary font-bold tracking-widest">{{ t("hero.badge") }}</span>
           </div>
 
-          <h1 class="font-display text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight mb-6">
+          <h1 class="font-display text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-[1.1] mb-6 tracking-tight">
             {{ t("hero.title") }}
-            <span class="block text-gradient">{{ t("hero.titleGradient") }}</span>
+            <span class="block text-primary">{{ t("hero.titleGradient") }}</span>
           </h1>
 
-          <p class="text-lg text-muted-foreground max-w-xl mx-auto lg:mx-0 mb-8 leading-relaxed">
+          <p class="text-lg text-foreground/70 max-w-xl mx-auto lg:mx-0 mb-8 leading-relaxed font-medium">
             {{ t("hero.description") }}
           </p>
 
@@ -33,26 +31,26 @@
           </div>
 
           <!-- Stats -->
-          <div class="grid grid-cols-3 gap-6 mt-12 pt-8 border-t border-border/30">
+          <div class="grid grid-cols-3 gap-6 mt-10 pt-6 border-t border-black/[0.05]">
             <div class="space-y-1">
-              <div class="font-display text-2xl sm:text-3xl font-bold text-gradient">{{ t("hero.stats.precisionValue") }}</div>
-              <div class="text-sm text-muted-foreground">{{ t("hero.stats.precision") }}</div>
+              <div class="font-display text-xl sm:text-2xl font-bold text-primary">{{ t("hero.stats.precisionValue") }}</div>
+              <div class="text-[10px] uppercase tracking-widest font-bold text-foreground/40">{{ t("hero.stats.precision") }}</div>
             </div>
             <div class="space-y-1">
-              <div class="font-display text-2xl sm:text-3xl font-bold text-gradient">{{ t("hero.stats.materialsValue") }}</div>
-              <div class="text-sm text-muted-foreground">{{ t("hero.stats.materials") }}</div>
+              <div class="font-display text-xl sm:text-2xl font-bold text-primary">{{ t("hero.stats.materialsValue") }}</div>
+              <div class="text-[10px] uppercase tracking-widest font-bold text-foreground/40">{{ t("hero.stats.materials") }}</div>
             </div>
             <div class="space-y-1">
-              <div class="font-display text-2xl sm:text-3xl font-bold text-gradient">{{ t("hero.stats.shippingValue") }}</div>
-              <div class="text-sm text-muted-foreground">{{ t("hero.stats.shipping") }}</div>
+              <div class="font-display text-xl sm:text-2xl font-bold text-primary">{{ t("hero.stats.shippingValue") }}</div>
+              <div class="text-[10px] uppercase tracking-widest font-bold text-foreground/40">{{ t("hero.stats.shipping") }}</div>
             </div>
           </div>
         </div>
 
         <!-- Image -->
-        <div class="relative animate-float hidden lg:block">
-          <div class="relative z-10 p-2 bg-card/20 backdrop-blur-sm rounded-2xl border border-border/50">
-            <img alt="3D Printed Professional Prototyping" class="w-full h-auto rounded-xl shadow-card" />
+        <div class="relative animate-float hidden lg:block pr-8">
+          <div class="relative z-10 p-2 bg-white rounded-[2rem] shadow-[0_20px_50px_rgba(0,0,0,0.1)] border border-black/[0.02]">
+            <img src="/src/assets/hero-3d-print.jpg" alt="3D Printed Professional Prototyping" class="w-full h-auto rounded-[1.5rem]" />
           </div>
           <div class="absolute -top-8 -right-8 w-32 h-32 border-2 border-primary/30 rounded-2xl animate-pulse" />
           <div class="absolute -bottom-8 -left-8 w-24 h-24 bg-primary/10 rounded-2xl blur-xl" />

src/components/ModelUploadSection.vue

@@ -1,32 +1,30 @@
 <template>
-  <section id="upload" class="py-24 bg-background relative">
+  <section id="upload" class="py-20 bg-white relative">
     <div class="absolute inset-0 bg-gradient-glow opacity-50" />
 
     <div class="container mx-auto px-4 relative z-10">
-      <div class="text-center mb-16">
-        <span class="text-primary font-display text-sm tracking-widest uppercase">{{ t("upload.badge") }}</span>
-        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mt-4 mb-6">
-          {{ t("upload.title") }} <span class="text-gradient">{{ t("upload.titleGradient") }}</span>
+      <div class="text-center mb-12">
+        <span class="text-primary font-display text-xs font-bold tracking-[0.2em] uppercase">{{ t("upload.badge") }}</span>
+        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-extrabold mt-4 mb-4 tracking-tight">
+          {{ t("upload.title") }} <span class="text-primary">{{ t("upload.titleGradient") }}</span>
         </h2>
-        <p class="text-muted-foreground max-w-2xl mx-auto leading-relaxed">{{ t("upload.description") }}</p>
+        <p class="text-foreground/60 max-w-xl mx-auto text-base font-medium">{{ t("upload.description") }}</p>
       </div>
 
       <div class="max-w-3xl mx-auto space-y-8">
         <!-- Contact -->
         <div class="grid sm:grid-cols-2 gap-6">
-          <div class="space-y-3">
-            <label class="flex items-center gap-2 text-sm font-medium text-foreground ml-1">
-              <User class="w-4 h-4 text-primary" />{{ t("upload.firstName") }} *
+            <label class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-foreground/40 ml-1">
+              {{ t("upload.firstName") }} *
             </label>
             <input v-model="firstName" type="text" required :placeholder="t('upload.firstName')"
-              class="w-full bg-card/50 border border-border/50 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all backdrop-blur-sm" />
+              class="w-full bg-secondary/50 border border-black/[0.03] rounded-2xl px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all text-sm font-medium" />
           </div>
-          <div class="space-y-3">
-            <label class="flex items-center gap-2 text-sm font-medium text-foreground ml-1">
-              <User class="w-4 h-4 text-primary" />{{ t("upload.lastName") }} *
+            <label class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-foreground/40 ml-1">
+              {{ t("upload.lastName") }} *
             </label>
             <input v-model="lastName" type="text" required :placeholder="t('upload.lastName')"
-              class="w-full bg-card/50 border border-border/50 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all backdrop-blur-sm" />
+              class="w-full bg-secondary/50 border border-black/[0.03] rounded-2xl px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all text-sm font-medium" />
           </div>
         </div>
 
@@ -48,9 +46,9 @@
         </div>
 
         <!-- Material Selection -->
-        <div class="space-y-4 p-6 bg-card/30 rounded-2xl border border-border/50">
-          <h3 class="text-sm font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-2">
-            <FileBox class="w-4 h-4 text-primary" />{{ t("upload.selectMaterial") || "Select Material" }}
+        <div class="space-y-4 p-5 bg-secondary/30 rounded-[2rem] border border-black/[0.02]">
+          <h3 class="text-[10px] font-bold uppercase tracking-[0.2em] text-foreground/40 flex items-center gap-2 px-1">
+            {{ t("upload.selectMaterial") || "Select Material" }}
           </h3>
           <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
             <button
@@ -59,14 +57,14 @@
               type="button"
               @click="selectedMaterial = String(m.id)"
               :class="[
-                'p-4 rounded-xl border text-left transition-all hover:scale-[1.02] active:scale-[0.98]',
+                'p-4 rounded-2xl border text-left transition-all duration-300',
                 selectedMaterial === String(m.id)
-                  ? 'bg-primary/20 border-primary shadow-glow ring-1 ring-primary/40'
-                  : 'bg-background/50 border-border/50 hover:border-primary/30'
+                  ? 'bg-white border-primary shadow-lg scale-[1.02] ring-1 ring-primary/20'
+                  : 'bg-white/50 border-black/[0.04] hover:border-primary/20 grayscale opacity-70 hover:opacity-100 hover:grayscale-0'
               ]"
             >
-              <p class="font-bold text-sm mb-1">{{ m['name_' + locale] || m.name_en }}</p>
-              <p class="text-[10px] text-muted-foreground leading-tight">{{ m['desc_' + locale] || m.desc_en }}</p>
+              <p class="font-extrabold text-xs mb-0.5 tracking-tight uppercase">{{ m['name_' + locale] || m.name_en }}</p>
+              <p class="text-[10px] text-foreground/40 leading-tight font-medium line-clamp-1">{{ m['desc_' + locale] || m.desc_en }}</p>
             </button>
           </div>
         </div>
@@ -79,7 +77,7 @@
               <LinkIcon class="w-4 h-4 text-primary" />{{ t("upload.modelLink") }}
             </label>
             <input v-model="modelLink" type="url" :placeholder="t('upload.modelLinkPlaceholder')"
-              class="w-full bg-card/50 border border-border/50 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all backdrop-blur-sm" />
+              class="w-full bg-secondary/50 border border-black/[0.03] rounded-2xl px-4 py-2.5 focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all text-sm font-medium" />
           </div>
         </div>
 
@@ -89,7 +87,7 @@
             <FileText class="w-4 h-4 text-primary" />{{ t("upload.notes") }}
           </label>
           <textarea v-model="notes" :placeholder="t('upload.notesPlaceholder')" rows="2"
-            class="w-full bg-card/50 border border-border/50 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all backdrop-blur-sm resize-none" />
+            class="w-full bg-secondary/50 border border-black/[0.03] rounded-2xl px-4 py-3 focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all text-sm font-medium resize-none" />
         </div>
 
         <!-- Drop Zone -->
@@ -98,22 +96,22 @@
           @dragleave.prevent="isDragging = false"
           @drop.prevent="handleDrop"
           :class="[
-            'relative border-2 border-dashed rounded-2xl p-12 text-center transition-all duration-300',
-            isDragging ? 'border-primary bg-primary/10 shadow-glow' : 'border-border hover:border-primary/50 hover:bg-card/50'
+            'relative border border-dashed rounded-[2rem] p-10 text-center transition-all duration-500',
+            isDragging ? 'border-primary bg-primary/5 shadow-lg' : 'border-black/10 hover:border-primary/30 hover:bg-secondary/20'
           ]"
         >
           <input type="file" multiple accept=".stl,.obj,.3mf,.step" @change="handleFileSelect"
             class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
-          <div class="flex flex-col items-center gap-4">
-            <div :class="['w-20 h-20 rounded-full flex items-center justify-center transition-all duration-300',
-              isDragging ? 'bg-primary text-primary-foreground scale-110' : 'bg-primary/10 text-primary']">
-              <Upload class="w-10 h-10" />
+          <div class="flex flex-col items-center gap-3">
+            <div :class="['w-14 h-14 rounded-2xl flex items-center justify-center transition-all duration-500',
+              isDragging ? 'bg-primary text-primary-foreground scale-110' : 'bg-primary/5 text-primary']">
+              <Upload class="w-7 h-7" />
             </div>
             <div>
-              <p class="font-display text-xl font-semibold mb-2">
+              <p class="font-display text-lg font-extrabold tracking-tight mb-1">
                 {{ isDragging ? t("upload.dropzoneActive") : t("upload.dropzone") }}
               </p>
-              <p class="text-muted-foreground">
+              <p class="text-xs font-medium text-foreground/40">
                 or <span class="text-primary underline cursor-pointer">{{ t("upload.browse") }}</span>
               </p>
             </div>
@@ -126,7 +124,7 @@
             <MapPin class="w-4 h-4 text-primary" />{{ t("upload.shippingAddress") }} *
           </label>
           <textarea v-model="address" rows="3" required :placeholder="t('upload.addressPlaceholder')"
-            class="w-full bg-card/50 border border-border/50 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all backdrop-blur-sm resize-none" />
+            class="w-full bg-secondary/50 border border-black/[0.03] rounded-2xl px-4 py-3 focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all text-sm font-medium resize-none" />
         </div>
 
         <!-- File list -->

src/components/QuotingSection.vue

@@ -1,58 +1,55 @@
 <template>
-  <section id="philosophy" class="py-24 bg-background relative overflow-hidden">
+  <section id="philosophy" class="py-20 bg-white relative overflow-hidden">
     <div class="absolute inset-0 bg-gradient-glow opacity-30" />
 
     <div class="container mx-auto px-4 relative z-10">
-      <div class="text-center mb-20 animate-slide-up">
-        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary mb-6">
+      <div class="text-center mb-16 animate-slide-up">
+        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/5 border border-primary/10 text-primary mb-4">
           <Shield class="w-4 h-4" />
-          <span class="text-xs font-display font-medium tracking-wider uppercase">{{ t("pricing.badge") }}</span>
+          <span class="text-[10px] font-display font-bold tracking-[0.2em] uppercase">{{ t("pricing.badge") }}</span>
         </div>
-        <h2 class="font-display text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
-          {{ t("pricing.title") }} <span class="text-gradient">{{ t("pricing.titleGradient") }}</span>
+        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 tracking-tight">
+          {{ t("pricing.title") }} <span class="text-primary">{{ t("pricing.titleGradient") }}</span>
         </h2>
-        <p class="text-muted-foreground max-w-2xl mx-auto text-lg leading-relaxed">{{ t("pricing.description") }}</p>
+        <p class="text-foreground/60 max-w-xl mx-auto text-base font-medium">{{ t("pricing.description") }}</p>
       </div>
 
       <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
         <div
           v-for="(step, index) in steps"
           :key="index"
-          class="group relative p-8 bg-gradient-card rounded-2xl border border-border/50 hover:border-primary/50 transition-all duration-500 hover:shadow-hover animate-scale-in"
+          class="group relative p-6 bg-white border border-black/[0.04] rounded-[2rem] hover:border-primary/20 transition-all duration-500 hover:shadow-hover animate-scale-in"
           :style="{ animationDelay: step.delay }"
         >
-          <div class="absolute -top-4 -left-4 w-12 h-12 bg-background border border-border rounded-full flex items-center justify-center font-display font-bold text-primary shadow-sm z-20 group-hover:scale-110 transition-transform">
-            0{{ index + 1 }}
+          <div class="w-12 h-12 bg-primary/5 rounded-[1.2rem] flex items-center justify-center mb-5 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-500">
+            <component :is="step.icon" class="w-6 h-6 transition-transform group-hover:scale-110" />
           </div>
-          <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-500 group-hover:rotate-6">
-            <component :is="step.icon" class="w-8 h-8 transition-transform group-hover:scale-110" />
-          </div>
-          <h3 class="font-display text-xl font-semibold mb-4 leading-snug group-hover:text-primary transition-colors">{{ step.title }}</h3>
+          <h3 class="font-display text-base font-bold mb-2 leading-tight group-hover:text-primary transition-colors">{{ step.title }}</h3>
           <div v-if="index < steps.length - 1" class="hidden lg:block absolute top-1/2 -right-4 w-8 h-[2px] bg-gradient-to-r from-primary/30 to-transparent z-0" />
         </div>
       </div>
 
       <!-- Philosophy block -->
-      <div class="mt-24 p-8 sm:p-12 rounded-3xl bg-card border border-border/50 relative overflow-hidden group animate-fade-in">
+      <div class="mt-16 p-8 sm:p-10 rounded-[2.5rem] bg-secondary/30 relative overflow-hidden group animate-fade-in">
         <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -mr-32 -mt-32 transition-transform group-hover:scale-110 duration-700" />
-        <div class="grid lg:grid-cols-2 gap-12 items-center relative z-10">
-          <div class="space-y-6">
-            <h3 class="font-display text-3xl font-bold">
-              {{ t("whyTrust.title") }} <span class="text-primary font-mono tracking-tighter italic">{{ t("whyTrust.titleItalic") }}</span>?
+        <div class="grid lg:grid-cols-2 gap-10 items-center relative z-10">
+          <div class="space-y-4">
+            <h3 class="font-display text-2xl font-extrabold tracking-tight">
+              {{ t("whyTrust.title") }} <span class="bg-primary/10 text-primary px-2 py-0.5 rounded-lg">{{ t("whyTrust.titleItalic") }}</span>?
             </h3>
-            <div class="space-y-4 text-muted-foreground text-lg leading-relaxed">
+            <div class="space-y-3 text-foreground/50 text-base font-medium leading-relaxed">
               <p>{{ t("whyTrust.description1") }}</p>
               <p>{{ t("whyTrust.description2") }}</p>
             </div>
           </div>
-          <div class="grid grid-cols-2 gap-4">
+          <div class="grid grid-cols-2 gap-3">
             <div
               v-for="item in trustItems"
               :key="item.label"
-              class="p-6 rounded-2xl bg-background border border-border/50 flex flex-col items-center text-center group/item hover:border-primary/30 transition-colors"
+              class="p-4 rounded-3xl bg-white border border-black/[0.03] flex flex-col items-center text-center group/item hover:shadow-sm transition-all shadow-[0_4px_10px_rgba(0,0,0,0.03)]"
             >
-              <div class="text-3xl font-bold text-primary mb-1 group-hover/item:scale-110 transition-transform">{{ item.value }}</div>
-              <div class="text-xs uppercase tracking-widest text-muted-foreground font-semibold">{{ item.label }}</div>
+              <div class="text-xl font-bold text-primary mb-0.5 group-hover/item:scale-110 transition-transform">{{ item.value }}</div>
+              <div class="text-[9px] uppercase tracking-[0.2em] font-extrabold text-foreground/30">{{ item.label }}</div>
             </div>
           </div>
         </div>

src/components/ServicesSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="services" class="py-24 bg-card relative overflow-hidden">
+  <section id="services" class="py-20 bg-white relative overflow-hidden">
     <div class="absolute inset-0 grid-pattern opacity-30" />
 
     <div v-if="isLoading" class="py-24 flex items-center justify-center">
@@ -7,12 +7,12 @@
     </div>
 
     <div v-else class="container mx-auto px-4 relative z-10">
-      <div class="text-center mb-16">
-        <span class="text-primary font-display text-sm tracking-widest uppercase">{{ t("services.badge") }}</span>
-        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mt-4 mb-6">
-          {{ t("services.title") }} <span class="text-gradient">{{ t("services.titleGradient") }}</span>
+      <div class="text-center mb-12">
+        <span class="text-primary font-display text-xs font-bold tracking-[0.2em] uppercase">{{ t("services.badge") }}</span>
+        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-extrabold mt-4 mb-4 tracking-tight">
+          {{ t("services.title") }} <span class="text-primary">{{ t("services.titleGradient") }}</span>
         </h2>
-        <p class="text-muted-foreground max-w-2xl mx-auto">{{ t("services.description") }}</p>
+        <p class="text-foreground/60 max-w-xl mx-auto text-base font-medium">{{ t("services.description") }}</p>
       </div>
 
       <!-- Services Grid -->
@@ -20,36 +20,36 @@
         <div
           v-for="(service, index) in services"
           :key="service.id"
-          class="group p-6 bg-gradient-card rounded-xl border border-border/50 hover:border-primary/50 transition-all duration-300 hover:shadow-hover"
+          class="group p-6 card-apple"
           :style="{ animationDelay: `${index * 100}ms` }"
         >
-          <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-500">
-            <component :is="iconMap[service.tech_type] || iconMap.DEFAULT" class="w-7 h-7" />
+          <div class="w-12 h-12 bg-primary/5 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-500">
+            <component :is="iconMap[service.tech_type] || iconMap.DEFAULT" class="w-6 h-6" />
           </div>
-          <h3 class="font-display text-xl font-semibold mb-3">{{ service[`name_${locale}`] || service.name_en }}</h3>
-          <p class="text-muted-foreground leading-relaxed">{{ service[`desc_${locale}`] || service.desc_en }}</p>
+          <h3 class="font-display text-lg font-bold mb-2">{{ service[`name_${locale}`] || service.name_en }}</h3>
+          <p class="text-foreground/50 text-sm leading-relaxed font-medium">{{ service[`desc_${locale}`] || service.desc_en }}</p>
         </div>
       </div>
 
       <!-- Materials -->
-      <div id="materials" class="mt-20">
-        <div class="flex items-center gap-3 mb-10">
-          <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
-            <Sparkles class="w-5 h-5 text-primary" />
+      <div id="materials" class="mt-16">
+        <div class="flex items-center gap-3 mb-8">
+          <div class="w-8 h-8 bg-primary/5 rounded-lg flex items-center justify-center">
+            <Sparkles class="w-4 h-4 text-primary" />
           </div>
-          <h3 class="font-display text-2xl font-bold">{{ t("pricing.materials") }}</h3>
+          <h3 class="font-display text-xl font-extrabold tracking-tight">{{ t("pricing.materials") }}</h3>
         </div>
         <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
           <div
             v-for="(material, idx) in materials"
             :key="material.id"
-            class="p-5 bg-background border border-border/40 rounded-2xl hover:border-primary/30 transition-colors group animate-fade-in"
+            class="p-4 bg-white border border-black/[0.04] rounded-2xl hover:border-primary/20 transition-all hover:shadow-sm group animate-fade-in"
             :style="{ animationDelay: `${idx * 50}ms` }"
           >
-            <div class="text-lg font-display font-bold text-foreground mb-1 group-hover:text-primary transition-colors uppercase">
+            <div class="text-sm font-display font-extrabold text-foreground mb-1 group-hover:text-primary transition-colors uppercase tracking-wide">
               {{ material[`name_${locale}`] || material.name_en }}
             </div>
-            <p class="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{{ material[`desc_${locale}`] || material.desc_en }}</p>
+            <p class="text-[11px] text-foreground/40 line-clamp-2 leading-tight font-medium">{{ material[`desc_${locale}`] || material.desc_en }}</p>
           </div>
         </div>
       </div>

src/components/ui/button.vue

@@ -4,24 +4,24 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-2xl text-[13px] font-bold ring-offset-background transition-all active:scale-95 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/10 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:shadow-lg hover:shadow-primary/25',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-black/[0.08] bg-white hover:bg-secondary hover:text-foreground shadow-sm',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/70 border border-black/[0.02]',
+        ghost: 'hover:bg-secondary hover:text-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
-        hero: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg',
-        heroOutline: 'border-2 border-primary text-primary hover:bg-primary/10'
+        hero: 'bg-primary text-primary-foreground rounded-full px-10 shadow-xl shadow-primary/20 hover:scale-[1.02]',
+        heroOutline: 'border border-black/[0.08] bg-white text-foreground hover:bg-secondary rounded-full px-10'
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        xl: 'h-14 rounded-lg px-8 text-lg',
+        default: 'h-10 px-6 py-2',
+        sm: 'h-8 px-4',
+        lg: 'h-12 rounded-full px-10',
+        xl: 'h-14 rounded-full px-12 text-base',
         icon: 'h-10 w-10',
       },
     },

src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -6,62 +6,55 @@
 
 @layer base {
   :root {
-    --background: 220 16% 8%;
-    --foreground: 220 10% 90%;
+    --background: 0 0% 100%;
+    --foreground: 240 10% 4%;
 
-    --card: 220 14% 12%;
-    --card-foreground: 220 10% 90%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 4%;
 
-    --popover: 220 14% 12%;
-    --popover-foreground: 220 10% 90%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 4%;
 
-    --primary: 210 50% 55%;
-    --primary-foreground: 220 16% 8%;
+    /* Apple Blue Color */
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
 
-    --secondary: 220 14% 16%;
-    --secondary-foreground: 220 10% 90%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
 
-    --muted: 220 12% 20%;
-    --muted-foreground: 220 10% 50%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
 
-    --accent: 210 40% 50%;
-    --accent-foreground: 220 16% 8%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
 
-    --destructive: 0 55% 55%;
-    --destructive-foreground: 220 10% 90%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
 
-    --border: 220 12% 20%;
-    --input: 220 12% 20%;
-    --ring: 210 50% 55%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 4%;
 
-    --radius: 0.75rem;
+    --radius: 1rem;
 
-    /* Custom design tokens */
-    --gradient-primary: linear-gradient(135deg, hsl(210 50% 55%) 0%, hsl(220 45% 65%) 100%);
-    --gradient-hero: linear-gradient(180deg, hsl(220 16% 8%) 0%, hsl(220 18% 13%) 50%, hsl(220 16% 8%) 100%);
-    --gradient-card: linear-gradient(145deg, hsl(220 14% 14%) 0%, hsl(220 14% 10%) 100%);
-    --gradient-glow: radial-gradient(ellipse at center, hsl(210 50% 55% / 0.1) 0%, transparent 70%);
+    /* Apple-style gradients and effects */
+    --gradient-primary: linear-gradient(135deg, hsl(221.2 83.2% 53.3%) 0%, hsl(210 100% 66%) 100%);
+    --gradient-hero: radial-gradient(circle at 50% 50%, hsl(210 40% 98%) 0%, hsl(0 0% 100%) 100%);
+    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(240 4.8% 98%) 100%);
+    --gradient-glow: radial-gradient(circle at center, hsla(221, 83%, 53%, 0.05) 0%, transparent 70%);
     
-    --shadow-glow: 0 0 30px hsl(210 50% 55% / 0.15);
-    --shadow-card: 0 8px 32px hsl(0 0% 0% / 0.4);
-    --shadow-hover: 0 12px 48px hsl(210 50% 55% / 0.1);
+    --shadow-glow: 0 0 40px hsla(221, 83%, 53%, 0.08);
+    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
+    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.08);
 
-    --font-display: 'Orbitron', sans-serif;
+    --font-display: 'Outfit', 'Inter', sans-serif;
     --font-body: 'Inter', sans-serif;
-
-    --sidebar-background: 220 14% 12%;
-    --sidebar-foreground: 220 10% 90%;
-    --sidebar-primary: 210 50% 55%;
-    --sidebar-primary-foreground: 220 16% 8%;
-    --sidebar-accent: 220 12% 20%;
-    --sidebar-accent-foreground: 220 10% 90%;
-    --sidebar-border: 220 12% 20%;
-    --sidebar-ring: 210 50% 55%;
   }
 
   .dark {
-    --background: 220 20% 6%;
-    --foreground: 210 40% 98%;
+    --background: 240 10% 4%;
+    --foreground: 0 0% 98%;
+    /* Add dark mode overrides if needed, but the user asked for LIGHT/CLASSIC */
   }
 }
 
@@ -71,19 +64,20 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
     font-family: var(--font-body);
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   }
 
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-display);
+    @apply tracking-tight;
   }
 }
 
 @layer utilities {
   .text-gradient {
-    @apply bg-clip-text text-transparent;
-    background-image: var(--gradient-primary);
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400 font-bold;
   }
 
   .bg-gradient-hero {
@@ -98,77 +92,48 @@
     background: var(--gradient-glow);
   }
 
-  .shadow-glow {
-    box-shadow: var(--shadow-glow);
-  }
-
-  .shadow-card {
-    box-shadow: var(--shadow-card);
+  .glass-effect {
+    @apply bg-white/70 backdrop-blur-md border border-white/20;
   }
 
-  .shadow-hover {
-    box-shadow: var(--shadow-hover);
+  /* Compact spacing utility */
+  .section-padding {
+    @apply py-16 sm:py-20;
   }
 
   .animate-float {
     animation: float 6s ease-in-out infinite;
   }
 
-  .animate-pulse-glow {
-    animation: pulse-glow 2s ease-in-out infinite;
-  }
-
   .animate-slide-up {
-    animation: slide-up 0.6s ease-out forwards;
+    animation: slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
 
   .animate-fade-in {
     animation: fade-in 0.8s ease-out forwards;
   }
-}
 
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-20px);
+  .card-apple {
+    @apply bg-white rounded-3xl border border-black/[0.03] shadow-[0_2px_10px_-3px_rgba(0,0,0,0.07),0_10px_15px_-3px_rgba(0,0,0,0.05)] hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.1)] transition-all duration-500;
   }
 }
 
-@keyframes pulse-glow {
-  0%, 100% {
-    box-shadow: 0 0 15px hsl(210 50% 55% / 0.2);
-  }
-  50% {
-    box-shadow: 0 0 30px hsl(210 50% 55% / 0.3);
-  }
+@keyframes float {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-15px) rotate(1deg); }
 }
 
 @keyframes slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-/* Grid pattern overlay */
 .grid-pattern {
-  background-image: 
-    linear-gradient(hsl(210 50% 55% / 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, hsl(210 50% 55% / 0.03) 1px, transparent 1px);
-  background-size: 50px 50px;
+  background-image: radial-gradient(circle at 1px 1px, hsl(240 5.9% 90%) 1px, transparent 0);
+  background-size: 40px 40px;
 }