"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
className
)}
{...props}
/>
))
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
{...props}
/>
)
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
}

'use client'

import { useEffect, useRef, useState } from 'react'
import { Code2, Palette, Smartphone, ArrowRight } from 'lucide-react'

interface ServiceCardProps {
icon: React.ReactNode
title: string
description: string
index: number
}

function ServiceCard({ icon, title, description, index }: ServiceCardProps) {
const [isHovered, setIsHovered] = useState(false)
const cardRef = useRef<HTMLDivElement>(null)
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
const [isVisible, setIsVisible] = useState(false)

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

if (cardRef.current) {
observer.observe(cardRef.current)
}

return () => observer.disconnect()
}, [])

// Handle mouse movement for gradient effect
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!cardRef.current) return

const rect = cardRef.current.getBoundingClientRect()
const x = e.clientX - rect.left
const y = e.clientY - rect.top

setMousePosition({ x, y })
}

const handleMouseLeave = () => {
setIsHovered(false)
}

const handleMouseEnter = () => {
setIsHovered(true)
}

return (
<div
ref={cardRef}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
onMouseEnter={handleMouseEnter}
className={`group relative h-full transition-all duration-700 ease-out ${
isVisible ? 'opacity-100' : 'opacity-0'
}`}
style={{
animation: isVisible ? `slideInCard 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) ${index * 0.12}s` : 'none',
transform: isVisible ? 'translateY(0)' : 'translateY(40px)',
}}
>
<div
className={`absolute inset-0 rounded-2xl opacity-0 blur-xl transition-all duration-700 pointer-events-none ${
isHovered ? 'opacity-100' : 'opacity-0'
}`}
style={{
background: `radial-gradient(circle 350px at ${mousePosition.x}px ${mousePosition.y}px, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.1), transparent 70%)`,
}}
/>

<div
className={`
relative h-full p-8 sm:p-10 rounded-2xl
backdrop-blur-md border border-white/[0.08]
bg-gradient-to-br from-white/[0.08] via-white/[0.04] to-white/[0.02]
shadow-[0_8px_32px_0_rgba(31,38,135,0.15)]
hover:from-white/[0.12] hover:via-white/[0.06] hover:to-white/[0.04]
hover:border-white/[0.15]
hover:shadow-[0_12px_48px_0_rgba(59,130,246,0.2)]
transition-all duration-500
overflow-hidden group
`}
>
<div
className={`
absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100
transition-opacity duration-500 pointer-events-none
bg-gradient-to-r from-blue-400/40 via-purple-400/20 via-pink-400/10 to-transparent
`}
style={{
maskImage: 'linear-gradient(to right, black 0%, transparent 100%)',
}}
/>

<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-400/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

{/* Content */}
<div className="relative z-10 flex flex-col h-full">
<div
className={`
w-16 h-16 rounded-xl mb-6
bg-gradient-to-br from-blue-500/20 to-purple-500/10
border border-white/[0.12]
flex items-center justify-center
transition-all duration-500
group-hover:from-blue-500/40 group-hover:to-purple-500/20
group-hover:border-white/25
group-hover:scale-110
group-hover:shadow-lg group-hover:shadow-blue-500/20
`}
>
<div className="text-blue-400 group-hover:text-blue-300 transition-colors duration-300 scale-100 group-hover:scale-110">
{icon}
</div>
</div>

<h3 className="text-xl sm:text-2xl font-bold text-white mb-4 tracking-tight text-pretty group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-300 group-hover:to-purple-300 group-hover:bg-clip-text transition-all duration-300">
{title}


<p className="text-sm text-white/60 leading-relaxed flex-grow group-hover:text-white/80 transition-colors duration-300">
{description}
</p>

<div
className={`
mt-6 flex items-center gap-3 text-blue-400 group-hover:text-blue-300
opacity-0 group-hover:opacity-100
transform group-hover:translate-x-1
transition-all duration-500 cursor-pointer
`}
>
<span className="text-sm font-semibold">Explore Service</span>
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-500" />
</div>
</div>
</div>
</div>
)
}

