Source Code
ray-ellipse-hero.tsx
1"use client";
2
3import { useState } from "react";
4import { ClaudeIcon } from "@/components/ui/icons/ClaudeIcon";
5import { FigmaIcon } from "@/components/ui/icons/FigmaIcon";
6import { GitHubIcon } from "@/components/ui/icons/GitHubIcon";
7import { OpenAIIcon } from "@/components/ui/icons/OpenAIIcon";
8
9export const RayEllipseHero = () => {
10 const [isDropdownOpen, setIsDropdownOpen] = useState(false);
11 const [selectedModel, setSelectedModel] = useState<"claude" | "openai">("claude");
12 return (
13 <main className="relative min-h-screen overflow-hidden bg-[#0f0f0f]">
14 {/* Ray Ellipse Background */}
15 <div className="absolute inset-0 w-full h-full overflow-hidden pointer-events-none select-none">
16 {/* Background Blur */}
17 <div
18 className="absolute left-1/2 -translate-x-1/2 w-[6000px] h-[2471px] opacity-100"
19 style={{
20 background:
21 "radial-gradient(circle at center 800px, rgba(16, 185, 129, 0.8) 0%, rgba(16, 185, 129, 0.35) 14%, rgba(16, 185, 129, 0.18) 18%, rgba(16, 185, 129, 0.08) 22%, rgba(0, 0, 0, 0.2) 25%)",
22 }}
23 />
24
25 {/* Ellipses Container */}
26 <div className="absolute top-[392px] left-1/2 -translate-x-1/2 w-[3000px] h-[3000px] rotate-180">
27 {/* Ellipse One */}
28 <div
29 className="absolute w-full h-full rounded-full rotate-180 -mt-[13px] z-[5]"
30 style={{
31 background:
32 "radial-gradient(43.89% 25.74% at 50.02% 97.24%, #141414 0%, #0f0f0f 100%)",
33 border: "16px solid #ffffff",
34 }}
35 />
36
37 {/* Ellipse Two */}
38 <div
39 className="absolute w-full h-full bg-[#0f0f0f] rounded-full rotate-180 -mt-[11px] z-[4]"
40 style={{
41 border: "23px solid #a7f3d0",
42 }}
43 />
44
45 {/* Ellipse Three */}
46 <div
47 className="absolute w-full h-full bg-[#0f0f0f] rounded-full rotate-180 -mt-[8px] z-[3]"
48 style={{
49 border: "23px solid #6ee7b7",
50 }}
51 />
52
53 {/* Ellipse Four */}
54 <div
55 className="absolute w-full h-full bg-[#0f0f0f] rounded-full rotate-180 -mt-[4px] z-[2]"
56 style={{
57 border: "23px solid #34d399",
58 }}
59 />
60
61 {/* Ellipse Five */}
62 <div
63 className="absolute w-full h-full bg-[#0f0f0f] rounded-full rotate-180 z-[1]"
64 style={{
65 border: "20px solid #10b981",
66 boxShadow: "0 -15px 24.8px rgba(16, 185, 129, 0.6)",
67 }}
68 />
69 </div>
70 </div>
71
72 {/* Hero Section */}
73 <div className="relative z-10 flex min-h-screen flex-col">
74 <div className="flex-1 flex items-center justify-center">
75 <div className="flex items-center justify-center min-h-screen w-full px-5 sm:px-20 -mt-32">
76 <div className="relative z-10 flex max-w-2xl flex-col items-center gap-8 text-center">
77 <h1 className="text-4xl font-bold leading-tight tracking-tight text-white md:text-6xl text-balance">
78 What should we build today?
79 </h1>
80 <p className="text-lg text-white/70 max-w-xl">
81 Create stunning apps & websites by chatting with AI.
82 </p>
83
84 {/* Input Area */}
85 <div className="w-full max-w-xl">
86 <div className="relative bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-4 shadow-2xl">
87 <div className="relative">
88 <textarea
89 placeholder="Type your idea and we'll build it together."
90 className="w-full bg-transparent text-white placeholder:text-white/40 resize-none outline-none min-h-[80px] text-base"
91 rows={3}
92 />
93 </div>
94
95 {/* Bottom Controls */}
96 <div className="flex items-center justify-between mt-4 pt-4 border-t border-[#2a2a2a]">
97 <div className="flex items-center gap-3">
98 <button className="flex items-center gap-2 text-white/60 hover:text-white transition-colors">
99 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
100 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
101 </svg>
102 </button>
103 <div className="relative">
104 <button
105 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
106 className="flex items-center gap-2 text-white/80 hover:text-white transition-colors text-sm"
107 >
108 {selectedModel === "claude" ? (
109 <>
110 <ClaudeIcon className="w-4 h-4 text-[#D97757]" />
111 <span>Claude Agent</span>
112 </>
113 ) : (
114 <>
115 <OpenAIIcon className="w-4 h-4 text-white/80" />
116 <span>Codex</span>
117 </>
118 )}
119 <svg
120 className={`w-3 h-3 transition-transform ${isDropdownOpen ? "rotate-180" : ""}`}
121 fill="none"
122 stroke="currentColor"
123 viewBox="0 0 24 24"
124 >
125 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
126 </svg>
127 </button>
128
129 {isDropdownOpen && (
130 <div className="absolute bottom-full left-0 mb-2 w-48 bg-[#2a2a2a] border border-[#3a3a3a] rounded-lg shadow-2xl overflow-hidden">
131 <button
132 onClick={() => {
133 setSelectedModel("claude");
134 setIsDropdownOpen(false);
135 }}
136 className="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/5 transition-colors text-left"
137 >
138 <ClaudeIcon className="w-5 h-5 text-[#D97757]" />
139 <div>
140 <div className="text-white text-sm font-medium">Claude Agent</div>
141 <div className="text-white/50 text-xs">Anthropic</div>
142 </div>
143 </button>
144 <button
145 onClick={() => {
146 setSelectedModel("openai");
147 setIsDropdownOpen(false);
148 }}
149 className="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/5 transition-colors text-left"
150 >
151 <OpenAIIcon className="w-5 h-5 text-white/80" />
152 <div>
153 <div className="text-white text-sm font-medium">Codex</div>
154 <div className="text-white/50 text-xs">OpenAI</div>
155 </div>
156 </button>
157 </div>
158 )}
159 </div>
160 </div>
161 <div className="flex items-center gap-3">
162 <button className="flex items-center gap-2 text-white/60 hover:text-white transition-colors text-sm">
163 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
164 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
165 </svg>
166 <span>Plan</span>
167 </button>
168 <button className="w-9 h-9 rounded-full bg-emerald-500 flex items-center justify-center hover:bg-emerald-600 transition-colors">
169 <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
170 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
171 </svg>
172 </button>
173 </div>
174 </div>
175 </div>
176
177 {/* Import Options */}
178 <div className="flex items-center justify-center gap-4 mt-6 text-sm">
179 <span className="text-white/50">or import from</span>
180 <button className="flex items-center gap-2 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-colors">
181 <FigmaIcon className="w-4 h-4" />
182 <span className="text-white/70">Figma</span>
183 </button>
184 <button className="flex items-center gap-2 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-colors">
185 <GitHubIcon className="w-4 h-4 text-white/70" />
186 <span className="text-white/70">GitHub</span>
187 </button>
188 </div>
189 </div>
190 </div>
191 </div>
192 </div>
193 </div>
194 </main>
195 );
196};
197ClaudeIcon.tsx
1import type { SVGProps } from "react";
2
3const ClaudeIcon = (props: SVGProps<SVGSVGElement>) => (
4 <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 257">
5 <path
6 fill="currentColor"
7 d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"
8 />
9 </svg>
10);
11
12export { ClaudeIcon };
13FigmaIcon.tsx
1import type { SVGProps } from "react";
2
3const FigmaIcon = (props: SVGProps<SVGSVGElement>) => (
4 <svg {...props} viewBox="0 0 38 57" fill="none">
5 <path
6 d="M19 28.5C19 23.2533 23.2533 19 28.5 19C33.7467 19 38 23.2533 38 28.5C38 33.7467 33.7467 38 28.5 38C23.2533 38 19 33.7467 19 28.5Z"
7 fill="#1ABCFE"
8 />
9 <path
10 d="M0 47.5C0 42.2533 4.25329 38 9.5 38H19V47.5C19 52.7467 14.7467 57 9.5 57C4.25329 57 0 52.7467 0 47.5Z"
11 fill="#0ACF83"
12 />
13 <path
14 d="M19 0V19H28.5C33.7467 19 38 14.7467 38 9.5C38 4.25329 33.7467 0 28.5 0H19Z"
15 fill="#FF7262"
16 />
17 <path
18 d="M0 9.5C0 14.7467 4.25329 19 9.5 19H19V0H9.5C4.25329 0 0 4.25329 0 9.5Z"
19 fill="#F24E1E"
20 />
21 <path
22 d="M0 28.5C0 33.7467 4.25329 38 9.5 38H19V19H9.5C4.25329 19 0 23.2533 0 28.5Z"
23 fill="#A259FF"
24 />
25 </svg>
26);
27
28export { FigmaIcon };
29GitHubIcon.tsx
1import type { SVGProps } from "react";
2
3const GitHubIcon = (props: SVGProps<SVGSVGElement>) => (
4 <svg {...props} viewBox="0 0 24 24" fill="currentColor">
5 <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
6 </svg>
7);
8
9export { GitHubIcon };
10OpenAIIcon.tsx
1import type { SVGProps } from "react";
2
3const OpenAIIcon = (props: SVGProps<SVGSVGElement>) => (
4 <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 260">
5 <path
6 fill="currentColor"
7 d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"
8 />
9 </svg>
10);
11
12export { OpenAIIcon };
13
