create com button
This commit is contained in:
zahravaziri
@@ -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">
|
||||
At the heart of our operations is a commitment to delivering
|
||||
superior products through cutting- <br/>edge technology and innovative
|
||||
processes.
|
||||
</p>
|
||||
<Button className='w-48'>Explore More</Button>
|
||||
<p
|
||||
className="mb-8 mt-5 text-base font-normal"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: t('com_home_banner_description') as string,
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
|
||||
@@ -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: '/services', label: 'About US' },
|
||||
{ href: '/blog', label: 'Products' },
|
||||
{ href: '/contact', label: 'Blog' },
|
||||
{ href: '/contact', label: 'Project' },
|
||||
{ href: '/contact', label: 'Contact Us' },
|
||||
|
||||
{ href: '/', label: t('pages_home_title') as string },
|
||||
{ href: '/about', label: t('pages_about_title') as string },
|
||||
{ href: '/blog', label: t('pages_contact_title') as string },
|
||||
{ href: '/contact', label: t('pages_contact_title') as string },
|
||||
{ href: '/product', label: t('pages_product_title') as string },
|
||||
{ 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 ">
|
||||
<Image alt='logo' src={images.logo} className='w-auto h-auto'/></Link>
|
||||
|
||||
<Link href="/" className="text-xl font-bold w-auto h-12 ">
|
||||
<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'>
|
||||
|
||||
<span>xx</span>
|
||||
<p>+098 123456789</p>
|
||||
<a className="flex gap-2 items-center" href="tel:+098123456789">
|
||||
<span>xx</span>
|
||||
<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>
|
||||
|
||||
@@ -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
|
||||
iconOnly?: boolean; // Add iconOnly prop
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
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
|
||||
iconOnly = false, // Default iconOnly to false
|
||||
size = 'medium',
|
||||
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 ? (
|
||||
<span className="ml-2">{endIcon}</span>
|
||||
|
||||
<div className={`rounded-lg bg-white text-[#222222] flex items-center justify-center px-3 `}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{endIcon && !loading ? (
|
||||
<span className=" flex items-center justify-center p-3">
|
||||
{endIcon}
|
||||
</span>
|
||||
) : null}
|
||||
{iconOnly && endIcon && !loading ? endIcon : null}
|
||||
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user