107:"ExplicitChatIdProvider" 108:I[903690,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$80","$7c","$81","$82","$7e","$83","$84","$85","$86","$87","$88","$7d","$89","$8a"],"$107"] 109:I[838238,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$80","$7c","$81","$82","$7e","$83","$84","$85","$86","$87","$88","$7d","$89","$8a"],"SWRDataProvider"] 10b:[] 10c:[["b_wofCvYtiG9C",null],["b_1O2XfiagXDD",null],["b_CZ1K7vWqe1G",null]] 10d:[["b_wofCvYtiG9C",{"templateVersionId":null,"templateCanonId":null}],["b_1O2XfiagXDD",{"templateVersionId":null,"templateCanonId":null}],["b_CZ1K7vWqe1G",{"templateVersionId":null,"templateCanonId":null}]] 10e:[["OtxPl8dcfgo","$D2025-04-22T14:38:16.757Z"],["b_EDck5kDbDVQ","$D2025-04-22T14:47:49.194Z"],["b_Py0vCFjHVrR","$D2025-04-22T14:47:53.082Z"],["b_n8Gj28xTb5i","$D2025-04-22T14:48:00.752Z"],["b_xWZTCgX8UCd","$D2025-04-22T14:49:50.070Z"],["b_HVuwbafbD02","$D2025-04-22T14:56:25.058Z"],["b_Gmm01ahh8SU","$D2025-04-22T15:02:01.484Z"],["b_QM2gZC3Gc7P","$D2025-04-22T15:02:42.585Z"],["b_iDsIYDhIdBR","$D2025-04-22T15:03:26.960Z"],["b_6wLIfn7aUtJ","$D2025-04-22T15:09:35.504Z"],["b_6LWxRaefsSg","$D2025-04-22T15:10:37.842Z"],["b_wofCvYtiG9C","$D2025-05-08T11:37:12.617Z"],["b_1O2XfiagXDD","$D2025-05-08T11:38:57.495Z"],["b_CZ1K7vWqe1G","$D2025-05-08T11:40:45.526Z"]] 10f:[["b_wofCvYtiG9C",false],["b_1O2XfiagXDD",false],["b_CZ1K7vWqe1G",false]] 110:[["b_wofCvYtiG9C","$undefined"],["b_1O2XfiagXDD","$undefined"],["b_CZ1K7vWqe1G","$undefined"]] 111:[["b_wofCvYtiG9C",null],["b_1O2XfiagXDD",null],["b_CZ1K7vWqe1G",null]] 112:[["b_wofCvYtiG9C",true],["b_1O2XfiagXDD",true],["b_CZ1K7vWqe1G",true]] 113:[["b_wofCvYtiG9C",true],["b_1O2XfiagXDD",true],["b_CZ1K7vWqe1G",true]] 114:[] 115:Tb410c,[V0_FILE]plaintext:file="public/videos/solar-colonial-oasis.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250420_1940_Solar-Powered%20Colonial%20Oasis_simple_compose_01jsanqnekfa9bns0hc1vqqs6e-mc94vgDQoKR4UhlZqKtZel1liyxvWR.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/sustainable-colonial.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250420_1050_Sustainable%20Colonial%20Oasis_simple_compose_01js9qddycfm2byg3ezd6qbts0-uHyNW1Yu8hIx4rcRzMuqf7EfJkTCxT.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/sustainable-oasis.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250420_1050_Sustainable%20Colonial%20Oasis_simple_compose_01js9qdxnte99vexetb2fr2tdy-D5mRtzjHatPXyXFx3E7De4qGHvydHq.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/energia-solar-botafogo.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250420_1048_Energia%20Solar%20em%20Botafogo_simple_compose_01js9qaxn6eg2tz1qmbysqtn62-hIPnf0rqdIiEc3y9MJcVfGdjXnGt93.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/energia-solar-botafogo-2.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250420_1048_Energia%20Solar%20em%20Botafogo_simple_compose_01js9qaxn6eg2tz1qmbysqtn62%20%281%29-peHCRO6noaaORqi2azmgk22UM9uM6Q.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/solar-home-serenity.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250420_1050_Solar%20Home%20Serenity_simple_compose_01js9qdyd6f4p9vds9f8htxyj5-lGpAUpqxL5QV9r5MGQaf8AqZYK90Ws.mp4" isMerged="true" [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export function HeroSection() { const [isMounted, setIsMounted] = useState(false) useEffect(() => { setIsMounted(true) }, []) if (!isMounted) { return (

Loading hero content...

) } return (

Power Your Home with Solar Energy

Discover sustainable energy solutions that save money and protect our planet. Join thousands of satisfied customers who have made the switch to solar.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Twitter, Instagram, Linkedin, Mail, Phone, MapPin } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle({ className }: { className?: string }) { const { setTheme, theme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Star } from "lucide-react" interface Testimonial { id: number name: string location: string comment: string rating: number image: string } const testimonials: Testimonial[] = [ { id: 1, name: "Maria Silva", location: "Rio de Janeiro", comment: "Installing solar panels from Oceano was the best decision we made for our home. The energy savings have been incredible, and the installation team was professional and efficient.", rating: 5, image: "/placeholder.svg?height=100&width=100", }, { id: 2, name: "João Santos", location: "São Paulo", comment: "We've reduced our electricity bill by 85% since installing Oceano's solar system. The customer service has been excellent throughout the entire process.", rating: 5, image: "/placeholder.svg?height=100&width=100", }, { id: 3, name: "Ana Costa", location: "Belo Horizonte", comment: "The quality of Oceano's solar products is outstanding. Our system has been running flawlessly for over a year, and the monitoring app makes it easy to track our energy production.", rating: 4, image: "/placeholder.svg?height=100&width=100", }, ] export function Testimonials() { return (

What Our Customers Say

{testimonials.map((testimonial) => (

{Array.from({ length: 5 }).map((_, i) => ( ))}

"{testimonial.comment}"

{testimonial.name}

{testimonial.location}

))}

) } [V0_FILE]typescriptreact:file="components/special-offers.tsx" isMerged="true" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Clock, Tag, Percent } from "lucide-react" interface Offer { id: number title: string description: string discount: string endDate: string icon: React.ReactNode } const offers: Offer[] = [ { id: 1, title: "Summer Sale", description: "Get 15% off on all solar panel kits", discount: "15% OFF", endDate: "Limited time offer", icon: , }, { id: 2, title: "Bundle & Save", description: "Save 20% when you purchase a complete solar system", discount: "20% OFF", endDate: "When you buy a complete system", icon: , }, { id: 3, title: "Free Installation", description: "Free professional installation on orders over $2,000", discount: "FREE", endDate: "On orders over $2,000", icon: , }, ] export function SpecialOffers() { return (

Special Offers

{offers.map((offer) => (

{offer.icon}

{offer.title}

{offer.description}

{offer.discount}

{offer.endDate}

))}

) } [V0_FILE]typescriptreact:file="components/newsletter.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Send } from "lucide-react" import { Card } from "@/components/ui/card" export function Newsletter() { const [email, setEmail] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle newsletter subscription console.log("Subscribing email:", email) setEmail("") // Show success message or toast } return (

Stay Updated

Subscribe to our newsletter to receive the latest updates, special offers, and solar energy tips.

) } [V0_FILE]typescriptreact:file="components/mission-section.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" import { Card } from "@/components/ui/card" export function MissionSection() { return (

Our Mission

At Oceano Solar Shopping, we're committed to accelerating the world's transition to sustainable energy. We believe that clean, renewable energy should be accessible to everyone.

Our mission is to provide high-quality solar products and solutions that help reduce carbon footprints, lower energy costs, and create a more sustainable future for generations to come.

) } [V0_FILE]typescriptreact:file="components/gradient-border-showcase.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface GradientBorderProps { className?: string title: string children?: React.ReactNode } function GradientBorderCard({ className, title, children }: GradientBorderProps) { return (

