System Requirements Document for social-media-marketing

1. Introduction

TIME & TIDE MARKETING is a social media marketing and digital marketing agency. This project delivers its public marketing website: a premium, futuristic, high-end 3D animated site that must read as a top-tier international digital agency rather than a basic template. The site presents the agency's brand, services, portfolio, process, leadership and contact channels, and converts visitors into conversations through project-start CTAs and a direct WhatsApp channel.

The audience is ambitious business owners and marketing decision-makers evaluating TIME & TIDE MARKETING as a growth partner, plus the agency's own site administrator who maintains replaceable content. The single goal of the experience is that visitors immediately understand: TIME & TIDE MARKETING = CREATIVE + STRATEGY + PERFORMANCE + GROWTH.

2. System Overview

The system is a fully responsive, cinematic, dark-mode marketing website with real-time 3D throughout, built on React / Next.js with Three.js / React Three Fiber and GSAP. It is composed of eight public destinations (HOME, ABOUT, SERVICES, WORK, PROCESS, CEO, CONTACT) plus a protected Content Admin workspace and an anonymous Login entry that establishes administrator access to it.

Public visitors browse anonymously: no account is required to read any public page, view the 3D hero, browse services, portfolio, process, CEO profile or testimonials, or to open the WhatsApp conversation. The only identity-bearing surface is the administrator path: an invited/provisioned administrator verifies identity at Login and then edits durable public-site content (testimonials, portfolio items, contact details) in Content Admin, with changes persisting to the public site without a rebuild.

Actors: the Prospective Client / Business Owner (public visitor) and the Agency Site Administrator / Content Editor (authenticated editor). The WhatsApp destination is an external, provider-owned surface reached by outbound link.

Narrow exclusions: no fake biography or fake achievements for CEO ZAIN AKBAR; no placeholder lorem ipsum; no broken links; no overcrowded hero; no childish or flashy logo animation; no cheap gradients, excessive neon, cartoon graphics, generic stock-template appearance, excessive animation, clutter or too many colors; no fake client testimonials presented as real.

2a. Product Interpretation and Delivery Boundary

The website is a first-party, application-owned public marketing surface. All public content is delivered by the application itself and is reachable without identity. The conversion path is deliberately split: "start a project" style CTAs lead into the site's own contact experience, while the WhatsApp CTAs hand the visitor off to the external WhatsApp destination at https://wa.me/923334674657 — that conversation is owned and hosted by WhatsApp, not by this application, and the site only opens it.

Content that the source marks as replaceable — placeholder testimonials, portfolio items, contact details — is owned by the application as durable, editable state. Because that state must remain bound to the correct authorized editor and survive across sessions, the application owns a minimal identity boundary: an administrator is provisioned or invited before first access, verifies identity at Login on return, and only then edits content in Content Admin. This is a single-role editorial boundary, not a differentiated permission system; no other role-based visibility or permission control is established by the source.

Current horizon: everything described in Sections 2c, 3 and 5. No future-horizon features are accepted by the source; nothing beyond the current scope is promised by this document.

2b. Source Content Inventory

Not applicable — no reference directive declares content_source.

2c. Page Content and Component Coverage

HOME

