ahasani/pasargad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create com button

Browse Source
This commit is contained in:
zahravaziri
2025-06-02 15:25:14 +03:30
parent 682dcab56e
commit 74b07284f6
8 changed files with 88 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+1
View File
@@ -58,6 +58,7 @@
font-family: 'Manrope';
}
:root {
--primary: #FA003F;
--secondary: #A78BFA;
src/app/layout.tsx
-2
View File
@@ -1,5 +1,3 @@
'use client'
import type { Metadata } from 'next';
import './globals.css';
import { cookies } from 'next/headers';
src/app/page.tsx
+1 -1
View File
@@ -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
+18 -12
View File
@@ -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>
src/components/layout/navbar/index.tsx
+24 -15
View File
@@ -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'>
<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>
src/components/uikit/button/index.tsx
+16 -27
View File
@@ -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>
);
};
src/locales/en.ts
+14
View File
@@ -4,7 +4,21 @@ const en = {
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:' 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
+10
View File
@@ -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;