[V0_FILE]typescriptreact:file="components/marquee.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { cn } from "@/lib/utils" interface MarqueeProps { text: string direction?: number className?: string } export function Marquee({ text, direction = 1, className }: MarqueeProps) { return (

{[...Array(8)].map((_, i) => ( {text} • ))}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" "use client" import { motion, useScroll, useTransform } from "framer-motion" import { ArrowDown, Globe } from "lucide-react" export function Hero() { const { scrollYProgress } = useScroll() const rotate = useTransform(scrollYProgress, [0, 1], [0, 360]) return (

Super
Design

Based in Digital Void

AI Product Designer
Since 2024

{/* Decorative Elements */}

) } [V0_FILE]typescriptreact:file="components/marquee-section.tsx" isMerged="true" "use client" import { Marquee } from "./marquee" export function MarqueeSection() { return (

) } [V0_FILE]typescriptreact:file="components/service-card.tsx" isMerged="true" "use client" import { ArrowUpRight } from "lucide-react" interface ServiceCardProps { number: string title: string tags: string[] } export function ServiceCard({ number, title, tags }: ServiceCardProps) { return (

({number})

{title}

{tags.map((tag) => ( {tag} ))}

) } [V0_FILE]typescriptreact:file="components/services.tsx" isMerged="true" "use client" import { Star } from "lucide-react" import { ServiceCard } from "./service-card" const services = [ { title: "AI Strategy", tags: ["Consulting", "Implementation", "LLM Integration"] }, { title: "Interface", tags: ["UI/UX Design", "Design Systems", "Prototyping"] }, { title: "Development", tags: ["React", "TypeScript", "Next.js", "WebGL"] }, { title: "Branding", tags: ["Identity", "Motion", "3D Visuals"] }, ] export function Services() { return (

Services

{services.map((s, i) => ( ))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" "use client" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Navbar } from "@/components/navbar" import { Hero } from "@/components/hero" import { MarqueeSection } from "@/components/marquee-section" import { Services } from "@/components/services" import { Footer } from "@/components/footer" export default function Page() { return (

) } [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": "eslint ." }, "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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "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": "^1.1.2", "zod": "3.25.76", "framer-motion": "12.26.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist_Mono, Playfair_Display } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", }) const _playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair", }) export const metadata: Metadata = { title: "Superdesign® | AI Product Designer", description: "Bold brutalist portfolio for AI product design - Strategy, Interface, Development & Branding", 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} ) } [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 for brutalist orange theme */ --background: #ff4d00; --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.145 0 0); --primary-foreground: #ff4d00; --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: #ff4d00; --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.145 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --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.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .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 { /* Updated fonts to use CSS variables from Next.js font loader */ --font-sans: var(--font-geist-mono), "Geist Mono Fallback"; --font-serif: var(--font-playfair), "Playfair Display", Georgia, serif; --font-mono: var(--font-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; } } /* Added slow spin animation for scroll indicator */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 10s linear infinite; } [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" "use client" import { Menu, Twitter, Instagram } from "lucide-react" import Link from "next/link" import { usePathname } from "next/navigation" const navItems = [ { label: "Work", href: "/work" }, { label: "Services", href: "/services" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }, ] export function Navbar() { const pathname = usePathname() return ( ) } [V0_FILE]typescriptreact:file="app/work/page.tsx" import { Navbar } from "@/components/navbar" import { Footer } from "@/components/footer" import { ArrowUpRight } from "lucide-react" import Link from "next/link" const projects = [ { id: 1, title: "Kinetic Brand Identity", category: "Branding", year: "2024", image: "/bold-geometric-brand-identity-design-orange-black.jpg", }, { id: 2, title: "Digital Experience Platform", category: "Web Design", year: "2024", image: "/brutalist-website-design-dark-theme.jpg", }, { id: 3, title: "Motion Graphics System", category: "Motion", year: "2023", image: "/abstract-motion-graphics-orange-shapes.jpg", }, { id: 4, title: "Product Launch Campaign", category: "Campaign", year: "2023", image: "/product-launch-advertising-bold-typography.jpg", }, { id: 5, title: "Corporate Rebrand", category: "Branding", year: "2023", image: "/corporate-rebrand-minimalist-logo-design.jpg", }, { id: 6, title: "E-commerce Experience", category: "Web Design", year: "2022", image: "/ecommerce-website-modern-dark-design.jpg", }, ] export default function WorkPage() { return (

Selected
Work

A curated collection of projects that push boundaries and challenge conventions. Each piece represents our commitment to bold design.

{projects.map((project, index) => (

{project.category} — {project.year}

{project.title}

{String(index + 1).padStart(2, "0")} {project.title}

))}

) } [V0_FILE]typescriptreact:file="app/services/page.tsx" import { Navbar } from "@/components/navbar" import { Footer } from "@/components/footer" import { ArrowRight } from "lucide-react" const services = [ { number: "01", title: "Brand Strategy", description: "We craft comprehensive brand strategies that define your market position, voice, and visual identity. From startups to enterprises, we build brands that resonate.", deliverables: ["Brand Audit", "Positioning", "Messaging", "Guidelines"], }, { number: "02", title: "Visual Identity", description: "Bold, memorable visual systems that capture attention and communicate your brand essence across every touchpoint.", deliverables: ["Logo Design", "Color Systems", "Typography", "Iconography"], }, { number: "03", title: "Digital Design", description: "Websites and digital experiences that push boundaries while delivering exceptional user experiences and business results.", deliverables: ["Web Design", "UI/UX", "Prototyping", "Design Systems"], }, { number: "04", title: "Motion & 3D", description: "Dynamic motion graphics and 3D visuals that bring your brand to life and create unforgettable experiences.", deliverables: ["Animation", "3D Modeling", "Video Production", "AR/VR"], }, { number: "05", title: "Development", description: "Custom web development that transforms designs into performant, accessible, and scalable digital products.", deliverables: ["Frontend", "Backend", "CMS", "E-commerce"], }, ] export default function ServicesPage() { return (

Our
Services

Full-spectrum creative services designed to elevate your brand and drive meaningful results. We don't just design—we transform.

{services.map((service) => (

{service.number}

{service.title}

{service.description}

{service.deliverables.map((item) => ( {item} ))}

))}

Ready to start?

Let's discuss your project and see how we can help bring your vision to life.

Get in Touch

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" import { Navbar } from "@/components/navbar" import { Footer } from "@/components/footer" const team = [ { name: "Alex Chen", role: "Creative Director", image: "/creative-director-headshot.png", }, { name: "Sarah Miller", role: "Design Lead", image: "/professional-headshot-designer-woman.jpg", }, { name: "Marcus Johnson", role: "Tech Lead", image: "/professional-headshot-developer-man.jpg", }, { name: "Emma Wilson", role: "Strategy Director", image: "/professional-headshot-strategist-woman.jpg", }, ] const stats = [ { value: "150+", label: "Projects Completed" }, { value: "12", label: "Years Experience" }, { value: "40+", label: "Team Members" }, { value: "25", label: "Awards Won" }, ] export default function AboutPage() { return (

About
Us

We are a collective of designers, developers, and strategists who believe in the power of bold ideas.

Founded in 2012, Superdesign has grown from a small studio into a global creative agency. We work with ambitious brands who aren't afraid to stand out.

Our approach combines strategic thinking with experimental design, pushing boundaries while delivering measurable results. We believe great design should challenge, inspire, and transform.

{stats.map((stat) => (

{stat.value}

{stat.label}

))}

The Team

{team.map((member) => (

{member.name}

{member.role}

))}

Our Values

{[ { title: "Bold", description: "We take risks and push boundaries. Safe design is forgettable design.", }, { title: "Honest", description: "We tell it like it is. Transparency builds trust and better work.", }, { title: "Relentless", description: "We don't stop until it's right. Good enough is never good enough.", }, ].map((value) => (

{value.title}

{value.description}

))}

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" "use client" import type React from "react" import { Navbar } from "@/components/navbar" import { Footer } from "@/components/footer" import { useState } from "react" import { ArrowRight, Mail, MapPin, Phone } from "lucide-react" export default function ContactPage() { const [formData, setFormData] = useState({ name: "", email: "", company: "", budget: "", message: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission console.log(formData) } return (

Let's
Talk

Have a project in mind? We'd love to hear about it. Fill out the form below and we'll get back to you within 24 hours.

Name * setFormData({ ...formData, name: e.target.value })} className="w-full bg-transparent border-b-2 border-foreground py-3 font-mono focus:outline-none focus:border-primary transition-colors" placeholder="John Doe" />

Email * setFormData({ ...formData, email: e.target.value })} className="w-full bg-transparent border-b-2 border-foreground py-3 font-mono focus:outline-none focus:border-primary transition-colors" placeholder="john@company.com" />

