Amirmahdi/aramejan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change logo and og

Browse Source
This commit is contained in:
Amirmahdi
2026-06-29 11:22:56 +03:30
parent dae31e9e83
commit bf7706fb2d
13 changed files with 200 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ function App() {
<SEOHead <SEOHead
title="آرام جان - تمرین تنفسی و مدیتیشن" title="آرام جان - تمرین تنفسی و مدیتیشن"
description="اپلیکیشن آرام جان - همراه شما برای رسیدن به آرامش درونی با مدیتیشن‌های فارسی، تمرین‌های تنفسی و موسیقی آرامش‌بخش" description="اپلیکیشن آرام جان - همراه شما برای رسیدن به آرامش درونی با مدیتیشن‌های فارسی، تمرین‌های تنفسی و موسیقی آرامش‌بخش"
canonical="/" ogImage="../app/og-image.png" /> canonical="/" />
<div className="min-h-screen bg-gradient-to-b from-blue-50 via-white to-green-50" dir="rtl"> <div className="min-h-screen bg-gradient-to-b from-blue-50 via-white to-green-50" dir="rtl">
<Header /> <Header />
app/components/LotusLogo.jsx
+10 -36
View File
@@ -1,42 +1,16 @@
// Brand mark for آرام جان — a layered translucent lotus on a blue→indigo // Brand mark for آرام جان — the real app icon (blue→indigo lotus) served as a
// gradient, matching the app icon. Self-contained SVG so it stays crisp at any // vector from /logo.svg, so it stays crisp at any size and matches the store
// size and needs no image asset. Size it with `className` (e.g. "w-9 h-9"). // icon exactly. Size it with `className` (e.g. "w-9 h-9"); corners are rounded
// like an app icon.
function LotusLogo({ className = "w-9 h-9", title = "آرام جان" }) { 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 ( return (
<svg <span className={`inline-block overflow-hidden rounded-[22%] ${className}`}>
viewBox="0 0 100 100" <img
className={className} src="/logo.svg"
xmlns="http://www.w3.org/2000/svg" alt={title}
role="img" className="w-full h-full object-cover"
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)}
/> />
))} </span>
</g>
</svg>
); );
} }
app/components/SEOHead.jsx
+3 -3
View File
@@ -3,7 +3,7 @@ export function SEOHead({
title, title,
description, description,
canonical, canonical,
ogImage ogImage = ''
}) { }) {
const siteUrl = 'https://aramland.approagency.ir/'; const siteUrl = 'https://aramland.approagency.ir/';
@@ -19,14 +19,14 @@ export function SEOHead({
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
<meta property="og:url" content={`${siteUrl}${canonical}`} /> <meta property="og:url" content={`${siteUrl}${canonical}`} />
<meta property="og:image" content={ogImage || `${siteUrl}/og-image.png`} /> <meta property="og:image" content={ogImage || `${siteUrl}og-image.jpg`} />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:locale" content="fa_IR" /> <meta property="og:locale" content="fa_IR" />
{/* Twitter */} {/* Twitter */}
<meta name="twitter:title" content={title} /> <meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImage || `${siteUrl}/og-image.png`} /> <meta name="twitter:image" content={ogImage || `${siteUrl}og-image.jpg`} />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
</> </>
); );
app/favicon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 676 KiB