{title}

{children}

) } export function GradientBorderShowcase() { const [activeTab, setActiveTab] = useState("thickness") return (

Gradient Border Variations

Thickness Direction Color Special

Thickness Variations Usage

Add these classes to create gradient borders with different thicknesses:

gradient-border gradient-border-thin - 1px border
gradient-border gradient-border-medium - 2px border
gradient-border gradient-border-thick - 3px border
gradient-border gradient-border-extra-thick - 4px border

Direction Variations Usage

Add these classes to create gradient borders with different directions:

gradient-border gradient-border-to-r - Right direction
gradient-border gradient-border-to-l - Left direction
gradient-border gradient-border-to-t - Top direction
gradient-border gradient-border-to-b - Bottom direction
gradient-border gradient-border-to-tr - Top-right direction
gradient-border gradient-border-to-tl - Top-left direction
gradient-border gradient-border-to-br - Bottom-right direction
gradient-border gradient-border-to-bl - Bottom-left direction

Color Variations Usage

Add these classes to create gradient borders with different colors:

gradient-border gradient-border-primary - Primary gradient
gradient-border gradient-border-secondary - Secondary gradient
gradient-border gradient-border-accent - Accent gradient
gradient-border gradient-border-success - Success gradient

Special Variations Usage

Add these classes to create special gradient border effects:

gradient-border gradient-border-radial - Radial gradient
gradient-border gradient-border-conic - Conic gradient
gradient-border-t - Top border only
gradient-border-r - Right border only
gradient-border-b - Bottom border only
gradient-border-l - Left border only
gradient-border-dashed - Dashed border effect

Practical Examples

Product Card

A product card with a horizontal gradient border.

Premium Offer

A premium offer highlighted with a conic gradient border.

Limited Time Offer

A limited time offer with a dashed gradient border.

) } [V0_FILE]typescriptreact:file="app/gradient-borders/page.tsx" isMerged="true" import { GradientBorderShowcase } from "@/components/gradient-border-showcase" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function GradientBordersPage() { return (

) } [V0_FILE]typescriptreact:file="components/ui/gradient-container.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface GradientContainerProps extends React.HTMLAttributes { variant?: "primary" | "secondary" | "accent" | "success" direction?: "to-r" | "to-l" | "to-t" | "to-b" | "to-tr" | "to-tl" | "to-br" | "to-bl" | "radial" | "conic" thickness?: "thin" | "medium" | "thick" | "extra-thick" borderStyle?: "all" | "top" | "right" | "bottom" | "left" | "dashed" glass?: boolean } const GradientContainer = React.forwardRef( ( { className, variant = "primary", direction = "to-br", thickness = "thin", borderStyle = "all", glass = false, children, ...props }, ref, ) => { const getBorderClass = () => { if (borderStyle === "all") { return cn( "gradient-border", variant !== "primary" && `gradient-border-${variant}`, direction !== "to-br" && `gradient-border-${direction}`, thickness !== "thin" && `gradient-border-${thickness}`, ) } if (borderStyle === "dashed") { return "gradient-border-dashed" } return `gradient-border-${borderStyle}` } return (