Company setFormData({ ...formData, company: e.target.value })} className="w-full bg-transparent border-b-2 border-foreground py-3 font-mono focus:outline-none focus:border-primary transition-colors" placeholder="Company Inc." />

Budget Range

Tell us about your project *

setFormData({ ...formData, message: e.target.value })}
                rows={5}
                className="w-full bg-transparent border-2 border-foreground p-4 font-mono focus:outline-none focus:border-primary transition-colors resize-none"
                placeholder="Describe your project, goals, and timeline..."
              />
            </div>

<button
              type="submit"
              className="group flex items-center gap-4 bg-foreground text-background px-8 py-4 font-mono uppercase hover:bg-primary hover:text-black transition-colors"
            >
              Send Message
              <ArrowRight className="group-hover:translate-x-2 transition-transform" size={20} />
            </button>
          </form>

<div className="space-y-12">
            <div>
              <h3 className="font-serif text-2xl uppercase mb-6">Contact Info</h3>
              <div className="space-y-4">
                <a
                  href="mailto:hello@superdesign.co"
                  className="flex items-center gap-4 font-mono hover:text-primary transition-colors"
                >
                  <Mail size={20} />
                  hello@superdesign.co
                </a>
                <a
                  href="tel:+1234567890"
                  className="flex items-center gap-4 font-mono hover:text-primary transition-colors"
                >
                  <Phone size={20} />
                  +1 (234) 567-890
                </a>
                <div className="flex items-center gap-4 font-mono">
                  <MapPin size={20} />
                  New York, NY
                </div>
              </div>
            </div>

