New Login page layout

app/guest/layout.tsx

@@ -1,49 +1,28 @@
 'use client'
 
 import React from 'react'
-import { Layout, Flex, Row, Col } from 'antd'
-import Header from '@/components/layout/Header'
-import Navigation from '@/components/layout/Navigation'
-import { usePathname } from 'next/navigation'
-
+import { Layout, Flex } from 'antd'
 
 const AppLayout = ({ children }: { children: React.ReactNode }) => {
-
-  const pathname = usePathname()
-
-  const skipLayoutPrefixes = [
-    '/user/chat/',
-    '/user/persona/create',
-    '/user/knowledge/create',
-    '/user/settings/profile',
-    '/user/payment',
-    '/user/payment'
-  ];
-
-  const shouldSkipLayout = skipLayoutPrefixes.some(prefix =>
-    pathname.startsWith(prefix)
-  );
-
-  if (shouldSkipLayout) {
-    return <>{children}</>;
-  }
-
   return (
-    <Layout className="!w-full !max-w-[430px] !mx-auto !relative !bg-white">
-      <Flex vertical className='!h-screen'>
-        <Row>
-          <Col span={24}>
-            <Header />
-          </Col>
-        </Row>
-
-        <Row className='flex-1 overflow-y-scroll overflow-x-hidden'>
-          <Col span={24}>{children}</Col>
-        </Row>
-
-        <div>
-          <Navigation />
-        </div>
+    <Layout className="!w-full !max-w-[430px] !mx-auto !relative overflow-hidden">
+      {/* Background Image Layer */}
+      <div
+        className="absolute inset-0 z-0 bg-cover bg-center blur-sm scale-105"
+        style={{
+          backgroundImage: "url('/ruccan_bg.jpg')", // Change this to your image path
+        }}
+      />
+
+      {/* Foreground Content */}
+      <Flex
+        vertical
+        style={{ minHeight: "100vh" }}
+        align="center"
+        justify="center"
+        className="relative z-10 !bg-gray-50/60 backdrop-blur-md !px-2 !py-10"
+      >
+        {children}
       </Flex>
     </Layout>
   );

app/guest/login/page.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import {
+  Button,
+  Checkbox,
+  Form,
+  Input,
+  Typography,
+  Flex,
+  Row,
+  Col,
+  message,
+} from "antd";
+import Image from "next/image";
+import React from "react";
+
+const { Title, Text, Link } = Typography;
+
+const LoginPage: React.FC = () => {
+  const [form] = Form.useForm();
+
+  const onFinish = (values: any) => {
+    console.log("✅ Success:", values);
+    message.success("Logged in successfully (dummy handler)");
+    window.location.href = "/user"
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("❌ Failed:", errorInfo);
+    message.error("Please check your input.");
+  };
+
+  return (
+    <Row>
+      <Col span={24}>
+        {/* Logo on Top */}
+        <Flex justify="center" align="center" gap={10} className="!mb-6">
+          <Image
+            src="/ruccan_logo2.png"
+            alt="Ruccan Logo"
+            height={40}
+            width={40}
+            className="object-contain"
+          />
+          <Title level={3} className="!font-bold !m-0">
+            Ruccan.com
+          </Title>
+        </Flex>
+
+        <Row style={{ width: "100%" }} justify="center">
+          <Col span={24} className="!px-5">
+            <Flex vertical className="!bg-white !p-8 !rounded-2xl !shadow-xl !min-w-[360px]">
+              {/* Title */}
+              <Flex vertical align="center" className="!mb-8 !text-center">
+                <Title
+                  level={2}
+                  className="!mb-2 !text-transparent !font-bold !bg-clip-text bg-gradient-to-r from-blue-500 to-pink-500"
+                >
+                  Get started now
+                </Title>
+                <Text type="secondary" className="!text-xs">
+                  Create an account or log in to explore our app
+                </Text>
+              </Flex>
+
+              {/* Social Buttons */}
+              <Flex vertical gap="middle" className="mb-6">
+                <Button
+                  block
+                  className="!bg-white !text-black !border !border-gray-300 hover:!border-blue-400"
+                  icon={
+                    <Image
+                      src="/google_logo.png"
+                      alt="Google"
+                      width={18}
+                      height={18}
+                    />
+                  }
+                >
+                  Sign in with Google
+                </Button>
+
+                <Button
+                  block
+                  className="!bg-white !text-black !border !border-gray-300 hover:!border-blue-600"
+                  icon={
+                    <Image
+                      src="/facebook_icon.svg"
+                      alt="Facebook"
+                      width={18}
+                      height={18}
+                    />
+                  }
+                >
+                  Sign in with Facebook
+                </Button>
+              </Flex>
+
+              {/* Divider */}
+              <Row align="middle" className="!my-2">
+                <Col flex="auto">
+                  <div className="!border-t !border-gray-300 !w-full" />
+                </Col>
+                <Col>
+                  <Text type="secondary" className="!px-4 !text-sm">
+                    OR
+                  </Text>
+                </Col>
+                <Col flex="auto">
+                  <div className="!border-t !border-gray-300 !w-full" />
+                </Col>
+              </Row>
+
+              {/* Login Form */}
+              <Form
+                form={form}
+                layout="vertical"
+                onFinish={onFinish}
+                onFinishFailed={onFinishFailed}
+                autoComplete="off"
+                initialValues={{ remember: true }}
+              >
+                <Form.Item
+                  label="Email"
+                  name="email"
+                  rules={[
+                    { required: true, message: "Please input your email!" },
+                    { type: "email", message: "Invalid email format" },
+                  ]}
+                >
+                  <Input placeholder="Enter your email" />
+                </Form.Item>
+
+                <Form.Item
+                  label="Password"
+                  name="password"
+                  rules={[{ required: true, message: "Please input your password!" }]}
+                >
+                  <Input.Password placeholder="Enter your password" />
+                </Form.Item>
+
+                <Flex justify="space-between" wrap align="center" className="!mb-4">
+                  <Form.Item name="remember" valuePropName="checked" noStyle>
+                    <Checkbox>Remember me</Checkbox>
+                  </Form.Item>
+                  <Link href="#" className="!text-blue-500">
+                    Forgot password?
+                  </Link>
+                </Flex>
+
+                <Form.Item>
+                  <Button type="primary" htmlType="submit" block>
+                    Log In
+                  </Button>
+                </Form.Item>
+              </Form>
+
+              {/* Sign Up */}
+              <Flex justify="center" className="!mt-6">
+                <Text>
+                  Don’t have an account?{" "}
+                  <Link href="/guest/signup" className="!text-blue-500">
+                    Sign Up
+                  </Link>
+                </Text>
+              </Flex>
+            </Flex>
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+  );
+};
+
+export default LoginPage;

app/guest/page.tsx

@@ -1,10 +1,16 @@
-'use client'
-import { useEffect } from "react"
+"use client";
 
-export default function HomePage() {
+import LoadingScreen from "@/components/layout/LoadingScreen";
+import React from "react";
 
-  return (
-    <div className="space-y-6">
-    </div>
-  )
-}
+const GuestPage: React.FC = () => {
+
+  React.useEffect(() => {
+    window.location.href = "/guest/login"
+  }, [])
+  
+
+  return <LoadingScreen/>;
+};
+
+export default GuestPage;

app/guest/signup/page.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import {
+  Button,
+  Form,
+  Input,
+  Typography,
+  Flex,
+  Row,
+  Col,
+  message,
+} from "antd";
+import Image from "next/image";
+import React, { useState } from "react";
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/style.css";
+
+const { Title, Text, Link } = Typography;
+
+const SignupPage: React.FC = () => {
+  const [form] = Form.useForm();
+  const [phone, setPhone] = useState("");
+
+  const onFinish = (values: any) => {
+    if (values.password !== values.confirmPassword) {
+      message.error("Passwords do not match");
+      return;
+    }
+
+    console.log("✅ Success:", { ...values, phone });
+    message.success("Registered successfully (dummy handler)");
+    // TODO: Submit to backend API here
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("❌ Failed:", errorInfo);
+    message.error("Please check your input.");
+  };
+
+  return (
+    <Row>
+      <Col span={24}>
+        {/* Logo */}
+        <Flex justify="center" align="center" gap={10} className="!mb-6">
+          <Image
+            src="/ruccan_logo2.png"
+            alt="Ruccan Logo"
+            height={40}
+            width={40}
+            className="object-contain"
+          />
+          <Title level={3} className="!font-bold !m-0">
+            Ruccan.com
+          </Title>
+        </Flex>
+
+        {/* Form Container */}
+        <Row style={{ width: "100%" }} justify="center">
+          <Col span={24} className="!px-5">
+            <Flex vertical className="!bg-white !p-8 !rounded-2xl !shadow-xl !min-w-[360px]">
+              {/* Title */}
+              <Flex vertical align="center" className="!mb-8 !text-center">
+                <Title
+                  level={2}
+                  className="!mb-2 !text-transparent !font-bold !bg-clip-text bg-gradient-to-r from-blue-500 to-pink-500"
+                >
+                  Sign Up
+                </Title>
+                <Flex justify="center" className="!mt-6">
+                  <Text>
+                    Already have an account?{" "}
+                    <Link href="/guest/login" className="!text-blue-500">
+                      Login
+                    </Link>
+                  </Text>
+                </Flex>
+              </Flex>
+
+              {/* Form */}
+              <Form
+                form={form}
+                layout="vertical"
+                onFinish={onFinish}
+                onFinishFailed={onFinishFailed}
+                autoComplete="off"
+              >
+                <Row gutter={12}>
+                  <Col span={12}>
+                    <Form.Item
+                      label="First Name"
+                      name="firstName"
+                      rules={[{ required: true, message: "First name is required" }]}
+                    >
+                      <Input placeholder="John" />
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="Last Name"
+                      name="lastName"
+                      rules={[{ required: true, message: "Last name is required" }]}
+                    >
+                      <Input placeholder="Doe" />
+                    </Form.Item>
+                  </Col>
+                </Row>
+
+                <Form.Item
+                  label="Email"
+                  name="email"
+                  rules={[
+                    { required: true, message: "Email is required" },
+                    { type: "email", message: "Invalid email format" },
+                  ]}
+                >
+                  <Input placeholder="you@example.com" />
+                </Form.Item>
+
+                <Form.Item
+                  label="Company Name"
+                  name="company"
+                  rules={[{ required: true, message: "Company name is required" }]}
+                >
+                  <Input placeholder="Ruccan Sdn Bhd" />
+                </Form.Item>
+
+                <Form.Item label="Phone Number" required>
+                  <PhoneInput
+                    country={"my"}
+                    value={phone}
+                    onChange={(value) => setPhone(value)}
+                    inputProps={{
+                      name: "phone",
+                      required: true,
+                    }}
+                    inputClass="!w-full"
+                    containerClass="!w-full"
+                  />
+                </Form.Item>
+
+                <Form.Item
+                  label="Password"
+                  name="password"
+                  rules={[{ required: true, message: "Password is required" }]}
+                >
+                  <Input.Password placeholder="Create a password" />
+                </Form.Item>
+
+                <Form.Item
+                  label="Confirm Password"
+                  name="confirmPassword"
+                  dependencies={["password"]}
+                  rules={[
+                    { required: true, message: "Please confirm your password" },
+                    ({ getFieldValue }) => ({
+                      validator(_, value) {
+                        if (!value || getFieldValue("password") === value) {
+                          return Promise.resolve();
+                        }
+                        return Promise.reject("Passwords do not match");
+                      },
+                    }),
+                  ]}
+                >
+                  <Input.Password placeholder="Repeat your password" />
+                </Form.Item>
+
+                <Form.Item>
+                  <Button type="primary" htmlType="submit" block>
+                    Register
+                  </Button>
+                </Form.Item>
+              </Form>
+            </Flex>
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+  );
+};
+
+export default SignupPage;

app/page.tsx

@@ -1,11 +1,16 @@
-'use client'
-import { useEffect } from "react"
+"use client";
 
-export default function HomePage() {
+import LoadingScreen from "@/components/layout/LoadingScreen";
+import React from "react";
 
+const MainPage: React.FC = () => {
 
-  return (
-    <div className="space-y-6">
-    </div>
-  )
-}
+  React.useEffect(() => {
+    window.location.href = "/guest/login"
+  }, [])
+
+
+  return <LoadingScreen />;
+};
+
+export default MainPage;

public/facebook_icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48.544" height="48.558" viewBox="0 0 48.544 48.558">
+  <g id="Group" transform="translate(1290.54 1031.211)">
+    <path id="Vector" d="M48.544,24.28A24.281,24.281,0,0,1,27.652,48.325a24.588,24.588,0,0,1-7.267-.077A24.28,24.28,0,1,1,48.544,24.28Z" transform="translate(-1290.54 -1031.211)" fill="#1877f2"/>
+    <path id="Vector-2" data-name="Vector" d="M13.3,8.453v5.289h6.541l-1.036,7.125H13.3V37.283a24.6,24.6,0,0,1-3.379.233,24.4,24.4,0,0,1-3.888-.31V20.867H0V13.743H6.033V7.271A7.27,7.27,0,0,1,13.3,0V0c.012,0,.022,0,.034,0h6.507V6.162H15.591A2.29,2.29,0,0,0,13.3,8.452Z" transform="translate(-1276.188 -1020.17)" fill="#fff"/>
+  </g>
+</svg>