Prism Bloom - A trippy cannabis concept landing page

Prism Bloom Cannabis Landing Page

Prism Bloom is a colorful, cartoon psychedelic landing page for a fully fictional cannabis brand concept. It is made for adult focused, legal market themed presentations, portfolio previews, product mockups, and creative brand showcases.

The design includes a playful leaf mascot, animated sections, a pretend product shop, product quick view, cart drawer, age check gate, newsletter form, reviews, FAQ, and a floating back to top button.

Key Features

1. Fully static website export
2. No backend required
3. No database required
4. No real payments, orders, shipping, or product sales
5. Adult age check gate
6. Responsive mobile friendly layout
7. Animated hero and interactive visual effects
8. Pretend shop with category filtering
9. Product quick view modal
10. Browser saved pretend cart
11. Newsletter form with custom messages
12. FAQ, testimonials, brand story, bundles, and product sections
13. Floating back to top button
14. Reduced motion support for accessibility

Technology Used

• Next.js static export
• React
• Tailwind CSS
• Framer Motion
• React Three Fiber
• Three.js
• Lucide icons

Requirements

1. Node.js 20 or newer for editing and building the project
2. npm for installing dependencies and running scripts
3. A modern browser such as Chrome, Edge, Firefox, or Safari
4. A static hosting server such as Apache, nginx, cPanel hosting, Laragon, or any standard web host
5. FTP, SFTP, cPanel File Manager, or hosting file manager for upload
6. No backend server required after build
7. No database required
8. No payment gateway required

What You Receive

1. Complete source code
2. Static export support
3. Reusable React components
4. Editable content data file
5. Responsive styling
6. Ready to upload build output

Customization

Most website content can be edited from lib/data.ts. This includes the brand name, navigation, products, bundles, reviews, FAQ, slogans, crew members, and footer content.

Colors are managed through shared CSS variables in app/globals.css. This makes it easy to adjust the full visual theme without editing every component.

Local Setup

1. Extract the project files.
2. Open the project folder in your code editor.
3. Run npm install.
4. Run npm run dev to preview locally.

Build Instructions

Before uploading to your server, set the correct base path in .env.local.

NEXT_PUBLIC_BASE_PATH=/prismBloom

Then build the static export:

npm run build

The final upload files will be created inside the out folder.

Upload Instructions

Upload only the contents inside the out folder to your server path.

For example, if your page should open at:

https://lab.wasark.com/prismBloom/

Your server folder should contain:

/prismBloom/index.html
/prismBloom/404.html
/prismBloom/icon.svg
/prismBloom/_next/

Important Notes

1. This is a fictional brand concept.
2. No real cannabis products are sold through this page.
3. No payment gateway is included.
4. No checkout order is submitted anywhere.
5. The cart is only for visual and demo purposes.
6. The age gate is a front end responsible access message, not legal identity verification.
7. Keep the responsible messaging if adapting the template.

Best Use Cases

1. Creative landing page template
2. Portfolio showcase
3. Brand concept presentation
4. Static website demo
5. Design inspiration for legal market themed projects

Prism Bloom is easy to customize, visually memorable, and simple to host. Since it exports as static HTML, it can run on most standard hosting environments without keeping a Node server online.