new login

src/app/(auth)/layout.tsx

@@ -0,0 +1,42 @@
+import { ClerkProvider } from '@clerk/nextjs';
+import { setRequestLocale } from 'next-intl/server';
+export default async function AuthLayout(props: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await props.params;
+  setRequestLocale(locale);
+  let signInUrl = '/sign-in';
+  let signUpUrl = '/sign-up';
+  let dashboardUrl = '/dashboard';
+  let afterSignOutUrl = '/';
+  signInUrl = `/${signInUrl}`;
+  signUpUrl = `/${signUpUrl}`;
+  dashboardUrl = `/`;
+  afterSignOutUrl = `/${afterSignOutUrl}`;
+  return (
+    <ClerkProvider
+      localization={{
+        signIn: {
+          start: {
+            title: 'Sign In',
+          },
+        },
+        signUp: {
+          start: {
+            title: 'Sign Up',
+          },
+        },
+      }}
+      signInUrl={signInUrl}
+      signUpUrl={signUpUrl}
+      signInFallbackRedirectUrl={dashboardUrl}
+      signUpFallbackRedirectUrl={dashboardUrl}
+      afterSignOutUrl={afterSignOutUrl}
+    >
+      <div className="mx-auto flex w-full items-center justify-center pt-32">
+        {props.children}
+      </div>
+    </ClerkProvider>
+  );
+}

src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,12 @@
+import { SignIn } from '@clerk/nextjs';
+type ISignInPageProps = {
+  params: Promise<{ locale: string }>;
+};
+export default async function SignInPage(_props: ISignInPageProps) {
+  return (
+    <SignIn
+      path="/sign-in"
+      signUpUrl="/sign-up"
+    />
+  );
+};

