[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="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, CardTitle, CardDescription, CardContent, CardFooter } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Leaf, Sun, Sprout, Trees, Send, Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" export default function Home() { const [activeSection, setActiveSection] = useState("home") const [menuOpen, setMenuOpen] = useState(false) const [floatingElements, setFloatingElements] = useState< Array<{ id: number; x: number; y: number; size: number; type: string }> >([]) // Create floating nature elements useEffect(() => { const interval = setInterval(() => { if (floatingElements.length < 12) { setFloatingElements((prev) => [ ...prev, { id: Math.random(), x: Math.random() * 100, y: Math.random() * 100, size: Math.random() * 6 + 3, type: Math.random() > 0.5 ? "leaf" : "light", }, ]) } else { setFloatingElements((prev) => prev.slice(1)) } }, 1500) return () => clearInterval(interval) }, [floatingElements.length]) const sections = [ { id: "home", label: "Sanctuary", icon: }, { id: "about", label: "Journey", icon: }, { id: "skills", label: "Cultivation", icon: }, { id: "contact", label: "Connect", icon: }, ] return (
{/* Floating elements /} {floatingElements.map((element) => (
))} {/ Header /}

SOLARIS
{/ Desktop Navigation /}
{sections.map((section) => ( ))}
{/ Mobile Menu Button /}
{/ Mobile Menu /} {menuOpen && (

{sections.map((section) => ( ))}

)} {/ Main Content /}
{/ Home Section /} {activeSection === "home" && (

Solar Artificer

Crafting sustainable digital gardens where technology blooms in harmony with nature. Building bridges between the virtual and natural worlds.

)} {/ About Section /} {activeSection === "about" && (

The Journey

In the garden of technology, I cultivate sustainable digital solutions that bridge the gap between nature and innovation. My path began with the first seeds of HTML and has grown into a flourishing ecosystem of modern web development.

Like a gardener tends to their plants, I nurture each project with care, ensuring it grows in harmony with its environment. My approach combines the organic beauty of nature with the precision of clean technology.

When not tending to digital gardens, I contribute to local eco-tech initiatives and explore ways to make technology more sustainable and accessible to all.

{[1, 2, 3, 4].map((i) => (

))}

)} {/ Skills Section /} {activeSection === "skills" && (

Cultivation

{[ { name: "Organic HTML", desc: "Growing strong foundations for digital ecosystems" }, { name: "Natural CSS", desc: "Shaping interfaces with nature's flowing patterns" }, { name: "Sustainable JavaScript", desc: "Powering interactions with clean energy" }, { name: "React Ecosystem", desc: "Nurturing component-based digital gardens" }, { name: "Next.js Innovation", desc: "Building efficient, sustainable web solutions" }, { name: "Green Architecture", desc: "Designing eco-conscious digital structures" }, ].map((skill, index) => (

{skill.name}

{skill.desc}
))}

)} {/ Contact Section /} {activeSection === "contact" && (

Connect

Let's collaborate on creating sustainable digital solutions that nurture both technology and nature. Reach out through these solar-powered channels.

Digital Garden (Email)

gardener@solaris.earth

Solar Network (Social)

@solaris_garden

)}
{/ Footer /}

© 2025 Solaris Garden

Growth Harmony Nature

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 158 84% 5%; --foreground: 158 84% 98%; --card: 158 84% 5%; --card-foreground: 158 84% 98%; --popover: 158 84% 5%; --popover-foreground: 158 84% 98%; --primary: 158 84% 50%; --primary-foreground: 158 84% 98%; --secondary: 158 50% 30%; --secondary-foreground: 158 84% 98%; --muted: 158 50% 30%; --muted-foreground: 158 84% 70%; --accent: 43 96% 64%; --accent-foreground: 158 84% 5%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 158 84% 98%; --border: 158 50% 30%; --input: 158 50% 30%; --ring: 158 84% 50%; --radius: 1rem; } } @layer base { { @apply border-border; } body { @apply bg-background text-foreground; } } @keyframes float { 0% { transform: translateY(0) rotate(0); opacity: 0; } 50% { opacity: 0.4; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } } .animate-float { animation: float 8s ease-in-out infinite; } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter, Cormorant_Garamond } from "next/font/google" const inter = Inter({ subsets: ["latin"], variable: "--font-sans" }) const cormorant = Cormorant_Garamond({ subsets: ["latin"], variable: "--font-serif", weight: ["400", "500", "600", "700"], }) export const metadata: Metadata = { title: "Solaris Garden | Sustainable Digital Artisan", description: "Where technology blooms in harmony with nature", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }