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