export function Services() {
const [isHeaderVisible, setIsHeaderVisible] = useState(false)
const headerRef = useRef<HTMLDivElement>(null)

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsHeaderVisible(true)
observer.unobserve(entry.target)
}
},
{ threshold: 0.3 }
)

if (headerRef.current) {
observer.observe(headerRef.current)
}

return () => observer.disconnect()
}, [])

const services = [
{
title: 'Web Development',
description:
'Pixel House is framing custom web solutions for businesses and individuals.',
icon: <Code2 className="w-8 h-8" />,
},
{
title: 'Graphic Designing',
description:
'Pixel House is proficient in graphic design, establish industry standards globally.',
icon: <Palette className="w-8 h-8" />,
},
{
title: 'Mobile App Development',
description:
'Pixel House facilitates mobile app development, optimizing search operations effectively.',
icon: <Smartphone className="w-8 h-8" />,
},
]

return (
<section className="relative min-h-screen py-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-black" />

{/* Animated gradient orbs with improved positioning */}
<div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/15 rounded-full blur-3xl opacity-60 animate-blob animation-delay-0" />
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/15 rounded-full blur-3xl opacity-60 animate-blob animation-delay-2000" />
<div className="absolute top-1/2 right-0 w-80 h-80 bg-pink-500/10 rounded-full blur-3xl opacity-40 animate-blob animation-delay-4000" />
</div>

<div className="relative z-10 max-w-7xl mx-auto">
<style>{`
@keyframes slideInCard {
from {
opacity: 0;
transform: translateY(40px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes blob {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}

.animate-blob {
animation: blob 7s infinite;
}

.animation-delay-0 {
animation-delay: 0s !important;
}

.animation-delay-2000 {
animation-delay: 2s !important;
}

.animation-delay-4000 {
animation-delay: 4s !important;
}
`}</style>

<div
ref={headerRef}
className={`mb-16 text-center transition-all duration-700 ${
isHeaderVisible ? 'opacity-100' : 'opacity-0'
}`}
style={{
animation: isHeaderVisible ? 'fadeInDown 0.8s ease-out' : 'none',
}}
>
<span className="inline-block px-4 py-2 mb-6 text-sm font-semibold text-blue-400 bg-blue-400/10 border border-blue-400/30 rounded-full backdrop-blur-sm hover:bg-blue-400/20 hover:border-blue-400/50 transition-all duration-300">
Our Services
</span>

<h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight text-balance">
Services We Provide
</h2>

<p className="text-base sm:text-lg text-white/70 max-w-3xl mx-auto leading-relaxed text-pretty">
Comprehensive digital solutions designed to elevate your business with cutting-edge technology and exceptional design
</p>
</div>

{/* Services Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-6">
{services.map((service, index) => (
<ServiceCard
key={service.title}
icon={service.icon}
title={service.title}
description={service.description}
index={index}
/>
))}
</div>

<div
className="mt-20 text-center"
style={{
animation: 'fadeInDown 0.8s ease-out 0.4s both',
}}
>
<button
className={`
group px-8 sm:px-10 py-4 rounded-xl font-semibold
bg-gradient-to-r from-blue-600 to-purple-600
hover:from-blue-700 hover:to-purple-700
text-white
shadow-lg shadow-blue-600/40
hover:shadow-2xl hover:shadow-blue-500/60
transition-all duration-300
border border-white/10
hover:border-white/20
backdrop-blur-xl
relative overflow-hidden
hover:scale-105 active:scale-95
`}
>
<span className="relative z-10 flex items-center justify-center gap-2">
Start Your Project
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
</span>
</button>
</div>
</div>
</section>
)
}

'use client'

import { useEffect, useRef, useState } from 'react'
import { Code2, Palette, Smartphone, ArrowRight } from 'lucide-react'

interface ServiceCardProps {
icon: React.ReactNode
title: string
description: string
index: number
}

function ServiceCard({ icon, title, description, index }: ServiceCardProps) {
const [isHovered, setIsHovered] = useState(false)
const cardRef = useRef<HTMLDivElement>(null)
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
const [isVisible, setIsVisible] = useState(false)

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

if (cardRef.current) {
observer.observe(cardRef.current)
}

return () => observer.disconnect()
}, [])

// Handle mouse movement for gradient effect
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!cardRef.current) return

const rect = cardRef.current.getBoundingClientRect()
const x = e.clientX - rect.left
const y = e.clientY - rect.top

setMousePosition({ x, y })
}

const handleMouseLeave = () => {
setIsHovered(false)
}

const handleMouseEnter = () => {
setIsHovered(true)
}

return (
<div
ref={cardRef}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
onMouseEnter={handleMouseEnter}
className={`group relative h-full transition-all duration-700 ease-out ${
isVisible ? 'opacity-100' : 'opacity-0'
}`}
style={{
animation: isVisible ? `slideInCard 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) ${index * 0.12}s` : 'none',
transform: isVisible ? 'translateY(0)' : 'translateY(40px)',
}}
>
<div
className={`absolute inset-0 rounded-2xl opacity-0 blur-xl transition-all duration-700 pointer-events-none ${
isHovered ? 'opacity-100' : 'opacity-0'
}`}
style={{
background: `radial-gradient(circle 350px at ${mousePosition.x}px ${mousePosition.y}px, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.1), transparent 70%)`,
}}
/>

<div
className={`
relative h-full p-8 sm:p-10 rounded-2xl
backdrop-blur-md border border-white/[0.08]
bg-gradient-to-br from-white/[0.08] via-white/[0.04] to-white/[0.02]
shadow-[0_8px_32px_0_rgba(31,38,135,0.15)]
hover:from-white/[0.12] hover:via-white/[0.06] hover:to-white/[0.04]
hover:border-white/[0.15]
hover:shadow-[0_12px_48px_0_rgba(59,130,246,0.2)]
transition-all duration-500
overflow-hidden group
`}
>
<div
className={`
absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100
transition-opacity duration-500 pointer-events-none
bg-gradient-to-r from-blue-400/40 via-purple-400/20 via-pink-400/10 to-transparent
`}
style={{
maskImage: 'linear-gradient(to right, black 0%, transparent 100%)',
}}
/>

<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-400/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

{/* Content */}
<div className="relative z-10 flex flex-col h-full">
<div
className={`
w-16 h-16 rounded-xl mb-6
bg-gradient-to-br from-blue-500/20 to-purple-500/10
border border-white/[0.12]
flex items-center justify-center
transition-all duration-500
group-hover:from-blue-500/40 group-hover:to-purple-500/20
group-hover:border-white/25
group-hover:scale-110
group-hover:shadow-lg group-hover:shadow-blue-500/20
`}
>
<div className="text-blue-400 group-hover:text-blue-300 transition-colors duration-300 scale-100 group-hover:scale-110">
{icon}
</div>
</div>

<h3 className="text-xl sm:text-2xl font-bold text-white mb-4 tracking-tight text-pretty group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-300 group-hover:to-purple-300 group-hover:bg-clip-text transition-all duration-300">
{title}


<p className="text-sm text-white/60 leading-relaxed flex-grow group-hover:text-white/80 transition-colors duration-300">
{description}
</p>

<div
className={`
mt-6 flex items-center gap-3 text-blue-400 group-hover:text-blue-300
opacity-0 group-hover:opacity-100
transform group-hover:translate-x-1
transition-all duration-500 cursor-pointer
`}
>
<span className="text-sm font-semibold">Explore Service</span>
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-500" />
</div>
</div>
</div>
</div>
)
}

