fix isPro + landing page

app/(public)/page.tsx

@@ -2,6 +2,7 @@ import { AnimatedDotsBackground } from "@/components/public/animated-dots-backgr
 import { HeroHeader } from "@/components/public/hero-header";
 import { UserProjects } from "@/components/projects/user-projects";
 import { AskAiLanding } from "@/components/ask-ai/ask-ai-landing";
+import { Bento } from "@/components/public/bento";
 
 export default async function Homepage() {
   return (
@@ -16,6 +17,7 @@ export default async function Homepage() {
         </div>
       </section>
       <UserProjects />
+      <Bento />
     </>
   );
 }

app/layout.tsx

@@ -49,6 +49,8 @@ export const viewport: Viewport = {
   themeColor: "#4f46e5",
 };
 
+// todo: if user isPro, show in the pro modal a different message (tell him to add credits)
+
 export default async function RootLayout({
   children,
 }: Readonly<{

components/public/bento.tsx

@@ -0,0 +1,139 @@
+export const Bento = () => {
+  return (
+    <section id="features" className="min-h-screen py-20 px-6 relative">
+      <header className="text-center mb-16">
+        <div className="w-fit mb-2 text-[11px] mx-auto uppercase text-muted-foreground/70 font-semibold tracking-widest">
+          Powerful Features 🚀
+        </div>
+        <h2 className="mb-3 text-balance text-3xl font-bold tracking-tight lg:text-5xl">
+          Everything you need
+        </h2>
+        <p className="text-muted-foreground mx-auto max-w-2xl md:text-lg lg:text-xl text-balance">
+          Build, deploy, and scale your websites with cutting-edge features
+        </p>
+      </header>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
+        <div className="max-md:col-span-1 max-lg:col-span-2 lg:row-span-2 relative p-8 rounded-2xl border border-border/80 shadow-2xs bg-linear-to-b from-background to-background/50 bg-card overflow-hidden group hover:border-border/20 transition-all duration-300">
+          <div className="relative z-10">
+            <div className="text-3xl lg:text-4xl mb-4">📄</div>
+            <h3 className="text-2xl lg:text-3xl font-bold text-primary mb-3">
+              Multi Pages
+            </h3>
+            <p className="text-muted-foreground lg:text-lg mb-6">
+              Create complex websites with multiple interconnected pages. Build
+              everything from simple landing pages to full-featured web
+              applications with dynamic routing and navigation.
+            </p>
+            <div className="flex flex-wrap gap-2">
+              <span className="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm">
+                Dynamic Routing
+              </span>
+              <span className="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm">
+                Navigation
+              </span>
+              <span className="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-sm">
+                SEO Ready
+              </span>
+            </div>
+          </div>
+          <div className="absolute -top-20 -right-20 w-40 h-40 bg-linear-to-r from-purple-500 to-pink-500 opacity-20 blur-3xl rounded-full transition-all duration-700 ease-out group-hover:scale-[4] group-hover:opacity-30" />
+        </div>
+
+        <div className="relative p-8 rounded-2xl border border-border/80 shadow-2xs bg-linear-to-b from-background to-background/50 bg-card overflow-hidden group hover:border-border/20 transition-all duration-300">
+          <div className="relative z-10">
+            <div className="text-3xl mb-4">⚡</div>
+            <h3 className="text-xl lg:text-2xl font-bold text-primary mb-3">
+              Auto Deploy
+            </h3>
+            <p className="text-muted-foreground mb-4">
+              Push your changes and watch them go live instantly. No complex
+              CI/CD setup required.
+            </p>
+          </div>
+          <div className="absolute -bottom-10 -right-10 w-32 h-32 bg-linear-to-r from-yellow-500 to-orange-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+        </div>
+
+        <div className="relative p-8 rounded-2xl border border-border/80 shadow-2xs bg-linear-to-b from-background to-background/50 bg-card overflow-hidden group hover:border-border/20 transition-all duration-300">
+          <div className="relative z-10">
+            <div className="text-3xl mb-4">🌐</div>
+            <h3 className="text-xl lg:text-2xl font-bold text-primary mb-3">
+              Free Hosting
+            </h3>
+            <p className="text-muted-foreground mb-4">
+              Host your websites for free with global CDN and lightning-fast
+              performance.
+            </p>
+          </div>
+          <div className="absolute -top-10 -left-10 w-32 h-32 bg-linear-to-r from-green-500 to-emerald-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+        </div>
+
+        <div className="lg:col-span-2 relative p-8 rounded-2xl border border-border/80 shadow-2xs bg-linear-to-b from-background to-background/50 bg-card overflow-hidden group hover:border-border/20 transition-all duration-300">
+          <div className="relative z-10">
+            <div className="text-3xl mb-4">🔓</div>
+            <h3 className="text-xl lg:text-2xl font-bold text-primary mb-3">
+              Open Source Models
+            </h3>
+            <p className="text-muted-foreground mb-4">
+              Powered by cutting-edge open source AI models. Transparent,
+              customizable, and community-driven development.
+            </p>
+            <div className="flex flex-wrap gap-2">
+              <span className="px-3 py-1 bg-cyan-500/20 text-cyan-300 rounded-full text-sm">
+                DeepSeek
+              </span>
+              <span className="px-3 py-1 bg-indigo-500/20 text-indigo-300 rounded-full text-sm">
+                MiniMax
+              </span>
+              <span className="px-3 py-1 bg-pink-500/20 text-pink-300 rounded-full text-sm">
+                Kimi
+              </span>
+            </div>
+          </div>
+          <div className="absolute -bottom-10 right-10 w-32 h-32 bg-linear-to-r from-cyan-500 to-indigo-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+        </div>
+
+        <div className="relative p-8 rounded-2xl border border-border/80 shadow-2xs bg-linear-to-b from-background to-background/50 bg-card overflow-hidden group hover:border-border/20 transition-all duration-300">
+          <div className="relative z-10">
+            <div className="text-3xl mb-4">✨</div>
+            <h3 className="text-xl lg:text-2xl font-bold text-primary mb-3">
+              Perfect UX
+            </h3>
+            <p className="text-muted-foreground mb-4">
+              Intuitive interface designed for developers and non-developers
+              alike.
+            </p>
+          </div>
+          <div className="absolute -top-10 -right-10 w-32 h-32 bg-linear-to-r from-rose-500 to-pink-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+        </div>
+
+        <div className="relative p-8 rounded-2xl border border-border/80 shadow-2xs bg-linear-to-b from-background to-background/50 bg-card overflow-hidden group hover:border-border/20 transition-all duration-300">
+          <div className="relative z-10">
+            <div className="text-3xl mb-4">🤗</div>
+            <h3 className="text-xl lg:text-2xl font-bold text-primary mb-3">
+              Hugging Face
+            </h3>
+            <p className="text-muted-foreground mb-4">
+              Seamless integration with Hugging Face models and datasets for
+              cutting-edge AI capabilities.
+            </p>
+          </div>
+          <div className="absolute -top-10 -right-10 w-32 h-32 bg-linear-to-r from-yellow-500 to-amber-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+        </div>
+
+        <div className="relative p-8 rounded-2xl border border-border/80 shadow-2xs bg-linear-to-b from-background to-background/50 bg-card overflow-hidden group hover:border-border/20 transition-all duration-300">
+          <div className="relative z-10">
+            <div className="text-3xl mb-4">🚀</div>
+            <h3 className="text-xl lg:text-2xl font-bold text-primary mb-3">
+              Blazing Fast
+            </h3>
+            <p className="text-muted-foreground mb-4">
+              Optimized performance with edge computing and smart caching.
+            </p>
+          </div>
+          <div className="absolute -bottom-10 -right-10 w-32 h-32 bg-linear-to-r from-blue-500 to-cyan-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+        </div>
+      </div>
+    </section>
+  );
+};

components/public/hero-header.tsx

@@ -16,7 +16,7 @@ export function HeroHeader() {
     <header className="mx-auto flex max-w-5xl flex-col items-center gap-3 text-center px-6 py-12 z-1">
       <div
         data-slot="badge"
-        className="rounded-full border border-indigo-500/10 px-2 py-0.5 text-xs font-medium w-fit bg-linear-to-br from-indigo-500/10 to-purple-300/20 text-indigo-500"
+        className="rounded-full border border-indigo-500/10 px-2 pl-2.5 py-0.5 text-xs font-medium w-fit bg-linear-to-br from-indigo-500/10 to-purple-300/20 text-indigo-500"
       >
         DeepSite: v4 is here 🎉
       </div>

lib/auth.ts

@@ -16,17 +16,27 @@ export const authOptions: NextAuthOptions = {
           scope: "openid profile read-repos manage-repos inference-api",
         },
       },
-      token: "https://huggingface.co/oauth/token",
-      userinfo: "https://huggingface.co/oauth/userinfo",
+      userinfo: {
+        url: "https://huggingface.co/oauth/userinfo",
+        async request(context) {
+          const { tokens } = context;
+          const response = await fetch("https://huggingface.co/oauth/userinfo", {
+            headers: {
+              Authorization: `Bearer ${tokens.access_token}`,
+            },
+          });
+          const data = await response.json();
+          return data;
+        }
+      },
       checks: ["state"],
-      profile(profile) {
+      async profile(profile) {
         return {
           id: profile.sub,
           name: profile.name || profile.preferred_username,
           username: profile.preferred_username,
-          email: profile.email,
           image: profile.picture,
-          isPro: profile.isPro || false,
+          isPro: profile.isPro
         };
       },
     },

package.json

@@ -31,6 +31,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "framer-motion": "^12.23.25",
+    "huggingface": "link:@auth/core/providers/huggingface",
     "i": "^0.3.7",
     "lucide-react": "^0.554.0",
     "monaco-editor": "^0.54.0",

pnpm-lock.yaml

@@ -74,6 +74,9 @@ importers:
       framer-motion:
         specifier: ^12.23.25
         version: 12.23.25(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      huggingface:
+        specifier: link:@auth/core/providers/huggingface
+        version: link:@auth/core/providers/huggingface
       i:
         specifier: ^0.3.7
         version: 0.3.7