mammoth-video
ADARSHI am having a video editing agency named craxtic media where we added all types of video in premier pro after effect in high-end software with high-end qualities. Create a high quality website aura.Lending page with high graphics and all
Comments (0)
Sign in to leave a comment
Project Tasks31
Implement Navbar for Landing
As a frontend developer, implement the Navbar section for the Landing page. The component uses useState for mobileOpen and particles state, useRef for ctaRef/ctaWrapRef/particleId, and useAnimation from framer-motion for logo draw animation on mount. Implements animated SVG logo with three LOGO_PATHS (outer tusk arc, inner tusk curve, play triangle) drawn via pathLength animation with staggered delays. Features a magnetic CTA button using handleMagneticMove/handleMagneticLeave callbacks that calculate mouse distance from button center and apply dampened translate transforms. Includes a particle burst system (12 particles) on CTA click with AnimatePresence. NAV_LINKS array defines 6 routes (Portfolio, Services, Pricing, About, Gallery, Contact). Mobile menu toggle via AnimatePresence. Note: this Navbar component may already exist from other pages — check for reuse before implementing.
Deploy develop branch to stage
Deploy the current develop branch to the stage environment for this product. Do not implement code changes.
Portfolio projects API endpoints
Implement FastAPI endpoints for portfolio/projects resource: GET /api/projects (list with category filter, pagination), GET /api/projects/{id} (single project detail). Returns project title, category, client, duration, year, thumbnail URL, video URL, and tags. Supports query params: category, page, limit. Required by GalleryGrid, FeaturedProject, VideoPreviewModal frontend sections on the Portfolio page.
Testimonials API endpoints
Implement FastAPI endpoints for testimonials resource: GET /api/testimonials (list, paginated), POST /api/testimonials (admin create), PUT /api/testimonials/{id} (admin update), DELETE /api/testimonials/{id} (admin delete). Each testimonial includes author name, role, company, quote, rating (stars), and avatar initials. Required by TestimonialsCarousel on Portfolio page and the Testimonials page. Note: frontend section tasks for TestimonialsCarousel should depend on this task.
Services API endpoints
Implement FastAPI endpoints for services resource: GET /api/services (list all services with title, description, icon name, features list, and pricing tier reference). Used by LandingServices on Landing page and the Services page. Admin endpoints: POST /api/services, PUT /api/services/{id}, DELETE /api/services/{id}.
Contact inquiry API endpoint
Implement FastAPI POST /api/contact endpoint to receive and store client inquiries. Payload includes name, email, phone, message, service_type, and budget_range. Validates input, saves to DB, and triggers email notification (stub or real). Used by Contact page form submission flow.
Project statistics API endpoint
Implement FastAPI GET /api/stats endpoint returning aggregated counts: total_projects, total_clients, awards_won, years_active. Used by ProjectStats section on Portfolio page and Dashboard overview. Values can be computed from DB or stored as configurable site settings.
Pricing plans API endpoint
Implement FastAPI GET /api/pricing endpoint returning pricing plans with name, price, billing_period, features list, and is_featured flag. Admin endpoints: POST/PUT/DELETE /api/pricing/{id}. Used by Pricing page and referenced in Services page.
Database models and migrations
Define SQLAlchemy ORM models for all core entities: Project (id, title, category, client, duration, year, thumbnail_url, video_url, tags, featured, created_at), Testimonial (id, author_name, role, company, quote, rating, avatar_initials, active), Service (id, title, description, icon_name, features, order), ContactInquiry (id, name, email, phone, message, service_type, budget_range, created_at), PricingPlan (id, name, price, billing_period, features, is_featured, order), SiteStats (id, key, value). Create Alembic migration scripts for all tables. Seed initial data for projects, testimonials, services, and pricing.
Global frontend state management setup
Set up global state management for the React frontend using React Context or Zustand. Covers: authenticated user/admin state, active video modal state (shared between GalleryGrid and VideoPreviewModal across pages), active filter state, and theme/scroll position. Ensures VideoPreviewModal can be triggered by openVideoModal CustomEvent from GalleryGrid and other sections without prop drilling. Document the store shape and usage pattern for all frontend developers.
Implement LandingHero for Landing
As a frontend developer, implement the LandingHero section for the Landing page. Uses useState for isMobile and scrollY, useRef for heroRef, and useScroll/useTransform/useMotionValueEvent from framer-motion. Implements a multi-layer parallax system: bgY (speed 0.3, range 0→-120px), midY (speed 0.5, range 0→-200px), heroScale (0.85→1.15 over first half of scroll), heroOpacity (fades out between 0.6→1 scroll progress). HEADLINE_WORDS array ('Elevate','Your','Video','Content') with per-word depth factors (0.4, 0.55, 0.7, 0.85) computed via useMemo wordTransforms. FLOATING_ICONS array of 6 icons with orbital animation math (sin/cos phase shifts) computed via useMemo iconTransforms. Includes lh-watercolor overlay div, lh-bg-layer and lh-mid-layer parallax containers. Uses Play and ArrowRight from lucide-react for CTA buttons. accentGlow transform drives pulse intensity on 'Video' and 'Content' accent words.
Implement TrustBadges for Landing
As a frontend developer, implement the TrustBadges section for the Landing page. Uses useRef and useInView from framer-motion for scroll-triggered reveal. Renders three sub-sections: (1) clientLogos array of 8 items (Meridian Films, Pulse Media, Skyline Corp, etc.) each with glyph, color, and type — displayed via LogoItem sub-component with tb-logo-glyph colored div; (2) stats array of 4 counters (200+ Projects, 98% Satisfaction, 12+ Years, 30+ Awards) with statVariants (opacity/y/scale animation); (3) certifications array of 3 items rendered via CertIcon sub-component that switches between Award, Shield, and CheckCircle lucide icons based on iconType prop. containerVariants uses staggerChildren: 0.1; itemVariants, statVariants, and certVariants each have distinct entrance animations. Triggered when section enters viewport via useInView.
Implement VideoCarousel for Landing
As a frontend developer, implement the VideoCarousel section for the Landing page. This is a 3D carousel built with @react-three/fiber Canvas, useFrame, useThree hooks, and @react-three/drei (OrbitControls, Text, RoundedBox). PROJECTS array contains 7 items (Elevate Brand Film, Neon Pulse, Fresh & Bold, Behind the Lens, Trend Surge, Quantum Leap, Golden Hour) each with color, category, tags, and desc. CarouselPanel sub-component is a Three.js mesh using useRef for meshRef, with angle calculated as (index/total)*Math.PI*2 and positioned at RADIUS=4.2 on a circle. Panels use RoundedBox geometry. useState tracks hoveredId and selected project. AnimatePresence manages detail panel overlay in 2D DOM layer alongside the Canvas. Requires THREE.js color/material management per project color. Most complex section — involves WebGL rendering, 3D scene management, and 2D/3D hybrid interaction.
Implement LandingServices for Landing
As a frontend developer, implement the LandingServices section for the Landing page. Renders a grid of 6 ServiceCard sub-components from the SERVICES array (Video Editing, Motion Graphics, Color Grading, Sound Design, VFX Compositing, Full Post-Production) each with an icon from lucide-react (Film, Layers, Palette, Volume2, Sparkles, Clapperboard) and a numbered label (01–06). ServiceCard uses useState for hovered, particles, and linkBounce state, plus useRef for particleKey. handleMouseEnter triggers particle burst via generateParticles() which creates 8 particles using trigonometric angle distribution from PARTICLE_COLORS array. containerVariants uses staggerChildren: 0.15; cardVariants animates opacity/y with cubic-bezier easing. AnimatePresence manages particle rendering per card. linkBounce state drives a bounce animation on the 'Learn More' link arrow.
Implement HowItWorks for Landing
As a frontend developer, implement the HowItWorks section for the Landing page. Uses gsap and ScrollTrigger (registered via gsap.registerPlugin) with useRef arrays: stepsRef, iconWrapsRef, ringsRef, connectorPathsRef, and a wrapperRef. STEPS array has 4 items (Consultation, Storyboard, Production, Delivery) each with a lucide icon (MessageSquare, Layout, Film, Send). GSAP ScrollTrigger animates each step's iconWrap from rotation 0→360 with scrub:1 between 'top 80%' and 'top 30%'; rings counter-rotate for visual interest. onEnter/onLeaveBack callbacks update useState activeSteps array (4 booleans) to drive active CSS class toggling. isMounted state guards GSAP initialization. gsap.context() used for proper cleanup on unmount. Connector paths between steps are animated SVG elements referenced via connectorPathsRef.
Implement ClientShowcase for Landing
As a frontend developer, implement the ClientShowcase section for the Landing page. Renders 4 FlipCard sub-components from the clients array (NovaCorp Industries, Velvet Rose Productions, BrightBox Media, Arcadia Pictures). FlipCard uses useState for flipped, useRef for cardRef, and useInView (once:true, margin:'-60px') for scroll-triggered entrance animation (opacity/y with staggered delay via index*0.12). onMouseEnter/onMouseLeave toggle the flipped state which applies 'cs-flipped' CSS class to trigger CSS 3D transform (rotateY). Card front face shows abbr, name, industry, title, and snippet. Card back face shows stats array (3 items per client with value and label, e.g. '12M+ Views', '340% Engagement lift', '4 weeks Turnaround') plus beforeLabel/afterLabel comparison labels. Uses AnimatePresence for any overlay transitions on the card faces.
Implement Testimonials for Landing
As a frontend developer, implement the Testimonials section for the Landing page. TESTIMONIALS array has 5 items (Sarah Chen, Marcus Rivera, Aisha Patel, James Thornton, Elena Vasquez) each with quote, role, company, initials, and stars:5. AUTO_ROTATE_MS=6000 drives auto-rotation via useEffect with setInterval. useState tracks active index. useCallback manages navigation handlers. AnimatePresence wraps the active testimonial card with enter/exit transitions. StarIcon sub-component renders SVG stars with optional glowing animation class and animationDelay based on delayIndex prop (100ms increments). QuoteIcon renders a custom SVG quote mark. ChevronLeft/ChevronRight are custom SVG arrow components for prev/next navigation. Dot indicators below the carousel reflect active index. useRef for autoplay timer to pause on manual interaction.
Implement LandingCTA for Landing
As a frontend developer, implement the LandingCTA section for the Landing page. Features a reusable MagneticButton sub-component using useRef for btnRef/wrapRef and useState/useRef for ripples/rippleId. handleMouseMove calculates distance from button center and applies dampened translate (strength*0.3, maxPull=100) via direct style manipulation. handleMouseLeave springs transform back with cubic-bezier transition. handleClick spawns ripple effect: calculates click position relative to button, creates ripple object with size=max(width,height)*2, adds to ripples state, auto-removes after 650ms. Two MagneticButton instances rendered: primary CTA (lc-btn--primary) with Mail icon and secondary (lc-btn--secondary) with Phone icon. Background includes two animated SVG wave paths (wavePath and wavePath2 defined as SVG path strings) and a framer-motion pulse overlay with orange-to-amber gradient. Section has lc-root class with absolute positioned decorative elements.
Implement Footer for Landing
As a frontend developer, implement the Footer section for the Landing page. linkColumns array has 4 columns (Services, Portfolio, Company, Resources) each with 5 links pointing to internal routes (/Services, /Portfolio, /About, /Pricing, /Gallery, /Contact, /Dashboard, /Settings, /Login, /Landing). SocialIcon sub-component uses useState for hovered, renders motion.a with onMouseEnter/onMouseLeave. Social icon box animates rotateY 0→180 on hover via spring (stiffness:260, damping:20) with perspective:600. Icon color animates to brand color (Linkedin:#FF7043, Instagram:#FFAB40, Youtube:#FF7043, Twitter:#FFAB40) on hover. AnimatePresence shows ftr-social-label with opacity/x slide-in on hover (delay:0.1). socialLinks array has 4 items using Linkedin, Instagram, Youtube, Twitter from lucide-react. Footer also includes Mail, MapPin, Phone contact info icons. Note: this Footer may already exist from other pages — check for reuse before implementing.
Implement Navbar for Login
As a frontend developer, implement the Navbar section for the Login page. This component may already exist from the Landing page (task 5dca22e6-e416-416e-a6e1-748a9fd45355) — reuse or adapt it. The Navbar uses useState for mobileOpen and particles state, useRef for ctaRef/ctaWrapRef/particleId, and useAnimation from framer-motion for logo draw-on animation via logoControls.start() with staggered pathLength transitions. Implements magnetic CTA effect via handleMagneticMove/handleMagneticLeave tracking mouse distance with maxPull=120 and dampened translation. handleCtaClick spawns 12 particle burst objects with randomized angles. NAV_LINKS array drives navigation with active route highlighting via window.location.pathname. LOGO_PATHS defines 3 SVG paths (outer tusk arc, inner tusk curve, play triangle) with ACCENT_INDEX=2. PARTICLE_COLORS array used for burst particles. AnimatePresence wraps mobile menu. Imports Navbar.css.
Admin gallery management API
Implement FastAPI admin endpoints for gallery/projects management: POST /api/admin/projects (upload new project with metadata and video/thumbnail file references), PUT /api/admin/projects/{id} (update project details), DELETE /api/admin/projects/{id}. Requires admin role JWT middleware. Handles multipart form data or presigned URL generation for file uploads. Used by Dashboard and Gallery admin flows.
Admin JWT auth middleware
Implement FastAPI JWT authentication middleware and role-based access control for admin-protected endpoints. Includes: token verification dependency (get_current_admin), role check (is_admin), 401/403 error responses. Integrates with existing login system. Required by all admin management API endpoints (gallery, testimonials, settings).
AI-powered inquiry routing with LiteLLM
Implement AI inquiry classification and routing using LiteLLM and Langchain as specified in the SRD tech stack. When a contact inquiry is submitted, classify it by client type (Corporate, Filmmaker, Influencer) and service interest, then route to the appropriate response template or internal notification channel. Exposes internal service callable from the contact API endpoint. Uses LiteLLM for LLM routing across providers.
Newsletter subscription API endpoint
Implement FastAPI POST /api/newsletter/subscribe endpoint accepting email address, validating format, deduplicating, and storing in a subscribers table. Returns success/already-subscribed response. Used by Footer newsletter form present on all pages.
Implement LoginHero for Login
As a frontend developer, implement the LoginHero section for the Login page. Renders a Three.js Canvas scene via @react-three/fiber with FloatingParticles component containing 10 particles with varied positions, scales, colors (#534BAE, #FF7043, #FFD600, #1A237E, #FFAB40), and speeds. useFrame animates each mesh with sinusoidal y-position drift and x/z rotation. Geometry alternates between octahedronGeometry, tetrahedronGeometry, and boxGeometry based on index modulo. meshStandardMaterial uses transparent opacity=0.25 with wireframe on even indices. ThreeScene sets camera at [0,0,6] fov=50 with alpha/antialias gl props, ambientLight intensity=0.6, directionalLight in indigo, pointLight in coral. Trust badge row renders Shield, Lock, Zap icons from lucide-react with labels 'SSL Encrypted', 'Secure Login', 'Instant Access'. Framer-motion containerVariants uses staggerChildren=0.12 with itemVariants for fade-up entrance. Imports LoginHero.css.
Implement LoginFormContainer for Login
As a frontend developer, implement the LoginFormContainer section for the Login page. Component uses useState for email, password, showPassword, rememberMe, emailError, and passwordError. Includes custom SVG icon components: EyeIcon (open/closed toggle), MailIcon, LockIcon, AlertIcon, CheckIcon, CheckCircleIcon — all inline SVG with currentColor stroke. validateEmail checks regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/ and validatePassword enforces minimum 6 characters. Password field toggles visibility via showPassword state controlling input type. rememberMe checkbox state tracked. AnimatePresence used for animated error message transitions. Form submission triggers field-level validation before proceeding. Framer-motion animations on form container entrance. Imports LoginFormContainer.css.
Implement Footer for Login
As a frontend developer, implement the Footer section for the Login page. This component may already exist from the Landing page (task d79f6aad-aa7e-488e-83c5-9998feda3cae) — reuse or adapt. Footer contains linkColumns array with 4 columns (Services, Portfolio, Company, Resources) each with 5 links routing to internal pages. socialLinks array contains Linkedin, Instagram, Youtube, Twitter icons from lucide-react with coral/amber color assignments. SocialIcon sub-component uses useState for hovered state, animates rotateY 0→180 via spring (stiffness 260, damping 20) on hover, color transitions via motion.div animate, and AnimatePresence shows/hides ftr-social-label span with x-offset fade. Contact info rendered with Mail, MapPin, Phone lucide icons. Imports Footer.css.
File upload and storage service
Implement file upload service for video thumbnails and project assets. Supports local storage in dev (Docker volume) and configurable cloud storage (S3-compatible) for production. Exposes POST /api/upload endpoint returning file URL. Validates file type (images: jpg/png/webp, video: mp4/webm) and size limits. Used by admin gallery management and Dashboard upload flows.
Site settings API endpoints
Implement FastAPI admin endpoints for site configuration: GET /api/settings (returns key-value site settings: agency name, contact email, phone, address, social links, SEO meta), PUT /api/settings (bulk update). Used by Settings page admin flow and Footer contact info rendering.
Implement LoginDivider for Login
As a frontend developer, implement the LoginDivider section for the Login page. Simple animated divider with three child elements: ld-line--left (scaleX 0→1, transformOrigin right center, delay 0.1), ld-or-badge (scale 0→1 with backOut easing, delay 0.25), and ld-line--right (scaleX 0→1, transformOrigin left center, delay 0.1). All use framer-motion initial/animate with duration 0.5 or 0.35. Badge contains span.ld-or-text with 'or' text. Imports LoginDivider.css.
Implement LoginSignupCTA for Login
As a frontend developer, implement the LoginSignupCTA section for the Login page. Renders social OAuth buttons via socialButtons array containing Google and GitHub entries with custom SVG icon components (GoogleIcon with multi-path colored SVG, GitHubIcon with filled path). containerVariants animates opacity/y with staggerChildren=0.1, itemVariants animate individual buttons. Buttons link to '/Register'. PALETTE_SWATCHES array defines 5 brand colors (Deep Indigo #1A237E, Light Indigo #534BAE, Coral #FF7043, Vibrant Yellow #FFD600, Amber #FFAB40). Section uses whileInView trigger with viewport prop for scroll-based entrance. Imports LoginSignupCTA.css.
No comments yet. Be the first!