export function Services() {
const [isHeaderVisible, setIsHeaderVisible] = useState(false)
const headerRef = useRef<HTMLDivElement>(null)

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsHeaderVisible(true)
observer.unobserve(entry.target)
}
},
{ threshold: 0.3 }
)

if (headerRef.current) {
observer.observe(headerRef.current)
}

return () => observer.disconnect()
}, [])

const services = [
{
title: 'Web Development',
description:
'Pixel House is framing custom web solutions for businesses and individuals.',
icon: <Code2 className="w-8 h-8" />,
},
{
title: 'Graphic Designing',
description:
'Pixel House is proficient in graphic design, establish industry standards globally.',
icon: <Palette className="w-8 h-8" />,
},
{
title: 'Mobile App Development',
description:
'Pixel House facilitates mobile app development, optimizing search operations effectively.',
icon: <Smartphone className="w-8 h-8" />,
},
]

return (
<section className="relative min-h-screen py-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-black" />

{/* Animated gradient orbs with improved positioning */}
<div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/15 rounded-full blur-3xl opacity-60 animate-blob animation-delay-0" />
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/15 rounded-full blur-3xl opacity-60 animate-blob animation-delay-2000" />
<div className="absolute top-1/2 right-0 w-80 h-80 bg-pink-500/10 rounded-full blur-3xl opacity-40 animate-blob animation-delay-4000" />
</div>

<div className="relative z-10 max-w-7xl mx-auto">
<style>{`
@keyframes slideInCard {
from {
opacity: 0;
transform: translateY(40px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes blob {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}

.animate-blob {
animation: blob 7s infinite;
}

.animation-delay-0 {
animation-delay: 0s !important;
}

.animation-delay-2000 {
animation-delay: 2s !important;
}

.animation-delay-4000 {
animation-delay: 4s !important;
}
`}</style>

<div
ref={headerRef}
className={`mb-16 text-center transition-all duration-700 ${
isHeaderVisible ? 'opacity-100' : 'opacity-0'
}`}
style={{
animation: isHeaderVisible ? 'fadeInDown 0.8s ease-out' : 'none',
}}
>
<span className="inline-block px-4 py-2 mb-6 text-sm font-semibold text-blue-400 bg-blue-400/10 border border-blue-400/30 rounded-full backdrop-blur-sm hover:bg-blue-400/20 hover:border-blue-400/50 transition-all duration-300">
Our Services
</span>

<h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight text-balance">
Services We Provide
</h2>

<p className="text-base sm:text-lg text-white/70 max-w-3xl mx-auto leading-relaxed text-pretty">
Comprehensive digital solutions designed to elevate your business with cutting-edge technology and exceptional design
</p>
</div>

{/* Services Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-6">
{services.map((service, index) => (
<ServiceCard
key={service.title}
icon={service.icon}
title={service.title}
description={service.description}
index={index}
/>
))}
</div>

<div
className="mt-20 text-center"
style={{
animation: 'fadeInDown 0.8s ease-out 0.4s both',
}}
>
<button
className={`
group px-8 sm:px-10 py-4 rounded-xl font-semibold
bg-gradient-to-r from-blue-600 to-purple-600
hover:from-blue-700 hover:to-purple-700
text-white
shadow-lg shadow-blue-600/40
hover:shadow-2xl hover:shadow-blue-500/60
transition-all duration-300
border border-white/10
hover:border-white/20
backdrop-blur-xl
relative overflow-hidden
hover:scale-105 active:scale-95
`}
>
<span className="relative z-10 flex items-center justify-center gap-2">
Start Your Project
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
</span>
</button>
</div>
</div>
</section>
)
}

'use client';

import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { VariantProps, cva } from 'class-variance-authority';
import { PanelLeft } from 'lucide-react';

import { useIsMobile } from '@/hooks/use-mobile';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Separator } from '@/components/ui/separator';
import { Sheet, SheetContent } from '@/components/ui/sheet';
import { Skeleton } from '@/components/ui/skeleton';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from '@/components/ui/tooltip';

const SIDEBAR_COOKIE_NAME = 'sidebar:state';
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = '16rem';
const SIDEBAR_WIDTH_MOBILE = '18rem';
const SIDEBAR_WIDTH_ICON = '3rem';
const SIDEBAR_KEYBOARD_SHORTCUT = 'b';

type SidebarContext = {
state: 'expanded' | 'collapsed';
open: boolean;
setOpen: (open: boolean) => void;
openMobile: boolean;
setOpenMobile: (open: boolean) => void;
isMobile: boolean;
toggleSidebar: () => void;
};

const SidebarContext = React.createContext<SidebarContext | null>(null);

function useSidebar() {
const context = React.useContext(SidebarContext);
if (!context) {
throw new Error('useSidebar must be used within a Sidebar.');
}

return context;
}

const SidebarProvider = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'> & {
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
}
>(
(
{
defaultOpen = true,
open: openProp,
onOpenChange: setOpenProp,
className,
style,
children,
...props
},
ref
) => {
const isMobile = useIsMobile();
const [openMobile, setOpenMobile] = React.useState(false);

// This is the internal state of the sidebar.
// We use openProp and setOpenProp for control from outside the component.
const [_open, _setOpen] = React.useState(defaultOpen);
const open = openProp ?? _open;
const setOpen = React.useCallback(
(value: boolean | ((value: boolean) => boolean)) => {
const openState = typeof value === 'function' ? value(open) : value;
if (setOpenProp) {
setOpenProp(openState);
} else {
_setOpen(openState);
}

// This sets the cookie to keep the sidebar state.
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
},
[setOpenProp, open]
);

// Helper to toggle the sidebar.
const toggleSidebar = React.useCallback(() => {
return isMobile
? setOpenMobile((open) => !open)
: setOpen((open) => !open);
}, [isMobile, setOpen, setOpenMobile]);

// Adds a keyboard shortcut to toggle the sidebar.
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault();
toggleSidebar();
}
};

window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [toggleSidebar]);

// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = open ? 'expanded' : 'collapsed';

const contextValue = React.useMemo<SidebarContext>(
() => ({
state,
open,
setOpen,
isMobile,
openMobile,
setOpenMobile,
toggleSidebar
}),
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
);

return (
<SidebarContext.Provider value={contextValue}>
<TooltipProvider delayDuration={0}>
<div
style={
{
'--sidebar-width': SIDEBAR_WIDTH,
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
...style
} as React.CSSProperties
}
className={cn(
'group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar',
className
)}
ref={ref}
{...props}
>
{children}
</div>
</TooltipProvider>
</SidebarContext.Provider>
);
}
);
SidebarProvider.displayName = 'SidebarProvider';

const Sidebar = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'> & {
side?: 'left' | 'right';
variant?: 'sidebar' | 'floating' | 'inset';
collapsible?: 'offcanvas' | 'icon' | 'none';
}
>(
(
{
side = 'left',
variant = 'sidebar',
collapsible = 'offcanvas',
className,
children,
...props
},
ref
) => {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();

if (collapsible === 'none') {
return (
<div
className={cn(
'flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
className
)}
ref={ref}
{...props}
>
{children}
</div>
);
}

if (isMobile) {
return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent
data-sidebar="sidebar"
data-mobile="true"
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
style={
{
'--sidebar-width': SIDEBAR_WIDTH_MOBILE
} as React.CSSProperties
}
side={side}
>
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>
);
}

return (
<div
ref={ref}
className="group peer hidden md:block"
data-state={state}
data-collapsible={state === 'collapsed' ? collapsible : ''}
data-variant={variant}
data-side={side}
>
{/* This is what handles the sidebar gap on desktop */}
<div
className={cn(
'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
'group-data-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset'
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
)}
/>
<div
className={cn(
'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
// Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
className
)}
{...props}
>
<div
data-sidebar="sidebar"
className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
>
{children}
</div>
</div>
</div>
);
}
);
Sidebar.displayName = 'Sidebar';

