diff --git a/src/app/globals.css b/src/app/globals.css index 87d00c0..ddbe8cf 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -155,3 +155,33 @@ --color-black: var(--black); --color-transparent: var(--transparent); } + +.container { + width: 100%; + padding-inline: 10rem; + + @media (width >=40rem) { + max-width: 40rem; + padding-inline: 1rem; + } + + @media (width >=48rem) { + max-width: 48rem; + padding-inline: 1rem; + } + + @media (width >=64rem) { + max-width: 64rem; + padding-inline: 3rem; + } + + @media (width >=80rem) { + max-width: 80rem; + padding-inline: 5rem; + } + + @media (width >=96rem) { + max-width: 96rem; + padding-inline: 8rem; + } +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 6bbb4ab..412109d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,5 +1,6 @@ import Header from '@/components/layout/header'; import AboutTopInfo from '@/components/pages/about/TopInfo'; +import HomeStorySection from '@/components/pages/home/HomeStorySection'; import HomePageProducts from '@/components/pages/home/Products'; async function getData() { @@ -15,6 +16,7 @@ export default async function Home() {
+ ); } diff --git a/src/assets/constants/routeFactory/index.ts b/src/assets/constants/routeFactory/index.ts index d3d1256..f4df29d 100644 --- a/src/assets/constants/routeFactory/index.ts +++ b/src/assets/constants/routeFactory/index.ts @@ -6,11 +6,11 @@ export default { route: () => '/', }, products: { - title: t('page_products_title'), + title: t('pages_products_title'), route: () => '/products', }, projects: { - title: t('page_projects_title'), + title: t('pages_projects_title'), route: () => '/projects', }, about: { @@ -18,7 +18,7 @@ export default { route: () => '/about-us', }, contact: { - title: t('page_contact_title'), + title: t('pages_contact_title'), route: () => '/contact', }, }; diff --git a/src/assets/images/images.ts b/src/assets/images/images.ts index 6cc28b5..14bc5a0 100644 --- a/src/assets/images/images.ts +++ b/src/assets/images/images.ts @@ -5,6 +5,7 @@ import factoryVector from './factory_vector.png'; import aboutImg_1 from './about-img-1.png'; import aboutImg_2 from './about-img-2.png'; import homeProductBack from './home_product_back.jpeg'; +import whatWeDoImage from './what-we-do-image.png'; export default { homeBanner, @@ -14,4 +15,5 @@ export default { aboutImg_1, aboutImg_2, homeProductBack, + whatWeDoImage, }; diff --git a/src/assets/images/what-we-do-image.png b/src/assets/images/what-we-do-image.png new file mode 100644 index 0000000..95e73bc Binary files /dev/null and b/src/assets/images/what-we-do-image.png differ diff --git a/src/components/layout/achievementTextBox/index.tsx b/src/components/layout/achievementTextBox/index.tsx index 2709034..97a1558 100644 --- a/src/components/layout/achievementTextBox/index.tsx +++ b/src/components/layout/achievementTextBox/index.tsx @@ -1,3 +1,4 @@ +import { Icon } from '@/components/uikit/icons'; import { IAachievementTextBoxProps } from './achievementTextBox'; export default function AchievementTextBox({ @@ -5,6 +6,7 @@ export default function AchievementTextBox({ }: IAachievementTextBoxProps) { return (
+ {title}
); diff --git a/src/components/layout/footer/FooterInfo.tsx b/src/components/layout/footer/FooterInfo.tsx index b2e2b46..33cc8cc 100644 --- a/src/components/layout/footer/FooterInfo.tsx +++ b/src/components/layout/footer/FooterInfo.tsx @@ -13,7 +13,9 @@ export default function FooterInfo({ className?: string; }) { return ( -
+
{withLogo && (
-
diff --git a/src/components/layout/innerPages/banner/index.tsx b/src/components/layout/innerPages/banner/index.tsx index 38c5894..3aef131 100644 --- a/src/components/layout/innerPages/banner/index.tsx +++ b/src/components/layout/innerPages/banner/index.tsx @@ -1,6 +1,4 @@ -import images from '@/assets/images/images'; import Navbar from '../../navbar'; -import Button from '@/components/uikit/button'; import { IInnerPageBannerProps } from './banner'; export default function InnerPageBanner({ diff --git a/src/components/layout/navbar/index.tsx b/src/components/layout/navbar/index.tsx index a36df57..6ccace0 100644 --- a/src/components/layout/navbar/index.tsx +++ b/src/components/layout/navbar/index.tsx @@ -17,8 +17,8 @@ // { 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 }, +// { href: '/product', label: t('pages_products_title') as string }, +// { href: '/project', label: t('pages_projects_title') as string }, // ]; // const linkClass = (href: string) => @@ -104,8 +104,8 @@ export default function Navbar() { { 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 }, + { href: '/product', label: t('pages_products_title') as string }, + { href: '/project', label: t('pages_projects_title') as string }, ]; const linkClass = (href: string) => pathname === href ? 'text-primary font-semibold' : 'text-white'; diff --git a/src/components/layout/sectionTitle/index.tsx b/src/components/layout/sectionTitle/index.tsx index dc424f4..f451983 100644 --- a/src/components/layout/sectionTitle/index.tsx +++ b/src/components/layout/sectionTitle/index.tsx @@ -1,3 +1,4 @@ +import { Icon } from '@/components/uikit/icons'; import { ISectionTitleProps } from './sectionTitle'; export default function SectionTitle({ @@ -11,9 +12,10 @@ export default function SectionTitle({ className={`flex flex-col gap-4 ${reverseColor ? 'text-white' : 'text-gray-500'}`} >
-

{title}

+ +

{title}

-

+

{description} {description_bold && ( {description_bold} diff --git a/src/components/pages/about/TopInfo.tsx b/src/components/pages/about/TopInfo.tsx index 9625a0f..e946e00 100644 --- a/src/components/pages/about/TopInfo.tsx +++ b/src/components/pages/about/TopInfo.tsx @@ -26,8 +26,8 @@ export default function AboutTopInfo() { className="h-full w-full object-cover" />

-
- 25 + +
+ +25 {t('com_about_info_years_experience') as string} @@ -60,7 +60,9 @@ export default function AboutTopInfo() { ))}
- +
diff --git a/src/components/pages/home/HomeStorySection.tsx b/src/components/pages/home/HomeStorySection.tsx new file mode 100644 index 0000000..2c2ce69 --- /dev/null +++ b/src/components/pages/home/HomeStorySection.tsx @@ -0,0 +1,73 @@ +import images from '@/assets/images/images'; +import SectionTitle from '@/components/layout/sectionTitle'; +import { t } from '@/locales/translates'; +import Image from 'next/image'; + +export default function HomeStorySection({ + className = '', +}: { + className?: string; +}) { + const statisticsData = [ + { + title: t('com_home_story_projects_count') as string, + count: '10K', + }, + { + title: t('com_home_story_customer_count') as string, + count: '500', + }, + { + title: t('com_home_story_experience') as string, + count: '25', + }, + ]; + + return ( +
+
+ +
+ {[images.homeBanner, images.aboutImg_1].map((e, i) => ( +
+ +
+ ))} +
+
+ +
+
+ +
+
+

+ {t('com_home_story_description') as string} +

+
+
+ {statisticsData.map((stat, index) => ( +
+

+ +{stat.count} +

+

{stat.title}

+
+ ))} +
+
+
+
+ ); +} diff --git a/src/components/pages/home/Products.tsx b/src/components/pages/home/Products.tsx index f21f9ba..5e1ff36 100644 --- a/src/components/pages/home/Products.tsx +++ b/src/components/pages/home/Products.tsx @@ -31,7 +31,7 @@ export default function HomePageProducts() {
diff --git a/src/components/uikit/button/button.d.ts b/src/components/uikit/button/button.d.ts index 72dc437..09efbf8 100644 --- a/src/components/uikit/button/button.d.ts +++ b/src/components/uikit/button/button.d.ts @@ -1,14 +1,17 @@ -export interface IBaseButtonProps extends ButtonHTMLAttributes { +import { IconName } from '../icons'; + +export interface IBaseButtonProps + extends ButtonHTMLAttributes { children: ReactNode; loading?: boolean; disabled?: boolean; - className?: string + className?: string; } -export interface ITextButtonProps extends IBaseButtonProps{ - endIcon?: ReactNode; +export interface ITextButtonProps extends IBaseButtonProps { + endIcon?: IconName; +} +export interface IIconButtonProps extends IBaseButtonProps { + color?: 'primary' | 'secondary'; + size?: 'small' | 'medium' | 'large'; } -export interface IIconButtonProps extends IBaseButtonProps{ - color?: 'primary' | 'secondary' - size?: 'small' | 'medium' | 'large' -} \ No newline at end of file diff --git a/src/components/uikit/button/index.tsx b/src/components/uikit/button/index.tsx index aa6ebc9..edd943e 100644 --- a/src/components/uikit/button/index.tsx +++ b/src/components/uikit/button/index.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; import { IIconButtonProps, ITextButtonProps } from './button'; +import { Icon } from '../icons'; const Button: React.FC = ({ children, @@ -12,7 +13,7 @@ const Button: React.FC = ({ }) => { return (
{endIcon && !loading ? ( - {endIcon} + + + ) : null} ); diff --git a/src/components/uikit/icons/index.tsx b/src/components/uikit/icons/index.tsx index eec8384..252ce2b 100644 --- a/src/components/uikit/icons/index.tsx +++ b/src/components/uikit/icons/index.tsx @@ -5,6 +5,7 @@ import { SettingIcon } from './settingIcon'; import { AchievementIcon } from './achievementIcon'; import { PhoneIcon } from './phoneIcon'; import { InstagramIcon } from './instagramIcon'; +import ShowMoreIcon from './showMoreIcon'; export const icons = { close: CloseIcon, @@ -13,6 +14,7 @@ export const icons = { achievement: AchievementIcon, phone: PhoneIcon, instagram: InstagramIcon, + showMore: ShowMoreIcon, }; export type IconName = keyof typeof icons; diff --git a/src/components/uikit/icons/showMoreIcon.tsx b/src/components/uikit/icons/showMoreIcon.tsx new file mode 100644 index 0000000..b9ebcec --- /dev/null +++ b/src/components/uikit/icons/showMoreIcon.tsx @@ -0,0 +1,21 @@ +export default function ShowMoreIcon(props: React.SVGProps) { + return ( + + + + + ); +} diff --git a/src/locales/en.ts b/src/locales/en.ts index ab73c88..6542a7f 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -4,9 +4,9 @@ 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_products_title: 'Products', pages_blog_title: 'Blog', - pages_project_title: 'Project', + pages_projects_title: 'Projects', 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', @@ -31,10 +31,6 @@ const en = { com_home_products_description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ', - page_products_title: 'Products', - page_contact_title: 'Contact Us', - page_projects_title: 'Projects', - footer_title: 'Industrial Solutions for a Modern World', footer_description: 'We are committed to providing personalized industrial solutions that meet the unique needs of our clients. Our team of experts is dedicated to delivering high-quality products and services that drive success in today’s competitive market.', @@ -45,6 +41,16 @@ const en = { footer_links_contact: 'Contact', footer_copyright: 'Copyright © 2025 All Rights Reserved.', footer_links_address: '123 Industrial Ave, Suite 456, City, Country', + + // Home Page Components + com_home_story_title: 'Our Story', + com_home_story_slogan: 'Building quality through', + com_home_story_slogan_bold: 'industrial innovation', + com_home_story_description: + 'We are a leading provider of industrial solutions, dedicated to delivering high-quality products and services that meet the unique needs of our clients. Our team of experts is committed to driving success in today’s competitive market through innovation and excellence.', + com_home_story_projects_count: 'Completed Projects', + com_home_story_customer_count: 'Happy Customers', + com_home_story_experience: 'Years of Experience', }; export default en; diff --git a/src/locales/fa.ts b/src/locales/fa.ts index 68d4811..d3b336e 100644 --- a/src/locales/fa.ts +++ b/src/locales/fa.ts @@ -6,17 +6,18 @@ 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_products_title: 'Product', pages_blog_title: 'Blog', - pages_project_title: 'Project', + pages_projects_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-
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', + 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-
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;