blog , cantactus , projects component

src/app/about-us/page.tsx

@@ -10,7 +10,7 @@ async function getData() {
   return { message: 'This data was fetched on the server!' };
 }
 
-export default async function Home() {
+export default async function AboutUs() {
   const data = await getData();
 
   return (

src/app/blog/page.tsx

@@ -0,0 +1,24 @@
+import images from '@/assets/images/images';
+import InnerPageBanner from '@/components/layout/innerPages/banner';
+import PostsGrid from '@/components/pages/blog/PostsGrid';
+import { t } from '@/locales/translates';
+
+async function getData() {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return { message: 'This data was fetched on the server!' };
+}
+
+export default async function Blog() {
+  const data = await getData();
+
+  return (
+    <main className="flex flex-col items-center justify-between">
+      <InnerPageBanner
+        title={t('pages_blog_title') as string}
+        imageSrc={images.blogBanner.src}
+      />
+
+      <PostsGrid />
+    </main>
+  );
+}

src/app/contact-us/page.tsx

@@ -0,0 +1,124 @@
+import Button from '@/components/uikit/button';
+import Head from 'next/head';
+
+export default function Contact() {
+  return (
+    <div className="flex flex-col items-center justify-center bg-gray-100 px-4 pt-8">
+      <div className="e flex w-full max-w-5xl flex-col overflow-hidden rounded-lg md:flex-row">
+        <div className="w-full p-8 md:w-1/2">
+          <h1 className="mb-4 text-3xl font-bold text-gray-800">
+            Get in touch with us
+          </h1>
+          <p className="mb-6 text-gray-600">
+            Reach out for any inquiries, support, or feedback—we’d love to hear
+            from you!
+          </p>
+
+          <div className="flex flex-col justify-between space-y-4">
+            <div className="flex items-center">
+              <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
+                <svg
+                  className="h-6 w-6 text-white"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+                  ></path>
+                </svg>
+              </div>
+              <div>
+                <h3 className="font-semibold text-gray-800">Contact</h3>
+                <p className="text-gray-600">+44 (0) 20 1234 5678</p>
+              </div>
+            </div>
+
+            <div className="flex items-center">
+              <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
+                <svg
+                  className="h-6 w-6 text-white"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M16 12h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v4a2 2 0 002 2h2m8 0H8m8 0a4 4 0 01-4 4H8m0-8v8m0-8H6a2 2 0 00-2 2v4a2 2 0 002 2h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2"
+                  ></path>
+                </svg>
+              </div>
+              <div>
+                <h3 className="font-semibold text-gray-800">Email</h3>
+                <p className="text-gray-600">support@mybusiness.com</p>
+              </div>
+            </div>
+
+            <div className="flex items-center">
+              <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
+                <svg
+                  className="h-6 w-6 text-white"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M17.657 16.657L12 21.314l-5.657-5.657a8 8 0 1111.314 0zM12 14a2 2 0 100-4 2 2 0 000 4z"
+                  ></path>
+                </svg>
+              </div>
+              <div>
+                <h3 className="font-semibold text-gray-800">Our Address</h3>
+                <p className="text-gray-600">
+                  123 Business Street, London EC1A 1BB, UK
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="w-full rounded-4xl bg-white p-4 md:w-1/2">
+          <h2 className="mb-6 text-2xl font-bold text-gray-800">Contact me</h2>
+          <div className="space-y-4">
+            <input
+              type="text"
+              placeholder="Enter your name"
+              className="w-full rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
+            />
+            <input
+              type="email"
+              placeholder="Enter your email"
+              className="w-full rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
+            />
+            <input
+              type="tel"
+              placeholder="Enter your phone"
+              className="w-full rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
+            />
+            <textarea
+              placeholder="Write your message"
+              className="h-32 w-full resize-none rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
+            ></textarea>
+
+            <Button className="w-full">Submit Message</Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-4 w-full max-w-5xl">
+        <div className="h-64 w-full overflow-hidden rounded-lg bg-gray-200"></div>
+      </div>
+    </div>
+  );
+}

src/app/projects/page.tsx

@@ -0,0 +1,24 @@
+import images from '@/assets/images/images';
+import InnerPageBanner from '@/components/layout/innerPages/banner';
+import ProjectsGrid from '@/components/pages/project/ProjectGrid';
+import { t } from '@/locales/translates';
+
+async function getData() {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return { message: 'This data was fetched on the server!' };
+}
+
+export default async function Projects() {
+  const data = await getData();
+
+  return (
+    <main className="flex flex-col items-center justify-between">
+      <InnerPageBanner
+        title={t('pages_projects_title') as string}
+        imageSrc={images.blogBanner.src}
+      />
+
+      <ProjectsGrid />
+    </main>
+  );
+}

src/assets/constants/routeFactory/index.ts

@@ -16,6 +16,10 @@ export default {
   about: {
     title: t('pages_about_title'),
     route: () => '/about-us',
+  },
+   blog: {
+    title: t('pages_blog_title'),
+    route: () => '/blog-us',
   },
   contact: {
     title: t('pages_contact_title'),

src/assets/images/images.ts

@@ -1,16 +1,21 @@
 import homeBanner from './home_banner.jpg';
 import logo from './logo.png';
 import aboutBanner from './about_banner.png';
+import blogBanner from './blog_banner.jpeg';
 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';
-
+import blogImg_1 from './blog_img_1.jpeg'
+import projectImg_1 from './project_img_1.jpeg'
 export default {
   homeBanner,
   logo,
   aboutBanner,
+  blogImg_1,
+  blogBanner,
+  projectImg_1, 
   factoryVector,
   aboutImg_1,
   aboutImg_2,

src/components/layout/navbar/index.tsx

@@ -102,7 +102,7 @@ export default function Navbar() {
   const links = [
     { 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: '/blog', label: t('pages_blog_title') as string },
     { href: '/contact', label: t('pages_contact_title') as string },
     { href: '/product', label: t('pages_products_title') as string },
     { href: '/project', label: t('pages_projects_title') as string },

src/components/pages/blog/PostsGrid.tsx

@@ -0,0 +1,64 @@
+import images from '@/assets/images/images';
+import Image from 'next/image';
+
+const posts = [
+  {
+    title: 'Sustainable Practices Reducing Waste in Industrial Production',
+    image: images.blogImg_1.src,
+    link: '#',
+  },
+  {
+    title: 'Advanced Robotics Revolutionizing Industrial Workflows',
+    image: images.blogImg_1.src,
+    link: '#',
+  },
+  {
+    title: 'Top Benefits of the Robotics in Manufacturing',
+    image: images.blogImg_1.src,
+    link: '#',
+  },
+  {
+    title: 'Leveraging Data Analytics for Smarter Production',
+    image: images.blogImg_1.src,
+    link: '#',
+  },
+  {
+    title: 'Reducing Operational Costs Through Automation',
+    image: '/images/post5.jpg',
+    link: '#',
+  },
+  {
+    title: 'The Advantages of Customized Manufacturing Solutions',
+    image: '/images/post6.jpg',
+    link: '#',
+  },
+];
+
+export default function PostsGrid() {
+  return (
+    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 py-14 sm:grid-cols-2 md:py-28 lg:grid-cols-3">
+      {posts.map((post, index) => (
+        <div key={index} className="overflow-hidden bg-white">
+          <div className="relative aspect-[1.09] w-full overflow-hidden rounded-4xl">
+            <Image
+              src={post.image}
+              alt={post.title}
+              fill
+              className="h-auto w-full object-cover"
+            />
+          </div>
+
+          <div className="py-7">
+            <h2 className="mb-5 text-xl font-semibold">{post.title}</h2>
+            <a
+              href={post.link}
+              className="text-primary text-base hover:underline"
+            >
+              Read More →
+            </a>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/pages/project/ProjectGrid.tsx

@@ -0,0 +1,63 @@
+import images from '@/assets/images/images';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const projects = [
+  {
+    title: 'Sustainable Practices Reducing Waste in Industrial Production',
+    image: images.projectImg_1.src,
+    link: '#',
+  },
+  {
+    title: 'Advanced Robotics Revolutionizing Industrial Workflows',
+    image: images.projectImg_1.src,
+    link: '#',
+  },
+  {
+    title: 'Top Benefits of the Robotics in Manufacturing',
+    image: images.projectImg_1.src,
+    link: '#',
+  },
+  {
+    title: 'Leveraging Data Analytics for Smarter Production',
+    image: images.projectImg_1.src,
+    link: '#',
+  },
+  {
+    title: 'Reducing Operational Costs Through Automation',
+    image: '/images/post5.jpg',
+    link: '#',
+  },
+  {
+    title: 'The Advantages of Customized Manufacturing Solutions',
+    image: '/images/post6.jpg',
+    link: '#',
+  },
+];
+
+export default function ProjectsGrid() {
+  return (
+    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 py-14 md:grid-cols-2 md:py-28">
+      {projects.map((project, index) => (
+        <Link
+          href={project.link}
+          key={index}
+          className="overflow-hidden bg-white"
+        >
+          <div className="relative aspect-[1.09] w-full overflow-hidden rounded-4xl">
+            <Image
+              src={project.image}
+              alt={project.title}
+              fill
+              className="h-auto w-full object-cover"
+            />
+          </div>
+
+          <div className="py-7 text-center">
+            <h2 className="mb-5 text-xl font-semibold">{project.title}</h2>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+}

src/components/uikit/icons/phoneIcon.tsx

@@ -7,7 +7,7 @@ export const PhoneIcon = (props: React.SVGProps<SVGSVGElement>) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-path="url(#clip0_4180_257)">
+    <g clipPath="url(#clip0_4180_257)">
       <path
         d="M21.97 18.33C21.97 18.69 21.89 19.06 21.72 19.42C21.55 19.78 21.33 20.12 21.04 20.44C20.55 20.98 20.01 21.37 19.4 21.62C18.8 21.87 18.15 22 17.45 22C16.43 22 15.34 21.76 14.19 21.27C13.04 20.78 11.89 20.12 10.75 19.29C9.6 18.45 8.51 17.52 7.47 16.49C6.44 15.45 5.51 14.36 4.68 13.22C3.86 12.08 3.2 10.94 2.72 9.81C2.24 8.67 2 7.58 2 6.54C2 5.86 2.12 5.21 2.36 4.61C2.6 4 2.98 3.44 3.51 2.94C4.15 2.31 4.85 2 5.59 2C5.87 2 6.15 2.06 6.4 2.18C6.66 2.3 6.89 2.48 7.07 2.74L9.39 6.01C9.57 6.26 9.7 6.49 9.79 6.71C9.88 6.92 9.93 7.13 9.93 7.32C9.93 7.56 9.86 7.8 9.72 8.03C9.59 8.26 9.4 8.5 9.16 8.74L8.4 9.53C8.29 9.64 8.24 9.77 8.24 9.93C8.24 10.01 8.25 10.08 8.27 10.16C8.3 10.24 8.33 10.3 8.35 10.36C8.53 10.69 8.84 11.12 9.28 11.64C9.73 12.16 10.21 12.69 10.73 13.22C11.27 13.75 11.79 14.24 12.32 14.69C12.84 15.13 13.27 15.43 13.61 15.61C13.66 15.63 13.72 15.66 13.79 15.69C13.87 15.72 13.95 15.73 14.04 15.73C14.21 15.73 14.34 15.67 14.45 15.56L15.21 14.81C15.46 14.56 15.7 14.37 15.93 14.25C16.16 14.11 16.39 14.04 16.64 14.04C16.83 14.04 17.03 14.08 17.25 14.17C17.47 14.26 17.7 14.39 17.95 14.56L21.26 16.91C21.52 17.09 21.7 17.3 21.81 17.55C21.91 17.8 21.97 18.05 21.97 18.33Z"
         stroke="currentColor"