import React from "react"; import { AbsoluteFill } from "remotion"; import { FONT } from "../lib/fonts"; import { hexToRgba } from "../lib/anim"; /** * IGProfileMock — an authentic Instagram profile page (LIGHT theme) inside a phone, * as the centrepiece of a "follow our page" promo. Real IG chrome: status bar, the * username header, avatar + stats, bio, Follow/Message buttons, story highlights, * the grid tabs and the posts grid. Everything here is an editable field later. */ const IGLOGO = "linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)"; const BLUE = "#0095f6"; const HANDLE = "flat.studio"; const NAME = "استودیو فلت"; const CAT = "هنر و طراحی"; const BIO = ["هر روز یک طرح تازه ✨", "آموزش، قالب و الهام برای طراحان", "سفارش و دانلود 👇"]; const LINK = "flat.studio/shop"; const HILITES = ["جدید", "قالب‌ها", "آموزش", "نمونه‌کار"]; const POSTS = ["#ff5a3c", "#7c5cff", "#16b5a0", "#ffb23c", "#ef5da8", "#3aa0ff", "#ff7a59", "#4cd4b0", "#a06bff", "#ff5a3c", "#3aa0ff", "#ffb23c"]; const IgCamera: React.FC<{ s: number }> = ({ s }) => ( ); const Stat: React.FC<{ n: string; l: string }> = ({ n, l }) => (
{n}
{l}
); export const IGProfileMock: React.FC = () => { const S = 770; // phone screen inner width const cell = (S - 12) / 3; return (
{/* promo header: IG logo + headline */}
Instagram
صفحهٔ ما را دنبال کنید
{/* phone */}
{/* status bar */}
۹:۴۱▮▮▮ WiFi ۸۴٪
{/* username header */}
🔒{HANDLE}
{/* profile: avatar + stats */}
🎨
{/* name + bio */}
{NAME}
{CAT}
{BIO.map((b, i) =>
{b}
)}
{LINK}
{/* buttons */}
دنبال کردن
پیام
👤
{/* highlights */}
{HILITES.map((h, i) => (
{["✨", "🗂️", "🎓", "🖼️"][i]}
{h}
))}
{/* tabs */}
{["▦", "▶", "𓏬"].map((t, i) => (
{t}
))}
{/* posts grid */}
{POSTS.map((c, i) => (
{i % 4 === 0 ? : i % 4 === 1 ? : null}
))}
); };