feat: better fotter

app/app.tsx

@@ -16,17 +16,33 @@ function App() {
       
       <main className="max-w-5xl mx-auto px-6 sm:px-8 lg:px-10 py-24 space-y-32">
 
-        <Hero />
-        <DownloadSection />
-        <Features />
-        <WhatYouCanDo />
-        <WhyAramland />
-        <FreeTrial />
-        {/* <ScientificBenefits /> */}
-        <CallToAction />
-      </main>
+          <div id="download">
+            <Hero />
+          </div>
 
+        <div id="features">
+          <Features />
+        </div>
+        
+        <div id="what-you-can-do">
+          <WhatYouCanDo />
+        </div>
+        
+        <div id="why-aramland">
+          <WhyAramland />
+        </div>
+        
+        <div id="free-trial">
+          <FreeTrial />
+        </div>
+        
+        <div id="call-to-action">
+          <CallToAction />
+        </div>
+      </main>
+      <div id='footer'>
       <Footer />
+      </div>
     </div>
   );
 }

app/components/CallToAction.jsx

@@ -1,4 +1,7 @@
+"use client";
+import { useScroll } from '../hooks/useScroll';
 function CallToAction() {
+  const { scrollToSectionWithHeader } = useScroll();
   return (
     <div className="relative text-center rounded-3xl p-16 animate-fadeInUp overflow-hidden">
       {/* Background with gradient */}
@@ -15,12 +18,12 @@ function CallToAction() {
           امروز اولین قدم رو بردار و ببین چطور آرام‌لند می‌تونه کیفیت زندگی‌ات رو متحول کنه
         </p>
         
-        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-          <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 text-lg shadow-lg hover:shadow-primary-500/40 relative overflow-hidden group">
+        <div  className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <button  onClick={() => scrollToSectionWithHeader('download')} className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 text-lg shadow-lg hover:shadow-primary-500/40 relative overflow-hidden group">
             <div className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
             <span className="relative">شروع سفر آرامش</span>
           </button>
-          <button className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-primary-500 hover:text-primary-500 transition-all duration-300">
+          <button onClick={() => scrollToSectionWithHeader('features')} className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-primary-500 hover:text-primary-500 transition-all duration-300">
             بیشتر بدانید
           </button>
         </div>

app/components/DownloadSection.jsx

@@ -3,40 +3,43 @@ import { Download, Globe, PlayCircle } from 'lucide-react';
 function DownloadSection() {
   const downloadOptions = [
     {
-      icon: Download,
+      icon: './images/cafe.png',
       title: "کافه بازار",
       description: "دانلود برای اندروید",
-      badge: "پرطرفدار",
-      gradient: "from-primary-500 to-primary-600",
+      // badge: "پرطرفدار",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
       animation: "animate-slideInLeft delay-100"
     },
     {
-      icon: PlayCircle,
+      icon: './images/myket.png',
       title: "مایکت",
       description: "دانلود برای اندروید",
-       gradient: "from-primary-500 to-primary-600",
+             gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
       animation: "animate-fadeInUp delay-200"
     },
     {
-      icon: Globe,
+      icon:'./images/appstore.png',
       title: "وب سایت",
       description: "نسخه وب برای تمام دستگاه‌ها",
-      badge: "جدید",
-      gradient: "from-primary-500 to-primary-600",
-      animation: "animate-slideInRight delay-300"
+      badge: "",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      animation: "animate-slideInRight delay-300",
+       border: "border-primary-500/20",
     }
   ];
 
   return (
-    <div className="relative bg-white rounded-3xl shadow-2xl p-12 mb-20 animate-fadeInUp overflow-hidden">
+    <div className="relative rounded-3xl p-1 mb-10 animate-fadeInUp overflow-hidden">
       {/* Background pattern */}
-      <div className="absolute inset-0 opacity-5">
-        <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600"></div>
+      <div className="absolute inset-0 opacity-4">
+        <div className="absolute inset-0"></div>
       </div>
       
       <div className="relative">
         <div className="text-center mb-12">
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4 mt-8">
             همین حالا <span className="text-primary-500">شروع کنید</span>
           </h2>
           <p className="text-xl text-gray-600 max-w-2xl mx-auto">
@@ -44,27 +47,28 @@ function DownloadSection() {
           </p>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+        <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto ">
           {downloadOptions.map((option, index) => (
             <a
               key={index}
               href="#"
-              className={`relative flex flex-col items-center justify-center p-8 bg-gradient-to-br ${option.gradient} rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 text-white group ${option.animation} overflow-hidden`}
+              className={`relative flex flex-col items-center justify-center p-8 bg-gradient-to-br ${option.gradient} rounded-3xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2  group ${option.animation} overflow-hidden border ${option.border}`}
             >
               {/* Shine effect */}
               <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
               
               {option.badge && (
-                <div className="absolute -top-2 -right-2 bg-white text-primary-500 px-3 py-1 rounded-full text-xs font-bold shadow-lg">
+                <div className="absolute -top-0 right-0 bg-primary-200  px-2 py-2 rounded text-xs font-bold">
                   {option.badge}
                 </div>
               )}
               
-              <div className="bg-white/20 p-4 rounded-2xl mb-4 group-hover:scale-110 transition-transform duration-300">
-                <option.icon className="w-8 h-8" />
+              <div className="bg-white p-4 rounded-2xl mb-4 group-hover:scale-110 transition-transform duration-300">
+                <img src={option.icon} alt="Download" className="w-20 h-20 border border-transparent rounded-xl " />
+                {/* <option.icon className="w-8 h-8" /> */}
               </div>
               <h3 className="text-xl font-bold mb-2">{option.title}</h3>
-              <p className="text-white/90 text-sm">{option.description}</p>
+              <p className="text-sm">{option.description}</p>
             </a>
           ))}
         </div>

app/components/Features.jsx

@@ -27,7 +27,7 @@ function Features() {
   ];
 
   return (
-    <div className="my-24">
+    <div className="my-12">
       <div className="text-center mb-16">
         <div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-500 px-4 py-2 rounded-full text-sm font-medium mb-4">
           <span>✨</span>

app/components/Footer.jsx

@@ -1,8 +1,148 @@
+"use client";
+import { useScroll } from '../hooks/useScroll';
+
 function Footer() {
+   const { scrollToSectionWithHeader } = useScroll();
   return (
-    <footer className="py-12 text-center text-gray-500 border-t border-gray-200">
-      <p className="mb-4">© ۱۴۰۳ آرام‌لند - همراه تو برای یک زندگی آرام‌تر</p>
-      <p className="text-sm">ساخته شده با عشق برای مردم ایران</p>
+    <footer className="bg-white border-t border-gray-100">
+      {/* Main Footer Content */}
+      <div className="max-w-5xl mx-auto px-6 sm:px-8 lg:px-10 py-16">
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
+          
+          {/* Brand Column */}
+          <div className="lg:col-span-2">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="bg-gradient-to-r from-primary-500 to-primary-600 w-10 h-10 rounded-xl flex items-center justify-center">
+                <span className="text-white font-bold text-lg">آ</span>
+              </div>
+              <div className="text-2xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent">
+                آرام‌لند
+              </div>
+            </div>
+            <p className="text-gray-600 leading-relaxed mb-6 max-w-md">
+              همراه شما در مسیر رسیدن به آرامش درونی. با ابزارهای علمی و تخصصی 
+              برای زندگی بهتر و ذهنی آرام‌تر.
+            </p>
+            <div className="flex gap-4">
+              {/* Social Media Icons - You can add actual links later */}
+              <div className="w-10 h-10 bg-primary-500/10 rounded-xl flex items-center justify-center cursor-pointer hover:bg-primary-500/20 transition-colors">
+                <span className="text-primary-500">📱</span>
+              </div>
+              <div className="w-10 h-10 bg-primary-500/10 rounded-xl flex items-center justify-center cursor-pointer hover:bg-primary-500/20 transition-colors">
+                <span className="text-primary-500">💬</span>
+              </div>
+              <div className="w-10 h-10 bg-primary-500/10 rounded-xl flex items-center justify-center cursor-pointer hover:bg-primary-500/20 transition-colors">
+                <span className="text-primary-500">📸</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h3 className="font-bold text-gray-900 mb-6 text-lg">لینک‌های سریع</h3>
+            <ul className="space-y-3">
+              {[
+                { name: 'ویژگی‌ها',  section: 'features'},
+                { name: 'امکانات', section: 'what-you-can-do' },
+                { name: 'چرا آرام‌لند', section: 'why-aramland' },
+                { name: 'ارتباط با تیم', href: 'https://approagency.ir/' }
+              ].map((link) => (
+                <li key={link.name}>
+                  <a 
+                    href={link.href}
+                    onClick={() => scrollToSectionWithHeader(link.section)}
+                    target="_blank"
+                    className="text-gray-600 hover:text-primary-500 transition-colors duration-200"
+                  >
+                    {link.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Agency Contact */}
+          <div>
+            <h3 className="font-bold text-gray-900 mb-6 text-lg">توسعه‌دهنده</h3>
+            <div className="space-y-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-gradient-to-r from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
+                  <span className="text-white text-sm">AP</span>
+                </div>
+                <div>
+                  <p className="font-medium text-gray-900">اپرو‌اجنسی</p>
+                  <p className="text-sm text-gray-500">Approagency</p>
+                </div>
+              </div>
+              
+              <div className="space-y-3">
+                <a 
+                  href="mailto:approagency@gmail.com"
+                  className="flex items-center gap-2 text-gray-600 hover:text-primary-500 transition-colors group"
+                >
+                  <div className="w-8 h-8 bg-primary-500/10 rounded-lg flex items-center justify-center group-hover:bg-primary-500/20 transition-colors">
+                    <span className="text-primary-500 text-sm">✉️</span>
+                  </div>
+                  <span className="text-sm">approagency@gmail.com</span>
+                </a>
+                
+                <a 
+                  href="tel:+989362957108"
+                  className="flex items-center gap-2 text-gray-600 hover:text-primary-500 transition-colors group"
+                >
+                  <div className="w-8 h-8 bg-primary-500/10 rounded-lg flex items-center justify-center group-hover:bg-primary-500/20 transition-colors">
+                    <span className="text-primary-500 text-sm">📞</span>
+                  </div>
+                  <span className="text-sm">۰۹۳۶۲۹۵۷۱۰۸</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent mb-8"></div>
+
+        {/* Bottom Section */}
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+          <div className="text-center md:text-right">
+            <p className="text-gray-600 mb-2">
+              © 1404 آرام‌لند - همراه تو برای یک زندگی آرام‌تر
+            </p>
+            <p className="text-gray-500 text-sm">
+              ساخته شده با عشق برای مردم ایران
+            </p>
+          </div>
+          
+          {/* Additional Links */}
+          <div className="flex gap-6 text-sm">
+            <a href="#" className="text-gray-500 hover:text-primary-500 transition-colors">
+              حریم خصوصی
+            </a>
+            <a href="#" className="text-gray-500 hover:text-primary-500 transition-colors">
+              شرایط استفاده
+            </a>
+            <a href="#" className="text-gray-500 hover:text-primary-500 transition-colors">
+              پشتیبانی
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* Floating CTA */}
+      <div className="bg-gradient-to-r from-primary-500/5 to-primary-600/5 border-t border-primary-500/10">
+        <div className="max-w-5xl mx-auto px-6 sm:px-8 lg:px-10 py-6">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <div>
+              <p className="font-medium text-gray-900">آماده شروع سفر آرامش؟</p>
+              <p className="text-gray-600 text-sm">همین حالا رایگان شروع کنید</p>
+            </div>
+            <button onClick={() => scrollToSectionWithHeader('download')} className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-3 px-8 rounded-2xl hover:shadow-lg transition-all duration-300 transform hover:scale-105 whitespace-nowrap">
+              دانلود اپلیکیشن
+            </button>
+          </div>
+        </div>
+      </div>
     </footer>
   );
 }

app/components/FreeTrial.jsx

@@ -1,4 +1,7 @@
+"use client";
+ import { useScroll } from '../hooks/useScroll';
 function FreeTrial() {
+  const { scrollToSectionWithHeader } = useScroll();
   return (
     <div className="relative bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 rounded-3xl p-12 text-white text-center mb-20 animate-fadeInUp overflow-hidden">
       {/* Background Pattern */}
@@ -26,8 +29,8 @@ function FreeTrial() {
 
         {/* Description */}
         <p className="text-lg md:text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed animate-fadeInUp delay-300">
-          تمام ویژگی‌های پریمیوم رو برای یک هفته کامل تجربه کن، 
-          <span className="font-bold text-yellow-300"> بدون نیاز به کارت اعتباری</span>
+          تمام ویژگی‌های پریمیوم رو میتونی به طور محدود تجربه کنی 
+          <span className="font-bold text-yellow-300"></span>
         </p>
 
         {/* Features */}
@@ -35,7 +38,10 @@ function FreeTrial() {
           {[
             "تمامی مدیتیشن‌ها",
             "موسیقی‌های انحصاری", 
-            "مشاوره هوش مصنوعی"
+            "مشاوره هوش مصنوعی",
+            "تمرین تنفسی دلخواه",
+            "اطلاعات آموزشی",
+            "رابط کاربری ساده",
           ].map((feature, index) => (
             <div key={index} className="flex items-center justify-center gap-2 bg-white/10 backdrop-blur-sm py-3 px-4 rounded-xl">
               <svg className="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
@@ -47,14 +53,14 @@ function FreeTrial() {
         </div>
 
         {/* CTA Button */}
-        <button className="bg-white text-primary-500 font-bold py-4 px-12 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 animate-fadeInUp delay-500 relative overflow-hidden group">
+        <button onClick={() => scrollToSectionWithHeader('download')} className="bg-white text-primary-500 font-bold py-4 px-12 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 animate-fadeInUp delay-500 relative overflow-hidden group">
           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
-          <span className="relative">شروع دوره آزمایشی رایگان</span>
+          <span className="relative">شروع سفر آرامش</span>
         </button>
 
         {/* Footer Note */}
         <p className="text-white/70 text-sm mt-6 animate-fadeInUp delay-600">
-          هیچ تعهدی ندارد • هر زمان می‌توانی لغو کنی
+          میتونی روی گوشیت همیشه داشته باشی
         </p>
       </div>
     </div>

app/components/Header.jsx

@@ -1,4 +1,7 @@
+"use client";
+import { useScroll } from '../hooks/useScroll';
 function Header() {
+    const { scrollToSectionWithHeader } = useScroll();
   return (
     <nav className="py-6 px-8 sticky top-0 bg-white/80 backdrop-blur-md z-50 border-b border-gray-100">
       <div className="max-w-6xl mx-auto flex justify-between items-center">
@@ -14,21 +17,27 @@ function Header() {
 
         {/* Navigation */}
         <div className="hidden md:flex items-center gap-8">
-          {['ویژگی‌ها', 'دانلود', 'قیمت‌ها', 'درباره ما'].map((item) => (
-            <a
-              key={item}
-              href="#"
+          {[
+            { name: 'ویژگی‌ها', id: 'features' },
+            { name: 'امکانات', id: 'what-you-can-do' },
+            { name: 'چرا ما', id: 'why-aramland' },
+            { name: 'دانلود', id: 'download' },
+            { name: 'ارتباط با ما', id: 'footer' },
+          ].map((item) => (
+             <button
+              key={item.id}
+              onClick={() => scrollToSectionWithHeader(item.id)}
               className="text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200 relative group"
             >
-              {item}
+              {item.name}
               <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary-500 group-hover:w-full transition-all duration-300"></span>
-            </a>
+            </button>
           ))}
         </div>
 
         {/* CTA Button */}
-        <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-2 px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
-          شروع رایگان
+        <button   onClick={() => scrollToSectionWithHeader('download')} className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-2 px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
+          شروع سفر آرامش
         </button>
       </div>
     </nav>

app/components/Hero.jsx

@@ -1,9 +1,12 @@
-import { motion } from "framer-motion";
+"use client";
+import DownloadSection from "./DownloadSection";
+import { useScroll } from '../hooks/useScroll';
 function Hero() {
+  const { scrollToSectionWithHeader } = useScroll();
   return (
-    <div className="text-center mb-20 relative">
+    <div className="text-center mb-10 relative">
       {/* Background decoration */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none rounded-3xl">
         <div className="absolute -top-20 -right-20 w-72 h-72 bg-primary-500 opacity-10 rounded-full blur-3xl"></div>
         <div className="absolute -bottom-20 -left-20 w-72 h-72 bg-primary-500 opacity-10 rounded-full blur-3xl"></div>
       </div>
@@ -11,27 +14,22 @@ function Hero() {
       <div className="relative">
         <div className="mb-8 animate-float">
           <div className="relative inline-block">
-            <span className="text-6xl">✨</span>
+             
             <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600 opacity-20 blur-xl rounded-full"></div>
           </div>
         </div>
         
-        <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight animate-fadeInUp">
+        <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-1 leading-tight animate-fadeInUp">
           آرامش را در 
           <span className="bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent"> هر لحظه </span>
           تجربه کنید
         </h1>
-
-        <p className="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto leading-relaxed mb-6 animate-fadeInUp delay-100">
-          آرام‌لند دستیار شخصی شما برای یافتن آرامش درونی. با مدیتیشن‌های اختصاصی، 
-          موسیقی آرامش‌بخش و راهنمایی‌های حرفه‌ای.
-        </p>
-
+         <DownloadSection />
         <div className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fadeInUp delay-200">
-          <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 text-lg shadow-lg hover:shadow-primary-500/25">
+          {/* <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 text-lg shadow-lg hover:shadow-primary-500/25">
             شروع کنید رایگان
-          </button>
-          <button className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-primary-500 hover:text-primary-500 transition-all duration-300">
+          </button> */}
+          <button onClick={() => scrollToSectionWithHeader('what-you-can-do')} className="  bg-gradient-to-r from-primary-500 to-primary-600 border-2 text-white font-bold py-4 px-8 rounded-2xl hover:border-primary-200 hover:text-primary-50 transition-all duration-300">
             مشاهده ویژگی‌ها
           </button>
         </div>
@@ -40,11 +38,11 @@ function Hero() {
         <div className="mt-12 animate-fadeInUp delay-300">
           <p className="text-gray-500 text-sm mb-4">مورد اعتماد هزاران کاربر</p>
           <div className="flex justify-center items-center gap-8 opacity-60">
-            <div className="text-2xl font-bold text-gray-400">★ ۴.۹</div>
-            <div className="h-4 w-px bg-gray-300"></div>
-            <div className="text-gray-500">+۱۰۰۰ دانلود</div>
-            <div className="h-4 w-px bg-gray-300"></div>
-            <div className="text-gray-500">۹۸٪ رضایت</div>
+            <div className="text-2xl font-bold text-primary-500">★ ۴.۹</div>
+            <div className="h-4 w-px bg-primary-500"></div>
+            <div className="text-primary-500 font-bold">+۱۰۰۰ دانلود</div>
+            <div className="h-4 w-px bg-primary-500"></div>
+            <div className="text-primary-500 font-bold ">۹۸٪ رضایت</div>
           </div>
         </div>
       </div>

app/components/WhatYouCanDo.jsx

@@ -49,7 +49,7 @@ function WhatYouCanDo() {
   ];
 
   return (
-    <div className="my-24">
+    <div className="my-12">
       {/* Section Header */}
       <div className="text-center mb-16">
         <div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-500 px-4 py-2 rounded-full text-sm font-medium mb-4">
@@ -57,7 +57,7 @@ function WhatYouCanDo() {
           قابلیت‌های اصلی
         </div>
         <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-          هر آنچه برای <span className="text-primary-500">آرامش</span> نیاز داری
+          اینجا زندگی <span className="text-primary-500">آسون تر</span> میشه
         </h2>
         <p className="text-xl text-gray-600 max-w-2xl mx-auto">
           ابزارهای متنوع و تخصصی برای رسیدن به آرامش در هر شرایطی
@@ -109,14 +109,14 @@ function WhatYouCanDo() {
       </div>
 
       {/* Bottom CTA */}
-      <div className="text-center">
+      {/* <div className="text-center">
         <p className="text-gray-600 text-lg mb-6">
           بیش از <span className="text-primary-500 font-bold">۱۰۰۰</span> کاربر از این ویژگی‌ها استفاده می‌کنند
         </p>
         <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-3 px-6 rounded-2xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
           کشف همه قابلیت‌ها
         </button>
-      </div>
+      </div> */}
     </div>
   );
 }

app/hooks/useScroll.js

@@ -0,0 +1,40 @@
+// hooks/useScroll.js
+import { useCallback } from 'react';
+
+export const useScroll = () => {
+  const scrollToSection = useCallback((sectionId, offset = 0) => {
+    if (typeof window === 'undefined') return;
+
+    const element = document.getElementById(sectionId);
+    
+    if (element) {
+      const elementPosition = element.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.pageYOffset - offset;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth'
+      });
+    }
+  }, []);
+
+  const scrollToSectionWithHeader = useCallback((sectionId) => {
+    const headerOffset = 80; // Adjust based on your header height
+    scrollToSection(sectionId, headerOffset);
+  }, [scrollToSection]);
+
+  const scrollToTop = useCallback(() => {
+    if (typeof window === 'undefined') return;
+    
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  }, []);
+
+  return {
+    scrollToSection,
+    scrollToSectionWithHeader,
+    scrollToTop
+  };
+};

app/layout.tsx

@@ -4,13 +4,11 @@ import './globals.css';
 export const metadata: Metadata = {
   title: 'آرام‌لند | تمرین تنفسی و مدیتیشن',
   description: 'لحظه‌ای آرام بگیر، زندگی را حس کن',
+  icons: {
+    icon: '/favicon.png',
+  },
 };
-<link
-  rel="icon"
-  href="/favicon.png"
-  type="image/<generated>"
-  sizes="<generated>"
-/>
+
 export default function RootLayout({
   children,
 }: {