feat: better fotter
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
+143
-3
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
+17
-19
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user