Onlook designer Product mockup for the front-page

apps/web/client/src/app/_components/hero/index.tsx

@@ -7,6 +7,7 @@ import { Create } from './create';
 import { CreateError } from './create-error';
 import { UnicornBackground } from './unicorn-background';
 import { HighDemand } from './high-demand';
+import { Icons } from '@onlook/ui/icons';
 
 export function Hero() {
     const [cardKey, setCardKey] = useState(0);
@@ -15,6 +16,21 @@ export function Hero() {
         <div className="w-full h-full flex flex-col items-center justify-center gap-12 p-8 text-lg text-center relative">
             <UnicornBackground />
             <div className="flex flex-col gap-3 items-center relative z-20 pt-4 pb-2">
+                <motion.div 
+                    className="flex flex-col gap-3 items-center relative z-20 pt-4 pb-2 mb-6"
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 1.2, ease: "easeOut" }}
+                >
+                    <a 
+                        href="https://www.ycombinator.com/companies/onlook/jobs/e4gHv1n-founding-engineer-fullstack" target="_blank" 
+                        className="inline-flex items-center gap-2 px-3 py-1.5 hover:bg-foreground-secondary/20 backdrop-blur-sm border border-foreground-secondary/20 rounded-full text-xs text-foreground-secondary transition-all duration-200 hover:scale-102"
+                    >
+                        We're hiring engineers
+                        <Icons.ArrowRight className="w-4 h-4" />
+                    </a>
+
+                </motion.div>
                 <motion.h1
                     className="text-6xl font-light leading-tight text-center !leading-[0.9]"
                     initial={{ opacity: 0, filter: "blur(4px)" }}
@@ -61,9 +77,14 @@ export function Hero() {
                     No Credit Card Required &bull; Get a Site in Seconds
                 </motion.div>
             </div>
-            <div className="sm:hidden text-balance flex flex-col gap-4 items-center relative z-20 px-10">
+            <motion.div className="sm:hidden text-balance flex flex-col gap-4 items-center relative z-20 px-10 text-foreground-secondary bg-foreground-secondary/10 backdrop-blur-lg rounded-lg border-[0.5px] border-foreground-secondary/20 p-4"
+                initial={{ opacity: 0, filter: "blur(4px)" }}
+                animate={{ opacity: 1, filter: "blur(0px)" }}
+                transition={{ duration: 0.6, delay: 0.6, ease: "easeOut" }}
+                style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
+            >
                 Onlook isn't ready for Mobile – Please open on a larger screen
-            </div>
+            </motion.div>
         </div>
     );
 }

apps/web/client/src/app/_components/landing-page/contributor-section.tsx

