[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts .env [V0_FILE]markdown:file="README.md" # Shaders Landing Page *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/sunhithreddy647s-projects/v0-shaders-landing-page) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/LIDOnn27P4N) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/sunhithreddy647s-projects/v0-shaders-landing-page](https://vercel.com/sunhithreddy647s-projects/v0-shaders-landing-page)** ## Build your app Continue building your app on: **[https://v0.app/chat/LIDOnn27P4N](https://v0.app/chat/LIDOnn27P4N)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/about-us/page.tsx" "use client" import { CustomCursor } from "@/components/custom-cursor" import { GrainOverlay } from "@/components/grain-overlay" import Link from "next/link" export default function AboutUsPage() { return (

About Us

) } [V0_FILE]typescriptreact:file="app/blog/page.tsx" "use client" import { CustomCursor } from "@/components/custom-cursor" import { GrainOverlay } from "@/components/grain-overlay" import Link from "next/link" export default function BlogPage() { return (

Blog

) } [V0_FILE]typescriptreact:file="app/clients-brands/page.tsx" "use client" import { CustomCursor } from "@/components/custom-cursor" import { GrainOverlay } from "@/components/grain-overlay" import Link from "next/link" export default function ClientsBrandsPage() { return (

Clients Brands

) } [V0_FILE]typescriptreact:file="app/contact-us/page.tsx" "use client" import { CustomCursor } from "@/components/custom-cursor" import { GrainOverlay } from "@/components/grain-overlay" import Link from "next/link" export default function ContactUsPage() { return (

Contact Us

) } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.12 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.15 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.15 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.22 250); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.68 0.18 45); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.65 0.22 250); --chart-1: oklch(0.65 0.22 250); --chart-2: oklch(0.68 0.18 45); --chart-3: oklch(0.6 0.15 280); --chart-4: oklch(0.7 0.2 30); --chart-5: oklch(0.55 0.18 200); --radius: 0.75rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.12 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.15 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.15 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.22 250); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.68 0.18 45); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.65 0.22 250); --chart-1: oklch(0.65 0.22 250); --chart-2: oklch(0.68 0.18 45); --chart-3: oklch(0.6 0.15 280); --chart-4: oklch(0.7 0.2 30); --chart-5: oklch(0.55 0.18 200); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; cursor: none; } body { @apply bg-background text-foreground; } /* Enhanced scroll container with snap properties and smooth inertia */ [data-scroll-container] { scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; scrollbar-width: none; -ms-overflow-style: none; } /* Added scroll-snap-align to sections for perfect centering */ section { scroll-snap-align: center; scroll-snap-stop: always; transform: translateZ(0); will-change: transform; contain: layout style paint; } button { transform: translateZ(0); backface-visibility: hidden; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Shaders Landing Page", description: "Created with v0", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/our-pricing/page.tsx" "use client" import { CustomCursor } from "@/components/custom-cursor" import { GrainOverlay } from "@/components/grain-overlay" import Link from "next/link" export default function OurPricingPage() { return (

Our Pricing

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { Shader, ChromaFlow, Swirl } from "shaders/react" import { CustomCursor } from "@/components/custom-cursor" import { GrainOverlay } from "@/components/grain-overlay" import { useRef, useEffect, useState } from "react" import Link from "next/link" export default function Home() { const scrollContainerRef = useRef(null) const [currentSection, setCurrentSection] = useState(0) const [isLoaded, setIsLoaded] = useState(false) const touchStartY = useRef(0) const touchStartX = useRef(0) const shaderContainerRef = useRef(null) const scrollThrottleRef = useRef() const velocityRef = useRef(0) const lastScrollTimeRef = useRef(0) const lastScrollLeftRef = useRef(0) useEffect(() => { const checkShaderReady = () => { if (shaderContainerRef.current) { const canvas = shaderContainerRef.current.querySelector("canvas") if (canvas && canvas.width > 0 && canvas.height > 0) { setIsLoaded(true) return true } } return false } if (checkShaderReady()) return const intervalId = setInterval(() => { if (checkShaderReady()) { clearInterval(intervalId) } }, 100) const fallbackTimer = setTimeout(() => { setIsLoaded(true) }, 1500) return () => { clearInterval(intervalId) clearTimeout(fallbackTimer) } }, []) const scrollToSection = (index: number) => { if (scrollContainerRef.current) { const sectionWidth = scrollContainerRef.current.offsetWidth scrollContainerRef.current.scrollTo({ left: sectionWidth * index, behavior: "smooth", }) setCurrentSection(index) } } useEffect(() => { const handleTouchStart = (e: TouchEvent) => { touchStartY.current = e.touches[0].clientY touchStartX.current = e.touches[0].clientX } const handleTouchMove = (e: TouchEvent) => { if (Math.abs(e.touches[0].clientY - touchStartY.current) > 10) { e.preventDefault() } } const handleTouchEnd = (e: TouchEvent) => { const touchEndY = e.changedTouches[0].clientY const touchEndX = e.changedTouches[0].clientX const deltaY = touchStartY.current - touchEndY const deltaX = touchStartX.current - touchEndX if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50) { if (deltaY > 0 && currentSection < 7) { scrollToSection(currentSection + 1) } else if (deltaY < 0 && currentSection > 0) { scrollToSection(currentSection - 1) } } } const container = scrollContainerRef.current if (container) { container.addEventListener("touchstart", handleTouchStart, { passive: true }) container.addEventListener("touchmove", handleTouchMove, { passive: false }) container.addEventListener("touchend", handleTouchEnd, { passive: true }) } return () => { if (container) { container.removeEventListener("touchstart", handleTouchStart) container.removeEventListener("touchmove", handleTouchMove) container.removeEventListener("touchend", handleTouchEnd) } } }, [currentSection]) useEffect(() => { const handleWheel = (e: WheelEvent) => { if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) { e.preventDefault() if (!scrollContainerRef.current) return // Calculate velocity for elastic effect const now = Date.now() const timeDelta = Math.max(now - lastScrollTimeRef.current, 16) const scrollDelta = e.deltaY velocityRef.current = scrollDelta / timeDelta // Apply elastic momentum const elasticScroll = scrollDelta * 1.3 // 1.3x multiplier for elastic overshoot scrollContainerRef.current.scrollBy({ left: elasticScroll, behavior: "auto", }) lastScrollTimeRef.current = now lastScrollLeftRef.current = scrollContainerRef.current.scrollLeft const sectionWidth = scrollContainerRef.current.offsetWidth const scrollLeft = scrollContainerRef.current.scrollLeft const newSection = Math.round(scrollLeft / sectionWidth) if (newSection !== currentSection && newSection >= 0 && newSection <= 7) { setCurrentSection(newSection) } } } const container = scrollContainerRef.current if (container) { container.addEventListener("wheel", handleWheel, { passive: false }) } return () => { if (container) { container.removeEventListener("wheel", handleWheel) } } }, [currentSection]) useEffect(() => { const handleScroll = () => { if (scrollThrottleRef.current) return scrollThrottleRef.current = requestAnimationFrame(() => { if (!scrollContainerRef.current) { scrollThrottleRef.current = undefined return } const sectionWidth = scrollContainerRef.current.offsetWidth const scrollLeft = scrollContainerRef.current.scrollLeft const newSection = Math.round(scrollLeft / sectionWidth) if (newSection !== currentSection && newSection >= 0 && newSection <= 7) { setCurrentSection(newSection) } scrollThrottleRef.current = undefined }) } const container = scrollContainerRef.current if (container) { container.addEventListener("scroll", handleScroll, { passive: true }) } return () => { if (container) { container.removeEventListener("scroll", handleScroll) } if (scrollThrottleRef.current) { cancelAnimationFrame(scrollThrottleRef.current) } } }, [currentSection]) const sections = ["Home", "About Us", "Services", "Our Pricing", "Clients Brands", "Work With", "Blog", "Contact Us"] return (

{/* Hero Section */}

Projxty
Web Development

{/* Certification Badges - Right Side with Sequential Blink */}

MSME Registered

Recognized by Startup India

Approved by AICTE

{/* About Us */}

About Us

We are a creative web design and development company dedicated to building beautiful, functional digital experiences. With years of expertise, we transform ideas into stunning websites and applications.

{/* Services */}

Services

Web Design

Crafting beautiful, user-centric designs

Web Development

Building robust and scalable web applications

UI/UX Design

Creating intuitive user experiences

Mobile Apps

Developing responsive mobile solutions

{/* Our Pricing */}

Our Pricing

Starter

$2,999

Perfect for small projects

Professional

$7,999

Enterprise

Custom

For large-scale projects

{/* Clients Brands */}

Clients Brands

{[ "TechCorp", "Design Co", "Start Up", "Digital Pro", "Cloud Nine", "Code Labs", "Web Studio", "Brand X", ].map((brand) => (

{brand}

))}

{/* Work With */}

Work With Us

Ready to bring your vision to life? Let's collaborate on your next project and create something amazing together.

{/* Blog */}

Blog

{[ { title: "Web Design Trends 2025", date: "Jan 15, 2025" }, { title: "React Performance Tips", date: "Jan 10, 2025" }, { title: "UX Best Practices", date: "Jan 5, 2025" }, { title: "Next.js Guide", date: "Dec 28, 2024" }, ].map((post) => (

{post.title}

{post.date}

))}

{/* Contact Us */}

Contact Us

<button className="w-full rounded-lg bg-foreground px-4 py-2 font-sans font-semibold text-background hover:bg-foreground/90">
              Send Message
            </button>
          </form>
        </section>
      </div>

import { CustomCursor } from "@/components/custom-cursor"
import { GrainOverlay } from "@/components/grain-overlay"
import Link from "next/link"

export default function ServicesPage() {
  return (
    <main className="relative min-h-screen w-full bg-background">
      <CustomCursor />
      <GrainOverlay />

<nav className="fixed left-0 right-0 top-0 z-50 flex items-center justify-between border-b border-white/10 bg-background/50 px-6 py-6 backdrop-blur-md md:px-12">
        <Link href="/" className="transition-transform hover:scale-105">
          <span className="font-sans text-xl font-semibold tracking-tight text-foreground">Projxty</span>
        </Link>

<div className="hidden items-center gap-8 md:flex">
          {[
            "Home",
            "About Us",
            "Services",
            "Our Pricing",
            "Clients Brands",
            "Work With",
            "Blog",
            "Sitemaps",
            "Contact Us",
          ].map((item) => (
            <Link
              key={item}
              href={item === "Home" ? "/" : `/${item.toLowerCase().replace(/\s+/g, "-")}`}
              className="group relative font-sans text-sm font-medium transition-colors text-foreground/80 hover:text-foreground"
            >
              {item}
              <span className="absolute -bottom-1 left-0 h-px bg-foreground transition-all duration-300 w-0 group-hover:w-full" />
            </Link>
          ))}
        </div>
      </nav>

<div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-6 md:px-12">
        <h1 className="text-7xl md:text-9xl font-bold text-center text-foreground">Services</h1>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/sitemaps/page.tsx"
"use client"

import { CustomCursor } from "@/components/custom-cursor"
import { GrainOverlay } from "@/components/grain-overlay"
import Link from "next/link"

export default function SitemapsPage() {
  return (
    <main className="relative min-h-screen w-full bg-background">
      <CustomCursor />
      <GrainOverlay />

<div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-6 md:px-12">
        <h1 className="text-7xl md:text-9xl font-bold text-center text-foreground">Sitemaps</h1>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/work-with/page.tsx"
"use client"

import { CustomCursor } from "@/components/custom-cursor"
import { GrainOverlay } from "@/components/grain-overlay"
import Link from "next/link"

const IT_DOMAINS = [
  "Web Development",
  "App Development",
  "Artificial Intelligence",
  "Machine Learning",
  "Data Science",
  "Cybersecurity",
  "Cloud Computing",
  "Software Development",
  "DevOps",
  "Blockchain",
  "Internet of Things (IoT)",
  "UI/UX Design",
  "Game Development",
  "Database Management",
  "Networking",
]

const NON_IT_DOMAINS = [
  "Marketing",
  "Digital Marketing",
  "Finance",
  "Accounting",
  "Human Resources",
  "Operations",
  "Business Development",
  "Sales",
  "Entrepreneurship",
  "Content Writing",
  "Graphic Design",
]

export default function WorkWithPage() {
  return (
    <main className="relative w-full bg-background">
      <CustomCursor />
      <GrainOverlay />

<div className="relative z-10 pt-20">
        <div className="flex flex-col items-center justify-center min-h-screen px-6 md:px-12 py-12">
          <h1 className="text-6xl md:text-8xl font-bold text-center text-foreground mb-12">Work With Us</h1>
          <p className="text-lg md:text-xl text-foreground/70 text-center max-w-2xl mb-16">
            Join our internship program and grow your skills in diverse domains
          </p>
        </div>

<section className="px-6 md:px-12 py-16 md:py-24">
          <div className="max-w-7xl mx-auto">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-12">IT Domains</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-24">
              {IT_DOMAINS.map((domain, index) => (
                <div
                  key={domain}
                  className="group p-6 rounded-lg border border-foreground/10 hover:border-foreground/30 transition-all duration-300 hover:bg-foreground/5 cursor-pointer"
                  style={{
                    animation: `slideInUp 0.6s ease-out ${index * 50}ms both`,
                  }}
                >
                  <p className="text-lg font-medium text-foreground group-hover:translate-x-1 transition-transform duration-300">
                    {domain}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

<section className="px-6 md:px-12 py-16 md:py-24 bg-foreground/2">
          <div className="max-w-7xl mx-auto">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-12">Non-IT Domains</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {NON_IT_DOMAINS.map((domain, index) => (
                <div
                  key={domain}
                  className="group p-6 rounded-lg border border-foreground/10 hover:border-foreground/30 transition-all duration-300 hover:bg-foreground/5 cursor-pointer"
                  style={{
                    animation: `slideInUp 0.6s ease-out ${index * 50}ms both`,
                  }}
                >
                  <p className="text-lg font-medium text-foreground group-hover:translate-x-1 transition-transform duration-300">
                    {domain}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>

import { useEffect, useRef } from "react"

export function CustomCursor() {
  const outerRef = useRef<HTMLDivElement>(null)
  const innerRef = useRef<HTMLDivElement>(null)
  const positionRef = useRef({ x: 0, y: 0 })
  const targetPositionRef = useRef({ x: 0, y: 0 })
  const isPointerRef = useRef(false)

useEffect(() => {
    let animationFrameId: number

const lerp = (start: number, end: number, factor: number) => {
      return start + (end - start) * factor
    }

const updateCursor = () => {
      positionRef.current.x = lerp(positionRef.current.x, targetPositionRef.current.x, 0.15)
      positionRef.current.y = lerp(positionRef.current.y, targetPositionRef.current.y, 0.15)

if (outerRef.current && innerRef.current) {
        const scale = isPointerRef.current ? 1.5 : 1
        const innerScale = isPointerRef.current ? 0.5 : 1

outerRef.current.style.transform = `translate3d(${positionRef.current.x}px, ${positionRef.current.y}px, 0) translate(-50%, -50%) scale(${scale})`
        innerRef.current.style.transform = `translate3d(${positionRef.current.x}px, ${positionRef.current.y}px, 0) translate(-50%, -50%) scale(${innerScale})`
      }

animationFrameId = requestAnimationFrame(updateCursor)
    }

const handleMouseMove = (e: MouseEvent) => {
      targetPositionRef.current = { x: e.clientX, y: e.clientY }

const target = e.target as HTMLElement
      isPointerRef.current =
        window.getComputedStyle(target).cursor === "pointer" || target.tagName === "BUTTON" || target.tagName === "A"
    }

window.addEventListener("mousemove", handleMouseMove, { passive: true })
    animationFrameId = requestAnimationFrame(updateCursor)

return () => {
      window.removeEventListener("mousemove", handleMouseMove)
      cancelAnimationFrame(animationFrameId)
    }
  }, [])

return (
    <>
      <div
        ref={outerRef}
        className="pointer-events-none fixed left-0 top-0 z-50 mix-blend-difference will-change-transform"
        style={{ contain: "layout style paint" }}
      >
        <div className="h-4 w-4 rounded-full border-2 border-white" />
      </div>
      <div
        ref={innerRef}
        className="pointer-events-none fixed left-0 top-0 z-50 mix-blend-difference will-change-transform"
        style={{ contain: "layout style paint" }}
      >
        <div className="h-2 w-2 rounded-full bg-white" />
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/grain-overlay.tsx"
export function GrainOverlay() {
  return (
    <div
      className="pointer-events-none fixed inset-0 z-50 opacity-[0.08]"
      style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
        mixBlendMode: "overlay",
      }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/magnetic-button.tsx"
"use client"

import type React from "react"
import { useRef } from "react"

interface MagneticButtonProps {
  children: React.ReactNode
  className?: string
  variant?: "primary" | "secondary" | "ghost"
  size?: "default" | "lg"
  onClick?: () => void
}

export function MagneticButton({
  children,
  className = "",
  variant = "primary",
  size = "default",
  onClick,
}: MagneticButtonProps) {
  const ref = useRef<HTMLButtonElement>(null)
  const positionRef = useRef({ x: 0, y: 0 })
  const rafRef = useRef<number>()

const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (!ref.current) return

const rect = ref.current.getBoundingClientRect()
    const x = e.clientX - rect.left - rect.width / 2
    const y = e.clientY - rect.top - rect.height / 2

positionRef.current = { x: x * 0.15, y: y * 0.15 }

if (rafRef.current) cancelAnimationFrame(rafRef.current)
    rafRef.current = requestAnimationFrame(() => {
      if (ref.current) {
        ref.current.style.transform = `translate3d(${positionRef.current.x}px, ${positionRef.current.y}px, 0)`
      }
    })
  }

const handleMouseLeave = () => {
    positionRef.current = { x: 0, y: 0 }
    if (rafRef.current) cancelAnimationFrame(rafRef.current)
    rafRef.current = requestAnimationFrame(() => {
      if (ref.current) {
        ref.current.style.transform = "translate3d(0px, 0px, 0)"
      }
    })
  }

const variants = {
    primary:
      "bg-foreground/95 text-background hover:bg-foreground backdrop-blur-md hover:scale-[1.02] active:scale-[0.98]",
    secondary:
      "bg-foreground/5 text-foreground hover:bg-foreground/10 backdrop-blur-xl border border-foreground/10 hover:border-foreground/20",
    ghost: "bg-transparent text-foreground hover:bg-foreground/5 backdrop-blur-sm",
  }

const sizes = {
    default: "px-6 py-2.5 text-sm",
    lg: "px-8 py-3.5 text-base",
  }

return (
    <button
      ref={ref}
      onClick={onClick}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className={`
        relative overflow-hidden rounded-full font-medium
        transition-all duration-300 ease-out will-change-transform
        ${variants[variant]}
        ${sizes[size]}
        ${className}
      `}
      style={{
        transform: "translate3d(0px, 0px, 0)",
        contain: "layout style paint",
      }}
    >
      <span className="relative z-10">{children}</span>
    </button>
  )
}
[V0_FILE]typescriptreact:file="components/sections/about-section.tsx"
"use client"
import { useReveal } from "@/hooks/use-reveal"

export function AboutSection({ scrollToSection }: { scrollToSection?: (index: number) => void }) {
  const { ref, isVisible } = useReveal(0.3)

return (
    <section
      ref={ref}
      className="flex h-screen w-screen shrink-0 snap-start items-center px-4 pt-20 md:px-12 md:pt-0 lg:px-16"
    >
      <div className="mx-auto w-full max-w-7xl">
        <div className="flex h-full flex-col items-center justify-center">
          <h2 className="text-center font-sans text-5xl font-light text-foreground md:text-6xl lg:text-7xl">About</h2>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/sections/contact-section.tsx"
"use client"

import { useReveal } from "@/hooks/use-reveal"

export function ContactSection() {
  const { ref, isVisible } = useReveal(0.3)

return (
    <section
      ref={ref}
      className="flex h-screen w-screen shrink-0 snap-start items-center px-4 pt-20 md:px-12 md:pt-0 lg:px-16"
    >
      <div className="mx-auto w-full max-w-7xl">
        <div className="flex h-full flex-col items-center justify-center">
          <h2 className="text-center font-sans text-5xl font-light text-foreground md:text-6xl lg:text-7xl">Contact</h2>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/sections/services-section.tsx"
"use client"

import { useReveal } from "@/hooks/use-reveal"

export function ServicesSection() {
  const { ref, isVisible } = useReveal(0.3)

return (
    <section
      ref={ref}
      className="flex h-screen w-screen shrink-0 snap-start items-center px-6 pt-20 md:px-12 md:pt-0 lg:px-16"
    >
      <div className="mx-auto w-full max-w-7xl">
        <div className="flex h-full flex-col items-center justify-center">
          <h2 className="text-center font-sans text-5xl font-light text-foreground md:text-6xl lg:text-7xl">
            Services
          </h2>
        </div>
      </div>
    </section>
  )
}

function ServiceCard({
  service,
  index,
  isVisible,
}: {
  service: { title: string; description: string; direction: string }
  index: number
  isVisible: boolean
}) {
  const getRevealClass = () => {
    if (!isVisible) {
      switch (service.direction) {
        case "left":
          return "-translate-x-16 opacity-0"
        case "right":
          return "translate-x-16 opacity-0"
        case "top":
          return "-translate-y-16 opacity-0"
        case "bottom":
          return "translate-y-16 opacity-0"
        default:
          return "translate-y-12 opacity-0"
      }
    }
    return "translate-x-0 translate-y-0 opacity-100"
  }

return (
    <div
      className={`group transition-all duration-700 ${getRevealClass()}`}
      style={{
        transitionDelay: `${index * 150}ms`,
      }}
    >
      <div className="mb-3 flex items-center gap-3">
        <div className="h-px w-8 bg-foreground/30 transition-all duration-300 group-hover:w-12 group-hover:bg-foreground/50" />
        <span className="font-mono text-xs text-foreground/60">0{index + 1}</span>
      </div>
      <h3 className="mb-2 font-sans text-2xl font-light text-foreground md:text-3xl">{service.title}</h3>
      <p className="max-w-sm text-sm leading-relaxed text-foreground/80 md:text-base">{service.description}</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sections/work-section.tsx"
"use client"

import { useReveal } from "@/hooks/use-reveal"

export function WorkSection() {
  const { ref, isVisible } = useReveal(0.3)

return (
    <section
      ref={ref}
      className="flex h-screen w-screen shrink-0 snap-start items-center px-6 pt-20 md:px-12 md:pt-0 lg:px-16"
    >
      <div className="mx-auto w-full max-w-7xl">
        <div className="flex h-full flex-col items-center justify-center">
          <h2 className="text-center font-sans text-5xl font-light text-foreground md:text-6xl lg:text-7xl">Work</h2>
        </div>
      </div>
    </section>
  )
}

return (
    <div
      className={`group flex items-center justify-between border-b border-foreground/10 py-6 transition-all duration-700 hover:border-foreground/20 md:py-8 ${getRevealClass()}`}
      style={{
        transitionDelay: `${index * 150}ms`,
        marginLeft: index % 2 === 0 ? "0" : "auto",
        maxWidth: index % 2 === 0 ? "85%" : "90%",
      }}
    >
      <div className="flex items-baseline gap-4 md:gap-8">
        <span className="font-mono text-sm text-foreground/30 transition-colors group-hover:text-foreground/50 md:text-base">
          {project.number}
        </span>
        <div>
          <h3 className="mb-1 font-sans text-2xl font-light text-foreground transition-transform duration-300 group-hover:translate-x-2 md:text-3xl lg:text-4xl">
            {project.title}
          </h3>
          <p className="font-mono text-xs text-foreground/50 md:text-sm">{project.category}</p>
        </div>
      </div>
      <span className="font-mono text-xs text-foreground/30 md:text-sm">{project.year}</span>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescript:file="hooks/use-reveal.ts"
"use client"

import { useEffect, useRef, useState } from "react"

export function useReveal(threshold = 0.3) {
  const ref = useRef<HTMLElement>(null)
  const [isVisible, setIsVisible] = useState(false)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
        }
      },
      {
        threshold,
        root: null,
      },
    )

const currentRef = ref.current
    if (currentRef) {
      observer.observe(currentRef)
    }

return () => {
      if (currentRef) {
        observer.unobserve(currentRef)
      }
    }
  }, [threshold])

return { ref, isVisible }
}
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "latest",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.6",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "shaders": "latest",
    "sonner": "^1.7.4",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]css:file="styles/globals.css"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_8KoSkwmpGi7kXneb0ZX13yH8pwoM/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg"
[V0_FILE]png:file="public/images/design-mode/cropped_circle_image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_8KoSkwmpGi7kXneb0ZX13yH8pwoM/Wy6QXoaP73Y5875FFhqB9M/public/images/design-mode/cropped_circle_image.png"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_8KoSkwmpGi7kXneb0ZX13yH8pwoM/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_8KoSkwmpGi7kXneb0ZX13yH8pwoM/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_8KoSkwmpGi7kXneb0ZX13yH8pwoM/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_8KoSkwmpGi7kXneb0ZX13yH8pwoM/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_8KoSkwmpGi7kXneb0ZX13yH8pwoM/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"</article></body></html>

About Us

Blog

Clients Brands

Contact Us

Our Pricing

Projxty Web Development

About Us

Services

Web Design

Web Development

UI/UX Design

Mobile Apps

Our Pricing

Starter

Professional

Enterprise

Clients Brands

Work With Us

Blog

{post.title}

Contact Us

Projxty
Web Development