feat: logo
This commit is contained in:
@@ -15,7 +15,7 @@ function CallToAction() {
|
||||
آماده برای <span className="text-primary-500">تغییر</span> زندگی؟
|
||||
</h2>
|
||||
<p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||||
امروز اولین قدم رو بردار و ببین چطور آرام لند میتونه کیفیت زندگیات رو متحول کنه
|
||||
امروز اولین قدم رو بردار و ببین چطور آرام جان میتونه کیفیت زندگیات رو متحول کنه
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
|
||||
@@ -47,7 +47,7 @@ function DownloadSection() {
|
||||
همین حالا <span className="text-primary-500">شروع کنید</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
آرام لند را روی دستگاه مورد علاقهتان نصب کنید
|
||||
آرام جان را روی دستگاه مورد علاقهتان نصب کنید
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
import { useScroll } from '../hooks/useScroll';
|
||||
import LotusLogo from './LotusLogo';
|
||||
|
||||
function Footer() {
|
||||
const { scrollToSectionWithHeader } = useScroll();
|
||||
@@ -12,11 +13,9 @@ function Footer() {
|
||||
{/* 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>
|
||||
<LotusLogo className="w-11 h-11 drop-shadow-sm" />
|
||||
<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">
|
||||
@@ -44,7 +43,7 @@ function Footer() {
|
||||
{[
|
||||
{ name: 'ویژگیها', section: 'features' },
|
||||
{ name: 'امکانات', section: 'what-you-can-do' },
|
||||
{ name: 'چرا آرام لند', section: 'why-aramland' },
|
||||
{ name: 'چرا آرام جان', section: 'why-aramland' },
|
||||
{ name: 'ارتباط با تیم', href: 'https://approagency.ir/' }
|
||||
].map((link) => (
|
||||
<li key={link.name}>
|
||||
@@ -107,7 +106,7 @@ function Footer() {
|
||||
<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 آرام لند - همراه تو برای یک زندگی آرامتر
|
||||
© 1404 آرام جان - همراه تو برای یک زندگی آرامتر
|
||||
</p>
|
||||
<p className="text-gray-500 text-sm">
|
||||
ساخته شده با عشق برای مردم ایران
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { useScroll } from '../hooks/useScroll';
|
||||
import { useState } from 'react';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import LotusLogo from './LotusLogo';
|
||||
|
||||
function Header() {
|
||||
const { scrollToSectionWithHeader } = useScroll();
|
||||
@@ -26,11 +27,9 @@ function Header() {
|
||||
<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>
|
||||
<LotusLogo className="w-9 h-9 drop-shadow-sm" />
|
||||
<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>
|
||||
|
||||
|
||||
+26
-16
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
import DownloadSection from "./DownloadSection";
|
||||
import { useScroll } from '../hooks/useScroll';
|
||||
import LotusLogo from "./LotusLogo";
|
||||
function Hero() {
|
||||
const { scrollToSectionWithHeader } = useScroll();
|
||||
return (
|
||||
@@ -8,28 +9,37 @@ function Hero() {
|
||||
{/* Background decoration */}
|
||||
<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 className="absolute -bottom-20 -left-20 w-72 h-72 bg-primary-400 opacity-10 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="relative">
|
||||
<div className="mb-8 animate-float">
|
||||
<div className="relative inline-block">
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600 opacity-20 blur-xl rounded-full"></div>
|
||||
{/* App logo */}
|
||||
<div className="mb-6 flex justify-center">
|
||||
<div className="relative inline-block animate-float">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600 blur-2xl rounded-full animate-pulseGlow"></div>
|
||||
<div className="relative w-24 h-24 sm:w-28 sm:h-28 rounded-[26px] overflow-hidden shadow-2xl shadow-primary-500/40">
|
||||
<LotusLogo className="w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-1 leading-tight animate-fadeInUp">
|
||||
آرامش را در
|
||||
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-600 px-4 py-2 rounded-full text-sm font-medium mb-6 animate-fadeInUp">
|
||||
<span>🌿</span>
|
||||
مدیتیشن، تمرین تنفسی و آرامش فارسی
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-4 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-lg md:text-xl text-gray-600 max-w-2xl mx-auto 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> */}
|
||||
<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 onClick={() => scrollToSectionWithHeader('what-you-can-do')} className="bg-gradient-to-r from-primary-500 to-primary-600 border-2 border-transparent text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl hover:shadow-primary-500/30 transition-all duration-300 transform hover:scale-105">
|
||||
مشاهده ویژگیها
|
||||
</button>
|
||||
</div>
|
||||
@@ -37,11 +47,11 @@ function Hero() {
|
||||
{/* Trust indicators */}
|
||||
<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="flex justify-center items-center gap-8 opacity-80">
|
||||
<div className="text-2xl font-bold text-primary-500">★ ۴.۹</div>
|
||||
<div className="h-4 w-px bg-primary-500"></div>
|
||||
<div className="h-4 w-px bg-primary-300"></div>
|
||||
<div className="text-primary-500 font-bold">+۱۰۰۰ دانلود</div>
|
||||
<div className="h-4 w-px bg-primary-500"></div>
|
||||
<div className="h-4 w-px bg-primary-300"></div>
|
||||
<div className="text-primary-500 font-bold ">۹۸٪ رضایت</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
// Brand mark for آرام جان — a layered translucent lotus on a blue→indigo
|
||||
// gradient, matching the app icon. Self-contained SVG so it stays crisp at any
|
||||
// size and needs no image asset. Size it with `className` (e.g. "w-9 h-9").
|
||||
function LotusLogo({ className = "w-9 h-9", title = "آرام جان" }) {
|
||||
const petal = "M50 72 C42 56 42 34 50 22 C58 34 58 56 50 72 Z";
|
||||
const angles = [-50, -25, 0, 25, 50];
|
||||
|
||||
const opacityFor = (a) => {
|
||||
if (a === 0) return 0.95;
|
||||
if (Math.abs(a) === 25) return 0.72;
|
||||
return 0.5;
|
||||
};
|
||||
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label={title}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="aramjan-lotus-bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#5fa0ff" />
|
||||
<stop offset="100%" stopColor="#6a4ff0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100" height="100" rx="26" fill="url(#aramjan-lotus-bg)" />
|
||||
<g fill="#ffffff">
|
||||
{angles.map((a) => (
|
||||
<path
|
||||
key={a}
|
||||
d={petal}
|
||||
transform={`rotate(${a} 50 72)`}
|
||||
fillOpacity={opacityFor(a)}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default LotusLogo;
|
||||
@@ -60,10 +60,10 @@ function WhyAramland() {
|
||||
<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 className="text-lg">🚀</span>
|
||||
برتری آرام لند
|
||||
برتری آرام جان
|
||||
</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">
|
||||
تجربهای متفاوت از آرامش، طراحی شده مخصوص فارسیزبانان
|
||||
@@ -129,7 +129,7 @@ function WhyAramland() {
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-2xl font-bold text-gray-900 mb-3">
|
||||
👥 عضو جامعه هزاران نفری آرام لند شوید
|
||||
👥 عضو جامعه هزاران نفری آرام جان شوید
|
||||
</h4>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
به خانوادهای از کاربران خوشحال بپیوندید که هر روز قدمی به سمت آرامش برمیدارند
|
||||
|
||||
Reference in New Issue
Block a user