StyxFlow · jonayeds · Dec 28, 2025 · Dec 28, 2025
diff --git a/.vercelignore b/.vercelignore
@@ -0,0 +1,18 @@
+node_modules
+.next
+.git
+*.log
+.env
+.env*.local
+apps/*/.env
+packages/*/.env
+.turbo
+coverage
+.DS_Store
+Dockerfile*
+docker-compose*.yml
+apps/api/
+apps/web/recordings/
+apps/web/uploads/
+apps/web/.next
+apps/**/node_modules
diff --git a/apps/api/src/app/middlewares/validateUser.ts b/apps/api/src/app/middlewares/validateUser.ts
@@ -10,7 +10,6 @@ export const validateUser = (...roles: TUserRole[]) => {
   return async (req: ICustomRequest, res: Response, next: NextFunction) => {
     try {
       const token = req.headers.authorization;
-
       if (!token) {
         return res.status(401).json({
           success: false,
@@ -26,7 +25,6 @@ export const validateUser = (...roles: TUserRole[]) => {
       const session = await auth.api.getSession({
         headers: modifiedHeaders as any,
       });
-
       if (!session?.user) {
         return res.status(401).json({
           success: false,

diff --git a/apps/api/src/config/index.ts b/apps/api/src/config/index.ts
@@ -15,7 +15,10 @@ export default {
       : process.env.SERVER_URL,
   port: process.env.PORT,
   database_url: process.env.DATABASE_URL,
-  better_token_key: process.env.BETTER_AUTH_TOKEN_KEY,
+  better_token_key:
+    process.env.NODE_ENV === "production"
+      ? process.env.BETTER_AUTH_TOKEN_KEY_PROD
+      : process.env.BETTER_AUTH_TOKEN_KEY_DEV,
   // cloudinary: {
   //   api_key: process.env.CLOUDINARY_API_KEY,
   //   api_secret: process.env.CLOUDINARY_API_SECRET,

diff --git a/apps/web/app/attempt-interview/page.tsx b/apps/web/app/attempt-interview/page.tsx
@@ -5,7 +5,9 @@ import { getMyInterviews } from "@/services/interview";
 import { RiVoiceAiLine } from "react-icons/ri";
 
 const AttemtInterviewPage = async () => {
-  const { data } = await getMyInterviews();
+  const res = await getMyInterviews();
+  console.log(res);
+  const { data } = res;
   if (!data) {
     return <FetchFailed />;
   }

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -7,6 +7,7 @@
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-body: var(--font-body), ui-sans-serif, system-ui, sans-serif;
+  --font-mark: var(--font-mark), ui-sans-serif, system-ui, sans-serif;
   --font-heading: var(--font-heading), ui-sans-serif, system-ui, sans-serif;
   --font-logo: var(--font-logo), ui-sans-serif, system-ui, sans-serif;
   --font-mono: var(--font-geist-mono);
@@ -47,6 +48,13 @@
   --color-main: #4a7199;
 }
 
+body {
+  /* Standard fix for macOS/iOS */
+  -webkit-font-smoothing: antialiased;
+  /* Standard fix for Firefox */
+  -moz-osx-font-smoothing: grayscale;
+}
+
 :root {
   --radius: 0.625rem;
   --card: oklch(1 0 0);
@@ -124,3 +132,9 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  .font-mark {
+    font-family: var(--font-mark), cursive;
+  }
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,22 +1,27 @@
 import "./globals.css";
 import Navbar from "@/components/shared/Navbar";
-import { qurova, runtime, outfit } from "@/lib/fonts";
-import { Poiret_One } from 'next/font/google'
+import { qurova, runtime, outfit, markScript as mScript } from "@/lib/fonts";
+import { Poiret_One, Marck_Script } from "next/font/google";
 
 const poiretOne = Poiret_One({
-  weight: ['400'],
-  variable: '--font-body',
-})
+  weight: ["400"],
+  variable: "--font-body",
+});
+
+const markScript = Marck_Script({
+  weight: ["400"],
+  variable: "--font-mark",
+});
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">  
+    <html lang="en">
       <body
-        className={`${qurova.variable} ${runtime.variable} ${outfit.variable} ${poiretOne.variable} antialiased`}
+        className={`${qurova.variable} ${runtime.variable} ${outfit.variable}  ${markScript.variable} ${poiretOne.variable} ${mScript.variable} antialiased`}
       >
         <Navbar />
         <main className="font-body font-bold">{children}</main>

diff --git a/apps/web/components/home/CTASection.tsx b/apps/web/components/home/CTASection.tsx
@@ -34,10 +34,11 @@ export default function CTASection() {
         className="container mx-auto max-w-5xl bg-main rounded-[3rem] p-12 md:p-24 text-center text-white relative overflow-hidden"
       >
         <div className="absolute top-0 left-0 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay"></div>
-        
+
         <div className="relative z-10">
           <h2 className="text-4xl md:text-6xl font-bold font-heading mb-8">
-            Ready to Transform Your Hiring?
+            Ready to Transform Your
+            <span className="font-mark font-light"> Hiring?</span>
           </h2>
           <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-body">
             Join thousands of companies and candidates using StyxFlow today.

diff --git a/apps/web/components/home/FeaturesSection.tsx b/apps/web/components/home/FeaturesSection.tsx
@@ -154,7 +154,8 @@ export default function FeaturesSection() {
       <div className="container mx-auto px-6 py-12  min-h-screen bg-main flex flex-col justify-center items-center">
         <div className="text-center mb-20 feature-title">
           <h2 className="text-4xl md:text-5xl font-bold tracking-tighter text-cream mb-6 font-heading">
-            Why Choose StyxFlow?
+            <span className="font-mark font-extralight">Why </span>
+            Choose StyxFlow?
           </h2>
           <p className="text-xl max-w-2xl mx-auto font-body text-white/50">
             Streamline your hiring process with cutting-edge AI technology
@@ -174,7 +175,7 @@ export default function FeaturesSection() {
               <div className="mb-6 p-4 rounded-2xl bg-white inline-block shadow-sm group-hover:scale-110 transition-transform duration-300">
                 {feature.icon}
               </div>
-              <h3 className="text-xl font-bold text-main mb-4 font-heading">
+              <h3 className="text-xl  font-bold text-main mb-4 font-heading">
                 {feature.title}
               </h3>
               <p className="text-gray-600/80 leading-relaxed font-body">

diff --git a/apps/web/components/home/Footer.tsx b/apps/web/components/home/Footer.tsx
@@ -3,34 +3,79 @@ import { FaTwitter, FaLinkedin, FaGithub } from "react-icons/fa";
 
 export default function Footer() {
   return (
-    <footer className="bg-[#F9F8F4] py-20 border-t border-gray-200">
+    <footer className="bg-[#F9F8F4] md:py-20 py-10 border-t border-gray-200">
       <div className="container mx-auto px-6">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
-          <div className="col-span-1 md:col-span-2">
-            <Link href="/" className="text-2xl font-bold tracking-tighter text-gray-900 mb-6 block">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-12 mb-16">
+          <div className="col-span-2 ">
+            <Link
+              href="/"
+              className="text-2xl font-bold tracking-tighter text-gray-900 mb-6 block"
+            >
               StyxFlow
             </Link>
             <p className="text-gray-600 max-w-md text-lg leading-relaxed">
-              The AI-powered job portal that revolutionizes hiring. 
-              Smart matching, automated interviews, and instant results.
+              The AI-powered job portal that revolutionizes hiring. Smart
+              matching, automated interviews, and instant results.
             </p>
           </div>
-          
+
           <div>
             <h4 className="font-semibold text-gray-900 mb-6">Platform</h4>
             <ul className="space-y-4">
-              <li><Link href="#" className="text-gray-600 hover:text-main transition-colors">For Candidates</Link></li>
-              <li><Link href="#" className="text-gray-600 hover:text-main transition-colors">For Employers</Link></li>
-              <li><Link href="#" className="text-gray-600 hover:text-main transition-colors">Pricing</Link></li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-gray-600 hover:text-main transition-colors"
+                >
+                  For Candidates
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-gray-600 hover:text-main transition-colors"
+                >
+                  For Employers
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-gray-600 hover:text-main transition-colors"
+                >
+                  Pricing
+                </Link>
+              </li>
             </ul>
           </div>
 
           <div>
             <h4 className="font-semibold text-gray-900 mb-6">Company</h4>
             <ul className="space-y-4">
-              <li><Link href="#" className="text-gray-600 hover:text-mainsition-colors">About</Link></li>
-              <li><Link href="#" className="text-gray-600 hover:text-main transition-colors">Blog</Link></li>
-              <li><Link href="#" className="text-gray-600 hover:text-main transition-colors">Contact</Link></li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-gray-600 hover:text-mainsition-colors"
+                >
+                  About
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-gray-600 hover:text-main transition-colors"
+                >
+                  Blog
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-gray-600 hover:text-main transition-colors"
+                >
+                  Contact
+                </Link>
+              </li>
             </ul>
           </div>
         </div>
@@ -40,9 +85,25 @@ export default function Footer() {
             © {new Date().getFullYear()} StyxFlow. All rights reserved.
           </p>
           <div className="flex gap-6">
-            <Link href="#" className="text-gray-400 hover:text-main transition-colors text-xl"><FaTwitter /></Link>
-            <Link href="#" className="text-gray-400 hover:text-main transition-colors text-xl"><FaLinkedin /></Link>
-            <Link href="#" className="text-gray-400 hover:text-main transition-colors text-xl"><FaGithub /></Link>
+            <Link
+              href="#"
+              className="text-gray-400 hover:text-main transition-colors text-xl"
+            >
+              <FaTwitter />
+            </Link>
+            <Link
+              href="#"
+              className="text-gray-400 hover:text-main transition-colors text-xl"
+            >
+              <FaLinkedin />
+            </Link>
+            <a
+              href="https://github.com/StyxFlow"
+              target="_blank"
+              className="text-gray-400 hover:text-main transition-colors text-xl"
+            >
+              <FaGithub />
+            </a>
           </div>
         </div>
       </div>

diff --git a/apps/web/components/home/HeroSection.tsx b/apps/web/components/home/HeroSection.tsx
@@ -16,14 +16,15 @@ export default function HeroSection() {
   useEffect(() => {
     const ctx = gsap.context(() => {
       // Initial reveal animation
-      gsap.from(textRef.current!.children, {
-        y: 50,
-        opacity: 0,
-        duration: 1,
-        stagger: 0.2,
-        ease: "power3.out",
-      });
-
+      if (window.innerWidth > 768) {
+        gsap.from(textRef.current!.children, {
+          y: 50,
+          opacity: 0,
+          duration: 1,
+          stagger: 0.2,
+          ease: "power3.out",
+        });
+      }
       // Morphing blob animation (continuous)
       gsap.to(blobRef.current, {
         borderRadius: "30% 70% 70% 30% / 30% 30% 70% 70%",
@@ -47,16 +48,16 @@ export default function HeroSection() {
       });
 
       // Grid Zoom Animation
-      gsap.to(gridRef.current, {
-        scale: 1.5,
-        ease: "none",
-        scrollTrigger: {
-          trigger: containerRef.current,
-          start: "top top",
-          end: "bottom top",
-          scrub: true,
-        },
-      });
+      // gsap.to(gridRef.current, {
+      //   scale: 1.5,
+      //   ease: "none",
+      //   scrollTrigger: {
+      //     trigger: containerRef.current,
+      //     start: "top top",
+      //     end: "bottom top",
+      //     scrub: true,
+      //   },
+      // });
     }, containerRef);
 
     return () => ctx.revert();
@@ -69,12 +70,12 @@ export default function HeroSection() {
     >
       {/* Subtle Background */}
       <div className="absolute inset-0 z-0">
-        <div 
+        <div
           ref={gridRef}
           className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-cream/80 bg-size-[24px_24px] origin-center"
         ></div>
         <div className="absolute left-0 right-0 top-0  m-auto h-[310px] w-[310px] rounded-full bg-main opacity-70 blur-[80px]"></div>
-        <div 
+        <div
           ref={blobRef}
           className="absolute right-0 top-1/2 -translate-y-1/2 w-160 h-160 bg-linear-to-br from-main/90 to-main/5 blur-3xl rounded-[60%_40%_30%_70%/60%_30%_70%_40%]"
         />
@@ -85,17 +86,19 @@ export default function HeroSection() {
           <div className="inline-block mb-6 px-4 py-1.5 rounded-full border border-gray-200 bg-white/50 backdrop-blur-sm text-sm font-medium text-gray-600">
             Reimagining Recruitment with AI
           </div>
-          
+
           <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tighter text-gray-900 mb-8 leading-[1.1] font-heading">
-            Find the perfect match <br />
-            <span className="text-main">in seconds.</span>
+            Your AI Recruiter <br />
+            <span className="text-main">
+              Never <span className="font-mark font-extralight">Sleeps.</span>
+            </span>
           </h1>
-          
+
           <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed font-body">
-            The AI-powered job portal that interviews candidates for you. 
-            Save time, reduce bias, and hire the best talent effortlessly.
+            The AI-powered job portal that interviews candidates for you. Save
+            time, reduce bias, and hire the best talent effortlessly.
           </p>
-          
+
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
             <Link
               href="/auth/register"