[V0_FILE]typescriptreact:file="components/ui/splite.tsx" isMerged="true" isEdit="true" "use client" import { Suspense, lazy } from "react" const Spline = lazy(() => import("@splinetool/react-spline")) interface SplineSceneProps { scene: string className?: string } export function SplineScene({ scene, className }: SplineSceneProps) { return ( } > ) } [V0_FILE]typescriptreact:file="components/ui/spotlight.tsx" isMerged="true" isEdit="true" "use client" import { useRef, useState, useCallback, useEffect } from "react" import { motion, useSpring, useTransform, type SpringOptions } from "framer-motion" import { cn } from "@/lib/utils" type SpotlightProps = { className?: string size?: number springOptions?: SpringOptions } export function Spotlight({ className, size = 200, springOptions = { bounce: 0 } }: SpotlightProps) { const containerRef = useRef(null) const [isHovered, setIsHovered] = useState(false) const [parentElement, setParentElement] = useState(null) const mouseX = useSpring(0, springOptions) const mouseY = useSpring(0, springOptions) const spotlightLeft = useTransform(mouseX, (x) => `${x - size / 2}px`) const spotlightTop = useTransform(mouseY, (y) => `${y - size / 2}px`) useEffect(() => { if (containerRef.current) { const parent = containerRef.current.parentElement if (parent) { parent.style.position = "relative" parent.style.overflow = "hidden" setParentElement(parent) } } }, []) const handleMouseMove = useCallback( (event: MouseEvent) => { if (!parentElement) return const { left, top } = parentElement.getBoundingClientRect() mouseX.set(event.clientX - left) mouseY.set(event.clientY - top) }, [mouseX, mouseY, parentElement], ) useEffect(() => { if (!parentElement) return parentElement.addEventListener("mousemove", handleMouseMove) parentElement.addEventListener("mouseenter", () => setIsHovered(true)) parentElement.addEventListener("mouseleave", () => setIsHovered(false)) return () => { parentElement.removeEventListener("mousemove", handleMouseMove) parentElement.removeEventListener("mouseenter", () => setIsHovered(true)) parentElement.removeEventListener("mouseleave", () => setIsHovered(false)) } }, [parentElement, handleMouseMove]) return ( ) } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" isEdit="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/code-demo.tsx" isMerged="true" isEdit="true" "use client" import { SplineScene } from "@/components/ui/splite" import { Card } from "@/components/ui/card" import { Spotlight } from "@/components/ui/spotlight" export function SplineSceneBasic() { return (
{/* Left content /}

Interactive 3D

Bring your UI to life with beautiful 3D scenes. Create immersive experiences that capture attention and enhance your design.

{/ Right content /}

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } { @apply border-border; } body { @apply bg-background text-foreground; } .font-serif { font-family: "Playfair Display", "EB Garamond", Georgia, serif; } } /* Add this to your globals.css file if you don't already have it / @keyframes spin { to { transform: rotate(360deg); } } .loader { width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: white; animation: spin 1s linear infinite; } .grid-background { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-position: center center; opacity: 0.3; animation: gridMove 4s linear infinite; } @keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { NewYorkerSpline } from "@/components/new-yorker-spline" export default function Home() { return } [V0_FILE]typescriptreact:file="components/new-yorker-spline.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { SplineScene } from "@/components/ui/splite" import { Spotlight } from "@/components/ui/spotlight" import { ChevronDown } from "lucide-react" import { useState } from "react" export function NewYorkerSpline() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const handleMouseMove = (event: React.MouseEvent) => { const rect = event.currentTarget.getBoundingClientRect() setMousePosition({ x: event.clientX - rect.left, y: event.clientY - rect.top, }) } return (

{/ Header /}

Est. 2025

NorthernAI - Robotics

Edmonton, AB

{/ Main content /}
{/ Left content - Editorial /}

The Digital Frontier

Where Edmonton's innovation meets the future of autonomous systems.

In the heart of Alberta's tech hub, NorthernAI Robotics is pushing the boundaries of artificial intelligence and robotics. Our cutting-edge solutions are transforming industries and redefining human-machine collaboration.

From smart manufacturing to advanced healthcare assistants, our AI-powered robots are designed to enhance efficiency, safety, and quality of life. We're not just building machines; we're shaping a future where technology and humanity thrive together.

Explore Our Innovations

{/ Right content - 3D Scene /}
{/ Grid background /}

{/ Footer */}

© 2025 NorthernAI Robotics

Edmonton's AI Frontier

) }

About

About