{children}

) }, ) GradientContainer.displayName = "GradientContainer" export { GradientContainer } [V0_FILE]typescriptreact:file="components/gradient-container-demo.tsx" isMerged="true" "use client" import { useState } from "react" import { GradientContainer } from "@/components/ui/gradient-container" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" export function GradientContainerDemo() { const [variant, setVariant] = useState<"primary" | "secondary" | "accent" | "success">("primary") const [direction, setDirection] = useState("to-br") const [thickness, setThickness] = useState<"thin" | "medium" | "thick" | "extra-thick">("thin") const [borderStyle, setBorderStyle] = useState<"all" | "top" | "right" | "bottom" | "left" | "dashed">("all") const [glass, setGlass] = useState(false) return (

Gradient Container Component

Customize Gradient Border

Variant

Direction

Thickness

Border Style

Glass Effect

Gradient Border Preview

This is how your gradient border looks

Usage Example

              {`import { GradientContainer } from "@/components/ui/gradient-container"

// Basic usage

  Your content here


// Custom configuration

  Your content here
`}

) } [V0_FILE]typescriptreact:file="app/gradient-container/page.tsx" isMerged="true" import { GradientContainerDemo } from "@/components/gradient-container-demo" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function GradientContainerPage() { return (

) } [V0_FILE]typescriptreact:file="components/animated-gradient-showcase.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface AnimatedBorderCardProps { className?: string title: string description: string animation: string thickness?: string children?: React.ReactNode } function AnimatedBorderCard({ className, title, description, animation, thickness = "thin", children, }: AnimatedBorderCardProps) { return (

{title}

{description}