@@ -172,13 +172,13 @@ export function ContributorSection({
     }, [contributorCount]);
 
     return (
-        <div className="relative w-full flex items-center justify-center py-32 mt-8 overflow-hidden">
+        <div className="relative w-full flex items-center justify-center py-32 mt-8 overflow-hidden px-4">
             {/* Main Contributors Content */}
             <div className="w-full max-w-6xl mx-auto relative z-10 flex flex-col items-center justify-center bg-background-onlook rounded-3xl px-12 py-32 shadow-xl overflow-hidden md:[--md-scale:1] [--md-scale:0]" style={{ minWidth: 420 }}>
                 {/* Floating Circles: two concentric rings */}
                 <FloatingRings />
                 <h2 className="text-foreground-primary text-3xl md:text-4xl font-light text-center mb-2">
-                    Supported by You &<br />
+                    Supported by you &<br />
                     {isLoading ? '...' : starCount} other builders
                 </h2>
                 <p className="text-foreground-secondary text-regular text-center mb-8 max-w-xl">Join the community building <br /> the open source prompt-to-build app</p>

apps/web/client/src/app/_components/landing-page/design-mockup/design-mockup-icons.tsx

@@ -0,0 +1,99 @@
+import { cn } from '@onlook/ui/utils';
+
+export interface IconProps {
+    className?: string;
+    [key: string]: any;
+}
+
+export const DesignMockupIcons = {
+    Add: ({ className, ...props }: IconProps) => (
+        <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g clip-path="url(#clip0_9157_282219)">
+            <path d="M12 9V14.9998" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
+            <path d="M15 12.0002L9 12" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
+            <path d="M20 20V4H4V20H20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </g>
+            <defs>
+            <clipPath id="clip0_9157_282219">
+            <rect width="24" height="24" fill="currentColor"/>
+            </clipPath>
+            </defs>
+        </svg>
+    ),
+    CrossL: ({ className, ...props }: IconProps) => (
+        <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    ),
+    Explore: ({ className, ...props }: IconProps) => (
+        <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g clip-path="url(#clip0_9157_282181)">
+            <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
+            <path d="M14.8287 9.17188L10.0003 10.0003L9.17188 14.8287L14.0003 14.0003L14.8287 9.17188Z" stroke="currentColor" stroke-width="2"/>
+            </g>
+            <defs>
+            <clipPath id="clip0_9157_282181">
+            <rect width="24" height="24" fill="none" />
+            </clipPath>
+            </defs>
+        </svg>
+    ),
+    Gear: ({ className, ...props }: IconProps) => (
+        <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g clip-path="url(#clip0_9157_282242)">
+            <path d="M9.3 5.7L6.375 5.025L5.025 6.375L5.7 9.3L3 11.1V12.9L5.7 14.7L5.025 17.625L6.375 18.975L9.3 18.3L11.1 21H12.9L14.7 18.3L17.625 18.975L18.975 17.625L18.3 14.7L21 12.9V11.1L18.3 9.3L18.975 6.375L17.625 5.025L14.7 5.7L12.9 3H11.1L9.3 5.7Z" stroke="currentColor" stroke-width="2"/>
+            <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2"/>
+            </g>
+            <defs>
+            <clipPath id="clip0_9157_282242">
+            <rect width="24" height="24" fill="none"/>
+            </clipPath>
+            </defs>
+        </svg>
+
+    ),
+    Home: ({ className, ...props }: IconProps) => (
+        <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g clip-path="url(#clip0_9157_282227)">
+            <path d="M4 9L12 2.5L20 9V20H4V9Z" stroke="currentColor" stroke-width="2"/>
+            <path d="M9 13H15V20H9V13Z" stroke="currentColor" stroke-width="2"/>
+            </g>
+            <defs>
+            <clipPath id="clip0_9157_282227">
+            <rect width="24" height="24" fill="currentColor"/>
+            </clipPath>
+            </defs>
+        </svg>
+
+    ),
+    Messages: ({ className, ...props }: IconProps) => (
+        <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g clip-path="url(#clip0_9157_282235)">
+            <path d="M20.0001 4H4V21.5L8 19H20.0001V4Z" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
+            <path d="M8 10.625C8.48325 10.625 8.875 11.0168 8.875 11.5C8.875 11.9832 8.48325 12.375 8 12.375C7.51675 12.375 7.125 11.9832 7.125 11.5C7.125 11.0168 7.51675 10.625 8 10.625ZM12 10.625C12.4832 10.625 12.875 11.0168 12.875 11.5C12.875 11.9832 12.4832 12.375 12 12.375C11.5168 12.375 11.125 11.9832 11.125 11.5C11.125 11.0168 11.5168 10.625 12 10.625ZM16 10.625C16.4832 10.625 16.875 11.0168 16.875 11.5C16.875 11.9832 16.4832 12.375 16 12.375C15.5168 12.375 15.125 11.9832 15.125 11.5C15.125 11.0168 15.5168 10.625 16 10.625Z" fill="currentColor" stroke="currentColor"  stroke-width="0.75" stroke-linecap="square"/>
+            </g>
+            <defs>
+            <clipPath id="clip0_9157_282235">
+            <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+            </defs>
+        </svg>
+
+    ),
+    Notifications: ({ className, ...props }: IconProps) => (
+        <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g clip-path="url(#clip0_9157_282249)">
+            <path d="M20 17H4V16L5.5 13L5.70037 8.99251C5.86822 5.63561 8.6389 3 12 3C15.3611 3 18.1318 5.63561 18.2996 8.99251L18.5 13L20 16V17Z" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
+            <path d="M8.03125 17.5C8.2773 19.4732 9.9605 21 12.0003 21C14.0401 21 15.7233 19.4732 15.9694 17.5" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
+            </g>
+            <defs>
+            <clipPath id="clip0_9157_282249">
+            <rect width="24" height="24" fill="none" />
+            </clipPath>
+            </defs>
+        </svg>
+
+    ),
+
+} satisfies { [key: string]: React.FC<IconProps> };