const SidebarTrigger = React.forwardRef<
React.ElementRef<typeof Button>,
React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
const { toggleSidebar } = useSidebar();

return (
<Button
ref={ref}
data-sidebar="trigger"
variant="ghost"
size="icon"
className={cn('h-7 w-7', className)}
onClick={(event) => {
onClick?.(event);
toggleSidebar();
}}
{...props}
>
<PanelLeft />
<span className="sr-only">Toggle Sidebar</span>
</Button>
);
});
SidebarTrigger.displayName = 'SidebarTrigger';

const SidebarRail = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<'button'>
>(({ className, ...props }, ref) => {
const { toggleSidebar } = useSidebar();

return (
<button
ref={ref}
data-sidebar="rail"
aria-label="Toggle Sidebar"
tabIndex={-1}
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
'[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
className
)}
{...props}
/>
);
});
SidebarRail.displayName = 'SidebarRail';

const SidebarInset = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'main'>
>(({ className, ...props }, ref) => {
return (
<main
ref={ref}
className={cn(
'relative flex min-h-svh flex-1 flex-col bg-background',
'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
className
)}
{...props}
/>
);
});
SidebarInset.displayName = 'SidebarInset';

const SidebarInput = React.forwardRef<
React.ElementRef<typeof Input>,
React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
return (
<Input
ref={ref}
data-sidebar="input"
className={cn(
'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
className
)}
{...props}
/>
);
});
SidebarInput.displayName = 'SidebarInput';