<div>
              <h3 className="font-serif text-2xl uppercase mb-6">Office</h3>
              <p className="font-mono text-muted-foreground">
                123 Design Street
                <br />
                Suite 456
                <br />
                New York, NY 10001
              </p>
            </div>

<div className="border-2 border-foreground p-8 bg-foreground text-background">
              <h3 className="font-serif text-2xl uppercase mb-4">Quick Response</h3>
              <p className="font-mono text-sm opacity-70">
                We typically respond within 24 hours. For urgent inquiries, feel free to call us directly.
              </p>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </main>
  )
}
[V0_FILE]jpg:file="public/bold-geometric-brand-identity-design-orange-black.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bold-geometric-brand-identity-design-orange-black-72Wx5NQhzmi4VDDWIIcbJLLZjq1aQn.jpg"
[V0_FILE]jpg:file="public/brutalist-website-design-dark-theme.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/brutalist-website-design-dark-theme-PdUeMSxsijgYKlVZfAntde2Myh6Y6J.jpg"
[V0_FILE]jpg:file="public/abstract-motion-graphics-orange-shapes.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-motion-graphics-orange-shapes-7SS5ILM85uGzynMdbdbAxysXTHWbqL.jpg"
[V0_FILE]jpg:file="public/product-launch-advertising-bold-typography.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/product-launch-advertising-bold-typography-SuWzyNxyhhKZdCIo14SCj8ZRuTBxKB.jpg"
[V0_FILE]jpg:file="public/corporate-rebrand-minimalist-logo-design.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/corporate-rebrand-minimalist-logo-design-ZrzfdYsxgOSqLmHoIIX56bmkYgJxeh.jpg"
[V0_FILE]jpg:file="public/ecommerce-website-modern-dark-design.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ecommerce-website-modern-dark-design-zMKLZeLcYNPwqUGLsfo0kXArRwB8z8.jpg"
[V0_FILE]png:file="public/creative-director-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/creative-director-headshot-oevPwVox1DmvAVgogH709WbrnCYt8o.png"
[V0_FILE]jpg:file="public/professional-headshot-designer-woman.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-designer-woman-YjUHmR26KP2sQ4NHiPR6t4gTlo8bIW.jpg"
[V0_FILE]jpg:file="public/professional-headshot-developer-man.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-developer-man-oi7p7ReW1MjWnd7rcxaJH5ohxcJuO7.jpg"
[V0_FILE]jpg:file="public/professional-headshot-strategist-woman.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-strategist-woman-5MfG12iPSarX2YWVnegZ72aa2T8OdY.jpg"</article></body></html>

About

Tags

Share

About

Tags

Share

More from mohammedzamakhan

More Templates Like This

About

Tags

Share

About

Tags

Share

More from mohammedzamakhan

More Templates Like This