Add Ayoubi Gallery coming soon page.
Split-screen dark landing with portrait intro video, brand details, and fade-in motion for Meshkee standalone deploy. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
+37
@@ -0,0 +1,37 @@
|
|||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files
|
||||||
|
.env*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
// Leaner production runtime: deploy uses .next/standalone and drops node_modules.
|
||||||
|
output: "standalone",
|
||||||
|
images: {
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "cdn.meshkee.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "c804387.parspack.net",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
Generated
+1003
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "ayoubi-gallery",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "^15.3.3",
|
||||||
|
"react": "^19.1.0",
|
||||||
|
"react-dom": "^19.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.15.21",
|
||||||
|
"@types/react": "^19.1.6",
|
||||||
|
"@types/react-dom": "^19.1.5",
|
||||||
|
"typescript": "^5.8.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 540 KiB |
Binary file not shown.
@@ -0,0 +1,11 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="none" aria-hidden="true">
|
||||||
|
<circle cx="60" cy="60" r="54" stroke="currentColor" stroke-width="1.25" opacity="0.55"/>
|
||||||
|
<circle cx="60" cy="60" r="42" stroke="currentColor" stroke-width="0.75" opacity="0.35"/>
|
||||||
|
<path
|
||||||
|
d="M60 22c-8 14-18 26-18 40a18 18 0 0 0 36 0c0-14-10-26-18-40Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<circle cx="60" cy="62" r="5.5" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 499 B |
@@ -0,0 +1,299 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #070708;
|
||||||
|
--bg-elevated: #101012;
|
||||||
|
--fg: #f3eee6;
|
||||||
|
--fg-muted: rgba(243, 238, 230, 0.62);
|
||||||
|
--accent: #c9a86a;
|
||||||
|
--accent-soft: rgba(201, 168, 106, 0.22);
|
||||||
|
--line: rgba(243, 238, 230, 0.12);
|
||||||
|
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-doran), system-ui, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
align-items: stretch;
|
||||||
|
height: 100dvh;
|
||||||
|
min-height: 100dvh;
|
||||||
|
overflow: hidden;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 70% 50% at 20% 40%, rgba(201, 168, 106, 0.08), transparent 55%),
|
||||||
|
radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255, 255, 255, 0.03), transparent 50%),
|
||||||
|
var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__panel {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100dvh;
|
||||||
|
padding: clamp(2rem, 5vw, 4.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__content {
|
||||||
|
width: min(100%, 34rem);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 1.75rem;
|
||||||
|
margin-block: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__logo {
|
||||||
|
width: clamp(11rem, 24vw, 15rem);
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
margin-inline: auto;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 1s var(--ease) 0.1s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__brand {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.65rem;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 1s var(--ease) 0.28s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__name {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-cinzel), Georgia, serif;
|
||||||
|
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__name-fa {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-doran), system-ui, sans-serif;
|
||||||
|
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--fg-muted);
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__tagline {
|
||||||
|
margin: 0;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.85rem;
|
||||||
|
color: var(--accent);
|
||||||
|
font-family: var(--font-doran), system-ui, sans-serif;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 1s var(--ease) 0.46s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__tagline::before,
|
||||||
|
.coming-soon__tagline::after {
|
||||||
|
content: "";
|
||||||
|
width: 2rem;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--accent-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.1rem;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 0.35rem;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 1s var(--ease) 0.64s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
font-family: var(--font-doran), system-ui, sans-serif;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--fg-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__phone,
|
||||||
|
.coming-soon__social,
|
||||||
|
.coming-soon__address {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
transition: color 0.3s var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__address {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-doran), system-ui, sans-serif;
|
||||||
|
line-height: 1.7;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__phone,
|
||||||
|
.coming-soon__social {
|
||||||
|
font-family: var(--font-cinzel), Georgia, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__phone {
|
||||||
|
font-family: var(--font-doran), system-ui, sans-serif;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__phone:hover,
|
||||||
|
.coming-soon__social:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__phones,
|
||||||
|
.coming-soon__socials {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__meta > div {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__media {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100dvh;
|
||||||
|
background: #050505;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-in 1.4s var(--ease) 0.2s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__media::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, rgba(7, 7, 8, 0.55), transparent 28%),
|
||||||
|
linear-gradient(0deg, rgba(7, 7, 8, 0.35), transparent 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100dvh;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(18px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.coming-soon {
|
||||||
|
height: auto;
|
||||||
|
min-height: 100dvh;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: minmax(48dvh, 56dvh) auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__media {
|
||||||
|
order: -1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__video {
|
||||||
|
min-height: 48dvh;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__media::after {
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, transparent 55%, rgba(7, 7, 8, 0.92)),
|
||||||
|
linear-gradient(0deg, rgba(7, 7, 8, 0.2), transparent 35%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__panel {
|
||||||
|
min-height: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: 2.25rem 1.5rem 3rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon__content {
|
||||||
|
width: 100%;
|
||||||
|
margin-block: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.coming-soon__logo,
|
||||||
|
.coming-soon__brand,
|
||||||
|
.coming-soon__tagline,
|
||||||
|
.coming-soon__meta,
|
||||||
|
.coming-soon__media {
|
||||||
|
animation: none;
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Cinzel } from "next/font/google";
|
||||||
|
import localFont from "next/font/local";
|
||||||
|
|
||||||
|
import { site } from "@/data/site";
|
||||||
|
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
const cinzel = Cinzel({
|
||||||
|
subsets: ["latin"],
|
||||||
|
weight: ["400", "500", "600", "700"],
|
||||||
|
variable: "--font-cinzel",
|
||||||
|
display: "swap",
|
||||||
|
});
|
||||||
|
|
||||||
|
const doran = localFont({
|
||||||
|
src: [
|
||||||
|
{
|
||||||
|
path: "../fonts/doran/Doran-Thin.woff",
|
||||||
|
weight: "100",
|
||||||
|
style: "normal",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "../fonts/doran/Doran-Regular.woff",
|
||||||
|
weight: "400",
|
||||||
|
style: "normal",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "../fonts/doran/Doran-Medium.woff",
|
||||||
|
weight: "500",
|
||||||
|
style: "normal",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "../fonts/doran/Doran-Bold.woff",
|
||||||
|
weight: "700",
|
||||||
|
style: "normal",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
variable: "--font-doran",
|
||||||
|
display: "swap",
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: `${site.nameFa} | ${site.tagline}`,
|
||||||
|
description: site.description,
|
||||||
|
icons: {
|
||||||
|
icon: "/Ayoobi-logo.png",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="fa" dir="rtl" className={`${cinzel.variable} ${doran.variable}`}>
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
import { site } from "@/data/site";
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<main className="coming-soon">
|
||||||
|
<section className="coming-soon__panel" aria-label="اطلاعات گالری">
|
||||||
|
<div className="coming-soon__content">
|
||||||
|
<Image
|
||||||
|
className="coming-soon__logo"
|
||||||
|
src="/Ayoobi-logo.png"
|
||||||
|
alt={site.nameFa}
|
||||||
|
width={360}
|
||||||
|
height={360}
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="coming-soon__brand">
|
||||||
|
<h1 className="coming-soon__name">{site.nameEn}</h1>
|
||||||
|
<p className="coming-soon__name-fa">{site.nameFa}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="coming-soon__tagline">{site.tagline}</p>
|
||||||
|
|
||||||
|
<div className="coming-soon__meta">
|
||||||
|
<div>
|
||||||
|
<span className="coming-soon__label">آدرس</span>
|
||||||
|
<p className="coming-soon__address">{site.address}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="coming-soon__phones">
|
||||||
|
<span className="coming-soon__label">تماس</span>
|
||||||
|
{site.phones.map((phone) => (
|
||||||
|
<a
|
||||||
|
key={phone.href}
|
||||||
|
className="coming-soon__phone"
|
||||||
|
href={`tel:${phone.href}`}
|
||||||
|
dir="ltr"
|
||||||
|
>
|
||||||
|
{phone.display}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="coming-soon__socials">
|
||||||
|
<span className="coming-soon__label">اینستاگرام</span>
|
||||||
|
{site.socials.map((social) => (
|
||||||
|
<a
|
||||||
|
key={social.href}
|
||||||
|
className="coming-soon__social"
|
||||||
|
href={social.href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
dir="ltr"
|
||||||
|
>
|
||||||
|
{social.handle}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="coming-soon__media" aria-label="ویدیو معرفی">
|
||||||
|
<video
|
||||||
|
className="coming-soon__video"
|
||||||
|
src="/intro.mp4"
|
||||||
|
autoPlay
|
||||||
|
muted
|
||||||
|
loop
|
||||||
|
playsInline
|
||||||
|
preload="auto"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
export const site = {
|
||||||
|
nameFa: "گالری طلا و جواهر ایوبی فخیم",
|
||||||
|
nameEn: "Ayoubi Fakhim Jewelry",
|
||||||
|
tagline: "بهزودی",
|
||||||
|
description: "گالری طلا و جواهر ایوبی فخیم — بهزودی",
|
||||||
|
address: "قم - سالاریه - اریکه ملل",
|
||||||
|
phones: [
|
||||||
|
{
|
||||||
|
href: "09991296666",
|
||||||
|
display: "۰۹۹۹ ۱۲۹ ۶۶۶۶",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "09371448905",
|
||||||
|
display: "۰۹۳۷ ۱۴۴ ۸۹۰۵",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
socials: [
|
||||||
|
{
|
||||||
|
label: "اینستاگرام",
|
||||||
|
href: "https://www.instagram.com/ayoubifakhim/",
|
||||||
|
handle: "@ayoubifakhim",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
} as const;
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [{ "name": "next" }],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user