Creative Portfolio

1import * as React from "react";
2import {
3  ArrowDownRight,
4  ArrowRight,
5  ArrowUpRight,
6  Asterisk,
7  Circle,
8  Plus,
9  Sparkles,
10} from "lucide-react";
11 
12import { ContactForm01 } from "@/components/blocks/contact-form-01";
13import { Footer01 } from "@/components/blocks/footer-01";
14import { ProfileCard01 } from "@/components/blocks/profile-card-01";
15import { SiteHeader01 } from "@/components/blocks/site-header-01";
16import { Badge } from "@/components/ui/badge";
17import { Button } from "@/components/ui/button";
18import { cn } from "@/lib/utils";
19 
20const projects = [
21  {
22    number: "01",
23    title: "Morrow Health",
24    type: "Brand system · Product",
25    tone: "from-violet-500/35 via-fuchsia-400/15 to-transparent",
26    shape: "rounded-full",
27  },
28  {
29    number: "02",
30    title: "Field Notes",
31    type: "Editorial · Commerce",
32    tone: "from-amber-400/35 via-orange-400/15 to-transparent",
33    shape: "rounded-[2rem] rotate-12",
34  },
35  {
36    number: "03",
37    title: "Common Ground",
38    type: "Strategy · Digital",
39    tone: "from-cyan-400/30 via-blue-500/15 to-transparent",
40    shape: "rounded-full scale-x-150",
41  },
42];
43 
44function CreativePortfolio01({
45  className,
46  ...props
47}: React.ComponentProps<"div">) {
48  return (
49    <div
50      className={cn("min-h-screen bg-background text-foreground", className)}
51      data-slot="creative-portfolio-template"
52      {...props}
53    >
54      <SiteHeader01
55        brand="Atelier 17"
56        ctaHref="#contact"
57        ctaLabel="Start a project"
58        links={[
59          { label: "Work", href: "#work" },
60          { label: "Services", href: "#services" },
61          { label: "About", href: "#about" },
62          { label: "Contact", href: "#contact" },
63        ]}
64        profileEmail="hello@atelier17.studio"
65        profileName="Avery Lane"
66      />
67      <main>
68        <section
69          className="relative overflow-hidden px-5 pb-20 pt-20 sm:px-8 sm:pb-28 sm:pt-28"
70          id="top"
71        >
72          <div className="absolute right-[-10%] top-[-20%] -z-10 size-[560px] rounded-full bg-primary/12 blur-[110px]" />
73          <div className="mx-auto max-w-7xl">
74            <div className="grid gap-12 lg:grid-cols-[1.35fr_.65fr] lg:items-end">
75              <div>
76                <p className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[.16em] text-muted-foreground">
77                  <Asterisk className="size-4 text-primary" /> Independent
78                  creative practice
79                </p>
80// … truncated