feat: drawer in mobile view

2025-11-07 16:31:45 +03:30
parent 5b5d1cfa69
commit e95983d9b0
4 changed files with 78 additions and 22 deletions
@@ -59,7 +59,7 @@ function DownloadSection() {
              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>
+              {/* <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-0 right-0 bg-primary-200  px-2 py-2 rounded text-xs font-bold">
@@ -71,8 +71,8 @@ function DownloadSection() {
                <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-sm">{option.description}</p>
+              <h3 className="text-xl text-black font-bold mb-2">{option.title}</h3>
+              <p className="text-sm text-black">{option.description}</p>
            </a>
          ))}
        </div>
@@ -1,33 +1,45 @@
 "use client";
 import { useScroll } from '../hooks/useScroll';
+import { useState } from 'react';
+import { Menu, X } from 'lucide-react';
+
 function Header() {
-    const { scrollToSectionWithHeader } = useScroll();
+  const { scrollToSectionWithHeader } = useScroll();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const navigationItems = [
+    { name: 'ویژگی‌ها', id: 'features' },
+    { name: 'امکانات', id: 'what-you-can-do' },
+    { name: 'چرا ما', id: 'why-aramland' },
+    { name: 'دانلود', id: 'download' },
+    { name: 'ارتباط با ما', id: 'footer' },
+  ];
+
+  const handleNavClick = (sectionId) => {
+    scrollToSectionWithHeader(sectionId);
+    setIsMenuOpen(false);
+  };
+
  return (
-    <nav className="py-6 px-8 sticky top-0 bg-white/80 backdrop-blur-md z-50 border-b border-gray-100">
+    <nav className="py-4 px-6 sm: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">
        {/* Logo */}
        <div className="flex items-center gap-3">
          <div className="bg-gradient-to-r from-primary-500 to-primary-600 w-8 h-8 rounded-xl flex items-center justify-center">
            <span className="text-white font-bold text-sm">آ</span>
          </div>
-          <div className="text-2xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent">
+          <div className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent">
            آرام‌لند
          </div>
        </div>

-        {/* Navigation */}
-        <div className="hidden md:flex items-center gap-8">
-          {[
-            { name: 'ویژگی‌ها', id: 'features' },
-            { name: 'امکانات', id: 'what-you-can-do' },
-            { name: 'چرا ما', id: 'why-aramland' },
-            { name: 'دانلود', id: 'download' },
-            { name: 'ارتباط با ما', id: 'footer' },
-          ].map((item) => (
-             <button
+        {/* Desktop Navigation */}
+        <div className="hidden md:flex items-center gap-6 lg:gap-8">
+          {navigationItems.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"
+              onClick={() => handleNavClick(item.id)}
+              className="text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200 relative group text-sm lg:text-base"
            >
              {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>
@@ -35,11 +47,55 @@ function Header() {
          ))}
        </div>

-        {/* CTA Button */}
-        <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">
-          شروع سفر آرامش
+        {/* Desktop CTA Button */}
+        <div className="hidden md:block">
+          <button 
+            onClick={() => handleNavClick('download')} 
+            className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-2 px-4 lg:py-2 lg:px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105 text-sm lg:text-base"
+          >
+            شروع سفر آرامش
+          </button>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <button
+          className="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+        >
+          {isMenuOpen ? (
+            <X className="w-6 h-6 text-gray-600" />
+          ) : (
+            <Menu className="w-6 h-6 text-gray-600" />
+          )}
        </button>
      </div>
+
+      {/* Mobile Menu */}
+      {isMenuOpen && (
+        <div className="md:hidden absolute top-full left-0 right-0 bg-white/95 backdrop-blur-md border-b border-gray-200 shadow-lg">
+          <div className="px-6 py-4 space-y-4">
+            {navigationItems.map((item) => (
+              <button
+                key={item.id}
+                onClick={() => handleNavClick(item.id)}
+                className="block w-full text-right py-3 px-4 text-gray-700 hover:text-primary-500 hover:bg-primary-50 rounded-lg transition-all duration-200 font-medium border-b border-gray-100 last:border-b-0"
+              >
+                {item.name}
+              </button>
+            ))}
+            
+            {/* Mobile CTA Button */}
+            <div className="pt-4 border-t border-gray-200">
+              <button 
+                onClick={() => handleNavClick('download')} 
+                className="w-full bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-3 px-4 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105 text-center"
+              >
+                شروع سفر آرامش
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
    </nav>
  );
 }
@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";

 const nextConfig: NextConfig = {
-  /* config options here */
+   output: 'export',
 };

 export default nextConfig;