From a0a04d3f87db4933d20b7a0b5080f52c3a4d859b Mon Sep 17 00:00:00 2001 From: v0 Date: Fri, 20 Mar 2026 00:11:55 +0000 Subject: [PATCH] Initial commit from v0 --- .gitignore | 16 + app/globals.css | 126 ++++++ app/layout.tsx | 51 +++ app/page.tsx | 21 + components.json | 21 + components/contact.tsx | 211 +++++++++ components/features.tsx | 221 +++++++++ components/footer.tsx | 149 ++++++ components/header.tsx | 124 +++++ components/hero.tsx | 208 +++++++++ components/process.tsx | 186 ++++++++ components/services.tsx | 142 ++++++ components/theme-provider.tsx | 11 + components/ui/accordion.tsx | 66 +++ components/ui/alert-dialog.tsx | 157 +++++++ components/ui/alert.tsx | 66 +++ components/ui/aspect-ratio.tsx | 11 + components/ui/avatar.tsx | 53 +++ components/ui/badge.tsx | 46 ++ components/ui/breadcrumb.tsx | 109 +++++ components/ui/button-group.tsx | 83 ++++ components/ui/button.tsx | 60 +++ components/ui/calendar.tsx | 213 +++++++++ components/ui/card.tsx | 92 ++++ components/ui/carousel.tsx | 241 ++++++++++ components/ui/chart.tsx | 353 +++++++++++++++ components/ui/checkbox.tsx | 32 ++ components/ui/collapsible.tsx | 33 ++ components/ui/command.tsx | 184 ++++++++ components/ui/context-menu.tsx | 252 +++++++++++ components/ui/dialog.tsx | 143 ++++++ components/ui/drawer.tsx | 135 ++++++ components/ui/dropdown-menu.tsx | 257 +++++++++++ components/ui/empty.tsx | 104 +++++ components/ui/field.tsx | 244 ++++++++++ components/ui/form.tsx | 167 +++++++ components/ui/hover-card.tsx | 44 ++ components/ui/input-group.tsx | 169 +++++++ components/ui/input-otp.tsx | 77 ++++ components/ui/input.tsx | 21 + components/ui/item.tsx | 193 ++++++++ components/ui/kbd.tsx | 28 ++ components/ui/label.tsx | 24 + components/ui/menubar.tsx | 276 ++++++++++++ components/ui/navigation-menu.tsx | 166 +++++++ components/ui/pagination.tsx | 127 ++++++ components/ui/popover.tsx | 48 ++ components/ui/progress.tsx | 31 ++ components/ui/radio-group.tsx | 45 ++ components/ui/resizable.tsx | 56 +++ components/ui/scroll-area.tsx | 58 +++ components/ui/select.tsx | 185 ++++++++ components/ui/separator.tsx | 28 ++ components/ui/sheet.tsx | 139 ++++++ components/ui/sidebar.tsx | 726 ++++++++++++++++++++++++++++++ components/ui/skeleton.tsx | 13 + components/ui/slider.tsx | 63 +++ components/ui/sonner.tsx | 25 + components/ui/spinner.tsx | 16 + components/ui/switch.tsx | 31 ++ components/ui/table.tsx | 116 +++++ components/ui/tabs.tsx | 66 +++ components/ui/textarea.tsx | 18 + components/ui/toast.tsx | 129 ++++++ components/ui/toaster.tsx | 35 ++ components/ui/toggle-group.tsx | 73 +++ components/ui/toggle.tsx | 47 ++ components/ui/tooltip.tsx | 61 +++ components/ui/use-mobile.tsx | 19 + components/ui/use-toast.ts | 191 ++++++++ hooks/use-mobile.ts | 19 + hooks/use-toast.ts | 191 ++++++++ lib/utils.ts | 6 + next.config.mjs | 11 + package.json | 72 +++ postcss.config.mjs | 8 + public/apple-icon.png | Bin 0 -> 2626 bytes public/icon-dark-32x32.png | Bin 0 -> 585 bytes public/icon-light-32x32.png | Bin 0 -> 566 bytes public/icon.svg | 26 ++ public/placeholder-logo.png | Bin 0 -> 568 bytes public/placeholder-logo.svg | 1 + public/placeholder-user.jpg | Bin 0 -> 1635 bytes public/placeholder.jpg | Bin 0 -> 1064 bytes public/placeholder.svg | 1 + styles/globals.css | 125 +++++ tsconfig.json | 27 ++ 87 files changed, 8419 insertions(+) create mode 100644 .gitignore create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 components.json create mode 100644 components/contact.tsx create mode 100644 components/features.tsx create mode 100644 components/footer.tsx create mode 100644 components/header.tsx create mode 100644 components/hero.tsx create mode 100644 components/process.tsx create mode 100644 components/services.tsx create mode 100644 components/theme-provider.tsx create mode 100644 components/ui/accordion.tsx create mode 100644 components/ui/alert-dialog.tsx create mode 100644 components/ui/alert.tsx create mode 100644 components/ui/aspect-ratio.tsx create mode 100644 components/ui/avatar.tsx create mode 100644 components/ui/badge.tsx create mode 100644 components/ui/breadcrumb.tsx create mode 100644 components/ui/button-group.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/calendar.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/carousel.tsx create mode 100644 components/ui/chart.tsx create mode 100644 components/ui/checkbox.tsx create mode 100644 components/ui/collapsible.tsx create mode 100644 components/ui/command.tsx create mode 100644 components/ui/context-menu.tsx create mode 100644 components/ui/dialog.tsx create mode 100644 components/ui/drawer.tsx create mode 100644 components/ui/dropdown-menu.tsx create mode 100644 components/ui/empty.tsx create mode 100644 components/ui/field.tsx create mode 100644 components/ui/form.tsx create mode 100644 components/ui/hover-card.tsx create mode 100644 components/ui/input-group.tsx create mode 100644 components/ui/input-otp.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/item.tsx create mode 100644 components/ui/kbd.tsx create mode 100644 components/ui/label.tsx create mode 100644 components/ui/menubar.tsx create mode 100644 components/ui/navigation-menu.tsx create mode 100644 components/ui/pagination.tsx create mode 100644 components/ui/popover.tsx create mode 100644 components/ui/progress.tsx create mode 100644 components/ui/radio-group.tsx create mode 100644 components/ui/resizable.tsx create mode 100644 components/ui/scroll-area.tsx create mode 100644 components/ui/select.tsx create mode 100644 components/ui/separator.tsx create mode 100644 components/ui/sheet.tsx create mode 100644 components/ui/sidebar.tsx create mode 100644 components/ui/skeleton.tsx create mode 100644 components/ui/slider.tsx create mode 100644 components/ui/sonner.tsx create mode 100644 components/ui/spinner.tsx create mode 100644 components/ui/switch.tsx create mode 100644 components/ui/table.tsx create mode 100644 components/ui/tabs.tsx create mode 100644 components/ui/textarea.tsx create mode 100644 components/ui/toast.tsx create mode 100644 components/ui/toaster.tsx create mode 100644 components/ui/toggle-group.tsx create mode 100644 components/ui/toggle.tsx create mode 100644 components/ui/tooltip.tsx create mode 100644 components/ui/use-mobile.tsx create mode 100644 components/ui/use-toast.ts create mode 100644 hooks/use-mobile.ts create mode 100644 hooks/use-toast.ts create mode 100644 lib/utils.ts create mode 100644 next.config.mjs create mode 100644 package.json create mode 100644 postcss.config.mjs create mode 100644 public/apple-icon.png create mode 100644 public/icon-dark-32x32.png create mode 100644 public/icon-light-32x32.png create mode 100644 public/icon.svg create mode 100644 public/placeholder-logo.png create mode 100644 public/placeholder-logo.svg create mode 100644 public/placeholder-user.jpg create mode 100644 public/placeholder.jpg create mode 100644 public/placeholder.svg create mode 100644 styles/globals.css create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6e2519a --- /dev/null +++ b/.gitignore @@ -0,0 +1,16 @@ +# v0 sandbox internal files +__v0_runtime_loader.js +__v0_devtools.tsx +__v0_jsx-dev-runtime.ts +.snowflake/ +.v0-trash/ +.vercel/ +next.user-config.* + +# Environment variables +.env*.local + +# Common ignores +node_modules/ +.next/ +.DS_Store \ No newline at end of file diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..658e7f7 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,126 @@ +@import 'tailwindcss'; +@import 'tw-animate-css'; + +@custom-variant dark (&:is(.dark *)); + +:root { + --background: oklch(0.08 0 0); + --foreground: oklch(0.98 0 0); + --card: oklch(0.12 0 0); + --card-foreground: oklch(0.98 0 0); + --popover: oklch(0.12 0 0); + --popover-foreground: oklch(0.98 0 0); + --primary: oklch(0.75 0.18 145); + --primary-foreground: oklch(0.08 0 0); + --secondary: oklch(0.18 0 0); + --secondary-foreground: oklch(0.98 0 0); + --muted: oklch(0.2 0 0); + --muted-foreground: oklch(0.65 0 0); + --accent: oklch(0.75 0.18 145); + --accent-foreground: oklch(0.08 0 0); + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.577 0.245 27.325); + --border: oklch(0.25 0 0); + --input: oklch(0.25 0 0); + --ring: oklch(0.75 0.18 145); + --chart-1: oklch(0.75 0.18 145); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --radius: 0.5rem; + --sidebar: oklch(0.1 0 0); + --sidebar-foreground: oklch(0.98 0 0); + --sidebar-primary: oklch(0.75 0.18 145); + --sidebar-primary-foreground: oklch(0.08 0 0); + --sidebar-accent: oklch(0.18 0 0); + --sidebar-accent-foreground: oklch(0.98 0 0); + --sidebar-border: oklch(0.25 0 0); + --sidebar-ring: oklch(0.75 0.18 145); +} + +.dark { + --background: oklch(0.08 0 0); + --foreground: oklch(0.98 0 0); + --card: oklch(0.12 0 0); + --card-foreground: oklch(0.98 0 0); + --popover: oklch(0.12 0 0); + --popover-foreground: oklch(0.98 0 0); + --primary: oklch(0.75 0.18 145); + --primary-foreground: oklch(0.08 0 0); + --secondary: oklch(0.18 0 0); + --secondary-foreground: oklch(0.98 0 0); + --muted: oklch(0.2 0 0); + --muted-foreground: oklch(0.65 0 0); + --accent: oklch(0.75 0.18 145); + --accent-foreground: oklch(0.08 0 0); + --destructive: oklch(0.396 0.141 25.723); + --destructive-foreground: oklch(0.637 0.237 25.331); + --border: oklch(0.25 0 0); + --input: oklch(0.25 0 0); + --ring: oklch(0.75 0.18 145); + --chart-1: oklch(0.75 0.18 145); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.1 0 0); + --sidebar-foreground: oklch(0.98 0 0); + --sidebar-primary: oklch(0.75 0.18 145); + --sidebar-primary-foreground: oklch(0.08 0 0); + --sidebar-accent: oklch(0.18 0 0); + --sidebar-accent-foreground: oklch(0.98 0 0); + --sidebar-border: oklch(0.25 0 0); + --sidebar-ring: oklch(0.75 0.18 145); +} + +@theme inline { + --font-sans: var(--font-sans), 'Space Grotesk', system-ui, sans-serif; + --font-body: var(--font-body), 'Inter', system-ui, sans-serif; + --font-mono: 'Geist Mono', 'Geist Mono Fallback'; + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..2e28e74 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,51 @@ +import type { Metadata } from 'next' +import { Space_Grotesk, Inter } from 'next/font/google' +import { Analytics } from '@vercel/analytics/next' +import './globals.css' + +const spaceGrotesk = Space_Grotesk({ + subsets: ["latin"], + variable: '--font-sans' +}); +const inter = Inter({ + subsets: ["latin"], + variable: '--font-body' +}); + +export const metadata: Metadata = { + title: 'Cloudrite | Every Business Needs an I.T Guy', + description: 'Auckland-based IT services company helping small businesses with websites, cloud hosting, IT support and repairs. We make tech simple.', + generator: 'v0.app', + icons: { + icon: [ + { + url: '/icon-light-32x32.png', + media: '(prefers-color-scheme: light)', + }, + { + url: '/icon-dark-32x32.png', + media: '(prefers-color-scheme: dark)', + }, + { + url: '/icon.svg', + type: 'image/svg+xml', + }, + ], + apple: '/apple-icon.png', + }, +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + + {children} + + + + ) +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..defcfc2 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,21 @@ +import { Header } from "@/components/header" +import { Hero } from "@/components/hero" +import { Services } from "@/components/services" +import { Features } from "@/components/features" +import { Process } from "@/components/process" +import { Contact } from "@/components/contact" +import { Footer } from "@/components/footer" + +export default function Home() { + return ( +
+
+ + + + + +
+
+ ) +} diff --git a/components.json b/components.json new file mode 100644 index 0000000..4ee62ee --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} diff --git a/components/contact.tsx b/components/contact.tsx new file mode 100644 index 0000000..3a719ce --- /dev/null +++ b/components/contact.tsx @@ -0,0 +1,211 @@ +"use client" + +import { useState } from "react" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Mail, Phone, MapPin, Send, ArrowRight } from "lucide-react" + +export function Contact() { + const [formData, setFormData] = useState({ + name: "", + email: "", + message: "" + }) + const [isSubmitting, setIsSubmitting] = useState(false) + const [isSubmitted, setIsSubmitted] = useState(false) + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + setIsSubmitting(true) + + // Simulate form submission + await new Promise(resolve => setTimeout(resolve, 1500)) + + setIsSubmitting(false) + setIsSubmitted(true) + setFormData({ name: "", email: "", message: "" }) + + // Reset success message after 5 seconds + setTimeout(() => setIsSubmitted(false), 5000) + } + + const contactInfo = [ + { + icon: Mail, + label: "Email", + value: "hello@cloudrite.co.nz", + href: "mailto:hello@cloudrite.co.nz" + }, + { + icon: Phone, + label: "Phone", + value: "09 123 4567", + href: "tel:+6491234567" + }, + { + icon: MapPin, + label: "Location", + value: "Auckland, New Zealand", + href: "#" + } + ] + + return ( +
+
+ {/* Section Header */} +
+
+ Get Started +
+

+ Ready to Talk Tech? +

+

+ Whether you need a new website, cloud hosting, or help with your + I.T systems, we're here to help. Get in touch today. +

+
+ +
+ {/* Contact Info */} +
+

Contact Details

+ +
+ {contactInfo.map((item) => { + const Icon = item.icon + return ( + +
+ +
+
+
{item.label}
+
{item.value}
+
+ + + ) + })} +
+ + {/* Hours */} +
+

Business Hours

+
+
+ Monday - Friday + 8:30am - 5:30pm +
+
+ Saturday + By Appointment +
+
+ Sunday + Closed +
+
+
+
+ + 24/7 Emergency Support Available +
+
+
+
+ + {/* Contact Form */} +
+
+
+

Send Us a Message

+ + {isSubmitted ? ( +
+
+ +
+

Message Sent!

+

+ Thanks for reaching out. We'll get back to you soon. +

+
+ ) : ( +
+
+ + setFormData({ ...formData, name: e.target.value })} + required + className="bg-background border-border focus:border-primary transition-colors" + /> +
+ +
+ + setFormData({ ...formData, email: e.target.value })} + required + className="bg-background border-border focus:border-primary transition-colors" + /> +
+ +
+ +