• Information/state: Full-screen hero with headline "WE TURN ATTENTION / INTO GROWTH.", subheadline "TIME & TIDE MARKETING — 'Your Digital Growth Partner'", supporting text "We build powerful digital identities, generate qualified leads, and turn social media into a growth engine for ambitious businesses."; two CTAs (GET STARTED, CHAT ON WHATSAPP) with WhatsApp number 03334674657 shown; interactive 3D hero scene; animated logo introduction; sticky glassmorphism navigation; About teaser with animated statistics; Services teaser; 3D digital growth section; Work teaser; Process teaser; CEO teaser; Why Choose Us; Testimonials carousel; final Contact CTA; footer.
• Primary actions: GET STARTED (proceed to project-start contact path); CHAT ON WHATSAPP (open https://wa.me/923334674657); START A PROJECT (nav CTA); navigate to any menu destination; VIEW OUR WORK; WORK WITH ZAIN; START YOUR PROJECT; WHATSAPP US.
• Supporting actions: pointer-driven parallax on the 3D scene; hover/tilt on cards; scroll-triggered reveals; counter animations on viewport entry; testimonial carousel navigation; skip the logo animation on tap.
• Domain entities: brand identity (company name, tagline, CEO ZAIN AKBAR, WhatsApp 03334674657); service entries; statistics (100+ Campaigns, 50+ Brands Served, 10K+ Leads Generated, 24/7 Digital Growth); growth metrics (growth graph, engagement percentage, leads, reach, conversion rate, ROAS, social media metrics); portfolio items; process stages; feature cards; testimonials; contact details.
• Component responsibilities: LogoIntro (particle assembly → monogram → wordmark → light sweep → dissolve into hero); GlassNav (sticky, transparent, menu HOME | ABOUT | SERVICES | WORK | PROCESS | CEO | CONTACT, highlighted START A PROJECT CTA); HeroScene (R3F canvas: 3D smartphone, Instagram-style icon, Facebook-style icon, TikTok-style icon, Google/search element, floating analytics dashboard, 3D percentage/growth symbols, floating notification cards, 3D charts, glowing particles, floating digital cards; glass/metal materials, soft reflections, depth of field, cinematic lighting; pointer parallax); AboutBlock (heading "WE DON'T JUST MARKET. WE BUILD DIGITAL MOMENTUM.", growth explanation, interactive 3D rotating object/abstract digital sphere, animated counters); ServicesGrid (eight floating glass cards with individual 3D icons and mouse-tilt); GrowthDashboard (dark immersive 3D analytics dashboard floating in space with gradually increasing graph); WorkRail (3D floating project cards, horizontal scrolling, 3D hover); ProcessTimeline (01–05 with glowing animated connecting line); CeoProfile (ZAIN AKBAR, CEO — TIME & TIDE MARKETING, premium portrait placeholder, vision text, WORK WITH ZAIN CTA); WhyChooseUs (six feature cards); TestimonialCarousel (3D carousel, placeholder-labeled content); ContactCta (READY TO GROW YOUR BRAND?, START YOUR PROJECT, WHATSAPP US); SiteFooter.
• States: Loading — logo intro plays, heavy 3D assets lazy-load, hero scene mounts progressively. Empty — not applicable to static brand content; testimonial carousel shows its labeled placeholder entries when no real testimonials exist. Success — hero scene renders at target frame rate, counters complete, CTAs open their destinations. Error — if the 3D scene fails or WebGL is unavailable, a static premium fallback frame renders in its place and all text/CTAs remain fully usable. Recovery — reduced-motion or low-power devices receive the reduced 3D variant automatically; the page remains complete and navigable.

Login

• Information/state: Anonymous entry surface for the administrator; identity verification form; no public content.
• Primary actions: submit credentials to verify identity and continue to Content Admin.
• Supporting actions: recover from invalid credentials by re-entering; return to the public site.
• Domain entities: administrator identity; session continuity.
• Component responsibilities: LoginForm (credential fields, submit, inline validation), AuthError (invalid-credential message), BackToSite link.
• States: Loading — submit in progress, control disabled. Empty — initial blank form. Success — verified session, redirect to Content Admin. Error — invalid credentials shown inline without revealing which field failed. Recovery — retry after error; the administrator is provisioned or invited before first access, so no self-service account creation is offered here.

ABOUT

• Information/state: Heading "WE DON'T JUST MARKET. WE BUILD DIGITAL MOMENTUM."; explanation that Time & Tide Marketing helps businesses grow through strategic social media marketing, creative content, advertising, branding and lead generation; interactive 3D rotating object / abstract digital sphere beside the text; animated statistics 100+ Campaigns, 50+ Brands Served, 10K+ Leads Generated, 24/7 Digital Growth.
• Primary actions: read the agency positioning; continue to Services, Work or Contact.
• Supporting actions: pointer interaction with the 3D sphere; counters animate when the section enters the viewport.
• Domain entities: agency positioning copy; statistics set.
• Component responsibilities: AboutHeading, AboutCopy, RotatingSphere (interactive 3D object), StatCounters (viewport-triggered animated counters).
• States: Loading — sphere geometry lazy-loads after text. Empty — not applicable. Success — counters reach final values on entry. Error — if the 3D object fails, the text and statistics render without it. Recovery — reduced-motion shows final counter values immediately and a still sphere frame.

SERVICES

• Information/state: Eight services as floating/glass cards, each with its own subtle 3D icon/illustration and source description: SOCIAL MEDIA MARKETING — "Strategic content, audience growth and consistent brand positioning."; META ADS — "High-converting Facebook & Instagram advertising campaigns."; SEO — "Search engine optimization designed to increase organic visibility."; LEAD GENERATION — "Generate targeted leads and connect businesses with potential customers."; GRAPHIC DESIGN — "Premium social media creatives, branding and marketing visuals."; VIDEO & REELS — "High-quality short-form video content designed for engagement."; GOOGLE ADS — "Performance-driven search and display campaigns."; BRANDING — "Build a recognizable and professional digital identity."
• Primary actions: read each service; continue to Contact or WhatsApp to start a project.
• Supporting actions: mouse-movement 3D tilt on each card; per-card 3D icon rotation.
• Domain entities: service entries (name + description + icon).
• Component responsibilities: ServiceCard ×8 (glass surface, 3D icon, tilt), ServicesGrid layout.
• States: Loading — cards reveal on scroll. Empty — not applicable. Success — all eight cards render with tilt response. Error — if a card's 3D icon fails, the card renders with its text intact. Recovery — reduced-motion disables tilt and shows static cards.

WORK

• Information/state: Premium portfolio of project cards floating in a 3D environment, with mockups of Instagram feeds, Facebook campaigns, product advertisements, brand identity, website designs, social media campaigns and reels; smooth horizontal scrolling; 3D hover effects; "VIEW OUR WORK" element.
• Primary actions: browse the portfolio rail; VIEW OUR WORK; continue to Contact or WhatsApp.
• Supporting actions: horizontal scroll/drag through the rail; 3D hover on each card.
• Domain entities: portfolio items (mockup type, title, visual composition).
• Component responsibilities: WorkRail (horizontally scrollable 3D card track), WorkCard (tilted glass panel with mockup composition), ViewOurWork control.
• States: Loading — rail items lazy-load as they approach the viewport. Empty — if no portfolio items are published, the section shows its labeled placeholder compositions rather than an empty rail. Success — all items reachable by scrolling and fully readable as they pass. Error — a failed item image falls back to its glass panel with title text. Recovery — reduced-motion converts the rail to a static, scrollable row of whole items.

PROCESS

• Information/state: Elegant animated timeline with a glowing animated line connecting each stage: 01 — DISCOVER "Understand the business, audience and goals."; 02 — STRATEGIZE "Build a customized marketing strategy."; 03 — CREATE "Design premium content and campaigns."; 04 — LAUNCH "Launch targeted digital campaigns."; 05 — OPTIMIZE "Analyze performance and continuously improve."
• Primary actions: read the five stages in order; continue to Contact.
• Supporting actions: scroll-driven line growth between nodes; node halo ignition as the line reaches each stage.
• Domain entities: process stages (number, name, description).
• Component responsibilities: ProcessTimeline, TimelineNode ×5, GlowLine.
• States: Loading — timeline draws as the section enters. Empty — not applicable. Success — line completes 01→05 and all five stages are readable. Error — if the animated line fails, nodes render statically with their numbers and descriptions. Recovery — reduced-motion shows the completed line and all nodes at once.

CEO

• Information/state: Executive section for ZAIN AKBAR, CEO — TIME & TIDE MARKETING; sophisticated professional profile area; premium portrait placeholder when no image is provided; vision text "Leading Time & Tide Marketing with a vision to help businesses build stronger digital identities, reach the right audiences and achieve sustainable online growth."; CTA WORK WITH ZAIN.
• Primary actions: read the CEO profile; WORK WITH ZAIN (proceed to contact/WhatsApp).
• Supporting actions: portrait placeholder presentation; scroll reveal.
• Domain entities: CEO name, title, vision statement, portrait asset (placeholder until supplied).
• Component responsibilities: CeoProfile, PortraitPlaceholder, VisionStatement, WorkWithZainCta.
• States: Loading — portrait lazy-loads. Empty — no portrait supplied → premium placeholder shown, never a fabricated image or biography. Success — profile and CTA render. Error — a failed portrait load falls back to the placeholder. Recovery — placeholder remains until a real portrait is supplied.

CONTACT

• Information/state: Dramatic final CTA with headline "READY TO GROW YOUR BRAND?", text "Let's turn your digital presence into a powerful growth engine.", buttons START YOUR PROJECT and WHATSAPP US, WhatsApp number 03334674657, clickable WhatsApp link https://wa.me/923334674657; footer with brand, links, services, contact and social icons.
• Primary actions: START YOUR PROJECT; WHATSAPP US (opens https://wa.me/923334674657); follow footer links Home, About, Services, Portfolio, Process, CEO, Contact.
• Supporting actions: copy/read the WhatsApp number; use footer service links and social icons.
• Domain entities: contact details (CEO ZAIN AKBAR, WhatsApp 03334674657), footer link sets, service list, social links.
• Component responsibilities: ContactCta, WhatsAppButton, SiteFooter (brand block, links column, services column, contact column, social icons).
• States: Loading — static content, no blocking load. Empty — not applicable. Success — both CTAs open their correct destinations; every footer link resolves. Error — if the WhatsApp handoff cannot open, the number 03334674657 remains visible for manual use. Recovery — the visitor can retry the link or use the displayed number.

Content Admin

• Information/state: Authenticated editing workspace for replaceable public-site content: testimonials (clearly labeled as placeholder content while placeholders are in use), portfolio items, and contact details (CEO ZAIN AKBAR, WhatsApp 03334674657). Shows current published values and their placeholder/live status.
• Primary actions: edit and save testimonial entries; edit and save portfolio items; edit and save contact details; publish changes so they appear on the public site without a rebuild.
• Supporting actions: mark an entry as placeholder or real; revert an unsaved edit; sign out.
• Domain entities: testimonial entries (quote, attribution, placeholder flag), portfolio items (mockup type, title, visual), contact details (CEO name, WhatsApp number).
• Component responsibilities: TestimonialEditor (with explicit placeholder labeling), PortfolioEditor, ContactDetailsEditor, SaveStatus, SignOut.
• States: Loading — current content fetched after verification. Empty — no real testimonials yet → placeholder entries shown and labeled as placeholder. Success — saved changes persist and appear on the public site without a rebuild. Error — a failed save shows an inline error and keeps the editor's unsaved values. Recovery — the administrator can retry the save or revert; the session remains valid until sign-out.

3. Functional Requirements

FR-1 — Premium 3D agency website (explicit) As a Prospective Client / Business Owner, I should experience a premium, futuristic, high-end 3D animated website for TIME & TIDE MARKETING that reads as a top-tier international digital agency rather than a basic template, so that I immediately perceive the agency's creative and technical caliber.

• Trigger/input: visiting the site.
• Observable result: a sophisticated, modern, cinematic experience with smooth 3D animation, interactive elements, premium typography, strong visual hierarchy and excellent mobile responsiveness.
• Access state: public, no identity required.
• Failure/recovery: if heavy 3D cannot run, a premium static fallback preserves the full message and all controls.
• Continuation: the visitor proceeds into the hero and navigation.

FR-2 — Brand identity presentation (explicit) As a Prospective Client / Business Owner, I should see the brand facts — TIME & TIDE MARKETING, tagline "Your Digital Growth Partner", CEO ZAIN AKBAR, WhatsApp 03334674657 — presented consistently, so that I know exactly who the agency is and how to reach it.

• Trigger/input: any page load.
• Observable result: brand name, tagline, CEO name and WhatsApp number appear as specified.
• Access state: public.
• Failure/recovery: contact details remain readable even if a link fails.
• Continuation: the visitor uses a contact channel.

FR-3 — Service catalog presentation (explicit) As a Prospective Client / Business Owner, I should see the agency's full service offering — Social Media Marketing, Facebook Marketing, Instagram Marketing, TikTok Marketing, SEO, Google Ads, Meta Ads, Lead Generation, Social Media Management, Professional Graphic Designing, Content Creation, Reels & Video Marketing, Branding, Website Design — so that I can judge whether the agency covers my needs.

• Trigger/input: browsing the site's service presentation.
• Observable result: the service offering is visible and attributable to the agency.
• Access state: public.
• Failure/recovery: service text renders without its 3D icon if the icon fails.
• Continuation: the visitor moves to Contact or WhatsApp.

FR-4 — Full-screen hero (explicit) As a Prospective Client / Business Owner, I should land on a spectacular full-screen hero with headline "WE TURN ATTENTION INTO GROWTH.", subheadline "TIME & TIDE MARKETING — 'Your Digital Growth Partner'", supporting text "We build powerful digital identities, generate qualified leads, and turn social media into a growth engine for ambitious businesses.", and two premium CTAs GET STARTED and CHAT ON WHATSAPP (WhatsApp CTA using 03334674657), so that I grasp the proposition in one screen.

• Trigger/input: page load.
• Observable result: headline, subheadline, supporting text and both CTAs render; the WhatsApp CTA carries 03334674657.
• Access state: public.
• Failure/recovery: if the 3D scene fails, the hero text and CTAs remain complete.
• Continuation: GET STARTED proceeds to the project-start contact path; CHAT ON WHATSAPP opens the WhatsApp destination.

FR-5 — Interactive 3D hero scene (explicit) As a Prospective Client / Business Owner, I should see a large interactive 3D scene in the hero containing floating objects representing digital marketing — 3D smartphone, Instagram-style social media icon, Facebook-style icon, TikTok-style icon, Google/search element, floating analytics dashboard, 3D percentage/growth symbols, floating notification cards, 3D charts, glowing particles and floating digital cards — moving subtly with smooth mouse/parallax interaction, so that the agency's digital-marketing focus is felt rather than described.

• Trigger/input: pointer movement and page load.
• Observable result: objects drift subtly with pointer/parallax; materials read as realistic glass and metal with soft reflections, depth of field and cinematic lighting.
• Constraint: the screen must not be overcrowded.
• Access state: public.
• Failure/recovery: WebGL-unavailable or low-power devices receive a reduced/static premium variant.
• Continuation: the visitor scrolls into the next section.

FR-6 — Animated logo introduction (explicit) As a Prospective Client / Business Owner, I should see a premium animated TIME & TIDE MARKETING logo introduction in the exact sequence — small particles appear; particles form the logo; the logo smoothly scales into position; the company name appears with elegant motion; a subtle light sweep passes across the logo; the animation transitions smoothly into the hero section — so that the brand arrives with elegance.

• Trigger/input: first page load.
• Observable result: the six-step sequence plays and dissolves into the hero.
• Constraint: elegant and professional, not childish or flashy.
• Access state: public.
• Failure/recovery: the intro is skippable on tap and skipped entirely under reduced-motion, landing directly on the hero.
• Continuation: the hero becomes interactive.

FR-7 — Sticky glassmorphism navigation (explicit) As a Prospective Client / Business Owner, I should use a transparent/glassmorphism navigation bar with menu HOME | ABOUT | SERVICES | WORK | PROCESS | CEO | CONTACT and a highlighted CTA "START A PROJECT" that remains sticky while scrolling, so that I can move anywhere at any time.

• Trigger/input: scrolling or clicking a menu item.
• Observable result: the bar stays visible and sticky; each menu item navigates to its destination; START A PROJECT is visually highlighted.
• Access state: public.
• Failure/recovery: on narrow viewports the menu collapses into an accessible control that still reaches every destination.
• Continuation: the visitor arrives at the chosen destination.

FR-8 — About section with 3D object and animated statistics (explicit) As a Prospective Client / Business Owner, I should read the About section headed "WE DON'T JUST MARKET. WE BUILD DIGITAL MOMENTUM." explaining that Time & Tide Marketing helps businesses grow through strategic social media marketing, creative content, advertising, branding and lead generation, with an interactive 3D rotating object or abstract digital sphere beside the text and animated statistics 100+ Campaigns, 50+ Brands Served, 10K+ Leads Generated, 24/7 Digital Growth that count up when the section enters the viewport, so that I understand the agency's positioning and track record.

• Trigger/input: scrolling the section into view.
• Observable result: the heading, explanation, 3D object and four statistics render; counters animate on viewport entry.
• Access state: public.
• Failure/recovery: if the 3D object fails, text and statistics still render; reduced-motion shows final values immediately.
• Continuation: the visitor continues to Services.

FR-9 — Interactive 3D services cards (explicit) As a Prospective Client / Business Owner, I should see the services as premium floating/glass cards, each with its own subtle 3D icon/illustration and its source description — SOCIAL MEDIA MARKETING "Strategic content, audience growth and consistent brand positioning."; META ADS "High-converting Facebook & Instagram advertising campaigns."; SEO "Search engine optimization designed to increase organic visibility."; LEAD GENERATION "Generate targeted leads and connect businesses with potential customers."; GRAPHIC DESIGN "Premium social media creatives, branding and marketing visuals."; VIDEO & REELS "High-quality short-form video content designed for engagement."; GOOGLE ADS "Performance-driven search and display campaigns."; BRANDING "Build a recognizable and professional digital identity." — and each card should react to mouse movement with subtle 3D tilt effects, so that I can evaluate each service.

• Trigger/input: pointer movement over a card.
• Observable result: the card tilts subtly in 3D; its icon and description are readable.
• Access state: public.
• Failure/recovery: a failed icon leaves the card text intact; reduced-motion disables tilt.
• Continuation: the visitor selects a service interest and moves to Contact.

FR-10 — Immersive 3D digital growth section (explicit) As a Prospective Client / Business Owner, I should see an immersive dark 3D section with a futuristic 3D analytics dashboard floating in space showing a growth graph, engagement percentage, leads, reach, conversion rate, ROAS and social media metrics, with the graph animating gradually increasing, under the headline "FROM CLICKS TO CLIENTS." and the text "We combine creativity, strategy and performance marketing to turn digital attention into measurable business results.", so that I see attention converted into measurable results.

• Trigger/input: scrolling the section into view.
• Observable result: the dashboard renders with its metrics and the graph rises gradually.
• Access state: public.
• Failure/recovery: if the 3D dashboard fails, the headline, text and metric values render in a static premium layout.
• Continuation: the visitor continues to Work.

FR-11 — Portfolio with 3D floating cards and horizontal scrolling (explicit) As a Prospective Client / Business Owner, I should browse a premium portfolio of project cards floating in a 3D environment with mockups of Instagram feeds, Facebook campaigns, product advertisements, brand identity, website designs, social media campaigns and reels, using smooth horizontal scrolling and 3D hover effects, plus a "VIEW OUR WORK" element, so that I can judge the agency's output.

• Trigger/input: horizontal scroll/drag and hover.
• Observable result: cards move smoothly through the rail; hover brings a card forward in 3D; every item becomes fully readable as it passes.
• Access state: public.
• Failure/recovery: a failed mockup image falls back to its glass panel with title text; reduced-motion converts the rail to a static scrollable row of whole items.
• Continuation: the visitor proceeds to Process or Contact.

FR-12 — Animated process timeline (explicit) As a Prospective Client / Business Owner, I should see an elegant animated timeline with a glowing animated line connecting each stage — 01 DISCOVER "Understand the business, audience and goals."; 02 STRATEGIZE "Build a customized marketing strategy."; 03 CREATE "Design premium content and campaigns."; 04 LAUNCH "Launch targeted digital campaigns."; 05 OPTIMIZE "Analyze performance and continuously improve." — so that I understand how the agency works.

• Trigger/input: scrolling through the section.
• Observable result: the glowing line draws between nodes 01→05 and each stage's number, name and description are readable.
• Access state: public.
• Failure/recovery: if the line animation fails, all five stages render statically; reduced-motion shows the completed line.
• Continuation: the visitor continues to the CEO section.

FR-13 — CEO executive section (explicit) As a Prospective Client / Business Owner, I should see a premium executive section for ZAIN AKBAR, CEO — TIME & TIDE MARKETING, with a sophisticated professional profile area, a premium portrait placeholder if no image is provided, the vision text "Leading Time & Tide Marketing with a vision to help businesses build stronger digital identities, reach the right audiences and achieve sustainable online growth.", and the CTA WORK WITH ZAIN, so that I know who leads the agency and can approach them.

• Trigger/input: scrolling to the section.
• Observable result: name, title, profile area, vision text and CTA render.
• Constraint: no fake biography and no fake achievements may be generated.
• Access state: public.
• Failure/recovery: a missing or failed portrait shows the premium placeholder.
• Continuation: WORK WITH ZAIN proceeds to the contact/WhatsApp path.

FR-14 — Why Choose Us feature cards (explicit) As a Prospective Client / Business Owner, I should see six premium feature cards — STRATEGIC THINKING "Marketing decisions based on business goals."; CREATIVE EXCELLENCE "Premium visuals designed to capture attention."; DATA-DRIVEN MARKETING "Campaigns optimized using real performance data."; LEAD GENERATION "Focus on meaningful business opportunities."; FAST EXECUTION "Professional work with efficient turnaround."; LONG-TERM GROWTH "Strategies designed for sustainable digital growth." — so that I can weigh the agency's differentiators.

• Trigger/input: scrolling to the section.
• Observable result: all six cards render with their titles and descriptions.
• Access state: public.
• Failure/recovery: cards render as static glass panels if motion is unavailable.
• Continuation: the visitor continues to Testimonials or Contact.

FR-15 — 3D testimonial carousel with replaceable placeholders (explicit) As a Prospective Client / Business Owner, I should see a premium 3D testimonial carousel, where placeholder testimonials are used only if real client testimonials are not provided, so that I can read social proof without being misled.

• Trigger/input: scrolling to the carousel and navigating it.
• Observable result: testimonial entries rotate through a 3D carousel; placeholder entries are clearly labeled as placeholder content in the source/admin area and are easy to replace.
• Constraint: placeholders must never be presented as real client testimonials.
• Access state: public.
• Failure/recovery: if no testimonials are published, the labeled placeholder entries display rather than an empty carousel.
• Continuation: the visitor continues to Contact.

FR-16 — Dramatic final contact CTA (explicit) As a Prospective Client / Business Owner, I should reach a dramatic final CTA with headline "READY TO GROW YOUR BRAND?", text "Let's turn your digital presence into a powerful growth engine.", buttons START YOUR PROJECT and WHATSAPP US, the WhatsApp number 03334674657, and the clickable WhatsApp link https://wa.me/923334674657, so that I can start a conversation immediately.

• Trigger/input: clicking START YOUR PROJECT or WHATSAPP US.
• Observable result: START YOUR PROJECT proceeds into the project-start contact path; WHATSAPP US opens https://wa.me/923334674657.
• Access state: public.
• Failure/recovery: if the WhatsApp handoff cannot open, the number 03334674657 stays visible for manual use.
• Continuation: the visitor initiates contact with the agency.

FR-17 — Footer with brand, links, services, contact and social icons (explicit) As a Prospective Client / Business Owner, I should see a footer containing TIME & TIDE MARKETING and "Your Digital Growth Partner"; links Home, About, Services, Portfolio, Process, CEO, Contact; services Social Media Marketing, SEO, Meta Ads, Google Ads, Lead Generation, Graphic Design, Video Marketing, Branding; contact CEO ZAIN AKBAR and WhatsApp 03334674657; and social media icons, so that I can navigate and make contact from the bottom of any page.

• Trigger/input: reaching the footer.
• Observable result: all footer blocks render and every link resolves without broken links.
• Access state: public.
• Failure/recovery: contact details remain readable if a social link is unavailable.
• Continuation: the visitor navigates or contacts the agency.

FR-18 — WhatsApp handoff to the external destination (required_inference) As a Prospective Client / Business Owner, I should have every WhatsApp CTA open the accepted external WhatsApp destination at https://wa.me/923334674657, so that my conversation continues in WhatsApp with the agency.

• Trigger/input: clicking CHAT ON WHATSAPP, WHATSAPP US, or the footer WhatsApp contact.
• Observable result: the external WhatsApp destination opens for the number 03334674657.
• Access state: public; the destination is provider-owned and external to this application.
• Failure/recovery: if the handoff cannot open, the number remains visible for manual use.
• Continuation: the conversation proceeds in WhatsApp, outside this application.

FR-19 — Administrator provisioning and first access (required_inference) As an Agency Site Administrator / Content Editor, I should be provisioned or invited before first access, so that only the authorized editor can reach the content workspace.

• Trigger/input: the administrator receives provisioning/invitation and opens the Login entry.
• Observable result: the administrator can establish access at Login; no self-service account creation is offered.
• Access state: anonymous entry at Login; protected state remains unavailable until identity is established.
• Failure/recovery: an unprovisioned visitor cannot proceed past Login.
• Continuation: the administrator verifies identity on return.

FR-20 — Returning administrator verification (required_inference) As an Agency Site Administrator / Content Editor, I should complete returning verification through Login before editing durable content, so that public-site content stays bound to the correct authorized editor.

• Trigger/input: submitting credentials at Login.
• Observable result: on success the administrator reaches Content Admin; on failure an inline error appears without revealing which field failed.
• Access state: Login is anonymously reachable; Content Admin is role-restricted to the verified administrator.
• Failure/recovery: invalid credentials can be retried; the administrator can return to the public site.
• Continuation: the verified administrator edits content.

FR-21 — Durable content editing that persists without a rebuild (required_inference) As an Agency Site Administrator / Content Editor, I should edit testimonials, portfolio items and contact details in Content Admin and have those updates persist to the public site without rebuilding it, so that real client testimonials and updated work can be swapped in easily.

• Trigger/input: editing a testimonial, portfolio item or contact detail and saving.
• Observable result: the saved value persists and appears on the public site without a rebuild; placeholder entries remain clearly labeled as placeholder content while in use.
• Access state: role-restricted to the verified administrator.
• Failure/recovery: a failed save shows an inline error and preserves unsaved values for retry or revert.
• Continuation: the administrator continues editing or signs out.

4. User Personas

Prospective Client / Business Owner

Product context. A business owner or marketing decision-maker evaluating TIME & TIDE MARKETING as a growth partner. They arrive on the public site with no account and no obligation, often from a search or a shared link, and they judge the agency in seconds — first by whether the site itself feels like an international-agency product, then by whether the work, process and leadership look credible.

Primary goal. Decide whether this agency can turn their social media and digital presence into measurable growth, and then start a conversation.

Distinct accepted responsibilities. They read the hero proposition and the supporting statement; they explore the service offering; they examine portfolio mockups across Instagram feeds, Facebook campaigns, product advertisements, brand identity, website designs, social media campaigns and reels; they read the five-stage process; they assess the CEO's stated vision; they weigh the six differentiators; they read testimonials knowing which entries are placeholders; and they choose a conversion path.

Relevant inputs or decisions. Which service matches their need; whether the portfolio resembles their own business; whether the process matches how they want to work; whether to press GET STARTED / START A PROJECT / START YOUR PROJECT versus opening WhatsApp directly; whether to approach the CEO via WORK WITH ZAIN.

Interactions with other accepted participants. They interact with the Agency Site Administrator only indirectly — the testimonials, portfolio items and contact details they read are the administrator's maintained content. Their direct counterparty is the agency itself, reached through the WhatsApp destination or the project-start path.

Observable success. They understand that TIME & TIDE MARKETING = CREATIVE + STRATEGY + PERFORMANCE + GROWTH, and they initiate contact — either by opening https://wa.me/923334674657 or by starting a project through the site's contact path.

Agency Site Administrator / Content Editor

Product context. The person maintaining the site's replaceable content. The source explicitly requires that placeholder testimonials be clearly labeled as placeholder content in the source/admin area and be easy to replace, and that contact details and portfolio items stay current. This role exists because that content is durable, editable state that must remain bound to the correct authorized editor.

Primary goal. Swap real client testimonials and updated work into the live site quickly, without rebuilding it.

Distinct accepted responsibilities. Verifying identity at Login on return; editing testimonial entries and keeping the placeholder label accurate while placeholders are in use; editing portfolio items; editing contact details (CEO ZAIN AKBAR, WhatsApp 03334674657); publishing changes so they appear on the public site without a rebuild; signing out.

Relevant inputs or decisions. Which entries are still placeholders versus real; what the correct contact details are; whether a portfolio item should be published; whether to save or revert an edit.

Interactions with other accepted participants. Their work is what the Prospective Client reads. They never interact with the visitor directly; the relationship is content-mediated.

Observable success. A saved change persists and appears on the public site without a rebuild, and no placeholder testimonial is ever presented as a real client testimonial.

5. Core User Flows

Flow 1 — Prospective Client discovers the agency and converts via WhatsApp

1. The visitor opens the site. The animated logo introduction plays in sequence: small particles appear, the particles form the logo, the logo smoothly scales into position, the company name appears with elegant motion, a subtle light sweep passes across the logo, and the animation transitions smoothly into the hero section. (Owner: HOME — logo introduction.)
2. The hero renders full-screen: "WE TURN ATTENTION / INTO GROWTH.", the subheadline "TIME & TIDE MARKETING — 'Your Digital Growth Partner'", the supporting text, and the two CTAs GET STARTED and CHAT ON WHATSAPP with the number 03334674657 shown. (Owner: HOME — hero.)
3. The visitor moves the pointer across the hero. The 3D scene responds with subtle parallax: the 3D smartphone, Instagram-style icon, Facebook-style icon, TikTok-style icon, Google/search element, floating analytics dashboard, 3D percentage/growth symbols, floating notification cards, 3D charts, glowing particles and floating digital cards drift gently under glass-and-metal materials with soft reflections, depth of field and cinematic lighting — without overcrowding the screen. (Owner: HOME — 3D hero scene.)
4. The visitor scrolls. The sticky glassmorphism navigation remains visible with HOME | ABOUT | SERVICES | WORK | PROCESS | CEO | CONTACT and the highlighted START A PROJECT CTA. (Owner: HOME — navigation.)
5. The visitor reads the About section: "WE DON'T JUST MARKET. WE BUILD DIGITAL MOMENTUM.", the explanation of growth through strategic social media marketing, creative content, advertising, branding and lead generation, the interactive 3D rotating object beside the text, and the statistics 100+ Campaigns, 50+ Brands Served, 10K+ Leads Generated, 24/7 Digital Growth counting up as the section enters the viewport. (Owner: ABOUT.)
6. The visitor opens SERVICES and reads the eight glass cards with their 3D icons and descriptions, tilting each card subtly with the pointer. (Owner: SERVICES.)
7. The visitor continues into the immersive dark 3D digital growth section: the futuristic analytics dashboard floats in space showing the growth graph, engagement percentage, leads, reach, conversion rate, ROAS and social media metrics, and the graph animates gradually increasing under the headline "FROM CLICKS TO CLIENTS." and its supporting text. (Owner: HOME — 3D digital growth section.)
8. The visitor opens WORK and scrolls horizontally through the floating project cards — Instagram feeds, Facebook campaigns, product advertisements, brand identity, website designs, social media campaigns and reels — with 3D hover effects, and sees VIEW OUR WORK. (Owner: WORK.)
9. The visitor opens PROCESS and follows the glowing animated line through 01 DISCOVER, 02 STRATEGIZE, 03 CREATE, 04 LAUNCH and 05 OPTIMIZE, reading each stage's description. (Owner: PROCESS.)
10. The visitor opens CEO and reads ZAIN AKBAR, CEO — TIME & TIDE MARKETING, the premium portrait placeholder, and the vision statement; no fabricated biography or achievements are shown. (Owner: CEO.)
11. The visitor returns to HOME and reads the six Why Choose Us cards and the 3D testimonial carousel, noting that placeholder entries are labeled as placeholder content. (Owner: HOME — Why Choose Us and Testimonials.)
12. The visitor opens CONTACT, reads "READY TO GROW YOUR BRAND?" and "Let's turn your digital presence into a powerful growth engine.", and presses WHATSAPP US. (Owner: CONTACT.)
13. The external WhatsApp destination at https://wa.me/923334674657 opens for the number 03334674657, and the conversation continues in WhatsApp with the agency. (Owner: external WhatsApp destination.)
14. Failure/recovery: if the WhatsApp handoff cannot open, the number 03334674657 remains visible on the page for manual use, and the visitor can retry the link. (Owner: CONTACT.)

Flow 2 — Prospective Client starts a project through the site

1. The visitor arrives at HOME and reads the hero proposition and supporting text. (Owner: HOME.)
2. The visitor presses GET STARTED in the hero, or START A PROJECT in the sticky navigation, or START YOUR PROJECT in the final contact CTA. (Owner: HOME / CONTACT.)
3. The visitor proceeds into the project-start contact path and initiates contact with the agency. (Owner: CONTACT.)
4. Failure/recovery: if the visitor changes their mind, they can return to browsing any destination through the sticky navigation, which remains available throughout. (Owner: HOME — navigation.)

Flow 3 — Prospective Client approaches the CEO directly

1. The visitor opens CEO and reads ZAIN AKBAR, CEO — TIME & TIDE MARKETING, the profile area, the premium portrait placeholder and the vision statement. (Owner: CEO.)
2. The visitor presses WORK WITH ZAIN. (Owner: CEO.)
3. The visitor proceeds into the contact/WhatsApp path and initiates contact with the agency. (Owner: CONTACT / external WhatsApp destination.)

Flow 4 — Administrator verifies identity and updates replaceable content

1. The administrator is provisioned or invited before first access. (Owner: system provisioning — prerequisite, not a page.)
2. The administrator opens the Login entry anonymously and submits credentials to verify identity. (Owner: Login.)
3. On success, the administrator reaches Content Admin; on failure, an inline error appears without revealing which field failed, and the administrator retries or returns to the public site. (Owner: Login.)
4. In Content Admin the administrator sees the current testimonials, portfolio items and contact details, with placeholder entries clearly labeled as placeholder content. (Owner: Content Admin.)
5. The administrator replaces a placeholder testimonial with a real client testimonial, or updates a portfolio item, or corrects the contact details (CEO ZAIN AKBAR, WhatsApp 03334674657), and saves. (Owner: Content Admin.)
6. The saved change persists and appears on the public site without a rebuild; the placeholder label is removed from the replaced entry. (Owner: Content Admin → public site.)
7. Failure/recovery: if a save fails, an inline error appears and the unsaved values are preserved so the administrator can retry or revert. (Owner: Content Admin.)
8. The administrator continues editing or signs out. (Owner: Content Admin.)

6. Visuals Colors and Theme

Muse and headline. Cinematic future-tech, after Gleb Kuznetsov — a dark volumetric stage where the growth dashboard is the hero. The register is aspirational and performance-driven: the visitor must feel that this team operates at international-agency level and that attention is a controllable, measurable substance.

Color tokens (dark mode).

Only two accent hues appear on any one screen: electric cyan #38E1FF as the single dominant signal colour, and magenta #FF4D9D used sparingly as a second data hue. Both text colours pass AA on #070B14.

Typography. Headings: Space Grotesk — 700 for the display headline, set in ALL CAPS with -0.03em tracking and 0.95 line-height so "WE TURN ATTENTION / INTO GROWTH." reads as an architectural block. Section headings drop to 600 in sentence case with +0.01em tracking. Uppercase micro-labels use 500 at 11–12px with +0.22em tracking in #7C8AA3. Body: Sora 400/500 at 17–18px with 1.65 line-height. Numerals in counters and dashboard metrics: JetBrains Mono 500 with tabular figures — the "data voice" of the brand.

Type scale. 1.25 modular for UI (12 / 14 / 16 / 18 / 22 / 28 / 36), then a deliberate jump for display: hero headline clamp(44px, 9.4vw, 148px); section display clamp(34px, 5.6vw, 76px); section heading clamp(26px, 3vw, 40px); lead paragraph clamp(17px, 1.35vw, 21px); body 17px; micro-label 11px / 0.22em; dashboard numerals clamp(22px, 3vw, 44px).

Shape language. Thin luminous strokes and floating slabs: 16–20px radii on glass panels, 999px pill on CTAs and chips, 1px hairline dividers that glow cyan only where they intersect an active element. Circular gauges and bezels for metrics, rounded-rect notification cards floating at slight Z-rotations (±3°), and a fine 32px grid pattern at 4% opacity across the dark ground. No blobs; edges stay crisp so the glass reads as engineered.

Spacing rhythm. A 12-column grid inside a 1280px max-width container on a full-bleed dark stage; sections alternate between the #070B14 stage and a slightly lifted #0B1220 band so scroll has rhythm.

Imagery style. No stock photography and no cartoon graphics. The visual content is the interface itself: a real-time 3D scene of floating glass and metal objects (smartphone slab, social glyphs as beveled metallic discs, a search ring, notification cards, a rising 3D bar/line chart), plus CSS-rendered dashboard UI with cyan data lines on dark glass. Portfolio "mockups" are art-directed UI compositions — Instagram grid, ad creative, brand sheet, website frame, reel — rendered as tilted glass panels in a dark room, not photos of devices.

7. Signature Design Concept

The particle-assembled logo preloader. On first load, roughly 900 cyan points appear in the dark #070B14 void and converge into the "T&T" monogram. The monogram settles, and a single specular light sweep crosses it. The wordmark TIME & TIDE MARKETING fades in beneath on a 12px tracked line. The whole plate then dissolves into the hero scene, where the same cyan particle field continues behind the floating glass objects — so the intro and the hero read as one continuous space rather than two screens. Total duration 2.4s, skippable on tap, and skipped entirely under prefers-reduced-motion, which lands directly on the hero. This recomposes only accepted content (the logo introduction sequence and the hero) and introduces no new behaviour.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl

Landing Hero Motion Brief.

• Focal subject: a React Three Fiber scene — a floating glass smartphone slab at 1.4 units, three metallic social glyph discs (Instagram, Facebook, TikTok) orbiting at different depths, a thin search ring, two notification cards hovering at slight rotations, a 3D bar chart rising from a glass plane, and a slow cyan particle field behind everything, all under a cool key light with a magenta rim and real depth-of-field so far objects fall soft.
• Input → transformation → outcome thesis: pointer movement across the hero maps to a ±14px drift of the whole scene plus per-object parallax by depth; at rest the scene orbits slowly at 0.04 rad/s. The outcome is that the visitor's own motion makes the agency's digital-marketing world feel tangible and controllable, without any object ever obscuring the headline, subheadline, supporting text or the two CTAs.
• Motion vocabulary: continuous slow orbit, damped pointer parallax, light sweeps across glass on entrance, counters that tick up on viewport entry, a cyan line that draws itself through the process timeline, and a scroll-scrubbed camera dolly through the growth-dashboard section.
• Composed first frame: the hero at rest — headline block occupying columns 1–7 on the left with "INTO GROWTH." knocked to electric cyan #38E1FF, a cyan hairline rule beneath it, the tracked micro-label "TIME & TIDE MARKETING — Your Digital Growth Partner", the supporting paragraph at 21px in #F2F5FA/72%, and the two pill CTAs side by side (GET STARTED in solid cyan with dark text; CHAT ON WHATSAPP as a magenta-outlined glass pill) with 03334674657 in JetBrains Mono beneath them; the 3D scene bleeding past the right edge.
• Reduced-motion state: the 3D scene freezes to a single lit frame, marquees stop and wrap, counters jump to final values, and the logo intro is skipped entirely.

Landing Hero 3D Scene Brief — USER-REQUESTED. The user explicitly requested a large interactive 3D hero scene with Three.js / React Three Fiber. The scene must contain the accepted objects — 3D smartphone, Instagram-style icon, Facebook-style icon, TikTok-style icon, Google/search element, floating analytics dashboard, 3D percentage/growth symbols, floating notification cards, 3D charts, glowing particles and floating digital cards — with realistic materials, glass, metallic surfaces, soft reflections, depth of field and cinematic lighting, and must not overcrowd the screen. On mobile the scene compresses to a 320px-tall band under the CTAs and drops particle count and depth of field.

Signature moves carried through the page. A scroll-scrubbed 3D growth dashboard: as "FROM CLICKS TO CLIENTS." enters, the camera dollies toward a floating glass analytics slab while the 3D line graph physically rises out of its plane and the metric chips (ENGAGEMENT 8.4%, LEADS 12,480, REACH 2.1M, CVR 4.7%, ROAS 6.2×) count up in JetBrains Mono at the moment the line crosses them. Glass service cards with a cursor-tracked specular highlight: each of the eight cards tilts ±6° toward the pointer, its 1px border brightens to cyan on the edge nearest the cursor, and a small 3D icon inside rotates on its own axis. A cyan timeline line that draws itself between process nodes 01→05, each node igniting a soft halo as the line reaches it, becoming a vertical rail down the left gutter on mobile. Portfolio as a tilted glass rail that deliberately bleeds off both viewport edges: project panels sit at alternating 3° Z-rotations in a horizontally scrollable track, and hovering one brings it forward in Z while its neighbours dim.

Micro-interactions. Magnetic buttons, smooth hover effects, 3D card tilt with a damped 400ms return, animated underlines, cursor-following glow, scroll reveal, smooth section transitions, button ripple/hover animation, and number counter animations — all restrained so they never become distracting.

Readable text and controls stay whole at every viewport. Headlines, wordmarks, labels, numbers, card text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut as the direction asks, as long as they cover no readable text or control. Moving and scrollable content (the portfolio rail, marquees, carousels) may cross the viewport or container edge by design, judged by whether it actually moves or scrolls and whether every item becomes fully readable as it passes. With prefers-reduced-motion it stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling.

9. Non-Functional Requirements

NFR-1 — Responsive across desktop, tablet and mobile (explicit). The site must be fully responsive on desktop, tablet and mobile. Rationale: the source lists desktop, tablet and mobile responsiveness as hard requirements, and the layout must hold at 375px, 768px and 1280px.

NFR-2 — Fast loading with lazy-loaded heavy assets (explicit). The site must load fast, with optimized images and lazy-loading of heavy assets. Rationale: the 3D scene, particle systems and portfolio mockups are asset-heavy; the source requires fast loading and lazy-loading.

NFR-3 — Smooth, optimized animation targeting 60 FPS (explicit). Animations must remain smooth and optimized, prioritizing 60 FPS performance where possible. Rationale: explicit performance constraint.

NFR-4 — Automatic reduction of heavy 3D on mobile (explicit). On mobile devices the site must automatically reduce heavy 3D effects while maintaining the premium appearance. Rationale: explicit constraint; the hero scene compresses to a 320px-tall band and drops particle count and depth of field.

NFR-5 — SEO-friendly structure and semantic HTML (explicit). The site must use an SEO-friendly structure and semantic HTML, with proper metadata and Open Graph social sharing metadata, and a professional favicon. Rationale: explicit technical requirements.

NFR-6 — Accessibility of controls (explicit). Buttons must be accessible, with visible focus rings in #38E1FF. Rationale: explicit requirement for accessible buttons; the direction specifies cyan focus rings.

NFR-7 — Working navigation, smooth scrolling and no broken links (explicit). Navigation must work, scrolling must be smooth, and there must be no broken links. Rationale: explicit technical requirements.

NFR-8 — Working WhatsApp CTA (explicit). The WhatsApp CTA must work and open https://wa.me/923334674657 for the number 03334674657. Rationale: explicit requirement and explicit external reference URL.

NFR-9 — No placeholder lorem ipsum (explicit). No placeholder lorem ipsum may appear anywhere. Rationale: explicit constraint.

NFR-10 — Clean modern code (explicit). The codebase must be clean and modern. Rationale: explicit technical requirement.

NFR-11 — Reduced-motion compliance (required_inference). All motion must respect prefers-reduced-motion: the 3D scene freezes to a single lit frame, marquees stop and wrap, counters jump to final values, and the logo intro is skipped. Rationale: indispensable to keep the accepted motion system usable for motion-sensitive visitors without removing any content.

NFR-12 — Content persistence without rebuild (required_inference). Administrator edits to testimonials, portfolio items and contact details must persist to the public site without rebuilding it. Rationale: indispensable to make the accepted replaceable-content lifecycle executable.

10. Tech Stack

• React / Next.js — the source explicitly names React / Next.js as the suitable modern technology for this interactive 3D website.
• Three.js / React Three Fiber — explicitly named for the interactive 3D hero scene, growth dashboard, rotating About object, 3D cards and particle systems.
• GSAP — explicitly named for the animation system (logo introduction sequence, scroll-triggered reveals, counters, timeline line drawing, camera scrubs).
• Application storage for durable content — required so that administrator edits to testimonials, portfolio items and contact details persist to the public site without a rebuild.
• Application-owned identity for the administrator path — required so that durable editorial state stays bound to the correct authorized editor across sessions.
• Docker / docker-compose — [Default — not specified by user] for local and deployment packaging.
• Kubernetes — [Default — not specified by user]; include only if deployment scale requires it.

The source qualifies the technology choice with "if supported by the platform"; where the platform does not support it, the same accepted experience must be delivered with the closest supported equivalent.

11. Assumptions and Constraints

Assumptions.

1. (required_inference) The administrator is provisioned or invited before first access; no self-service account creation is offered.
2. (required_inference) A single editorial role exists. No differentiated permissions or role-based visibility beyond the administrator's access to Content Admin is established by the source.
3. (required_inference) Placeholder testimonials remain in use until real client testimonials are supplied, and stay labeled as placeholder content in the source/admin area throughout.
4. (required_inference) The CEO portrait remains a premium placeholder until a real portrait is supplied.
5. (explicit) The WhatsApp conversation is owned and hosted by WhatsApp; the site only opens https://wa.me/923334674657.

Constraints.

1. (explicit) Do NOT overcrowd the hero screen with 3D objects.
2. (explicit) Keep the logo animation elegant and professional — not childish or flashy.
3. (explicit) Avoid cheap-looking gradients, excessive neon, cartoon graphics, generic stock-template appearance, excessive animations, clutter and too many colors.
4. (explicit) Do not generate a fake biography or fake achievements for CEO ZAIN AKBAR.
5. (explicit) Use placeholder testimonials only if real client testimonials are not provided; clearly label them as placeholder content in the source/admin area and make them easy to replace.
6. (explicit) No placeholder lorem ipsum.
7. (explicit) No broken links.
8. (explicit) Animations must remain smooth and optimized; prioritize 60 FPS performance where possible.
9. (explicit) On mobile devices, automatically reduce heavy 3D effects while maintaining the premium appearance.
10. (explicit) Do not make animations distracting.
11. (explicit) Use modern technologies such as React / Next.js + Three.js / React Three Fiber + GSAP only if supported by the platform.
12. (explicit) The generic indigo/blue-on-white SaaS template is forbidden for this project; Bootstrap-blue or indigo (#0057FF / #2563EB / #6366F1) must not appear as the primary or accent colour, and Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins or system-ui must not be used for headings or body.

12. Glossary

• TIME & TIDE MARKETING — the social media marketing and digital marketing agency this website represents; tagline "Your Digital Growth Partner".
• ZAIN AKBAR — CEO of TIME & TIDE MARKETING; presented with a profile area, a premium portrait placeholder and the stated vision text, with no fabricated biography or achievements.
• WhatsApp destination — the external, provider-owned conversation surface reached at https://wa.me/923334674657 for the number 03334674657.
• Logo introduction — the six-step animated brand sequence: particles appear, particles form the logo, the logo scales into position, the company name appears, a light sweep crosses the logo, and the animation transitions into the hero.
• Hero scene — the interactive 3D scene in the hero containing the floating digital-marketing objects with mouse/parallax movement.
• Growth dashboard — the futuristic 3D analytics dashboard floating in space in the digital growth section, showing the growth graph, engagement percentage, leads, reach, conversion rate, ROAS and social media metrics.
• Placeholder testimonial — a testimonial entry used only when no real client testimonial is provided, clearly labeled as placeholder content in the source/admin area and easy to replace.
• Content Admin — the role-restricted editing workspace where the verified administrator maintains testimonials, portfolio items and contact details.
• Login — the anonymously reachable entry surface where the provisioned administrator completes returning verification before editing durable content.
• Reduced motion — the prefers-reduced-motion state in which the 3D scene freezes to a single lit frame, marquees stop and wrap, counters jump to final values, and the logo intro is skipped.