#bosh sahifa tugallandi, readme yaxshilandi

README.md

@@ -1,36 +1,77 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+<div align="center">
+  <br />
+    <img src="https://i.ibb.co/ck27CVC/nuts-project-banner.png" alt="Project Banner">
+  <br />
 
-## Getting Started
+  <div>
+     <img src="https://img.shields.io/badge/-Next_JS-black?style=for-the-badge&logoColor=white&logo=nextdotjs&color=000000" alt="nextdotjs" />
+    <img src="https://img.shields.io/badge/-TypeScript-black?style=for-the-badge&logoColor=white&logo=typescript&color=3178C6" alt="typescript" />
+    <img src="https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" />
+  </div>
 
-First, run the development server:
+<h3 align="center">Nuts & Seeds Website</h3>
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+   <div align="center">
+     This project was developed for a nut and seed production company, aiming to automate production processes and effectively promote products in the market.
+    </div>
+</div>
+
+## 📋 <a name="table">Table of Contents</a>
+
+1. 🤖 [Introduction](#introduction)
+2. ⚙️ [Tech Stack](#tech-stack)
+3. 🤸 [Quick Start](#quick-start)
+
+## <a name="introduction">🤖 Introduction</a>
+
+### Introduction  
+
+The **"Nuts & Seeds" Project** is a comprehensive digital solution designed for a nut and seed manufacturing company. With the growing demand for high-quality roasted seeds and nuts, this project aims to streamline the company's operations, enhance its digital presence, and simplify customer engagement.  
+
+In today's competitive market, efficient production management, effective product showcasing, and seamless customer interaction are essential for success. This project bridges these needs by providing a robust system that automates order management, showcases the company’s diverse product offerings, and delivers valuable insights through analytics.  
+
+Whether it's roasted sunflower seeds, pistachios, almonds, or other products, this platform ensures that the company can present its products in an appealing way while maintaining operational efficiency. By leveraging modern technologies, the **"Nuts & Seeds" Project** sets a new standard for productivity, customer satisfaction, and growth in the industry.
+
+## <a name="tech-stack">⚙️ Tech Stack</a>
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- React 19
+- Next.js 15
+- GSAP
+- TailwindCSS
+- ShadCN
+- TypeScript
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## <a name="quick-start">🤸 Quick Start</a>
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+Follow these steps to set up the project locally on your machine.
 
-## Learn More
+**Prerequisites**
 
-To learn more about Next.js, take a look at the following resources:
+Make sure you have the following installed on your machine:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Git](https://git-scm.com/)
+- [Node.js](https://nodejs.org/en)
+- [npm](https://www.npmjs.com/) (Node Package Manager)
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+**Cloning the Repository**
 
-## Deploy on Vercel
+```bash
+git clone https://github.com/elmurodvokhidov/nuts.git
+cd nuts
+```
+
+**Installation**
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Install the project dependencies using npm:
+
+```bash
+npm install
+```
+
+**Running the Project**
+
+```bash
+npm run dev
+```
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.

app/about/page.tsx

@@ -1,5 +1,4 @@
 import Navbar from '@/components/Navbar'
-import React from 'react'
 
 export default function page() {
     return (

app/contact/page.tsx

@@ -1,5 +1,4 @@
 import Navbar from '@/components/Navbar'
-import React from 'react'
 
 export default function page() {
     return (

app/globals.css

@@ -15,13 +15,16 @@ body {
   height: 3px;
   border-radius: 50px;
 }
+
 ::-webkit-scrollbar-track {
   background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
   background: #e5e7eb;
   border-radius: 50px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background: #363A3D;
 }
@@ -68,11 +71,9 @@ body {
   z-index: 3;
   width: 100%;
   max-width: 640px;
-  background-image: radial-gradient(
-      at 27% 37%,
+  background-image: radial-gradient(at 27% 37%,
       hsla(215, 98%, 61%, 1) 0px,
-      transparent 0%
-    ),
+      transparent 0%),
     radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
     radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
     radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
@@ -116,6 +117,7 @@ body {
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
   }
+
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
@@ -148,6 +150,7 @@ body {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
@@ -176,4 +179,41 @@ nav a.active {
 
 nav a.active::after {
   @apply w-full h-0.5 bg-pink;
+}
+
+.footer_social a {
+  @apply text-gray-500;
+}
+
+.floating-nav {
+  @apply bg-white rounded-lg border shadow-lg;
+}
+
+.product_card {
+  @apply relative w-[300px] bg-white rounded-lg py-5 px-4 space-y-8 overflow-hidden shadow-lg;
+}
+
+.card_decoration {
+  @apply absolute bottom-0 left-0 h-0 w-full bg-black transition-all duration-500;
+}
+
+.product_card:hover .card_decoration {
+  @apply h-full;
+}
+
+.product_card:hover h3,
+.product_card:hover p {
+  @apply relative text-white z-10 transition-all duration-300;
+}
+
+.p {
+  @apply text-base uppercase text-pink;
+}
+
+.h1 {
+  @apply md:text-4xl sm:text-3xl text-2xl font-bold tracking-wider w-3/5 text-center text-black
+}
+
+.section {
+  @apply relative z-10 px-8;
 }

app/layout.tsx

@@ -3,6 +3,7 @@ import { Nunito } from "next/font/google";
 import { getLocale, getMessages } from "next-intl/server";
 import { NextIntlClientProvider } from "next-intl";
 import "./globals.css";
+import Footer from "@/components/Footer";
 
 const nunito = Nunito({
   subsets: ["latin"],
@@ -31,6 +32,7 @@ export default async function LocaleLayout({
             <div className="main_gradient" />
           </div>
           {children}
+          <Footer />
         </NextIntlClientProvider>
       </body>
     </html>

app/not-found.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function NotFound() {
     return (
         <div>not-found</div>

app/page.tsx

@@ -1,10 +1,16 @@
+import About from "@/components/About";
+import Contact from "@/components/Contact";
 import HomeLeftSide from "@/components/HomeLeftSide";
 import HomeRightSide from "@/components/HomeRightSide";
 import Navbar from "@/components/Navbar";
+import Products from "@/components/Products";
+import WhyUs from "@/components/WhyUs";
+import Works from "@/components/Works";
 
 export default function Home() {
   return (
     <div>
+      {/* Birinchi bo'lak */}
       <section className="h-screen relative overflow-hidden">
         {/* Navbar Componenti */}
         <Navbar />
@@ -17,6 +23,17 @@ export default function Home() {
           <HomeRightSide />
         </main>
       </section>
+
+      {/* Umumiy qism */}
+      <section className="section">
+        <Products />
+        <About />
+        <WhyUs />
+        <Works />
+      </section>
+
+      {/* Contact qismi */}
+      <Contact />
     </div>
   );
 }

app/products/page.tsx

@@ -1,5 +1,4 @@
 import Navbar from '@/components/Navbar'
-import React from 'react'
 
 export default function page() {
     return (

components/About.tsx

@@ -0,0 +1,24 @@
+import { useTranslations } from 'next-intl';
+import Image from 'next/image'
+
+export default function About() {
+    const t = useTranslations('about');
+
+    return (
+        <div className='flex items-center justify-center gap-[150px] py-10'>
+            <Image
+                src="/images/about.png"
+                alt="Picture of the author"
+                width={500}
+                height={500}
+            />
+
+            <div className='w-[45%] flex flex-col items-start gap-8'>
+                <p className='p'>{t('text1')}</p>
+                <h1 className='h1 !text-left !w-full'>{t('text2')}</h1>
+                <p className='text-base text-gray-500'>{t('des1')}</p>
+                <p className='text-base text-gray-500'>{t('des2')}</p>
+            </div>
+        </div>
+    )
+}

components/Contact.tsx

@@ -0,0 +1,36 @@
+import { useTranslations } from 'next-intl';
+import Image from 'next/image'
+import React from 'react'
+
+export default function Contact() {
+    const t = useTranslations('contact');
+
+    return (
+        <div className='my-32 relative z-10 bg-black'>
+            <Image
+                src="/images/contact-bg.jpg"
+                alt="contact"
+                width={1920}
+                height={1800}
+                className='h-[550px] relative z-0 object-cover'
+            />
+
+            <div className='absolute top-5 right-[15%] flex items-center justify-center'>
+                <Image
+                    src="/images/bg-2.png"
+                    alt="shape"
+                    width={500}
+                    height={500}
+                    className='relative z-0'
+                />
+                <div className='w-4/6 text-center flex flex-col items-center gap-10 font-semibold text-white absolute z-10'>
+                    <h1 className='text-4xl'>{t('text1')}</h1>
+                    <p className='text-base font-normal'>{t('text2')}</p>
+                    <button className='text-lg md:py-4 py-2 md:px-9 px-6 rounded-full border border-white capitalize hover:bg-white transition-all duration-300 hover:text-pink'>
+                        {t('text3')}
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}