Marketing Website

Overview

The Marketing Website (siyahfy.com) is the public-facing website for the Siyahfy platform. It serves as the primary landing page, showcasing product features, pricing plans, testimonials, blog content, and providing sign-up/demo request flows. It also handles the vendor onboarding funnel (sign-up, sign-in, auth callbacks).

Users: Prospective vendors, Visitors, Blog readers

Tech Stack

Technology	Version	Purpose
Next.js	14.x	React framework with App Router
React	18.x	UI library
TypeScript	5.x	Type safety
Tailwind CSS	3.x	Utility-first styling
Three.js	0.180	3D graphics and WebGL effects
OGL	1.x	Lightweight WebGL library
Framer Motion	11.x	Page and component animations
Radix UI	—	Full suite of accessible UI primitives
React Hook Form	7.x	Form handling
Zod	3.x	Schema validation
Tanstack React Query	5.x	Server state management
Lenis	1.x	Smooth scrolling
Embla Carousel	8.x	Carousel/slider component
Sonner	1.x	Toast notifications
Nodemailer	8.x	Contact form email sending
cmdk	1.x	Command palette UI

Folder Structure


siyahfy.com/
├── src/
│   ├── app/
│   │   ├── layout.tsx                 # Root layout
│   │   ├── page.tsx                   # Homepage
│   │   ├── (marketing)/              # Marketing page group
│   │   │   ├── newHome/              # Updated homepage variant
│   │   │   ├── features/             # Features page
│   │   │   ├── pricing/              # Pricing plans page
│   │   │   ├── blogs/                # Blog listing
│   │   │   ├── changelog/            # Product changelog
│   │   │   ├── contact/              # Contact form
│   │   │   ├── demo/                 # Demo page
│   │   │   ├── request-demo/         # Demo request form
│   │   │   ├── enterprise/           # Enterprise plan page
│   │   │   ├── testimonials/         # Customer testimonials
│   │   │   ├── resources/            # Resources & guides
│   │   │   ├── privacy/              # Privacy policy
│   │   │   └── terms/                # Terms of service
│   │   └── auth/                     # Authentication pages
│   │       ├── sign-in/              # Vendor sign-in
│   │       ├── sign-up/              # Vendor registration
│   │       └── auth-callback/        # OAuth callback handler
│   ├── components/
│   │   ├── global/                   # Shared global components
│   │   │   ├── animation-container.tsx  # Scroll animation wrapper
│   │   │   ├── max-width-wrapper.tsx    # Content width limiter
│   │   │   ├── page-container.tsx       # Page layout wrapper
│   │   │   ├── primary-cta-button.tsx   # Primary CTA button
│   │   │   ├── signup-cta-section.tsx   # Sign-up call-to-action
│   │   │   ├── signup-scroll-prompt.tsx # Scroll prompt animation
│   │   │   ├── page-view-tracker.tsx    # Analytics page view
│   │   │   └── icons.tsx                # Custom icon components
│   │   ├── navigation/              # Header & footer navigation
│   │   ├── auth/                    # Auth form components
│   │   ├── blog/                    # Blog display components
│   │   ├── dashboard/               # Mini-dashboard previews
│   │   ├── onboarding/              # Onboarding flow components
│   │   ├── themes/                  # Theme showcase components
│   │   ├── support/                 # Support/help components
│   │   ├── providers/               # Context providers
│   │   ├── ui/                      # Base UI primitives (shadcn/ui)
│   │   └── temporayComponent/       # Experimental components
│   ├── actions/                     # Server actions
│   ├── data/                        # Static data & content
│   ├── lib/                         # Utilities
│   │   ├── prisma/                  # Prisma client (if used)
│   │   └── stripe/                  # Stripe integration helpers
│   ├── styles/                      # Global CSS
│   └── utils/
│       ├── constants/               # App constants
│       └── functions/               # Utility functions
├── public/                          # Static assets
└── .github/
    └── workflows/                   # CI/CD pipelines

Key Routes / Pages

Marketing Pages

Route	Description
`/`	Homepage with hero, features overview, and CTA
`/features`	Detailed platform features breakdown
`/pricing`	Subscription plan comparison
`/blogs`	Blog listing page
`/changelog`	Product updates and release notes
`/contact`	Contact form
`/demo`	Interactive demo page
`/request-demo`	Demo request form
`/enterprise`	Enterprise plan details
`/testimonials`	Customer success stories
`/resources`	Guides and documentation links
`/privacy`	Privacy policy
`/terms`	Terms of service

Authentication Pages

Route	Description
`/auth/sign-in`	Vendor sign-in page
`/auth/sign-up`	New vendor registration
`/auth/auth-callback`	OAuth callback handler

Animations & Visual Effects

The marketing site makes heavy use of animations to create an engaging experience:

Three.js / OGL

3D hero sections with WebGL-rendered backgrounds
Interactive 3D elements that respond to mouse movement
Particle effects and geometric animations

Framer Motion

Scroll-triggered animations via the animation-container component
Page transition animations
Staggered content reveals on scroll
Interactive hover states on feature cards

Lenis

Smooth scrolling across the entire site for a polished feel
Custom scroll physics for a native-like experience

Key Components

Component	Purpose
`animation-container.tsx`	Wraps content with scroll-triggered fade/slide animations
`max-width-wrapper.tsx`	Constrains content to maximum width with padding
`page-container.tsx`	Standard page layout with consistent spacing
`primary-cta-button.tsx`	Animated primary call-to-action button
`signup-cta-section.tsx`	Reusable sign-up CTA block with copy
`signup-scroll-prompt.tsx`	Animated scroll-down indicator
`page-view-tracker.tsx`	Tracks page views for analytics
`navigation/`	Responsive header with mobile menu and footer
`themes/`	Theme showcase gallery for the marketplace
`onboarding/`	Multi-step vendor onboarding wizard

API Communication

The marketing site primarily uses:

Server Actions (src/actions/) for form submissions (contact, demo requests)
React Query for client-side data fetching (blog posts, pricing data)
Nodemailer for server-side email sending from contact forms
Backend API for authentication and vendor registration

Environment Variables

Variable	Description
`NEXT_PUBLIC_APP_URL`	Marketing site URL
`NEXT_PUBLIC_API_URL`	Backend API URL
`NEXT_PUBLIC_DASHBOARD_URL`	Vendor dashboard URL
`SMTP_HOST` / `SMTP_USER` / `SMTP_PASS`	Email configuration
`DATABASE_URL`	Database connection (if Prisma is used)
`STRIPE_SECRET_KEY` / `STRIPE_PUBLISHABLE_KEY`	Stripe keys (if applicable)