React tsx to jsx
i just purchased the template and found out there is no jsx for all demo version only tsx. Is there any template/demo version in jsx format?
If no then how do i use it in jsx?
Replies (12)
export default function CarrineJarvisAI() { return ( <div className="min-h-screen bg-black text-cyan-300 p-6 font-sans overflow-hidden relative"> <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,255,255,0.15),transparent_60%)]"></div>
<div className="relative z-10 max-w-7xl mx-auto">
<div className="flex items-center justify-between mb-8 border border-cyan-500/30 rounded-3xl p-5 bg-cyan-500/5 backdrop-blur-xl shadow-2xl">
<div>
<h1 className="text-5xl font-bold tracking-widest text-cyan-400">CARRINE AI</h1>
<p className="text-cyan-200/70 mt-2">Your personal Ironman-inspired AI assistant</p>
</div>
<div className="flex items-center gap-4">
<div className="w-4 h-4 rounded-full bg-green-400 animate-pulse"></div>
<span className="text-sm tracking-[0.3em] uppercase">System Online</span>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 space-y-6">
<div className="border border-cyan-500/30 rounded-3xl p-6 bg-cyan-500/5 backdrop-blur-xl shadow-xl">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-semibold">AI Command Center</h2>
<button className="px-5 py-2 rounded-2xl bg-cyan-500 text-black font-bold hover:scale-105 transition-all duration-300">
Activate
</button>
</div>
<div className="h-72 rounded-3xl border border-cyan-500/20 flex items-center justify-center relative overflow-hidden">
<div className="absolute w-72 h-72 border border-cyan-400 rounded-full animate-ping opacity-20"></div>
<div className="absolute w-56 h-56 border border-cyan-300 rounded-full animate-spin"></div>
<div className="absolute w-40 h-40 border border-cyan-500 rounded-full animate-pulse"></div>
<div className="text-center z-10">
<h3 className="text-3xl font-bold">CARRINE CORE
<p className="mt-3 text-cyan-100/70">Voice • Intelligence • Automation</p>
</div>
</div>
</div>
<div className="grid md:grid-cols-3 gap-6">
{[
{
title: 'Voice Assistant',
desc: 'Talk like Jarvis with real-time AI voice interaction.'
},
{
title: 'Smart Automation',
desc: 'Open apps, control tasks, reminders, and routines.'
},
{
title: 'Hologram UI',
desc: 'Futuristic interface inspired by Tony Stark systems.'
}
].map((item, index) => (
<div
key={index}
className="border border-cyan-500/20 rounded-3xl p-5 bg-cyan-500/5 hover:bg-cyan-500/10 transition-all duration-300"
>
<h3 className="text-xl font-semibold mb-3">{item.title}
<p className="text-cyan-100/70 text-sm">{item.desc}</p>
</div>
))}
</div>
</div>
<div className="space-y-6">
<div className="border border-cyan-500/30 rounded-3xl p-6 bg-cyan-500/5 backdrop-blur-xl shadow-xl">
<h2 className="text-2xl font-semibold mb-5">System Features</h2>
<div className="space-y-4 text-sm text-cyan-100/80">
<div className="flex justify-between border-b border-cyan-500/10 pb-2">
<span>Voice Commands</span>
<span>Enabled</span>
</div>
<div className="flex justify-between border-b border-cyan-500/10 pb-2">
<span>AI Brain</span>
<span>Online</span>
</div>
<div className="flex justify-between border-b border-cyan-500/10 pb-2">
<span>Security Shield</span>
<span>Protected</span>
</div>
<div className="flex justify-between border-b border-cyan-500/10 pb-2">
<span>Automation</span>
<span>Running</span>
</div>
</div>
</div>
<div className="border border-cyan-500/30 rounded-3xl p-6 bg-cyan-500/5 backdrop-blur-xl shadow-xl">
<h2 className="text-2xl font-semibold mb-4">Future Upgrades</h2>
<ul className="space-y-3 text-cyan-100/70 text-sm list-disc pl-5">
</div>
<div className="rounded-3xl p-6 bg-cyan-500 text-black shadow-2xl">
<h2 className="text-2xl font-bold">Aslam Protocol</h2>
<p className="mt-3 text-sm font-medium">
“Good morning, Aslam. Carrine AI systems are fully operational.”
</p>
</div>
</div>
</div>
<div className="mt-8 border border-cyan-500/20 rounded-3xl p-6 bg-cyan-500/5 text-center">
<h2 className="text-3xl font-bold tracking-widest">CARRINE x ASLAM</h2>
<p className="mt-3 text-cyan-100/70 max-w-2xl mx-auto">
A futuristic AI ecosystem inspired by Ironman and Jarvis — built for voice interaction,
smart automation, holographic visuals, and personal AI companionship.
</p>
</div>
</div>
</div>
) }
"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}
</h3>
<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}
</h3>
<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 </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'>
)); SidebarGroupContent.displayName = 'SidebarGroupContent';(({ className, ...props }, ref) => (
const SidebarMenu = React.forwardRef< HTMLUListElement, React.ComponentProps<'ul'>
(({ className, ...props }, ref) => (
const SidebarMenuItem = React.forwardRef< HTMLLIElement, React.ComponentProps<'li'>
)); SidebarMenuItem.displayName = 'SidebarMenuItem';(({ className, ...props }, ref) => (
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'>
)); SidebarMenuBadge.displayName = 'SidebarMenuBadge';(({ className, ...props }, ref) => (
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 } />
const SidebarMenuSub = React.forwardRef< HTMLUListElement, React.ComponentProps<'ul'>
(({ className, ...props }, ref) => (
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.
Yes sorry we only need JS version for react currently.
How do we proceed refund in this case?
And yes, currently we looking at the Vuexy React template and we might go for this.
Hi,
Sure, you can refer to Refund Form. I think you already sent the refund request and we just approved it.
Regards.
