• Header — Sticky navigation with smooth mobile menu toggle animation.
• Hero Section — Full-width intro with headline, description, and banner images.
• About Section — Brand story with multiple layered images and call-to-action.
• Collection Section — Three handmade product categories displayed in a grid.
• Feature Section — Split layout with video banner and feature highlights list.
• Testimonial Section — Single client quote with name and professional title.
• Gallery Section — Full-width image grid with hover overlay and category links.
• Blog Section — Article cards with author, date, and category metadata.
• Footer — Brand info, navigation links, social icons, and contact button.

• Component-Based Structure — Each section is a separate, independently rendered JavaScript module.
• JSON-Driven Content — All text and image data is stored in JSON files, not hardcoded in HTML.
• Sticky Header — Header becomes fixed with a slide-in animation on scroll.
• Mobile Navigation — Slide-in navbar with overlay and smooth open/close transitions.
• Hover Animations — Gallery overlay and blog image zoom effects on hover.
• Responsive Design — Fully responsive layout across mobile, tablet, and desktop screens.
• Custom CSS Variables — Consistent design tokens for colors, typography, spacing, and transitions.

• HTML5 — Semantic structure with root div elements for each component.
• CSS3 — Custom properties, animations, and a mobile-first responsive layout.
• JavaScript (ES Modules) — Modular component files loaded using native ES module imports.
• JSON — Separate data files for each section to separate content from structure.
• Google Fonts — Poppins and Rosario typefaces for clean, modern typography.
• Ionicons — Icon library used for navigation, blog metadata, and social links.

art-nest/
│
├── index.html                    # Main HTML with root div elements for components
│
├── assets/
│   ├── css/
│   │   └── style.css            # Complete styles, animations, and responsive design
│   │
│   ├── js/
│   │   ├── app.js               # Main entry point that imports and renders all components
│   │   ├── header.js            # Header component with navigation logic
│   │   ├── hero.js              # Hero section rendering
│   │   ├── about.js             # About section rendering
│   │   ├── collection.js        # Collection cards rendering
│   │   ├── feature.js           # Feature section with video banner
│   │   ├── testimonial.js       # Testimonial card rendering
│   │   ├── gallery.js           # Gallery grid rendering
│   │   ├── blog.js              # Blog posts rendering
│   │   └── footer.js            # Footer component rendering
│   │
│   ├── data/
│   │   ├── header.json          # Navigation menu and brand data
│   │   ├── hero.json            # Hero content and images
│   │   ├── about.json           # About section content
│   │   ├── collection.json      # Collection items data
│   │   ├── feature.json         # Feature list and video data
│   │   ├── testimonial.json     # Client testimonial content
│   │   ├── gallery.json         # Gallery images and titles
│   │   ├── blog.json            # Blog posts with metadata
│   │   └── footer.json          # Footer links and contact info
│   │
│   └── images/                  # Hero banners, collection images, blog photos, icons, shapes
│
└── README.md                    # Project documentation
    

1. Clone the repository:

   git clone https://github.com/nawazdevx/art-nest.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>You cannot open <code>index.html</code> directly in your browser (ES Modules require a server)</li>
      <li>Run a local server instead:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update hero text and images in <code>assets/data/hero.json</code></li>
      <li>Edit collection items and descriptions in <code>assets/data/collection.json</code></li>
      <li>Add or update blog posts in <code>assets/data/blog.json</code></li>
      <li>Change navigation links and footer info in <code>assets/data/header.json</code> and <code>assets/data/footer.json</code></li>
      <li>Adjust colors, fonts, and spacing using CSS variables in <code>assets/css/style.css</code></li>
    </ul>
  </li>
</ol>