create com button

src/app/globals.css

@@ -58,6 +58,7 @@
   font-family: 'Manrope';
 }
 
+
 :root {
   --primary: #FA003F;
   --secondary: #A78BFA;

src/app/layout.tsx

@@ -1,5 +1,3 @@
-'use client'
-import type { Metadata } from 'next';
 import './globals.css';
 import { cookies } from 'next/headers';
 

src/app/page.tsx

@@ -18,7 +18,7 @@ export default async function Home() {
   const data = await getData();
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24 text-gray-300">
+    <main className="flex min-h-screen flex-col items-center justify-between  text-gray-300">
       <Header/>
       <span>{t('pages_home_title') as string}</span>
 

src/components/layout/header/index.tsx

@@ -1,11 +1,12 @@
 import images from '@/assets/images/images';
 import Navbar from '../navbar';
 import Button from '@/components/uikit/button';
+import { t } from '@/locales/translates';
 
 export default function Header() {
   return (
     <header
-      className=" bg-cover text-white h-screen relative bg-no-repeat bg-right"
+      className=" bg-cover text-white h-screen relative bg-no-repeat bg-right w-full"
       style={{ backgroundImage: `url(${images.homeBanner.src})` }}
     >
       <div className="absolute inset-0 bg-black opacity-50 z-0 blur-[100px]" />
@@ -13,28 +14,33 @@ export default function Header() {
       <div className="container mx-auto bg-cover bg-center text-white flex justify-between items-center flex-col relative z-10 h-[80%] py-20">
         <div className=" w-full flex flex-col justify-start ">
           <h1 className="text-7xl md:text-6xl font-light">
-            Excellence innovating{' '}
+            {t('com_home_banner_title') as string}
           </h1>
           <h1 className="text-7xl md:text-6xl font-bold">
-            industry for today{' '}
+            {t('com_home_banner_title_bold') as string}
           </h1>
-          <p className="mb-8 mt-5 text-base font-normal">
+          <p
-            At the heart of our operations is a commitment to delivering
+            className="mb-8 mt-5 text-base font-normal"
-            superior products through cutting- <br/>edge technology and innovative
+            dangerouslySetInnerHTML={{
-            processes.
+              __html: t('com_home_banner_description') as string,
-          </p>
+            }}
-          <Button className='w-48'>Explore More</Button>
+          />
+          <div>
+            <Button variant="solid" endIcon={'x'}>
+              {t('com_home_banner_button') as string}
+            </Button>
+          </div>
         </div>
 
         <div className="w-full flex justify-center gap-8 text-sm border-t-[1px] border-white/10 pt-12 ">
           <a href="#" className="hover:underline">
-            Advanced Manufacturing Solutions
+            {t('com_home_Banner_link1') as string}
           </a>
           <a href="#" className="hover:underline">
-            Quality Assurance Systems
+            {t('com_home_Banner_link2') as string}
           </a>
           <a href="#" className="hover:underline">
-            State-of-the-Art Technology
+            {t('com_home_Banner_link3') as string}
           </a>
         </div>
       </div>

src/components/layout/navbar/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import images from '@/assets/images/images';
+import { t } from '@/locales/translates';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -11,13 +12,12 @@ export default function Navbar() {
   const pathname = usePathname();
 
   const links = [
-    { href: '/', label: 'Home' },
+    { href: '/', label: t('pages_home_title') as string },
-    { href: '/services', label: 'About US' },
+    { href: '/about', label: t('pages_about_title') as string },
-    { href: '/blog', label: 'Products' },
+    { href: '/blog', label: t('pages_contact_title') as string },
-    { href: '/contact', label: 'Blog' },
+    { href: '/contact', label: t('pages_contact_title') as string },
-    { href: '/contact', label: 'Project' },
+    { href: '/product', label: t('pages_product_title') as string },
-    { href: '/contact', label: 'Contact Us' },
+    { href: '/project', label: t('pages_project_title') as string },
-
   ];
 
   const linkClass = (href: string) =>
@@ -26,27 +26,32 @@ export default function Navbar() {
   return (
     <nav className="bg-transparent container mx-auto py-11 shrink-0 relative z-10 ">
       <div className=" flex items-center justify-between">
-        <Link href="/" className="text-xl font-bold ">
+        <Link href="/" className="text-xl font-bold w-auto h-12 ">
-        <Image  alt='logo' src={images.logo} className='w-auto h-auto'/></Link>
+          <Image alt="logo" src={images.logo} className="w-auto h-full object-contain" />
-
+        </Link>
         <ul className="hidden md:flex space-x-6">
           {links.map(({ href, label }) => (
             <li key={href}>
-              <Link href={href} className={`${linkClass(href)} hover:text-primary-light `}>
+              <Link
+                href={href}
+                className={`${linkClass(href)} hover:text-primary-light `}
+              >
                 {label}
               </Link>
             </li>
           ))}
           <li>
-            <a className='flex gap-2 items-center' href='tel:+098123456789'>
+            <a className="flex gap-2 items-center" href="tel:+098123456789">
-
+              <span>xx</span>
-            <span>xx</span>
+              <p>+098 123456789</p>
-            <p>+098 123456789</p>
             </a>
           </li>
         </ul>
 
-        <button className="md:hidden text-gray-700" onClick={() => setOpen(!open)}>
+        <button
+          className="md:hidden text-gray-700"
+          onClick={() => setOpen(!open)}
+        >
           {open ? <p>x</p> : <p>menu</p>}
         </button>
       </div>
@@ -55,7 +60,11 @@ export default function Navbar() {
         <ul className="md:hidden mt-2 space-y-2 px-2">
           {links.map(({ href, label }) => (
             <li key={href}>
-              <Link href={href} className={linkClass(href)} onClick={() => setOpen(false)}>
+              <Link
+                href={href}
+                className={linkClass(href)}
+                onClick={() => setOpen(false)}
+              >
                 {label}
               </Link>
             </li>

src/components/uikit/button/index.tsx

@@ -2,12 +2,12 @@
 import React, { ButtonHTMLAttributes, ReactNode } from 'react';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children?: ReactNode; // Make children optional for icon-only buttons
+  children?: ReactNode;
   loading?: boolean;
   disabled?: boolean;
   endIcon?: ReactNode;
-  size?: 'small' | 'medium' | 'large'; // Add size prop
+  size?: 'small' | 'medium' | 'large';
-  iconOnly?: boolean; // Add iconOnly prop
+  variant?: 'solid' | 'text';
 }
 
 const Button: React.FC<ButtonProps> = ({
@@ -15,33 +15,16 @@ const Button: React.FC<ButtonProps> = ({
   loading = false,
   disabled = false,
   endIcon,
-  size = 'medium', // Default size to medium
+  size = 'medium',
-  iconOnly = false, // Default iconOnly to false
+  variant = 'solid',
   className,
   ...props
 }) => {
-  const baseStyles =
-    'inline-flex items-center justify-center border border-transparent font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 ';
-  const enabledStyles =
-    'text-white bg-primary-light hover:bg-indigo-700 active:bg-indigo-800 focus:ring-indigo-500';
-  const disabledStyles = 'text-gray-400 bg-gray-200 cursor-not-allowed';
-  const loadingStyles = 'text-gray-400 bg-gray-200 cursor-wait';
-
-  const sizeStyles = {
-    small: iconOnly ? 'p-2 text-sm' : 'px-3 py-1.5 text-sm',
-    medium: iconOnly ? 'p-2.5 text-base' : 'px-4 py-2 text-base',
-    large: iconOnly ? 'p-3 text-lg' : 'px-6 py-3 text-lg',
-  };
-
-  const currentStyles = disabled
-    ? disabledStyles
-    : loading
-      ? loadingStyles
-      : enabledStyles;
 
+ 
   return (
     <button
-      className={`${baseStyles} ${sizeStyles[size]} ${currentStyles} ${className || 'bg-gray-500 '}`}
+      className={`group relative bg-[#FA003F] rounded-[0.5625rem] h-12 p-px flex ${className || ''}`}
       disabled={disabled || loading}
       {...props}
     >
@@ -67,11 +50,17 @@ const Button: React.FC<ButtonProps> = ({
           ></path>
         </svg>
       ) : null}
-      {children && !iconOnly ? children : null}
+     
-      {endIcon && !loading && !iconOnly ? (
+       <div className={`rounded-lg bg-white text-[#222222] flex items-center justify-center px-3 `}>
-        <span className="ml-2">{endIcon}</span>
+        {children}
+       </div>
+     
+      {endIcon && !loading ? (
+        <span className=" flex items-center justify-center p-3">
+          {endIcon}
+        </span>
       ) : null}
-      {iconOnly && endIcon && !loading ? endIcon : null}
+   
     </button>
   );
 };

src/locales/en.ts

@@ -3,8 +3,22 @@ const en = {
   pages_home_description: 'Welcome to the home page',
   pages_about_title: 'About Us',
   pages_about_description: 'Learn more about us on this page',
-  pages_contact_title: 'Contact Us',
+ pages_contact_title: 'Contact Us',
+  pages_product_title: 'Product',
+  pages_blog_title: 'Blog',
+  pages_project_title: 'Project',
   pages_contact_description: 'Get in touch with us through this page',
+  com_home_banner_title:'Excellence innovating',
+  com_home_banner_title_bold:'industry for today',
+  com_home_banner_description:'At the heart of our operations is a commitment to delivering superior products through cutting- <br/> edge technology and innovative processes. ',
+  com_home_banner_button:' Explore More',
+  com_home_Banner_link1:' Advanced Manufacturing Solutions',
+  com_home_Banner_link2:'Quality Assurance Systems',
+  com_home_Banner_link3:'State-of-the-Art Technology',
+
+
+  
+
 };
 
 export default en;

src/locales/fa.ts

@@ -6,7 +6,17 @@ const fa = {
   pages_about_title: 'About Us',
   pages_about_description: 'Learn more about us on this page',
   pages_contact_title: 'Contact Us',
+  pages_product_title: 'Product',
+  pages_blog_title: 'Blog',
+  pages_project_title: 'Project',
   pages_contact_description: 'Get in touch with us through this page',
+  com_home_banner_title:'Excellence innovating',
+  com_home_banner_title_bold:'industry for today',
+  com_home_banner_description:'At the heart of our operations is a commitment to delivering superior products through cutting- <br/> edge technology and innovative processes. ',
+  com_home_banner_button:'اطلاعات بیشتر',
+  com_home_Banner_link1:' Advanced Manufacturing Solutions',
+  com_home_Banner_link2:'Quality Assurance Systems',
+  com_home_Banner_link3:'State-of-the-Art Technology',
 } as Translates;
 
 export default fa;