{children}

) } export function AnimatedGradientShowcase() { const [activeTab, setActiveTab] = useState("animations") return (

Animated Gradient Borders

Hover over or focus on the cards below to see the gradient border animations in action. These subtle animations add an interactive element to your UI components.

Animation Types Thickness Variations Practical Examples

Animation Types Usage

Add these classes to create animated gradient borders:

animated-gradient-border animated-gradient-rotate{" "} - Rotating gradient
animated-gradient-border animated-gradient-pulse{" "} - Pulsing opacity
animated-gradient-border animated-gradient-flow{" "} - Flowing gradient
animated-gradient-border animated-gradient-shimmer{" "} - Shimmering effect
animated-gradient-border animated-gradient-spin{" "} - Spinning gradient
animated-gradient-border animated-gradient-glow{" "} - Glowing effect

Thickness Variations Usage

Combine animation types with thickness variations:

animated-gradient-border animated-gradient-flow animated-gradient-thin{" "} - Thin flowing border
animated-gradient-border animated-gradient-rotate animated-gradient-medium{" "} - Medium rotating border
animated-gradient-border animated-gradient-pulse animated-gradient-thick{" "} - Thick pulsing border
animated-gradient-border animated-gradient-shimmer animated-gradient-extra-thick{" "} - Extra thick shimmering border

Product Card

Premium Solar Panel Kit

$1,299.99

Featured Deal

Limited time offer on solar installation

Save 20%

Newsletter

Subscribe to receive the latest updates and offers

Call to Action

Join thousands of satisfied customers who have made the switch to solar energy.

Contact Us

Have questions? Our team is here to help you find the perfect solar solution.

Practical Implementation

Here are some practical ways to use animated gradient borders:

Call-to-action buttons - Use animated borders to draw attention to important buttons
Featured products - Highlight special offers or featured items with animated borders
Form inputs - Add subtle animations to form fields on focus
Cards - Make interactive cards more engaging with border animations on hover
Navigation - Indicate active or hovered navigation items with animated borders

) } [V0_FILE]typescriptreact:file="components/ui/animated-gradient-container.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface AnimatedGradientContainerProps extends React.HTMLAttributes { animation: "rotate" | "pulse" | "flow" | "shimmer" | "spin" | "glow" thickness?: "thin" | "medium" | "thick" | "extra-thick" glass?: boolean groupHover?: boolean } const AnimatedGradientContainer = React.forwardRef( ({ className, animation, thickness = "thin", glass = false, groupHover = false, children, ...props }, ref) => { return (

{children}

) }, ) AnimatedGradientContainer.displayName = "AnimatedGradientContainer" export { AnimatedGradientContainer } [V0_FILE]typescriptreact:file="app/animated-borders/page.tsx" isMerged="true" import { AnimatedGradientShowcase } from "@/components/animated-gradient-showcase" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function AnimatedBordersPage() { return (

) } [V0_FILE]typescriptreact:file="components/animated-buttons-demo.tsx" isMerged="true" "use client" import { useState } from "react" import { OceanButton } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" export function AnimatedButtonsDemo() { const [animation, setAnimation] = useState<"rotate" | "pulse" | "flow" | "shimmer" | "spin" | "glow">("flow") return (

Animated Gradient Buttons

Interactive buttons with animated gradient borders that respond to hover and focus states.

Customize Animation

Animation Type

Animated Button

Hover over the button to see the animation

Usage Example

              {`import { OceanButton } from "@/components/ui/button"

// Animated gradient button

  Animated Button
`}

Animation Gallery

Rotate

Gradient rotates around the border

Pulse

Border pulses with changing opacity

Flow

Gradient flows smoothly across the border

Shimmer

A shimmer effect moves across the border

Spin

Border gradient spins around the element

Glow

Border glows with changing brightness

) } [V0_FILE]typescriptreact:file="app/animated-buttons/page.tsx" isMerged="true" import { AnimatedButtonsDemo } from "@/components/animated-buttons-demo" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function AnimatedButtonsPage() { return (

) } [V0_FILE]typescriptreact:file="components/neon-gradient-showcase.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface NeonBorderCardProps { className?: string title: string description?: string children?: React.ReactNode } function NeonBorderCard({ className, title, description, children }: NeonBorderCardProps) { return (

{title}