const SidebarHeader = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="header"
className={cn('flex flex-col gap-2 p-2', className)}
{...props}
/>
);
});
SidebarHeader.displayName = 'SidebarHeader';

const SidebarFooter = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="footer"
className={cn('flex flex-col gap-2 p-2', className)}
{...props}
/>
);
});
SidebarFooter.displayName = 'SidebarFooter';

const SidebarSeparator = React.forwardRef<
React.ElementRef<typeof Separator>,
React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
return (
<Separator
ref={ref}
data-sidebar="separator"
className={cn('mx-2 w-auto bg-sidebar-border', className)}
{...props}
/>
);
});
SidebarSeparator.displayName = 'SidebarSeparator';

const SidebarContent = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="content"
className={cn(
'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
className
)}
{...props}
/>
);
});
SidebarContent.displayName = 'SidebarContent';

const SidebarGroup = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="group"
className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
{...props}
/>
);
});
SidebarGroup.displayName = 'SidebarGroup';

const SidebarGroupLabel = React.forwardRef<
HTMLDivElement,
React.ComponentPropsWithoutRef<'div'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : 'div';

return (
<Comp
ref={ref}
data-sidebar="group-label"
className={cn(
'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
className
)}
{...props}
/>
);
});
SidebarGroupLabel.displayName = 'SidebarGroupLabel';

