Develop

templates/landing-page/model2/package.json

@@ -13,9 +13,11 @@
     "@rasenganjs/image": "^1.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.0.0",
     "rasengan": "1.0.0-beta.46",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
+    "react-intersection-observer": "^9.15.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },

templates/landing-page/model2/src/app/app.router.ts

@@ -5,7 +5,7 @@ import AppLayout from "@/app/root/app.layout";
 class AppRouter extends RouterComponent {}
 
 export default defineRouter({
-  imports: [],
-  layout: AppLayout,
-  pages: [Home],
+	imports: [],
+	layout: AppLayout,
+	pages: [Home],
 })(AppRouter);

templates/landing-page/model2/src/app/root/app.layout.tsx

@@ -7,9 +7,9 @@ import Main from "./components/Main";
 const AppLayout: LayoutComponent = () => {
   return (
     <React.Fragment>
-      <Navbar />
-
+
       <Main>
+        <Navbar />
         <Outlet />
       </Main>
 

templates/landing-page/model2/src/app/root/components/Footer.tsx

@@ -1,48 +1,128 @@
 import Typography from "@/components/atoms/Typography";
+import Image from "@rasenganjs/image";
+import profil_1 from "@/assets/images/profil_1.png";
+import profil_2 from "@/assets/images/profil_2.png";
+import profil_3 from "@/assets/images/profil_3.png";
+import profil_4 from "@/assets/images/profil_4.png";
+import play from "@/assets/play_white.svg";
+import money from "@/assets/money.svg";
+import Input from "@/components/atoms/input";
 
 export default function Footer() {
-	return (
-		<footer className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10 bg-footer text-footer-foreground w-full max-w-[1500px] mx-auto px-10 lg:px-40 py-10'>
-			<div className='flex flex-col gap-5'>
-				<div className='flex flex-col gap-2'>
-					<Typography text='Biccas' weight='bold' className='text-2xl' />
-					<Typography text='2024 @ Biccas' />
-					<Typography text='All rights reserved' />
-				</div>
-			</div>
+  return (
+    <footer className="flex flex-col bg-footer text-footer-foreground p-8 lg:p-32">
+      <div className="max-lg:flex-col flex flex-grow gap-16">
+        <div className="flex flex-1 flex-col gap-8">
+          <Typography
+            className="max-xl:text-3xl text-5xl"
+            weight="bold"
+            text="People are Saying About DoWhith"
+          />
+          <Typography
+            className="text-lg text-[#A6A6A6]"
+            text="Everything you need to accept to payment and grow your money of manage anywhere on planet"
+          />
 
-			<div className='flex flex-col gap-5'>
-				<Typography text='Company' weight='bold' className='text-lg' />
+          <span className="text-gray-400 text-9xl font-bold leading-none">
+            "
+          </span>
 
-				<div className='flex flex-col gap-2'>
-					<Typography text='About' />
-					<Typography text='Blog' />
-					<Typography text='Careers' />
-					<Typography text='Contact' />
-					<Typography text='Help Center' />
-				</div>
-			</div>
+          <Typography
+            className="text-lg text-[#A6A6A6]"
+            text="I am very helped by this E-wallet application , my days are very easy to use this application and its very helpful in my life , even I can pay a short time 😍"
+          />
+          <Typography
+            className="text-lg text-[#A6A6A6]"
+            text="_ Aria Zinanrio"
+          />
+          <div className="flex gap-4">
+            <Image src={profil_1} alt="profil_1" className="rounded-xl" />
+            <Image src={profil_2} alt="profil_2" className="rounded-xl" />
+            <Image src={profil_3} alt="profil_3" className="rounded-xl" />
+            <Image src={profil_4} alt="profil_4" className="rounded-xl" />
+            <Image
+              src={play}
+              alt="play"
+              className="rounded-xl w-[66px] h-[66px]"
+            />
+          </div>
+        </div>
+        <div className="flex flex-1 flex-col bg-[#222938] py-12 rounded-2xl justify-center items-center">
+          <form className="flex flex-col max-sm:px-12 lg:px-12 justify-center items-center">
+            <Image src={money} alt="money" />
+            <Typography className="text-3xl mt-2 mb-4" text="Get Started" />
+            <Input label="Email" placeholder="Enter your email" />
+            <Input
+              label="Message"
+              placeholder="What are you say ?"
+              isTextArea
+            />
+            <button className="w-full py-4 bg-primary rounded-[10px]">
+              Request Demo
+            </button>
+            <p className="w-full flex justify-end mt-2 text-sm gap-1">
+              <span className="text-[#A6A6A6]">or</span>Start Free Trial
+            </p>
+          </form>
+        </div>
+      </div>
 
-			<div className='flex flex-col gap-5'>
-				<Typography text='Legal' weight='bold' className='text-lg' />
+      <div className="max-lg:flex-col flex flex-grow gap-16 mt-16">
+        <div className="flex flex-1 flex-col gap-8">
+          <Typography
+            text="Biccas"
+            weight="bold"
+            className="text-4xl text-primary"
+          />
+          <Typography
+            className="text-lg text-[#A6A6A6]"
+            text="Get started now try our product"
+          />
+          <div className="border-2 border-[#A6A6A6] rounded-full flex items-center p-2 justify-between bg-transparent">
+            <input
+              className="border-none bg-footer w-full"
+              placeholder="Enter your email here"
+            />
+            <div className="bg-primary rounded-full w-10 h-10 p-2 text-center">
+              -{">"}
+            </div>
+          </div>
+        </div>
 
-				<div className='flex flex-col gap-2'>
-					<Typography text='Cookies Policy' />
-					<Typography text='Privacy Policy' />
-					<Typography text='Terms of Service' />
-				</div>
-			</div>
+        <div className="flex flex-1 flex-col md:flex-row items-center justify-between gap-16">
+          <ul className="flex flex-col text-lg gap-6">
+            <li className="">Support</li>
+            <li className="text-[#A6A6A6]">Help centre</li>
+            <li className="text-[#A6A6A6]">Account information</li>
+            <li className="text-[#A6A6A6]">About</li>
+            <li className="text-[#A6A6A6]">Contact us</li>
+          </ul>
+          <ul className="flex flex-col text-lg gap-6">
+            <li className="">Help and Solution</li>
+            <li className="text-[#A6A6A6]">Talk to support</li>
+            <li className="text-[#A6A6A6]">Support docs</li>
+            <li className="text-[#A6A6A6]">System status</li>
+            <li className="text-[#A6A6A6]">Covid responde</li>
+          </ul>
+          <ul className="flex flex-col text-lg gap-6">
+            <li className="">Product</li>
+            <li className="text-[#A6A6A6]">Update</li>
+            <li className="text-[#A6A6A6]">Security</li>
+            <li className="text-[#A6A6A6]">Beta test</li>
+            <li className="text-[#A6A6A6]">Pricing product</li>
+          </ul>
+        </div>
+      </div>
 
-			<div className='flex flex-col gap-5'>
-				<Typography text='Socials' weight='bold' className='text-lg' />
-
-				<div className='flex flex-col gap-2'>
-					<Typography text='Facebook' />
-					<Typography text='Instagram' />
-					<Typography text='Twitter' />
-					<Typography text='LinkedIn' />
-				</div>
-			</div>
-		</footer>
-	);
+      <div className="max-lg:flex-col flex  justify-between items-center mt-16">
+        <Typography
+          text="© 2025 Rasengan Labs. all rights reserved"
+          className="text-center"
+        />
+        <Typography
+          text="Terms and Condtions - Privacy Policy"
+        />
+      </div>
+    </footer>
+  );
 }

templates/landing-page/model2/src/app/root/components/Main.tsx

@@ -4,7 +4,7 @@ interface MainProps {
 
 export default function Main({ children }: MainProps) {
 	return (
-		<main className='w-full max-w-[1500px] mx-auto px-10 lg:px-40 py-2 min-h-[800px]'>
+		<main className='w-screen min-h-screen mx-auto'>
 			{children}
 		</main>
 	);

templates/landing-page/model2/src/app/root/components/Navbar.tsx

@@ -2,37 +2,134 @@ import Button from "@/components/atoms/Button";
 import NavItem from "@/components/atoms/NavItem";
 import Typography from "@/components/atoms/Typography";
 import { useLocation } from "rasengan";
+import { useState, useEffect } from "react";
 
 export default function Navbar() {
-	const { pathname } = useLocation();
-
-	const isActive = (path: string) => pathname === path;
-
-	return (
-		<header className='w-full max-w-[1500px] mx-auto px-10 lg:px-40 py-8 flex items-center justify-between'>
-			<div className='flex items-center gap-8'>
-				<Typography
-					text='Biccas'
-					weight='bold'
-					className='text-4xl text-primary'
-				/>
-			</div>
-			<nav className='flex items-center gap-8 ml-10'>
-				<NavItem text='Home' href='#home' isActive={isActive("/")} />
-				<NavItem
-					text='Products'
-					href='#products'
-					isActive={isActive("/pricing")}
-				/>
-				<NavItem text='FAQ' href='#faq' isActive={isActive("/faq")} />
-				<NavItem text='Blog' href='#blog' isActive={isActive("/blog")} />
-				<NavItem text='About Us' href='#about-us' isActive={isActive("/about-us")} />
-			</nav>
-
-			<div className='flex items-center gap-2'>
-				<Button text='Log in' className='bg-transparent text-foreground' />
-				<Button text='Sign up' className='bg-primary text-primary-foreground' />
-			</div>
-		</header>
-	);
+  const { pathname } = useLocation();
+  const isActive = (path: string) => pathname === path;
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, []);
+
+  return (
+    <header className="w-full mx-auto px-8 lg:px-[130px] py-8 flex items-center justify-between bg-custom-gradient">
+      <div className="flex items-center gap-8">
+        <Typography
+          text="Biccas"
+          weight="bold"
+          className="text-4xl text-primary"
+        />
+      </div>
+
+      {/* hambuger svg */}
+      <div className="md:hidden">
+        <button
+          onClick={toggleMenu}
+          className="text-primary focus:outline-none"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M4 6h16M4 12h16m-7 6h7"
+            />
+          </svg>
+        </button>
+      </div>
+      {/* hambuger svg */}
+
+      <nav className="hidden md:flex  items-center gap-8 ml-10">
+        <NavItem text="Home" href="/" isActive={isActive("/")} />
+        <NavItem
+          text="Products"
+          href="#products"
+          isActive={isActive("/products")}
+        />
+        <NavItem text="FAQ" href="#faq" isActive={isActive("/faq")} />
+        <NavItem text="Blog" href="#blog" isActive={isActive("/blog")} />
+        <NavItem
+          text="About Us"
+          href="#about-us"
+          isActive={isActive("/about-us")}
+        />
+      </nav>
+
+      <div className="hidden lg:flex items-center gap-2">
+        <Button
+          text="Log in"
+          className="bg-transparent text-foreground text-[#A6A6A6]"
+        />
+        <Button text="Sign up" className="bg-primary text-primary-foreground" />
+      </div>
+
+      {/* mobile menu*/}
+      <div
+        className={`md:hidden absolute top-0 right-0 w-full bg-white p-5 transform transition-all delay-300 duration-300 ease-in-out ${
+          isOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <nav className="flex flex-col items-center gap-4">
+          <button
+            onClick={toggleMenu}
+            className="text-primary focus:outline-none w-full flex justify-end"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+          <NavItem text="Home" href="/" isActive={isActive("/")} onClick={toggleMenu} />
+          <NavItem
+            text="Products"
+            href="#products"
+            isActive={isActive("/products")}
+            onClick={toggleMenu}
+          />
+          <NavItem text="FAQ" href="#faq" isActive={isActive("/faq")} onClick={toggleMenu} />
+          <NavItem text="Blog" href="#blog" isActive={isActive("/blog")} onClick={toggleMenu} />
+          <NavItem
+            text="About Us"
+            href="#about-us"
+            isActive={isActive("/about-us")}
+            onClick={toggleMenu}
+          />
+          <div className="flex w-full mt-4">
+            <Button
+              text="Log in"
+              className="w-full bg-transparent text-foreground text-[#A6A6A6] mt-2"
+            />
+            <Button
+              text="Sign up"
+              className="p-2 w-full bg-primary text-primary-foreground mt-2"
+            />
+          </div>
+        </nav>
+      </div>
+      {/* mobile menu*/}
+    </header>
+  );
 }