{description &&

{description}

} {children}

) } export function NeonGradientShowcase() { const [activeTab, setActiveTab] = useState("static") return (

Neon Gradient Borders

Vibrant neon-colored gradient borders with customizable thickness, direction, and animations.

Static Borders Animated Borders Examples

Hover over to see the glow effect

Gradient flows from left to right

Gradient flows from right to left

Gradient flows from bottom to top

Gradient flows from top to bottom

Gradient radiates from center

Thickness Variations

Subtle thin border

Medium thickness border

Thick border

Very thick border

Static Neon Border Usage

Add these classes to create static neon gradient borders:

neon-border - Basic neon border
neon-border neon-border-to-r - Right direction
neon-border neon-border-thin - Thin border
neon-border neon-border-thick - Thick border
neon-border neon-border-radial - Radial gradient

Hover over to see the animation

Thickness Variations

Hover over to see the animation

Animated Neon Border Usage

Add these classes to create animated neon gradient borders:

animated-neon-border animated-neon-pulse - Pulsing animation
animated-neon-border animated-neon-flow - Flowing animation
animated-neon-border animated-neon-spin - Spinning animation
animated-neon-border animated-neon-shimmer - Shimmer animation
animated-neon-border animated-neon-flow animated-neon-thick{" "} - Thick flowing border

Product Card

Premium Solar Panel Kit

$1,299.99

Featured Deal

Limited time offer on solar installation

Save 20%

Newsletter

Subscribe to receive the latest updates and offers

Call to Action

Join thousands of satisfied customers who have made the switch to solar energy.

Contact Us

Have questions? Our team is here to help you find the perfect solar solution.

Practical Implementation

Here are some practical ways to use neon gradient borders:

Featured products - Highlight special offers or featured items with neon borders
Call-to-action buttons - Use neon borders to draw attention to important buttons
Forms - Add neon borders to form elements for a modern, eye-catching look
Navigation - Indicate active or hovered navigation items with neon borders
Promotional content - Highlight limited-time offers or special promotions

) } [V0_FILE]typescriptreact:file="components/ui/neon-gradient-container.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface NeonGradientContainerProps extends React.HTMLAttributes { animated?: boolean animation?: "pulse" | "flow" | "spin" | "shimmer" direction?: "to-r" | "to-l" | "to-t" | "to-b" | "to-tr" | "to-tl" | "to-br" | "to-bl" | "radial" | "conic" thickness?: "thin" | "medium" | "thick" | "extra-thick" glass?: boolean } const NeonGradientContainer = React.forwardRef( ( { className, animated = false, animation = "flow", direction, thickness = "medium", glass = false, children, ...props }, ref, ) => { const getContainerClasses = () => { if (animated) { return cn( "animated-neon-border", `animated-neon-${animation}`, `animated-neon-${thickness}`, glass && "glass-card", ) } else { return cn( "neon-border", direction && `neon-border-${direction}`, `neon-border-${thickness}`, glass && "glass-card", ) } } return (

{children}

) }, ) NeonGradientContainer.displayName = "NeonGradientContainer" export { NeonGradientContainer } [V0_FILE]typescriptreact:file="app/neon-borders/page.tsx" isMerged="true" import { NeonGradientShowcase } from "@/components/neon-gradient-showcase" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function NeonBordersPage() { return (

) } [V0_FILE]typescriptreact:file="components/ui/neon-button.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Loader2 } from "lucide-react" interface NeonButtonProps extends React.ButtonHTMLAttributes { variant?: "static" | "animated" animation?: "pulse" | "flow" | "spin" | "shimmer" thickness?: "thin" | "medium" | "thick" | "extra-thick" children: React.ReactNode isLoading?: boolean disabled?: boolean } const NeonButton = React.forwardRef( ( { className, variant = "static", animation = "flow", thickness = "medium", children, isLoading = false, disabled, ...props }, ref, ) => { const getButtonClass = () => { if (variant === "animated") { return cn( "animated-neon-border", `animated-neon-${animation}`, `animated-neon-${thickness}`, "bg-black text-white hover:bg-black/90", ) } else { return cn("neon-border", `neon-border-${thickness}`, "bg-black text-white hover:bg-black/90") } } return ( ) }, ) NeonButton.displayName = "NeonButton" export { NeonButton } [V0_FILE]typescriptreact:file="components/neon-buttons-demo.tsx" isMerged="true" "use client" import { useState } from "react" import { NeonButton } from "@/components/ui/neon-button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" export function NeonButtonsDemo() { const [animated, setAnimated] = useState(true) const [animation, setAnimation] = useState<"pulse" | "flow" | "spin" | "shimmer">("flow") const [thickness, setThickness] = useState<"thin" | "medium" | "thick" | "extra-thick">("medium") return (