const SidebarGroupAction = React.forwardRef<
HTMLButtonElement,
React.ComponentPropsWithoutRef<'button'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : 'button';

return (
<Comp
ref={ref}
data-sidebar="group-action"
className={cn(
'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
// Increases the hit area of the button on mobile.
'after:absolute after:-inset-2 after:md:hidden',
'group-data-[collapsible=icon]:hidden',
className
)}
{...props}
/>
);
});
SidebarGroupAction.displayName = 'SidebarGroupAction';

const SidebarGroupContent = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
<div
ref={ref}
data-sidebar="group-content"
className={cn('w-full text-sm', className)}
{...props}
/>
));
SidebarGroupContent.displayName = 'SidebarGroupContent';

const SidebarMenu = React.forwardRef<
HTMLUListElement,
React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
<ul
ref={ref}
data-sidebar="menu"
className={cn('flex w-full min-w-0 flex-col gap-1', className)}
{...props}
/>
));
SidebarMenu.displayName = 'SidebarMenu';

const SidebarMenuItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
<li
ref={ref}
data-sidebar="menu-item"
className={cn('group/menu-item relative', className)}
{...props}
/>
));
SidebarMenuItem.displayName = 'SidebarMenuItem';

const sidebarMenuButtonVariants = cva(
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
{
variants: {
variant: {
default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
outline:
'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
},
size: {
default: 'h-8 text-sm',
sm: 'h-7 text-xs',
lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0'
}
},
defaultVariants: {
variant: 'default',
size: 'default'
}
}
);

const SidebarMenuButton = React.forwardRef<
HTMLButtonElement,
React.ComponentPropsWithoutRef<'button'> & {
asChild?: boolean;
isActive?: boolean;
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
} & VariantProps<typeof sidebarMenuButtonVariants>
>(
(
{
asChild = false,
isActive = false,
variant = 'default',
size = 'default',
tooltip,
className,
...props
},
ref
) => {
const Comp = asChild ? Slot : 'button';
const { isMobile, state } = useSidebar();

const button = (
<Comp
ref={ref}
data-sidebar="menu-button"
data-size={size}
data-active={isActive}
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
{...props}
/>
);

if (!tooltip) {
return button;
}

if (typeof tooltip === 'string') {
tooltip = {
children: tooltip
};
}

return (
<Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent
side="right"
align="center"
hidden={state !== 'collapsed' || isMobile}
{...tooltip}
/>
</Tooltip>
);
}
);
SidebarMenuButton.displayName = 'SidebarMenuButton';