src/components/atoms/Card/index.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+
+const Card = ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.RefObject<HTMLDivElement> }) => (
+  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
+);
+Card.displayName = 'Card';
+
+const CardHeader = ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref: React.RefObject<HTMLDivElement> }) => (
+  <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = ({ ref, className, ...props }: React.HTMLAttributes<HTMLHeadingElement> & { ref: React.RefObject<HTMLParagraphElement> }) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = ({ ref, className, ...props }: React.HTMLAttributes<HTMLParagraphElement> & { ref: React.RefObject<HTMLParagraphElement> }) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.RefObject<HTMLDivElement> }) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />;
+CardContent.displayName = 'CardContent';
+
+const CardFooter = ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref: React.RefObject<HTMLDivElement> }) => (
+  <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

src/components/homepage/AnnouncementBanner.tsx

@@ -0,0 +1,56 @@
+import { Badge, Button } from '@/components/atoms';
+import { ChevronDown, Download } from 'lucide-react';
+import Image from 'next/image';
+
+export function AnnouncementBanner() {
+  return (
+    <>
+      <div className="container flex flex-col items-center gap-4 text-center">
+        <Badge className="rounded-lg" variant="secondary">
+          NEW
+          {' '}
+          <span className="mx-1">+</span>
+          {' '}
+          v0.5.14 is now live on GitHub. Check it out!
+        </Badge>
+
+        <span className="text-4xl">❝</span>
+
+        <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
+          Chat with AI
+          <br />
+          without privacy concerns
+        </h1>
+
+        <p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+          Jan is an open source ChatGPT-alternative that runs 100% offline.
+        </p>
+
+        <div className="space-y-4">
+          <Button className="h-11 px-8" size="lg">
+            <Download className="mr-2 size-4" />
+            Download for Windows
+            <ChevronDown className="ml-2 size-4" />
+          </Button>
+          <p className="text-xs text-muted-foreground">
+            <span className="font-semibold text-yellow-500">2.5M+</span>
+            {' '}
+            downloads | Free & Open Source
+          </p>
+        </div>
+      </div>
+
+      <div className="container">
+        <div className="relative mx-auto aspect-video max-w-5xl overflow-hidden rounded-xl border bg-background shadow-xl">
+          <Image
+            src="https://sjc.microlink.io/-ax0tIqUfnMYpO1Y6sFNuRcGN_Oe6cQwpzrnQR5q5pzkpfA29UGKZ228lDnpeQCpNANORBcNBmQgFoOtLn18vw.jpeg"
+            alt="Jan AI Interface"
+            fill
+            className="object-cover"
+            priority
+          />
+        </div>
+      </div>
+    </>
+  );
+}

src/components/homepage/CustomizationSection.tsx

@@ -0,0 +1,57 @@
+import { Badge, Card } from '@/components/atoms';
+import Image from 'next/image';
+
+export function CustomizationSection() {
+  return (
+    <section className="container space-y-16 py-24">
+      <div className="space-y-4 text-center">
+        <h2 className="font-heading text-4xl md:text-5xl lg:text-6xl">Highly Customizable</h2>
+        <p className="text-xl text-muted-foreground">Customize Jan to match your needs and preferences.</p>
+      </div>
+
+      <div className="grid gap-8 md:grid-cols-2">
+        {/* Assistants & Memory Card */}
+        <Card className="space-y-4 p-6">
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <h3 className="text-2xl font-semibold">Assistants & Memory</h3>
+              <Badge variant="secondary" className="bg-blue-100 text-blue-700 hover:bg-blue-100">
+                Coming Soon
+              </Badge>
+            </div>
+            <p className="text-muted-foreground">
+              Create personalized AI assistants that remember your conversations and execute specific tasks across your
+              systems.
+            </p>
+          </div>
+
+          <Image
+            src="https://jan.ai/assets/images/homepage/assistant-light.png"
+            alt="App Screenshot Feature"
+            width={800}
+            height={800}
+            className="object-contain"
+          />
+        </Card>
+
+        {/* Extensions Card */}
+        <Card className="space-y-4 p-6">
+          <div className="space-y-2">
+            <h3 className="text-2xl font-semibold">Extensions</h3>
+            <p className="text-muted-foreground">
+              Customize Jan with Extensions, that range from Cloud AI connectors, tools, data connectors.
+            </p>
+          </div>
+
+          <Image
+            src="https://jan.ai/assets/images/homepage/extension-light.png"
+            alt="App Screenshot Feature"
+            width={800}
+            height={800}
+            className="object-contain"
+          />
+        </Card>
+      </div>
+    </section>
+  );
+}

src/components/homepage/FeatureSection.tsx

@@ -0,0 +1,73 @@
+import { Badge } from '@/components/atoms';
+import { Cloud, FileText, Grid, MessageCircle, Server } from 'lucide-react';
+import Image from 'next/image';
+
+const features = [
+  {
+    number: '01',
+    title: 'Chat with AI',
+    description: 'Ask your questions, brainstorm, and learn from the AI running on your device to be more productive.',
+    icon: MessageCircle,
+  },
+  {
+    number: '02',
+    title: 'Model Hub',
+    description: 'Access and manage various AI models directly from your device.',
+    icon: Grid,
+  },
+  {
+    number: '03',
+    title: 'Connect to Cloud AIs',
+    description: 'Seamlessly integrate with cloud-based AI services when needed.',
+    icon: Cloud,
+  },
+  {
+    number: '04',
+    title: 'Local API Server',
+    description: 'Run your own API server locally for complete control and privacy.',
+    icon: Server,
+  },
+  {
+    number: '05',
+    title: 'Chat with your files',
+    description: 'Interact with your documents and files using natural language.',
+    icon: FileText,
+    experimental: true,
+  },
+];
+
+export function FeaturesSection() {
+  return (
+    <section className="container space-y-16 py-24">
+      <h2 className="font-heading text-4xl md:text-5xl lg:text-6xl">Features</h2>
+
+      <div className="grid items-start gap-8 lg:grid-cols-2">
+        <div className="space-y-8">
+          {features.map(feature => (
+            <div key={feature.number} className="flex items-center gap-4">
+              <div className="font-heading text-3xl text-muted-foreground/50">{feature.number}</div>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-xl font-semibold">{feature.title}</h3>
+                  {feature.experimental && (
+                    <Badge variant="secondary" className="text-xs">
+                      Experimental
+                    </Badge>
+                  )}
+                </div>
+                <p className="text-muted-foreground">{feature.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <Image
+          src="https://jan.ai/assets/images/homepage/features01.png"
+          alt="App Screenshot Feature"
+          width={800}
+          height={800}
+        />
+      </div>
+    </section>
+  );
+}