Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/luigitemu/pikante-landing/llms.txt

Use this file to discover all available pages before exploring further.

Pikanté is a single-page Astro 6 site. Every piece of UI, copy, and media lives in a tightly scoped directory tree — no page router, no nested routes, no content collections. Understanding where things live is the fastest way to get productive with the codebase.

​
Directory tree

/
├── public/
│   ├── assets/
│   │   └── prep-video.mp4          # Short-form preparation video (served at /assets/prep-video.mp4)
│   ├── favicon.ico
│   ├── favicon.png
│   ├── favicon.svg
│   └── favicon.webp
├── src/
│   ├── components/
│   │   ├── Nav.astro
│   │   ├── Hero.astro
│   │   ├── Marquee.astro
│   │   ├── Products.astro
│   │   ├── HowTo.astro
│   │   ├── WhatIs.astro
│   │   ├── Stores.astro
│   │   ├── Lifestyle.astro
│   │   ├── Faq.astro
│   │   ├── Footer.astro
│   │   ├── PrepVideo.jsx           # React island (client:visible)
│   │   ├── SocialProof.astro       # currently commented out
│   │   └── Offer.astro             # currently commented out
│   ├── images/
│   │   ├── hero-bottle.webp
│   │   ├── hero-fire.webp
│   │   ├── lifestyle-night.webp
│   │   ├── lifestyle-overhead.webp
│   │   ├── lifestyle-pool.webp
│   │   ├── logo-flame.webp
│   │   ├── logo-wordmark.webp
│   │   ├── logo.png
│   │   ├── logo_no_background.png
│   │   ├── pikante_escarcha.webp
│   │   ├── pikante_hielo.webp
│   │   ├── prep-overhead.webp
│   │   ├── prep-video.mp4
│   │   ├── product-limes.webp
│   │   └── products-row.webp
│   ├── pages/
│   │   └── index.astro             # Single entry point — the entire site
│   └── styles/
│       └── global.css              # All custom CSS + design tokens
├── astro.config.mjs                # Astro + Vite configuration
├── tsconfig.json
└── package.json

​
The single entry point

src/pages/index.astro is the only page in the project. Astro’s file-based router maps it to /, so the entire landing experience — from the nav bar to the footer — is assembled in that one file. It imports global.css first, then mounts every section component in reading order: 
---
import '../styles/global.css';
import Nav        from '../components/Nav.astro';
import Hero       from '../components/Hero.astro';
import Marquee    from '../components/Marquee.astro';
import WhatIs     from '../components/WhatIs.astro';
import HowTo      from '../components/HowTo.astro';
import Products   from '../components/Products.astro';
import Stores     from '../components/Stores.astro';
// import SocialProof from '../components/SocialProof.astro';
import Lifestyle  from '../components/Lifestyle.astro';
// import Offer    from '../components/Offer.astro';
import Faq        from '../components/Faq.astro';
import Footer     from '../components/Footer.astro';
---
The rendered order in the <body> is: 
Nav → Hero → Marquee → Products → HowTo → WhatIs → Stores → Lifestyle → Faq → Footer
SocialProof and Offer are fully implemented components that are currently commented out in index.astro. Uncommenting either import and its corresponding JSX tag is all that is needed to re-enable them.

​
Component import vs. render order

In index.astro, the import order at the top of the frontmatter fence (---) does not have to match the render order in the <body>. The actual on-screen order is determined solely by the element sequence in the template — WhatIs is imported before HowTo, for example, but HowTo appears first in the rendered page.

​
The public/ directory

Astro copies everything in public/ to the build output verbatim, preserving the same path structure. That means any file in public/ is accessible from the browser at the equivalent root-relative URL:
File on diskURL in browser
public/assets/prep-video.mp4/assets/prep-video.mp4
public/favicon.png/favicon.png
public/favicon.svg/favicon.svg
No import statement is needed — reference these files directly in src attributes or CSS url() calls as root-relative paths.

​
The src/images/ directory

Image assets used by components (product photos, lifestyle shots, logos, and the preparation video) live in src/images/. These are not served from public/ — components import them directly and Astro’s asset pipeline (or a plain relative src path) handles the reference at build time.

​
Config files

astro.config.mjs

Registers the @astrojs/react integration (for PrepVideo.jsx) and the @tailwindcss/vite Vite plugin. No separate tailwind.config.js file is used — Tailwind v4 is configured entirely through the Vite plugin and the @import "tailwindcss" directive in global.css.

package.json

Declares astro ^6.3.5, react ^19.2.6, tailwindcss ^4.3.0, and @tailwindcss/vite ^4.3.0 as runtime dependencies. Node ≥ 22.12.0 is required.

tsconfig.json

Standard Astro TypeScript configuration. The project is typed end-to-end; .astro files and the React island both benefit from IDE type-checking.

src/styles/global.css

The single stylesheet. Imports Tailwind v4 via @import "tailwindcss", declares all CSS custom properties (design tokens), and defines every utility class and component style used across the site.

Build docs developers (and LLMs) love

Get started for freeTalk to us