const SidebarMenuAction = React.forwardRef<
HTMLButtonElement,
React.ComponentPropsWithoutRef<'button'> & {
asChild?: boolean;
showOnHover?: boolean;
}
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
const Comp = asChild ? Slot : 'button';

return (
<Comp
ref={ref}
data-sidebar="menu-action"
className={cn(
'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',

'after:absolute after:-inset-2 after:md:hidden',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
showOnHover &&
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
className
)}
{...props}
/>
);
});
SidebarMenuAction.displayName = 'SidebarMenuAction';

const SidebarMenuBadge = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
<div
ref={ref}
data-sidebar="menu-badge"
className={cn(
'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
className
)}
{...props}
/>
));
SidebarMenuBadge.displayName = 'SidebarMenuBadge';

const SidebarMenuSkeleton = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'> & {
showIcon?: boolean;
}
>(({ className, showIcon = false, ...props }, ref) => {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`;
}, []);

return (
<div
ref={ref}
data-sidebar="menu-skeleton"
className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
{...props}
>
{showIcon && (
<Skeleton
className="size-4 rounded-md"
data-sidebar="menu-skeleton-icon"
/>
)}
<Skeleton
className="h-4 max-w-[--skeleton-width] flex-1"
data-sidebar="menu-skeleton-text"
style={
{
'--skeleton-width': width
} as React.CSSProperties
}
/>
</div>
);
});
SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';

const SidebarMenuSub = React.forwardRef<
HTMLUListElement,
React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
<ul
ref={ref}
data-sidebar="menu-sub"
className={cn(
'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
'group-data-[collapsible=icon]:hidden',
className
)}
{...props}
/>
));
SidebarMenuSub.displayName = 'SidebarMenuSub';

const SidebarMenuSubItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<'li'>
>(({ ...props }, ref) => <li ref={ref} {...props} />);
SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';

const SidebarMenuSubButton = React.forwardRef<
HTMLAnchorElement,
React.ComponentPropsWithoutRef<'a'> & {
asChild?: boolean;
size?: 'sm' | 'md';
isActive?: boolean;
}
>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
const Comp = asChild ? Slot : 'a';

return (
<Comp
ref={ref}
data-sidebar="menu-sub-button"
data-size={size}
data-active={isActive}
className={cn(
'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
size === 'sm' && 'text-xs',
size === 'md' && 'text-sm',
'group-data-[collapsible=icon]:hidden',
className
)}
{...props}
/>
);
});
SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';

export {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupAction,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInput,
SidebarInset,
SidebarMenu,
SidebarMenuAction,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSkeleton,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarProvider,
SidebarRail,
SidebarSeparator,
SidebarTrigger,
useSidebar
};

import { useEffect, useRef } from "react";
import useMousePosition from "./hooks/useMousePosition";
import { drawCircle } from "./utilities";
const MouseBall = () => {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const [coords, handleCoords] = useMousePosition();

useEffect(() => {
if (canvasRef?.current) {
const ctx = canvasRef.current.getContext("2d");

requestAnimationFrame(function ball() {
//@ts-ignore
drawCircle(ctx, {
radius: 50,
lineWidth: 3,
strokeStyle: "#4F7CAC",
colorFill: "#4F7CAC",
startY: coords.y,
startX: coords.x
});
});
}
}, [coords.x, coords.y]);
return (
<>
<h1>Tracking ball</h1>
<canvas

ref={canvasRef}
width="400"
height="350"
onMouseMove={(e) => {
handleCoords((e as unknown) as MouseEvent);
}}
style={{ border: "2px solid black" }}
></canvas>
</>
);
};

export default MouseBall;

import type { Metadata } from 'next';

import './globals.css'
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';

export const metadata: Metadata = {
title: 'Travel',
description: 'Travel UI/UX App for Camping',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Navbar />
<main className="relative overflow-hidden">
{children}
</main>
<Footer />
</body>
</html>
)
}

"use client";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";

let interval: any;

type Card = {
id: number;
name: string;
designation: string;
content: React.ReactNode;
};

export const CardStack = ({
items,
offset,
scaleFactor,
}: {
items: Card[];
offset?: number;
scaleFactor?: number;
}) => {
const CARD_OFFSET = offset || 10;
const SCALE_FACTOR = scaleFactor || 0.06;
const [cards, setCards] = useState<Card[]>(items);

useEffect(() => {
startFlipping();

return () => clearInterval(interval);
}, []);
const startFlipping = () => {
interval = setInterval(() => {
setCards((prevCards: Card[]) => {
const newArray = [...prevCards]; // create a copy of the array
newArray.unshift(newArray.pop()!); // move the last element to the front
return newArray;
});
}, 5000);
};

return (
<div className="relative h-60 w-60 md:h-60 md:w-96">
{cards.map((card, index) => {
return (
<motion.div
key={card.id}
className="absolute dark:bg-black bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 dark:border-white/[0.1] shadow-black/[0.1] dark:shadow-white/[0.05] flex flex-col justify-between"
style={{
transformOrigin: "top center",
}}
animate={{
top: index * -CARD_OFFSET,
scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
zIndex: cards.length - index, // decrease z-index for the cards that are behind
}}
>
<div className="font-normal text-neutral-700 dark:text-neutral-200">
{card.content}
</div>
<div>
<p className="text-neutral-500 font-medium dark:text-white">
{card.name}
</p>
<p className="text-neutral-400 font-normal dark:text-neutral-200">
{card.designation}
</p>
</div>
</motion.div>
);
})}
</div>
);
};

import React from "react";
import { useSortBy, useTable } from "react-table";
import { data } from "./Data";
import { useRowSpan } from "./useRowSpan";
import "./styles.css";

const borderStyle = {
border: "1px solid gray",
padding: "8px 10px"
};

export default function App() {
const tableData = React.useMemo(() => data, []);
const columns = React.useMemo(() => {
return [
{
Header: "Property Name",
accessor: "propertyName",
enableRowSpan: true
},
{
Header: "Cost Category",
accessor: "costCategory",
enableRowSpan: true
},
{
Header: "WO Number",
accessor: "woNumber"
},
{
Header: "Supplier",
accessor: "supplier"
},
{
Header: "Invoice Date",
accessor: "invoiceDate"
},
{
Header: "Invoice Total",
accessor: "invoiceTotal"
}
];
}, []);

const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
rowSpanHeaders
} = useTable(
{ columns, data: tableData },
(hooks) => hooks.useInstance.push(useRowSpan),
useSortBy
);

return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()} style={borderStyle}>
{column.render("Header")}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);

for (let j = 0; j < row.allCells.length; j++) {
let cell = row.allCells[j];
let rowSpanHeader = rowSpanHeaders.find(
(x) => x.id === cell.column.id
);

if (rowSpanHeader) {
if (
rowSpanHeader.topCellValue === null ||
rowSpanHeader.topCellValue !== cell.value
) {
cell.isRowSpanned = false;
rowSpanHeader.topCellValue = cell.value;
rowSpanHeader.topCellIndex = i;
cell.rowSpan = 1;
} else {
rows[rowSpanHeader.topCellIndex].allCells[j].rowSpan++;
cell.isRowSpanned = true;
}
}
}
return null;
})}
{rows.map((row) => {
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
if (cell.isRowSpanned) return null;
else
return (
<td
rowSpan={cell.rowSpan}
style={borderStyle}
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
);
}

Hi,

Thank you for your interest in our product. Currently, our React solutions are only based on Typescript and the JS version is not available. You can consider using TS as it provides lots of advantages and is now suggested by the React authors officially. You can check this guide to proceed. However, you can request a refund if TS is not the way for you.

If you purchasing another products, please let us know.

Regards.