Neon Gradient Buttons

Interactive buttons with neon gradient borders that respond to hover and focus states.

Customize Neon Button

Animated

{animated && (

Animation Type

)}

Thickness

Neon Button

{animated ? "Hover over the button to see the animation" : "Hover over the button to see the glow effect"}

Usage Example

              {`import { NeonButton } from "@/components/ui/neon-button"

// Static neon button

  Static Neon Button


// Animated neon button

  Animated Neon Button
`}

Button Gallery

Static Neon Pulse Flow Spin Shimmer Thin Thick Extra Thick

) } [V0_FILE]typescriptreact:file="app/neon-buttons/page.tsx" isMerged="true" import { NeonButtonsDemo } from "@/components/neon-buttons-demo" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function NeonButtonsPage() { return (

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", neon: "border-transparent bg-black text-white", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/featured-product-card.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Star } from "lucide-react" import { cn } from "@/lib/utils" interface FeaturedProductCardProps { product: { id: number title: string description: string price: string videoSrc: string link: string featured?: boolean } } export function FeaturedProductCard({ product }: FeaturedProductCardProps) { return ( {product.featured && ( Featured )}

{product.title}

{product.description}

{product.price}

) } [V0_FILE]css:file="app/enhanced-products/styles.css" isMerged="true" .video-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%); color: white; transition: all 0.3s ease; } .video-card:hover .video-overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0.1) 100%); } .animated-neon-border.video-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .animated-neon-border.video-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 178, 255, 0.2); } [V0_FILE]typescriptreact:file="app/enhanced-products/page.tsx" isMerged="true" import { FeaturedProductsUpdated } from "@/components/featured-products-updated" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import "./styles.css" export default function EnhancedProductsPage() { return (

Enhanced Product Cards

Product cards with neon borders to highlight featured items. The neon borders animate on hover to create an eye-catching effect.

) } [V0_FILE]typescriptreact:file="components/ui/neon-cta-button.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "@radix-ui/react-slot" import { Loader2 } from "lucide-react" import { cn } from "@/lib/utils" const neonCTAVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { primary: "animated-neon-border animated-neon-flow bg-black text-white hover:bg-black/90", secondary: "animated-neon-border animated-neon-pulse bg-white text-black hover:bg-white/90", outline: "animated-neon-border animated-neon-shimmer bg-transparent text-foreground hover:bg-background/50", ghost: "neon-border text-foreground hover:bg-accent hover:text-accent-foreground", glow: "animated-neon-border animated-neon-glow bg-black text-white hover:bg-black/90", minimal: "neon-border bg-transparent text-foreground hover:bg-background/50", }, 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", }, thickness: { thin: "animated-neon-thin", medium: "animated-neon-medium", thick: "animated-neon-thick", "extra-thick": "animated-neon-extra-thick", }, animation: { flow: "animated-neon-flow", pulse: "animated-neon-pulse", shimmer: "animated-neon-shimmer", spin: "animated-neon-spin", glow: "animated-neon-glow", }, }, defaultVariants: { variant: "primary", size: "default", thickness: "medium", animation: "flow", }, }, ) export interface NeonCTAButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean isLoading?: boolean } const NeonCTAButton = React.forwardRef( ({ className, variant, size, thickness, animation, asChild = false, isLoading = false, children, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( {isLoading && ) }, ) NeonCTAButton.displayName = "NeonCTAButton" export { NeonCTAButton, neonCTAVariants } [V0_FILE]typescriptreact:file="components/neon-cta-showcase.tsx" isMerged="true" "use client" import { useState } from "react" import { NeonCTAButton } from "@/components/ui/neon-cta-button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { ArrowRight, ShoppingCart, Download, ExternalLink, Mail, Star } from "lucide-react" export function NeonCTAShowcase() { const [variant, setVariant] = useState<"primary" | "secondary" | "outline" | "ghost" | "glow" | "minimal">("primary") const [size, setSize] = useState<"default" | "sm" | "lg" | "icon">("default") const [thickness, setThickness] = useState<"thin" | "medium" | "thick" | "extra-thick">("medium") const [animation, setAnimation] = useState<"flow" | "pulse" | "shimmer" | "spin" | "glow">("flow") return (

Neon CTA Buttons

Eye-catching call-to-action buttons with neon gradient borders that animate on hover and focus.

Button Showcase Customize Usage Examples

Glow Animation

Explore

Customize Neon CTA Button

Variant

Size

Thickness

Animation

{size === "icon" ? : "Custom Neon Button"}

Hover over the button to see the animation

Usage Example

                {`import { NeonCTAButton } from "@/components/ui/neon-cta-button"

// Basic usage

  ${size === "icon" ? "" : "Custom Neon Button"}
`}

Hero Section CTA

Power Your Home with Solar Energy

Discover sustainable energy solutions that save money and protect our planet.

Shop Now Learn More

Product Card

Premium Solar Panel Kit

Complete solar panel system for residential use

$1,299.99 Add to Cart

Newsletter Signup

Stay Updated

Subscribe to our newsletter to receive the latest updates and special offers.

Special Offer

Limited Time Offer

Get 15% off on all solar panel kits. Offer ends soon!

15% OFF

Claim Offer

Best Practices

Primary Actions: Use the primary variant for the main call-to-action on a page
Secondary Actions: Use the secondary or outline variants for alternative actions
Size Consistency: Maintain consistent button sizes throughout your interface
Animation Subtlety: Choose subtle animations for important buttons to avoid overwhelming users
Accessibility: Ensure sufficient contrast between button text and background
Responsive Design: Use appropriate button sizes for different screen sizes

) } [V0_FILE]typescriptreact:file="app/neon-cta-buttons/page.tsx" isMerged="true" import { NeonCTAShowcase } from "@/components/neon-cta-showcase" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function NeonCTAButtonsPage() { return (

) } [V0_FILE]typescriptreact:file="components/hero-section-updated.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { NeonCTAButton } from "@/components/ui/neon-cta-button" import { ArrowRight } from "lucide-react" export function HeroSectionUpdated() { const [isMounted, setIsMounted] = useState(false) useEffect(() => { setIsMounted(true) }, []) if (!isMounted) { return (