app/icon.svg
+89 -15
View File
@@ -1,16 +1,90 @@
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="آرام جان"> <svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs> <g clip-path="url(#clip0_2449_11924)">
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"> <rect width="600" height="600" fill="white"/>
<stop offset="0%" stop-color="#5fa0ff"/> <rect width="600" height="600" fill="url(#paint0_linear_2449_11924)"/>
<stop offset="100%" stop-color="#6a4ff0"/> <mask id="mask0_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="67" y="127" width="307" height="307">
</linearGradient> <circle cx="220.588" cy="280.488" r="152.894" fill="url(#paint1_linear_2449_11924)"/>
</defs> </mask>
<rect width="100" height="100" rx="22" fill="url(#bg)"/> <g mask="url(#mask0_2449_11924)">
<g fill="#ffffff"> <circle cx="379.598" cy="280.488" r="152.894" fill="url(#paint2_linear_2449_11924)"/>
<path d="M50 72 C42 56 42 34 50 22 C58 34 58 56 50 72 Z" transform="rotate(-50 50 72)" fill-opacity="0.5"/> </g>
<path d="M50 72 C42 56 42 34 50 22 C58 34 58 56 50 72 Z" transform="rotate(-25 50 72)" fill-opacity="0.72"/> <mask id="mask1_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="185" width="307" height="306">
<path d="M50 72 C42 56 42 34 50 22 C58 34 58 56 50 72 Z" transform="rotate(0 50 72)" fill-opacity="0.95"/> <circle cx="162.544" cy="337.995" r="152.894" transform="rotate(-30 162.544 337.995)" fill="url(#paint3_linear_2449_11924)"/>
<path d="M50 72 C42 56 42 34 50 22 C58 34 58 56 50 72 Z" transform="rotate(25 50 72)" fill-opacity="0.72"/> </mask>
<path d="M50 72 C42 56 42 34 50 22 C58 34 58 56 50 72 Z" transform="rotate(50 50 72)" fill-opacity="0.5"/> <g mask="url(#mask1_2449_11924)">
</g> <circle cx="300.25" cy="258.49" r="152.894" transform="rotate(-30 300.25 258.49)" fill="url(#paint4_linear_2449_11924)"/>
</g>
<mask id="mask2_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="145" y="105" width="307" height="307">
<circle cx="298.619" cy="258.491" r="152.894" transform="rotate(30 298.619 258.491)" fill="url(#paint5_linear_2449_11924)"/>
</mask>
<g mask="url(#mask2_2449_11924)">
<circle cx="436.325" cy="337.996" r="152.894" transform="rotate(30 436.325 337.996)" fill="url(#paint6_linear_2449_11924)"/>
</g>
<mask id="mask3_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="226" y="124" width="306" height="307">
<circle cx="379.004" cy="277.486" r="152.894" transform="rotate(60 379.004 277.486)" fill="url(#paint7_linear_2449_11924)"/>
</mask>
<g mask="url(#mask3_2449_11924)">
<circle cx="458.509" cy="415.192" r="152.894" transform="rotate(60 458.509 415.192)" fill="url(#paint8_linear_2449_11924)"/>
</g>
<mask id="mask4_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-13" y="262" width="307" height="307">
<circle cx="140.491" cy="415.192" r="152.894" transform="rotate(-60 140.491 415.192)" fill="url(#paint9_linear_2449_11924)"/>
</mask>
<g mask="url(#mask4_2449_11924)">
<circle cx="219.996" cy="277.486" r="152.894" transform="rotate(-60 219.996 277.486)" fill="url(#paint10_linear_2449_11924)"/>
</g>
<ellipse cx="300.093" cy="434.911" rx="29.0498" ry="33.6366" fill="url(#paint11_linear_2449_11924)"/>
</g>
<defs>
<linearGradient id="paint0_linear_2449_11924" x1="300" y1="0" x2="300" y2="600" gradientUnits="userSpaceOnUse">
<stop stop-color="#3ABDEB"/>
<stop offset="1" stop-color="#553AEB"/>
</linearGradient>
<linearGradient id="paint1_linear_2449_11924" x1="220.588" y1="127.595" x2="220.588" y2="433.382" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_2449_11924" x1="379.598" y1="127.595" x2="379.598" y2="433.382" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint3_linear_2449_11924" x1="162.544" y1="185.102" x2="162.544" y2="490.889" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_2449_11924" x1="300.25" y1="105.597" x2="300.25" y2="411.384" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint5_linear_2449_11924" x1="298.619" y1="105.597" x2="298.619" y2="411.384" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_2449_11924" x1="436.325" y1="185.102" x2="436.325" y2="490.889" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint7_linear_2449_11924" x1="379.004" y1="124.592" x2="379.004" y2="430.38" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_2449_11924" x1="458.509" y1="262.298" x2="458.509" y2="568.086" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint9_linear_2449_11924" x1="140.491" y1="262.298" x2="140.491" y2="568.085" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear_2449_11924" x1="219.996" y1="124.593" x2="219.996" y2="430.38" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint11_linear_2449_11924" x1="300.093" y1="401.274" x2="300.093" y2="420.805" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.4"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_2449_11924">
<rect width="600" height="600" fill="white"/>
</clipPath>
</defs>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 950 B

After

Width:  |  Height:  |  Size: 5.1 KiB

