added sticker contest banner

next.config.js

@@ -0,0 +1,12 @@
+const { PHASE_EXPORT, PHASE_PRODUCTION_BUILD } = require("next/constants");
+
+module.exports = (phase, { defaultConfig }) => {
+  if (phase === PHASE_EXPORT || phase === PHASE_PRODUCTION_BUILD) {
+    return {
+      output: "export",
+      basePath: "/vanjs.github.io",
+    };
+  }
+
+  return {};
+};

src/app/globals.css

@@ -10,9 +10,9 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 40 82% 80%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
+    --secondary: 201, 66%, 8%;
     --secondary-foreground: 222.2 47.4% 11.2%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
@@ -71,4 +71,4 @@
 
 html {
   scroll-behavior: smooth;
-}
+}

src/app/page.js

@@ -10,11 +10,12 @@ import {
 } from "@/components/ui/card";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import Image from "next/image";
+import StickerBanner from "@/components/sticker-banner/sticker-banner";
 
 export default function Home() {
   return (
     <div className="flex flex-col min-h-dvh">
-      <header className="sticky top-0 z-50 w-full bg-background border-b bg-[#FEB92F]">
+      <header className="sticky top-0 z-50 w-full border-b bg-[#FEB92F]">
         <div className="container flex items-center justify-between h-16 px-4 md:px-6">
           <Link
             href="#"
@@ -69,14 +70,15 @@ export default function Home() {
               Contact
             </Link>
           </nav>
-          <Button asChild>
+          <Button asChild className="bg-secondary">
             <Link href="https://lu.ma/vanjs" target="blank" prefetch={false}>
               <CalendarIcon className="w-4 h-4 mr-2" />
               Attend
             </Link>
           </Button>
         </div>
       </header>
+      <StickerBanner />
       <main className="flex-1">
         <section id="hero" className="w-full pt-12 md:pt-24 lg:pt-32 bg-muted">
           <div className="container px-4 md:px-6 space-y-10 xl:space-y-16">
@@ -322,7 +324,7 @@ export default function Home() {
               <Card>
                 <CardHeader>
                   <Avatar>
-                    <AvatarImage src="/placeholder-user.jpg" />
+                    <AvatarImage src="" />
                     <AvatarFallback>JS</AvatarFallback>
                   </Avatar>
                   <div className="space-y-1">
@@ -359,7 +361,7 @@ export default function Home() {
               <Card>
                 <CardHeader>
                   <Avatar>
-                    <AvatarImage src="/placeholder-user.jpg" />
+                    <AvatarImage src="" />
                     <AvatarFallback>JD</AvatarFallback>
                   </Avatar>
                   <div className="space-y-1">
@@ -397,7 +399,7 @@ export default function Home() {
               <Card>
                 <CardHeader>
                   <Avatar>
-                    <AvatarImage src="/placeholder-user.jpg" />
+                    <AvatarImage src="" />
                     <AvatarFallback>JS</AvatarFallback>
                   </Avatar>
                   <div className="space-y-1">
@@ -491,22 +493,3 @@ function MapPinIcon(props) {
     </svg>
   );
 }
-
-function MountainIcon(props) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
-    </svg>
-  );
-}

src/components/sticker-banner/sticker-banner.jsx

@@ -0,0 +1,57 @@
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/k9zPjDjzsmz
+ * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
+ */
+import Image from "next/image";
+import Link from "next/link";
+
+export default function StickerBanner() {
+  return (
+    <section className="w-full container bg-white py-8 md:py-10 lg:py-16 relative overflow-hidden">
+      <Image
+        src="/sticker-1.png"
+        width={150}
+        height={150}
+        alt="Sticker 1"
+        className="absolute top-0 right-0 transform -rotate-12"
+      />
+      <Image
+        src="/sticker-2.png"
+        width={200}
+        height={200}
+        alt="Sticker 2"
+        className="absolute right-44 -bottom-5"
+      />
+      <Image
+        src="/sticker-3.png"
+        width={300}
+        height={300}
+        alt="Sticker 3"
+        className="absolute -top-6 transform rotate-12 hidden sm:block"
+      />
+
+      <div className="container px-4 md:px-6 z-20 relative">
+        <div className="mx-auto max-w-3xl space-y-4 text-center">
+          <h2 className="text-3xl w-fit m-auto font-bold tracking-tighter text-secondary sm:text-4xl md:text-5xl rounded-md bg-[#ffffff8c] shadow-[0_0_10px_#00000033] shadow-white">
+            Submit Your Sticker Idea!
+          </h2>
+          <p className="text-lg text-secondary md:text-xl rounded-md bg-[#ffffff8c] shadow-[0_0_10px_#00000033] shadow-white">
+            Enter our sticker contest for a chance to win a one month
+            subscription to Frontend Masters! Submit your entry by September
+            30th, 2024.
+          </p>
+
+          <Link
+            href="https://forms.gle/AaUHsmVZ9q7ZPKCj7"
+            target="_blank"
+            className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-secondary shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+            prefetch={false}
+          >
+            Submit Entry
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}