Loading hero content...

) } return (

Power Your Home with Solar Energy

Discover sustainable energy solutions that save money and protect our planet. Join thousands of satisfied customers who have made the switch to solar.

Shop Now Learn More

) } [V0_FILE]typescriptreact:file="app/updated-hero/page.tsx" isMerged="true" import { HeroSectionUpdated } from "@/components/hero-section-updated" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function UpdatedHeroPage() { return (

) } [V0_FILE]typescriptreact:file="components/newsletter-updated.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { NeonCTAButton } from "@/components/ui/neon-cta-button" import { Input } from "@/components/ui/input" import { Send } from "lucide-react" import { Card } from "@/components/ui/card" export function NewsletterUpdated() { const [email, setEmail] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle newsletter subscription console.log("Subscribing email:", email) setEmail("") // Show success message or toast } return (

Stay Updated

Subscribe to our newsletter to receive the latest updates, special offers, and solar energy tips.

) } [V0_FILE]typescriptreact:file="app/updated-newsletter/page.tsx" isMerged="true" import { NewsletterUpdated } from "@/components/newsletter-updated" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function UpdatedNewsletterPage() { return (

Updated Newsletter Section

Our newsletter section with neon CTA buttons to increase subscription rates.

) } [V0_FILE]typescriptreact:file="components/special-offers-updated.tsx" isMerged="true" import type React from "react" import { NeonCTAButton } from "@/components/ui/neon-cta-button" import { Card, CardContent } from "@/components/ui/card" import { Clock, Tag, Percent } from "lucide-react" interface Offer { id: number title: string description: string discount: string endDate: string icon: React.ReactNode } const offers: Offer[] = [ { id: 1, title: "Summer Sale", description: "Get 15% off on all solar panel kits", discount: "15% OFF", endDate: "Limited time offer", icon: , }, { id: 2, title: "Bundle & Save", description: "Save 20% when you purchase a complete solar system", discount: "20% OFF", endDate: "When you buy a complete system", icon: , }, { id: 3, title: "Free Installation", description: "Free professional installation on orders over $2,000", discount: "FREE", endDate: "On orders over $2,000", icon: , }, ] export function SpecialOffersUpdated() { return (

Special Offers

{offers.map((offer) => (

{offer.icon}

{offer.title}

{offer.description}

{offer.discount}

{offer.endDate}

Claim Offer ))}

) } [V0_FILE]typescriptreact:file="app/updated-offers/page.tsx" isMerged="true" import { SpecialOffersUpdated } from "@/components/special-offers-updated" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function UpdatedOffersPage() { return (

Updated Special Offers

Our special offers section with neon CTA buttons to increase conversion rates.

) } [V0_FILE]typescriptreact:file="components/enhanced-theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun, Zap } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { useEffect, useState } from "react" export function EnhancedThemeToggle({ className }: { className?: string }) { const { setTheme, theme } = useTheme() const [mounted, setMounted] = useState(false) // Ensure component is mounted before rendering to avoid hydration mismatch useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return ( setTheme("light")}> Light setTheme("dark")}> Dark setTheme("neon-dark")}> Neon Dark ) } [V0_FILE]typescriptreact:file="components/header-with-neon.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Menu, X, ShoppingCart, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { EnhancedThemeToggle } from "@/components/enhanced-theme-toggle" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" export function HeaderWithNeon() { const [isMenuOpen, setIsMenuOpen] = useState(false) const { theme } = useTheme() const isNeonDark = theme === "neon-dark" const toggleMenu = () => { setIsMenuOpen(!isMenuOpen) } return (