app/layout.tsx
+5 -5
View File
@@ -30,9 +30,9 @@ export const metadata: Metadata = {
siteName: 'آرام جان', siteName: 'آرام جان',
images: [ images: [
{ {
url: '/og-image.png', // Create this image (1200x630px) url: '/og-image.jpg',
width: 1200, width: 1067,
height: 630, height: 600,
alt: ' آرام جان - اپلیکیشن مدیتیشن و آرامش - تمرین تنفسی', alt: ' آرام جان - اپلیکیشن مدیتیشن و آرامش - تمرین تنفسی',
}, },
], ],
@@ -45,7 +45,7 @@ export const metadata: Metadata = {
card: 'summary_large_image', card: 'summary_large_image',
title: 'آرام جان - تمرین تنفسی و مدیتیشن', title: 'آرام جان - تمرین تنفسی و مدیتیشن',
description: 'اپلیکیشن آرام جان - همراه شما برای رسیدن به آرامش درونی', description: 'اپلیکیشن آرام جان - همراه شما برای رسیدن به آرامش درونی',
images: ['/og-image.png'], images: ['/og-image.jpg'],
creator: '@aramland', // Replace with your Twitter handle creator: '@aramland', // Replace with your Twitter handle
}, },
robots: { robots: {
@@ -80,7 +80,7 @@ export default function RootLayout({
/> />
{/* Favicon — lotus mark (آرام جان) */} {/* Favicon — lotus mark (آرام جان) */}
<link rel="icon" href="/icon.svg" type="image/svg+xml" /> <link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/icon.svg" /> <link rel="apple-touch-icon" href="/logo-aram.png" />
{/* Preload critical resources */} {/* Preload critical resources */}
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
app/og-image.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

public/favicon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 677 KiB

public/logo-aram.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

public/logo.svg
+90
View File
@@ -0,0 +1,90 @@
<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2449_11924)">
<rect width="600" height="600" fill="white"/>
<rect width="600" height="600" fill="url(#paint0_linear_2449_11924)"/>
<mask id="mask0_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="67" y="127" width="307" height="307">
<circle cx="220.588" cy="280.488" r="152.894" fill="url(#paint1_linear_2449_11924)"/>
</mask>
<g mask="url(#mask0_2449_11924)">
<circle cx="379.598" cy="280.488" r="152.894" fill="url(#paint2_linear_2449_11924)"/>
</g>
<mask id="mask1_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="185" width="307" height="306">
<circle cx="162.544" cy="337.995" r="152.894" transform="rotate(-30 162.544 337.995)" fill="url(#paint3_linear_2449_11924)"/>
</mask>
<g mask="url(#mask1_2449_11924)">
<circle cx="300.25" cy="258.49" r="152.894" transform="rotate(-30 300.25 258.49)" fill="url(#paint4_linear_2449_11924)"/>
</g>
<mask id="mask2_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="145" y="105" width="307" height="307">
<circle cx="298.619" cy="258.491" r="152.894" transform="rotate(30 298.619 258.491)" fill="url(#paint5_linear_2449_11924)"/>
</mask>
<g mask="url(#mask2_2449_11924)">
<circle cx="436.325" cy="337.996" r="152.894" transform="rotate(30 436.325 337.996)" fill="url(#paint6_linear_2449_11924)"/>
</g>
<mask id="mask3_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="226" y="124" width="306" height="307">
<circle cx="379.004" cy="277.486" r="152.894" transform="rotate(60 379.004 277.486)" fill="url(#paint7_linear_2449_11924)"/>
</mask>
<g mask="url(#mask3_2449_11924)">
<circle cx="458.509" cy="415.192" r="152.894" transform="rotate(60 458.509 415.192)" fill="url(#paint8_linear_2449_11924)"/>
</g>
<mask id="mask4_2449_11924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-13" y="262" width="307" height="307">
<circle cx="140.491" cy="415.192" r="152.894" transform="rotate(-60 140.491 415.192)" fill="url(#paint9_linear_2449_11924)"/>
</mask>
<g mask="url(#mask4_2449_11924)">
<circle cx="219.996" cy="277.486" r="152.894" transform="rotate(-60 219.996 277.486)" fill="url(#paint10_linear_2449_11924)"/>
</g>
<ellipse cx="300.093" cy="434.911" rx="29.0498" ry="33.6366" fill="url(#paint11_linear_2449_11924)"/>
</g>
<defs>
<linearGradient id="paint0_linear_2449_11924" x1="300" y1="0" x2="300" y2="600" gradientUnits="userSpaceOnUse">
<stop stop-color="#3ABDEB"/>
<stop offset="1" stop-color="#553AEB"/>
</linearGradient>
<linearGradient id="paint1_linear_2449_11924" x1="220.588" y1="127.595" x2="220.588" y2="433.382" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_2449_11924" x1="379.598" y1="127.595" x2="379.598" y2="433.382" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint3_linear_2449_11924" x1="162.544" y1="185.102" x2="162.544" y2="490.889" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_2449_11924" x1="300.25" y1="105.597" x2="300.25" y2="411.384" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint5_linear_2449_11924" x1="298.619" y1="105.597" x2="298.619" y2="411.384" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_2449_11924" x1="436.325" y1="185.102" x2="436.325" y2="490.889" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint7_linear_2449_11924" x1="379.004" y1="124.592" x2="379.004" y2="430.38" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_2449_11924" x1="458.509" y1="262.298" x2="458.509" y2="568.086" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint9_linear_2449_11924" x1="140.491" y1="262.298" x2="140.491" y2="568.085" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear_2449_11924" x1="219.996" y1="124.593" x2="219.996" y2="430.38" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint11_linear_2449_11924" x1="300.093" y1="401.274" x2="300.093" y2="420.805" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.4"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_2449_11924">
<rect width="600" height="600" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

public/og-image.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

public/og-image.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB