[V0_FILE]jpg:file="public/professional-headshot-of-sarah-chen--software-engi.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-of-sarah-chen--software-engi-JKEDd9KyKjP3doQKRIgcv16M2qwq4w.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-headshot-of-marcus-rodriguez--product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-of-marcus-rodriguez--product-8yBVJlIjME5MAElpK5GIsLXQoBsYjF.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-headshot-of-priya-patel--data-scienti.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-of-priya-patel--data-scienti-Wy3vUJb1mHUHn8pckul2lYSC7l1Lik.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-headshot-of-alex-thompson--ux-designe.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-of-alex-thompson--ux-designe-598WXBwd2mBHTT9Lkeu4IJpY0dLm6W.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-headshot-of-david-kim--devops-enginee.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-of-david-kim--devops-enginee-DjYrqUoeku4Kd8TxDfcWhs9K0rkFRY.jpg" isMerged="true" [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match Belli AI brand with orange/red primary colors */ --background: oklch(1 0 0); /* #ffffff - Clean white background */ --foreground: oklch(0.25 0 0); /* #374151 - Professional dark gray text */ --card: oklch(0.98 0.01 25); /* #fef7f0 - Soft orange backdrop for sections */ --card-foreground: oklch(0.25 0 0); /* #374151 - Text on cards */ --popover: oklch(1 0 0); /* #ffffff - White popover background */ --popover-foreground: oklch(0.25 0 0); /* #374151 - Text on popovers */ /* Updated primary color to #FF660F */ --primary: oklch(0.62 0.25 35); /* #FF660F - Updated Belli AI orange primary for actions */ --primary-foreground: oklch(1 0 0); /* #ffffff - White text on primary */ /* Updated secondary color to match #FF660F theme */ --secondary: oklch(0.67 0.27 30); /* Complementary orange secondary */ --secondary-foreground: oklch(1 0 0); /* #ffffff - White text on secondary */ --muted: oklch(0.98 0.01 25); /* #fef7f0 - Muted orange background */ --muted-foreground: oklch(0.25 0 0); /* #374151 - Muted text */ /* Updated accent color to match #FF660F theme */ --accent: oklch(0.67 0.27 30); /* Complementary orange accent color */ --accent-foreground: oklch(1 0 0); /* #ffffff - White text on accent */ --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0 0); /* #e5e7eb - Light gray borders */ --input: oklch(1 0 0); /* #ffffff - White input backgrounds */ /* Updated ring color to match #FF660F */ --ring: oklch(0.62 0.25 35 / 0.5); /* Orange focus ring */ /* Updated chart colors to match #FF660F theme */ --chart-1: oklch(0.62 0.25 35); /* #FF660F - Primary orange for charts */ --chart-2: oklch(0.67 0.27 30); /* Complementary orange for charts */ --chart-3: oklch(0.98 0.01 25); /* #fef7f0 - Light orange for charts */ --chart-4: oklch(0.25 0 0); /* #374151 - Dark gray for charts */ --chart-5: oklch(0.92 0 0); /* #e5e7eb - Light gray for charts */ --radius: 0.5rem; --sidebar: oklch(0.98 0.01 25); /* #fef7f0 - Light orange sidebar */ --sidebar-foreground: oklch(0.25 0 0); /* #374151 - Dark text on sidebar */ /* Updated sidebar colors to match #FF660F */ --sidebar-primary: oklch(0.62 0.25 35); /* #FF660F - Primary orange for sidebar */ --sidebar-primary-foreground: oklch(1 0 0); /* #ffffff - White text on sidebar primary */ --sidebar-accent: oklch(0.67 0.27 30); /* Accent orange for sidebar */ --sidebar-accent-foreground: oklch(1 0 0); /* #ffffff - White text on sidebar accent */ --sidebar-border: oklch(0.92 0 0); /* #e5e7eb - Light gray sidebar borders */ /* Updated sidebar ring to match #FF660F */ --sidebar-ring: oklch(0.62 0.25 35 / 0.5); /* Orange sidebar focus ring */ } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --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.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --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; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/background-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-3PCB2VI6D1O3P89YCEIKDEWLLL5K0c.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plane, CheckCircle } from "lucide-react" import { useState } from "react" export default function CareersPage() { const [selectedPosition, setSelectedPosition] = useState("") const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", majorGraduation: "", growthMetrics: "", previousRole: "", resume: null as File | null, }) const [showSuccess, setShowSuccess] = useState(false) const [showError, setShowError] = useState(false) const [errorMessage, setErrorMessage] = useState("") const handleApplyNow = (position: string) => { setSelectedPosition(position) // Scroll to the very top of the page window.scrollTo({ top: 0, behavior: "smooth", }) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const isFormValid = formData.firstName.trim() !== "" && formData.lastName.trim() !== "" && formData.email.trim() !== "" && selectedPosition !== "" && formData.majorGraduation.trim() !== "" && formData.growthMetrics.trim() !== "" && formData.previousRole.trim() !== "" && formData.resume !== null // 入力チェックが通らない場合 if (!isFormValid) { setErrorMessage("Please fill in all fields") setShowError(true) setShowSuccess(false) setTimeout(() => setShowError(false), 3000) return } // フォームデータを設定 const payload = { firstName: formData.firstName, lastName: formData.lastName, email: formData.email, selectedPosition, majorGraduation: formData.majorGraduation, growthMetrics: formData.growthMetrics, previousRole: formData.previousRole, } // Google Apps Scriptに送信するためにURLSearchParamsでデータを送信形式に変換 const body = new URLSearchParams(payload as any) const GAS_URL = "https://script.google.com/macros/s/AKfycbwFGTvG3WbHXNG-zT41t4-edNX9Vvlf3rOOfVbrc9-m9AJU6wdLzYg9BheFXzfhmKUKXQ/exec" try { // フォームデータをGoogle Apps Scriptに送信 const res = await fetch(GAS_URL, { method: "POST", body, }) if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`) } // レスポンスをJSONとして取得 const json = await res.json() console.log(json) // レスポンスの確認 // レスポンスが成功した場合 const ok = !!json?.ok if (ok) { setFormData({ firstName: "", lastName: "", email: "", majorGraduation: "", growthMetrics: "", previousRole: "", resume: null, }) setSelectedPosition("") // ポップアップを表示（成功） setShowSuccess(true) setShowError(false) setTimeout(() => setShowSuccess(false), 3000) // 3秒後にポップアップを消す } else { setErrorMessage("Transform is failure") setShowError(true) setShowSuccess(false) setTimeout(() => setShowError(false), 3000) } } catch (error) { console.error("Error submitting the form:", error) setErrorMessage("Transform is failure") setShowError(true) setShowSuccess(false) setTimeout(() => setShowError(false), 3000) } } const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] || null setFormData((prev) => ({ ...prev, resume: file })) } return (

{/* Application Form Section */}

Apply Today

Ready to join our mission? Submit your application and we'll be in touch soon.

{showSuccess && (

Success Submit

Your application has been submitted successfully!

)} {showError && (

{errorMessage}

)}

First Name handleInputChange("firstName", e.target.value)} placeholder="Enter your first name" className="bg-black/50 border-white/30 text-white placeholder:text-white/50" />

Last Name handleInputChange("lastName", e.target.value)} placeholder="Enter your last name" className="bg-black/50 border-white/30 text-white placeholder:text-white/50" />

Email handleInputChange("email", e.target.value)} placeholder="Enter your email address" className="bg-black/50 border-white/30 text-white placeholder:text-white/50" />

Position of Interest

Major & Graduation handleInputChange("majorGraduation", e.target.value)} placeholder="e.g., Computer Science, 2022" className="bg-black/50 border-white/30 text-white placeholder:text-white/50" />

Growth Metrics of Previous Job handleInputChange("growthMetrics", e.target.value)} placeholder="e.g., Increased user engagement by 40%" className="bg-black/50 border-white/30 text-white placeholder:text-white/50" />

Role at Previous or Current Company handleInputChange("previousRole", e.target.value)} placeholder="e.g., Senior Software Engineer at Google" className="bg-black/50 border-white/30 text-white placeholder:text-white/50" />

Resume (PDF only)

{/* Open Positions Section */}

Current Openings

Senior Backend Engineer Full-time

Build scalable backend systems for air cargo operations

Remote • Engineering

Senior Frontend Engineer Full-time

Create intuitive user interfaces for complex workflows

Remote • Engineering

Junior Backend Engineer Full-time

Learn and grow while building robust backend solutions

Remote • Engineering

Junior Frontend Engineer Full-time

Develop your skills in modern frontend technologies

Remote • Engineering

{/* Employee Stories Section */}

Employee Stories

Hear directly from our team about why they love working at Belli AI.

"Belli's flexible work culture has made a huge difference in my life. I feel empowered to do my best work every day!"

Sarah Chen

Senior Software Engineer

"Working at Belli means being at the forefront of innovation. Every day brings new challenges and opportunities to grow."

Marcus Rodriguez

Product Manager

"The collaborative environment here is incredible. My ideas are heard and I'm constantly learning from brilliant colleagues."

Priya Patel

Data Scientist

"Belli gives me the freedom to create meaningful user experiences while working with cutting-edge technology."

Alex Thompson

UX Designer

"The technical challenges at Belli push me to grow every day. Plus, the remote-first culture is fantastic!"

David Kim

DevOps Engineer

{/* Footer Section */}

) }

About

Tags

Share

About

Tags

Share

More from jeffmpan

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jeffmpan

More Templates Like This