Oceano Solar {/* Desktop Navigation */}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isMenuOpen && (

Home Products Solutions About Contact

)}

) } [V0_FILE]typescriptreact:file="components/neon-card.tsx" isMerged="true" "use client" import type React from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { cn } from "@/lib/utils" import { useTheme } from "next-themes" interface NeonCardProps { className?: string title?: string description?: string footer?: React.ReactNode children?: React.ReactNode } export function NeonCard({ className, title, description, footer, children }: NeonCardProps) { const { theme } = useTheme() const isNeonDark = theme === "neon-dark" return ( {(title || description) && ( {title && {title}} {description && {description}} )} {children} {footer && {footer}} ) } [V0_FILE]typescriptreact:file="components/neon-input.tsx" isMerged="true" "use client" import type React from "react" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { cn } from "@/lib/utils" import { useTheme } from "next-themes" import { forwardRef } from "react" interface NeonInputProps extends React.InputHTMLAttributes { label?: string description?: string wrapperClassName?: string } export const NeonInput = forwardRef( ({ className, label, description, wrapperClassName, id, ...props }, ref) => { const { theme } = useTheme() const isNeonDark = theme === "neon-dark" const inputId = id || Math.random().toString(36).substring(2, 9) return (

{label && ( {label} )}

{description &&

{description}

}

) }, ) NeonInput.displayName = "NeonInput" [V0_FILE]typescriptreact:file="components/neon-button.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { useTheme } from "next-themes" import { forwardRef } from "react" interface NeonButtonProps extends React.ButtonHTMLAttributes { variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "gradient" size?: "default" | "sm" | "lg" | "icon" } export const NeonButton = forwardRef( ({ className, variant = "default", size = "default", ...props }, ref) => { const { theme } = useTheme() const isNeonDark = theme === "neon-dark" return (

Power Your Home with Solar Energy

What Our Customers Say

{testimonial.name}

Special Offers

{offer.title}

Stay Updated

Our Mission

{title}

Gradient Border Variations

Practical Examples

Premium Offer

Limited Time Offer

Gradient Container Component

Gradient Border Preview

{title}

Animated Gradient Borders

Call to Action

Contact Us

Animated Gradient Buttons

Animation Gallery

{title}

Neon Gradient Borders

Thickness Variations

Thickness Variations

Call to Action

Contact Us

Neon Gradient Buttons

Button Gallery

{product.title}

Neon CTA Buttons

Primary

Secondary

Outline

Ghost

Glow

Minimal

Small Size

Default Size

Large Size

Thin Border

Medium Border

Thick Border

Extra Thick Border

Flow Animation

Pulse Animation

Shimmer Animation

Spin Animation

Glow Animation

Hero Section CTA

Power Your Home with Solar Energy

Product Card

Premium Solar Panel Kit

Newsletter Signup

Stay Updated

Special Offer

Limited Time Offer

Power Your Home with Solar Energy

Stay Updated

Special Offers

{offer.title}

Neon Dark Theme

Buttons

Navigation

Text Styles

Dividers

Energy Efficient