>}
+ */
+export async function getStates() {
+ try {
+ const response = await getDispensaries({ limit: 500 });
+ const states = [...new Set(
+ (response.dispensaries || [])
+ .map(d => d.state)
+ .filter(Boolean)
+ .sort()
+ )];
+ return states;
+ } catch (error) {
+ console.error('Error fetching states:', error);
+ return [];
+ }
+}
diff --git a/findadispo/frontend/src/components/findadispo/Footer.jsx b/findadispo/frontend/src/components/findadispo/Footer.jsx
new file mode 100644
index 00000000..c6731eb1
--- /dev/null
+++ b/findadispo/frontend/src/components/findadispo/Footer.jsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { MapPin, Mail, Phone } from 'lucide-react';
+
+export function Footer() {
+ const currentYear = new Date().getFullYear();
+
+ return (
+
+ );
+}
+
+export default Footer;
diff --git a/findadispo/frontend/src/components/findadispo/Header.jsx b/findadispo/frontend/src/components/findadispo/Header.jsx
new file mode 100644
index 00000000..b5e364b0
--- /dev/null
+++ b/findadispo/frontend/src/components/findadispo/Header.jsx
@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { MapPin, Menu, X, User, LogIn } from 'lucide-react';
+import { Button } from '../ui/button';
+
+export function Header() {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+ const location = useLocation();
+
+ // Mock auth state - replace with real auth context
+ const isAuthenticated = false;
+
+ const navLinks = [
+ { href: '/', label: 'Home' },
+ { href: '/store-locator', label: 'Store Locator' },
+ { href: '/about', label: 'About' },
+ { href: '/contact', label: 'Contact' },
+ ];
+
+ const isActive = (path) => location.pathname === path;
+
+ return (
+
+
+ {/* Logo */}
+
+
+
+
+
+ Find a Dispensary
+ Cannabis Locator
+
+
+
+ {/* Desktop Navigation */}
+
+
+ {/* Auth Buttons */}
+
+ {isAuthenticated ? (
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+ )}
+
+
+ {/* Mobile Menu Button */}
+
+
+
+
+ {/* Hero Section */}
+
+
+
+ About Find a Dispensary
+
+
+ We're on a mission to make finding quality cannabis products simple, safe, and accessible.
+ Our platform connects consumers with licensed dispensaries across the country.
+
+
+
+ {/* Stats Section */}
+
+
+
+ {stats.map((stat, index) => (
+
+
{stat.value}
+
{stat.label}
+
+ ))}
+
+
+
+ {/* Mission Section */}
+
+
+
+
Our Mission
+
+ As the cannabis industry continues to grow and evolve, we believe everyone deserves
+ access to accurate, up-to-date information about licensed dispensaries in their area.
+ Our platform was built to bridge the gap between consumers and quality cannabis products,
+ making it easier than ever to find trusted dispensaries that meet your needs.
+
+
+
+
+ {/* Features Section */}
+
+
+
+ Why Choose Us
+
+
+ {features.map((feature, index) => (
+
+
+
+
+
+
+
+
{feature.title}
+
{feature.description}
+
+
+ ))}
+
+
+
+ {/* How It Works */}
+
+
+
+ How It Works
+
+
+ {[
+ { step: '1', title: 'Search', description: 'Enter your location or use "Near Me" to find dispensaries.' },
+ { step: '2', title: 'Compare', description: 'View ratings, hours, and amenities to find the right fit.' },
+ { step: '3', title: 'Visit', description: 'Get directions and contact info to plan your visit.' },
+ ].map((item, index) => (
+
+
+ {item.step}
+
+
{item.title}
+
{item.description}
+
+ ))}
+
+
+
+
+
+
Price Alerts
+
+ Get notified when prices drop on your favorite products
+
+
+
+
+
+ {/* Stats */}
+
+
+
+ {alerts.length}
+ Total Alerts
+
+
+
+
+ {activeCount}
+ Active
+
+
+
+
+
+ {alerts.filter((a) => a.currentPrice <= a.targetPrice).length}
+
+ Triggered
+
+
+
+
+ $142
+ Total Saved
+
+
+
+
+ {/* Alerts List */}
+ {alerts.length > 0 ? (
+
+ {alerts.map((alert) => (
+
+
+
+
+
+ {alert.currentPrice <= alert.targetPrice ? (
+
+ ) : (
+
+ )}
+
+
+
+
{alert.productName}
+ {alert.currentPrice <= alert.targetPrice && (
+ Price Alert!
+ )}
+
+
+
+ {alert.dispensary}
+
+
+
+
+
+
+
Target Price
+
${alert.targetPrice}
+
+
+
Current Price
+
+ ${alert.currentPrice}
+
+
+
+
+ toggleAlert(alert.id)}
+ />
+
+
+
+
+ ))}
+
+ ) : (
+
+
+
+ No price alerts
+
+ Create alerts to get notified when prices drop on products you want
+
+
+
+
+ )}
+
+ {/* Simple Create Modal - In production would be a proper modal */}
+ {showCreateModal && (
+
+
+
+ Create Price Alert
+
+
+
+
+
Alert creation would connect to the API
+
Search for a product and set your target price
+
+
+
+
+
+
+
+ )}
+
+
+
+
Contact Us
+
+ Have questions or feedback? We'd love to hear from you. Send us a message
+ and we'll respond as soon as possible.
+
+
+
+
+ {/* Contact Form */}
+
+
+
+ Send us a message
+
+
+ {submitted ? (
+
+
+
+
+
Message Sent!
+
Thank you for reaching out. We'll get back to you within 24-48 hours.
+
+
+
+
+ {/* Contact Info Sidebar */}
+
+
+
+ Contact Information
+
+
+
+
+
+
+
Phone
+
(555) 123-4567
+
+
+
+
+
Business Hours
+
Mon-Fri: 9AM - 6PM PST
+
+
+
+
+
+ {/* FAQ Section */}
+
+
+ Frequently Asked Questions
+
+
+ {faqs.map((faq, index) => (
+
+
+
+ {expandedFaq === index && (
+
+ {faq.answer}
+
+ )}
+
+
+ ))}
+
+
+
+
+
+ {/* Sidebar */}
+
+
+ {/* Mobile Navigation */}
+
+
+
+
+ {/* Main Content */}
+
+
+
+
+
+
+
Dashboard
+
Welcome back! Here's your activity summary.
+
+
+ {/* Stats Grid */}
+
+ {stats.map((stat, index) => (
+
+
+
+
+
+
+
+
{stat.value}
+
{stat.label}
+
+
+ ))}
+
+
+
+ {/* Recent Saved Searches */}
+
+
+ Recent Saved Searches
+
+
+
+
+
+ {recentSearches.length > 0 ? (
+
+ {recentSearches.map((search) => (
+
+
+
+
+
{search.name}
+
{search.query}
+
+
+
{search.results} results
+
+ ))}
+
+
+
No saved searches yet
+
+
+
+
+
+ {/* Active Alerts */}
+
+
+ Active Price Alerts
+
+
+
+
+
+ {activeAlerts.length > 0 ? (
+
+ {activeAlerts.map((alert) => (
+
+
+
+
+
{alert.productName}
+
{alert.dispensary}
+
+
+
+
+ Under ${alert.targetPrice}
+
+
Current: ${alert.currentPrice}
+
+
+ ))}
+
+
+
No active alerts
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+ Quick Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading dispensary details...
+
+
+
Error Loading Dispensary
+
{error}
+
+
+
+
+
+
Dispensary Not Found
+
The dispensary you're looking for doesn't exist.
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+ {/* Back Button */}
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+ {/* Title */}
+
+
+
+ {dispensary.isOpen ? 'Open Now' : 'Closed'}
+
+ {formatDistance(dispensary.distance)} away
+
+
{dispensary.name}
+
+
+
+ {/* Content */}
+
+
+ {/* Main Content */}
+
+ {/* Quick Info */}
+
+
+
+
+
+
+ {dispensary.rating}
+
+
({dispensary.reviews} reviews)
+
+
+
+ {dispensary.hours}
+
+
+
+ {/* Description */}
+
+
+ About
+
+
+ {dispensary.description}
+
+
+
+ {/* Amenities */}
+ {dispensary.amenities && dispensary.amenities.length > 0 && (
+
+
+ Amenities
+
+
+
+ {dispensary.amenities.map((amenity, index) => (
+ {amenity}
+ ))}
+
+
+
+ )}
+
+ {/* Products Section Placeholder */}
+
+
+ Available Products
+
+
+
+
Product menu coming soon
+
Connect to API to view available products
+
+
+
+ {/* Sidebar */}
+
+ {/* Contact Card */}
+
+
+ Contact
+
+
+
+
+
+
+
+ {/* Actions */}
+
+
+
+
+
+ {/* Map Placeholder */}
+
+
+
+
+
+
+
+
+
+ {/* Search Header */}
+
+
+
+
+ {/* Filter Panel */}
+ {showFilters && (
+
+
+
+ Min Rating:
+
+
+
+ Max Distance:
+
+
+
+ )}
+
+
+
+ {/* Main Content - Split View */}
+
+ {/* Dispensary List (Left Side) */}
+
+
+
+ {dispensaries.length} dispensaries found
+
+
+
+ {loading ? (
+
+
+
Loading dispensaries...
+
+ ) : error ? (
+
+
{error}
+
+
+ ) : dispensaries.length === 0 ? (
+
+
+
No dispensaries found
+
Try adjusting your search or filters
+
+ ) : (
+ dispensaries.map((dispensary) => (
+
setSelectedDispensary(dispensary)}
+ />
+ ))
+ )}
+
+
+
+ {/* Map (Right Side) */}
+
+ {/* Placeholder for Google Maps */}
+
+
+
+
Map View
+
Google Maps will be integrated here
+
Configure API key in admin panel
+
+
+
+ {/* Selected Dispensary Card Overlay */}
+ {selectedDispensary && (
+
+
+
+
+
+
+
{selectedDispensary.name}
+
+
+ {selectedDispensary.rating}
+ ({selectedDispensary.reviews})
+
+
{selectedDispensary.address}
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
{dispensary.name}
+
+ {dispensary.isOpen ? 'Open' : 'Closed'}
+
+
+
+
+
+
+ {dispensary.rating}
+
+
({dispensary.reviews} reviews)
+
|
+
{formatDistance(dispensary.distance)}
+
+
+
+
+ {dispensary.hours}
+
+
+
+
+ {dispensary.address}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Logo */}
+
+
+
+
+
+
Find a Dispensary
+
+
+
+
+
+ Welcome Back
+ Sign in to your account
+
+
+
+
+
+
+
+
+ Or continue with
+
+
+
+
+
+
+
+
+ Don't have an account?{' '}
+
+ Sign up for free
+
+
+
+
+
+
+
+
Profile Settings
+
Manage your account settings and preferences
+
+
+ {/* Profile Information */}
+
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+
JPG, PNG. Max 2MB
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Notification Preferences */}
+
+
+
+
+ Notification Preferences
+
+
+
+
+
+
Price Alerts
+
+ Get notified when prices drop on watched products
+
+
+
handleNotificationChange('priceAlerts', value)}
+ />
+
+
+
New Dispensaries
+
+ Get notified when new dispensaries open near you
+
+
+
handleNotificationChange('newDispensaries', value)}
+ />
+
+
+
Weekly Digest
+
+ Receive a weekly summary of deals in your area
+
+
+
handleNotificationChange('weeklyDigest', value)}
+ />
+
+
+
Promotions & Tips
+
+ Receive tips and promotional offers
+
+
+
handleNotificationChange('promotions', value)}
+ />
+
+
+ {/* Security */}
+
+
+
+
+ Security
+
+
+
+
+
+
Password
+
Last changed 3 months ago
+
+
+
+
+
Two-Factor Authentication
+
Add an extra layer of security
+
+
+
+
+
Delete Account
+
+ Permanently delete your account and all data
+
+
+
+
+
+ {/* Save Button */}
+
+
+ {saved && Changes saved successfully!}
+
+
+
+
+
Saved Searches
+
Quickly access your frequently used searches
+
+
+
+
+
+
+ {searches.length > 0 ? (
+
+ {searches.map((search) => (
+
+
+
+
+
+
+
+
+
{search.name}
+
{search.query}
+
+
+
+
+
+
+ {search.lastUsed}
+
+
+
+ {search.results} results
+
+
+ {search.filters.map((filter, index) => (
+
+ {filter}
+
+ ))}
+
+ )}
+
+
+
+
+
+
+ ))}
+
+ ) : (
+
+
+
+ No saved searches
+
+ Save your frequent searches for quick access
+
+
+
+
+
+
+ )}
+
+
+ {/* Logo */}
+
+
+
+
+
+
Find a Dispensary
+
+
+
+
+
+ Create Your Account
+ Start finding dispensaries near you
+
+
+
+
+
+
+
+
+ Or sign up with
+
+
+
+
+
+
+
+
+ Already have an account?{' '}
+
+ Sign in
+
+
+
+
+
+
+ {/* Search Header */}
+
+
+
+ {/* Search Bar */}
+
+
+
+ setSearchQuery(e.target.value)}
+ className="pl-10"
+ />
+
+
+
+
+
+ {/* View Toggle */}
+
+
{dispensaries.length} dispensaries found
+
+
+
+
+
+
+ {/* Filter Panel */}
+ {showFilters && (
+
+
+
+
+
+ Min Rating:
+
+
+
+
+ Distance:
+
+
+
+
+ {/* Amenities */}
+
+
Amenities:
+
+ {amenityOptions.map((amenity) => (
+ toggleAmenity(amenity)}
+ >
+ {amenity}
+
+ ))}
+
+
+
+ {activeFilterCount > 0 && (
+
+ )}
+
+ )}
+
+
+
+
+ {/* Content */}
+
+ {viewMode === 'list' ? (
+
+ {loading ? (
+
+
+
Loading dispensaries...
+
+ ) : error ? (
+
+
+
Error loading dispensaries
+
{error}
+
+
+ ) : dispensaries.length === 0 ? (
+
+
+
No dispensaries found
+
Try adjusting your search or filters
+
+
+ ) : (
+ dispensaries.map((dispensary) => (
+
+ ))
+ )}
+
+ ) : (
+
+
+
+
Map View
+
Google Maps will be integrated here
+
Configure API key in admin panel
+
+
+ )}
+
+
+
+
+ {dispensary.isOpen ? 'Open' : 'Closed'}
+
+
{dispensary.name}
+
+
+
+
+ {dispensary.rating}
+
+
({dispensary.reviews})
+
|
+
{formatDistance(dispensary.distance)}
+
+
+ {dispensary.hours}
+
+
+
+
+ {dispensary.address}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Public Routes */}
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ {/* Auth Routes */}
+ } />
+ } />
+
+ {/* Dashboard Routes */}
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/findagram/frontend/src/api/client.js b/findagram/frontend/src/api/client.js
new file mode 100644
index 00000000..de37ddbe
--- /dev/null
+++ b/findagram/frontend/src/api/client.js
@@ -0,0 +1,417 @@
+/**
+ * Findagram API Client
+ *
+ * Connects to the backend /api/az/* endpoints which are publicly accessible.
+ * Uses REACT_APP_API_URL environment variable for the base URL.
+ *
+ * Local development: http://localhost:3010
+ * Production: https://findagram.co (proxied to backend via ingress)
+ */
+
+const API_BASE_URL = process.env.REACT_APP_API_URL || '';
+
+/**
+ * Make a fetch request to the API
+ */
+async function request(endpoint, options = {}) {
+ const url = `${API_BASE_URL}${endpoint}`;
+
+ const response = await fetch(url, {
+ ...options,
+ headers: {
+ 'Content-Type': 'application/json',
+ ...options.headers,
+ },
+ });
+
+ if (!response.ok) {
+ const error = await response.json().catch(() => ({ error: 'Request failed' }));
+ throw new Error(error.error || `HTTP ${response.status}`);
+ }
+
+ return response.json();
+}
+
+/**
+ * Build query string from params object
+ */
+function buildQueryString(params) {
+ const filtered = Object.entries(params).filter(([_, v]) => v !== undefined && v !== null && v !== '');
+ if (filtered.length === 0) return '';
+ return '?' + new URLSearchParams(filtered).toString();
+}
+
+// ============================================================
+// PRODUCTS
+// ============================================================
+
+/**
+ * Search/filter products across all dispensaries
+ *
+ * @param {Object} params
+ * @param {string} [params.search] - Search term (name or brand)
+ * @param {string} [params.type] - Category type (flower, concentrates, edibles, etc.)
+ * @param {string} [params.subcategory] - Subcategory
+ * @param {string} [params.brandName] - Brand name filter
+ * @param {string} [params.stockStatus] - Stock status (in_stock, out_of_stock, unknown)
+ * @param {number} [params.storeId] - Filter to specific store
+ * @param {number} [params.limit=50] - Page size
+ * @param {number} [params.offset=0] - Offset for pagination
+ */
+export async function getProducts(params = {}) {
+ const queryString = buildQueryString({
+ search: params.search,
+ type: params.type,
+ subcategory: params.subcategory,
+ brandName: params.brandName,
+ stockStatus: params.stockStatus,
+ storeId: params.storeId,
+ limit: params.limit || 50,
+ offset: params.offset || 0,
+ });
+
+ return request(`/api/az/products${queryString}`);
+}
+
+/**
+ * Get a single product by ID
+ */
+export async function getProduct(id) {
+ return request(`/api/az/products/${id}`);
+}
+
+/**
+ * Get product availability - which dispensaries carry this product
+ *
+ * @param {number|string} productId - Product ID
+ * @param {Object} params
+ * @param {number} params.lat - User latitude
+ * @param {number} params.lng - User longitude
+ * @param {number} [params.maxRadiusMiles=50] - Maximum search radius in miles
+ * @returns {Promise<{productId: number, productName: string, brandName: string, totalCount: number, offers: Array}>}
+ */
+export async function getProductAvailability(productId, params = {}) {
+ const { lat, lng, maxRadiusMiles = 50 } = params;
+
+ if (!lat || !lng) {
+ throw new Error('lat and lng are required');
+ }
+
+ const queryString = buildQueryString({
+ lat,
+ lng,
+ max_radius_miles: maxRadiusMiles,
+ });
+
+ return request(`/api/az/products/${productId}/availability${queryString}`);
+}
+
+/**
+ * Get similar products (same brand + category)
+ *
+ * @param {number|string} productId - Product ID
+ * @returns {Promise<{similarProducts: Array<{productId: number, name: string, brandName: string, imageUrl: string, price: number}>}>}
+ */
+export async function getSimilarProducts(productId) {
+ return request(`/api/az/products/${productId}/similar`);
+}
+
+/**
+ * Get products for a specific store with filters
+ */
+export async function getStoreProducts(storeId, params = {}) {
+ const queryString = buildQueryString({
+ search: params.search,
+ type: params.type,
+ subcategory: params.subcategory,
+ brandName: params.brandName,
+ stockStatus: params.stockStatus,
+ limit: params.limit || 50,
+ offset: params.offset || 0,
+ });
+
+ return request(`/api/az/stores/${storeId}/products${queryString}`);
+}
+
+// ============================================================
+// DISPENSARIES (STORES)
+// ============================================================
+
+/**
+ * Get all dispensaries
+ *
+ * @param {Object} params
+ * @param {string} [params.city] - Filter by city
+ * @param {boolean} [params.hasPlatformId] - Filter by platform ID presence
+ * @param {number} [params.limit=100] - Page size
+ * @param {number} [params.offset=0] - Offset
+ */
+export async function getDispensaries(params = {}) {
+ const queryString = buildQueryString({
+ city: params.city,
+ hasPlatformId: params.hasPlatformId,
+ limit: params.limit || 100,
+ offset: params.offset || 0,
+ });
+
+ return request(`/api/az/stores${queryString}`);
+}
+
+/**
+ * Get a single dispensary by ID
+ */
+export async function getDispensary(id) {
+ return request(`/api/az/stores/${id}`);
+}
+
+/**
+ * Get dispensary by slug or platform ID
+ */
+export async function getDispensaryBySlug(slug) {
+ return request(`/api/az/stores/slug/${slug}`);
+}
+
+/**
+ * Get dispensary summary (product counts, categories, brands)
+ */
+export async function getDispensarySummary(id) {
+ return request(`/api/az/stores/${id}/summary`);
+}
+
+/**
+ * Get brands available at a specific dispensary
+ */
+export async function getDispensaryBrands(id) {
+ return request(`/api/az/stores/${id}/brands`);
+}
+
+/**
+ * Get categories available at a specific dispensary
+ */
+export async function getDispensaryCategories(id) {
+ return request(`/api/az/stores/${id}/categories`);
+}
+
+// ============================================================
+// CATEGORIES
+// ============================================================
+
+/**
+ * Get all categories with product counts
+ */
+export async function getCategories() {
+ return request('/api/az/categories');
+}
+
+// ============================================================
+// BRANDS
+// ============================================================
+
+/**
+ * Get all brands with product counts
+ *
+ * @param {Object} params
+ * @param {number} [params.limit=100] - Page size
+ * @param {number} [params.offset=0] - Offset
+ */
+export async function getBrands(params = {}) {
+ const queryString = buildQueryString({
+ limit: params.limit || 100,
+ offset: params.offset || 0,
+ });
+
+ return request(`/api/az/brands${queryString}`);
+}
+
+// ============================================================
+// DEALS / SPECIALS
+// Note: The /api/az routes don't have a dedicated specials endpoint yet.
+// For now, we can filter products with sale prices or use dispensary-specific specials.
+// ============================================================
+
+/**
+ * Get products on sale (products where sale_price exists)
+ * This is a client-side filter until a dedicated endpoint is added.
+ */
+export async function getDeals(params = {}) {
+ // For now, get products and we'll need to filter client-side
+ // or we could use the /api/dispensaries/:slug/specials endpoint if we have a dispensary context
+ const result = await getProducts({
+ ...params,
+ limit: params.limit || 100,
+ });
+
+ // Filter to only products with a sale price
+ // Note: This is a temporary solution - ideally the backend would support this filter
+ return {
+ ...result,
+ products: result.products.filter(p => p.sale_price || p.med_sale_price),
+ };
+}
+
+// ============================================================
+// SEARCH (convenience wrapper)
+// ============================================================
+
+/**
+ * Search products by term
+ */
+export async function searchProducts(searchTerm, params = {}) {
+ return getProducts({
+ ...params,
+ search: searchTerm,
+ });
+}
+
+// ============================================================
+// FIELD MAPPING HELPERS
+// ============================================================
+
+/**
+ * Map API product to UI-compatible format
+ * Backend returns snake_case, UI expects camelCase with specific field names
+ *
+ * @param {Object} apiProduct - Product from API
+ * @returns {Object} - Product formatted for UI components
+ */
+export function mapProductForUI(apiProduct) {
+ // Handle both direct product and transformed product formats
+ const p = apiProduct;
+
+ return {
+ id: p.id,
+ name: p.name,
+ brand: p.brand || p.brand_name,
+ category: p.type || p.category,
+ subcategory: p.subcategory,
+ strainType: p.strain_type || null,
+ // Images
+ image: p.image_url || p.primary_image_url || null,
+ // Potency
+ thc: p.thc_percentage || p.thc_content || null,
+ cbd: p.cbd_percentage || p.cbd_content || null,
+ // Prices (API returns dollars as numbers or null)
+ price: p.regular_price || null,
+ priceRange: p.regular_price_max && p.regular_price
+ ? { min: p.regular_price, max: p.regular_price_max }
+ : null,
+ onSale: !!(p.sale_price || p.med_sale_price),
+ salePrice: p.sale_price || null,
+ medPrice: p.med_price || null,
+ medSalePrice: p.med_sale_price || null,
+ // Stock
+ inStock: p.in_stock !== undefined ? p.in_stock : p.stock_status === 'in_stock',
+ stockStatus: p.stock_status,
+ // Store info (if available)
+ storeName: p.store_name,
+ storeCity: p.store_city,
+ storeSlug: p.store_slug,
+ dispensaryId: p.dispensary_id,
+ // Options/variants
+ options: p.options,
+ totalQuantity: p.total_quantity,
+ // Timestamps
+ updatedAt: p.updated_at || p.snapshot_at,
+ // For compatibility with ProductCard expectations
+ rating: null, // Not available from API
+ reviewCount: null, // Not available from API
+ dispensaries: [], // Not populated in list view
+ dispensaryCount: p.store_name ? 1 : 0,
+ };
+}
+
+/**
+ * Map API category to UI-compatible format
+ */
+export function mapCategoryForUI(apiCategory) {
+ return {
+ id: apiCategory.type,
+ name: formatCategoryName(apiCategory.type),
+ slug: apiCategory.type?.toLowerCase().replace(/\s+/g, '-'),
+ subcategory: apiCategory.subcategory,
+ productCount: parseInt(apiCategory.product_count || 0, 10),
+ dispensaryCount: parseInt(apiCategory.dispensary_count || 0, 10),
+ brandCount: parseInt(apiCategory.brand_count || 0, 10),
+ };
+}
+
+/**
+ * Map API brand to UI-compatible format
+ */
+export function mapBrandForUI(apiBrand) {
+ return {
+ id: apiBrand.brand_name,
+ name: apiBrand.brand_name,
+ slug: apiBrand.brand_name?.toLowerCase().replace(/\s+/g, '-'),
+ logo: apiBrand.brand_logo_url || null,
+ productCount: parseInt(apiBrand.product_count || 0, 10),
+ dispensaryCount: parseInt(apiBrand.dispensary_count || 0, 10),
+ productTypes: apiBrand.product_types || [],
+ };
+}
+
+/**
+ * Map API dispensary to UI-compatible format
+ */
+export function mapDispensaryForUI(apiDispensary) {
+ return {
+ id: apiDispensary.id,
+ name: apiDispensary.dba_name || apiDispensary.name,
+ slug: apiDispensary.slug,
+ city: apiDispensary.city,
+ state: apiDispensary.state,
+ address: apiDispensary.address,
+ zip: apiDispensary.zip,
+ latitude: apiDispensary.latitude,
+ longitude: apiDispensary.longitude,
+ website: apiDispensary.website,
+ menuUrl: apiDispensary.menu_url,
+ // Summary data (if fetched with summary)
+ productCount: apiDispensary.totalProducts,
+ brandCount: apiDispensary.brandCount,
+ categoryCount: apiDispensary.categoryCount,
+ inStockCount: apiDispensary.inStockCount,
+ };
+}
+
+/**
+ * Format category name for display
+ */
+function formatCategoryName(type) {
+ if (!type) return '';
+ // Convert "FLOWER" to "Flower", "PRE_ROLLS" to "Pre Rolls", etc.
+ return type
+ .toLowerCase()
+ .replace(/_/g, ' ')
+ .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+// Default export for convenience
+const api = {
+ // Products
+ getProducts,
+ getProduct,
+ getProductAvailability,
+ getSimilarProducts,
+ getStoreProducts,
+ searchProducts,
+ // Dispensaries
+ getDispensaries,
+ getDispensary,
+ getDispensaryBySlug,
+ getDispensarySummary,
+ getDispensaryBrands,
+ getDispensaryCategories,
+ // Categories & Brands
+ getCategories,
+ getBrands,
+ // Deals
+ getDeals,
+ // Mappers
+ mapProductForUI,
+ mapCategoryForUI,
+ mapBrandForUI,
+ mapDispensaryForUI,
+};
+
+export default api;
diff --git a/findagram/frontend/src/components/findagram/Footer.jsx b/findagram/frontend/src/components/findagram/Footer.jsx
new file mode 100644
index 00000000..ebfe5fea
--- /dev/null
+++ b/findagram/frontend/src/components/findagram/Footer.jsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Leaf, Mail, MapPin, Phone, Facebook, Twitter, Instagram } from 'lucide-react';
+
+const Footer = () => {
+ const currentYear = new Date().getFullYear();
+
+ const productLinks = [
+ { name: 'Browse All', href: '/products' },
+ { name: 'Flower', href: '/categories/flower' },
+ { name: 'Concentrates', href: '/categories/concentrates' },
+ { name: 'Edibles', href: '/categories/edibles' },
+ { name: 'Vapes', href: '/categories/vapes' },
+ { name: 'Pre-Rolls', href: '/categories/pre-rolls' },
+ ];
+
+ const companyLinks = [
+ { name: 'About Us', href: '/about' },
+ { name: 'Contact', href: '/contact' },
+ { name: 'Careers', href: '/careers' },
+ { name: 'Press', href: '/press' },
+ { name: 'Blog', href: '/blog' },
+ ];
+
+ const supportLinks = [
+ { name: 'Help Center', href: '/help' },
+ { name: 'FAQs', href: '/faqs' },
+ { name: 'Privacy Policy', href: '/privacy' },
+ { name: 'Terms of Service', href: '/terms' },
+ { name: 'Cookie Policy', href: '/cookies' },
+ ];
+
+ const socialLinks = [
+ { name: 'Facebook', icon: Facebook, href: '#' },
+ { name: 'Twitter', icon: Twitter, href: '#' },
+ { name: 'Instagram', icon: Instagram, href: '#' },
+ ];
+
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/findagram/frontend/src/components/findagram/Header.jsx b/findagram/frontend/src/components/findagram/Header.jsx
new file mode 100644
index 00000000..0daee0f6
--- /dev/null
+++ b/findagram/frontend/src/components/findagram/Header.jsx
@@ -0,0 +1,272 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
+import {
+ Search,
+ Menu,
+ X,
+ Heart,
+ Bell,
+ User,
+ LogOut,
+ Settings,
+ Bookmark,
+ Leaf,
+ Tag,
+ LayoutGrid,
+ Store,
+} from 'lucide-react';
+
+const Header = ({ isLoggedIn = false, user = null }) => {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+ const [searchQuery, setSearchQuery] = useState('');
+ const location = useLocation();
+
+ const navigation = [
+ { name: 'Products', href: '/products', icon: LayoutGrid },
+ { name: 'Deals', href: '/deals', icon: Tag },
+ { name: 'Brands', href: '/brands', icon: Leaf },
+ { name: 'Categories', href: '/categories', icon: Store },
+ ];
+
+ const isActive = (path) => location.pathname === path;
+
+ const handleSearch = (e) => {
+ e.preventDefault();
+ if (searchQuery.trim()) {
+ window.location.href = `/products?search=${encodeURIComponent(searchQuery)}`;
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default Header;
diff --git a/findagram/frontend/src/components/findagram/ProductCard.jsx b/findagram/frontend/src/components/findagram/ProductCard.jsx
new file mode 100644
index 00000000..4cc11453
--- /dev/null
+++ b/findagram/frontend/src/components/findagram/ProductCard.jsx
@@ -0,0 +1,161 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Card, CardContent } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Heart, Star, MapPin, TrendingDown } from 'lucide-react';
+
+const ProductCard = ({
+ product,
+ onFavorite,
+ isFavorite = false,
+ showDispensaryCount = true
+}) => {
+ const {
+ id,
+ name,
+ brand,
+ category,
+ image,
+ thc,
+ cbd,
+ price,
+ priceRange,
+ rating,
+ reviewCount,
+ strainType,
+ dispensaries = [],
+ onSale,
+ salePrice,
+ } = product;
+
+ const strainColors = {
+ sativa: 'bg-yellow-100 text-yellow-800',
+ indica: 'bg-purple-100 text-purple-800',
+ hybrid: 'bg-green-100 text-green-800',
+ };
+
+ const savings = onSale && salePrice ? ((price - salePrice) / price * 100).toFixed(0) : 0;
+
+ return (
+
+
+ {/* Image Container */}
+
+
+
+ {/* Badges */}
+
+ {onSale && (
+
+
+ {savings}% OFF
+
+ )}
+ {strainType && (
+
+ {strainType}
+
+ )}
+
+
+ {/* Favorite Button */}
+
+
+ {brand}
+
+
+ {/* Product Name */}
+
+
+ {name}
+
+
+
+ {/* Category & THC/CBD */}
+
+ {category}
+ {thc && (
+ <>
+ •
+ THC {thc}%
+
+ )}
+ {cbd > 0 && (
+ <>
+ •
+ CBD {cbd}%
+
+ )}
+
+
+ {/* Rating */}
+ {rating && (
+
+
+ {rating}
+ {reviewCount && (
+
+ ({reviewCount})
+
+ )}
+
+ )}
+
+ {/* Price */}
+
+ {onSale && salePrice ? (
+ <>
+
+ ${salePrice.toFixed(2)}
+
+
+ ${price.toFixed(2)}
+
+
+ ) : priceRange ? (
+
+ ${priceRange.min.toFixed(2)} - ${priceRange.max.toFixed(2)}
+
+ ) : (
+
+ ${price.toFixed(2)}
+
+ )}
+
+
+ {/* Dispensary Count */}
+ {showDispensaryCount && dispensaries.length > 0 && (
+
+
+ Available at {dispensaries.length} {dispensaries.length === 1 ? 'dispensary' : 'dispensaries'}
+
+ )}
+
+
+ );
+};
+
+export default ProductCard;
diff --git a/findagram/frontend/src/components/ui/avatar.jsx b/findagram/frontend/src/components/ui/avatar.jsx
new file mode 100644
index 00000000..66efc7e0
--- /dev/null
+++ b/findagram/frontend/src/components/ui/avatar.jsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../lib/utils";
+
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/findagram/frontend/src/components/ui/badge.jsx b/findagram/frontend/src/components/ui/badge.jsx
new file mode 100644
index 00000000..66866224
--- /dev/null
+++ b/findagram/frontend/src/components/ui/badge.jsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+ outline: "text-foreground",
+ success:
+ "border-transparent bg-green-500 text-white hover:bg-green-600",
+ warning:
+ "border-transparent bg-amber-500 text-white hover:bg-amber-600",
+ deal:
+ "border-transparent bg-pink-500 text-white hover:bg-pink-600",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+);
+
+function Badge({ className, variant, ...props }) {
+ return (
+
+ );
+}
+
+export { Badge, badgeVariants };
diff --git a/findagram/frontend/src/components/ui/button.jsx b/findagram/frontend/src/components/ui/button.jsx
new file mode 100644
index 00000000..dc45bcda
--- /dev/null
+++ b/findagram/frontend/src/components/ui/button.jsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+);
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+
+ );
+ }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/findagram/frontend/src/components/ui/card.jsx b/findagram/frontend/src/components/ui/card.jsx
new file mode 100644
index 00000000..4ecb517c
--- /dev/null
+++ b/findagram/frontend/src/components/ui/card.jsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/findagram/frontend/src/components/ui/checkbox.jsx b/findagram/frontend/src/components/ui/checkbox.jsx
new file mode 100644
index 00000000..225e9c37
--- /dev/null
+++ b/findagram/frontend/src/components/ui/checkbox.jsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+
+
+
+
+
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/findagram/frontend/src/components/ui/dialog.jsx b/findagram/frontend/src/components/ui/dialog.jsx
new file mode 100644
index 00000000..6cca05f4
--- /dev/null
+++ b/findagram/frontend/src/components/ui/dialog.jsx
@@ -0,0 +1,100 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef(
+ ({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+ )
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }) => (
+
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }) => (
+
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+};
diff --git a/findagram/frontend/src/components/ui/dropdown-menu.jsx b/findagram/frontend/src/components/ui/dropdown-menu.jsx
new file mode 100644
index 00000000..c460c8fa
--- /dev/null
+++ b/findagram/frontend/src/components/ui/dropdown-menu.jsx
@@ -0,0 +1,175 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef(
+ ({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+
+ )
+);
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+DropdownMenuSubContent.displayName =
+ DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef(
+ ({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+ )
+);
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef(
+ ({ className, inset, ...props }, ref) => (
+
+ )
+);
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef(
+ ({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+ )
+);
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef(
+ ({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+ )
+);
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef(
+ ({ className, inset, ...props }, ref) => (
+
+ )
+);
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }) => {
+ return (
+
+ );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuGroup,
+ DropdownMenuPortal,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuRadioGroup,
+};
diff --git a/findagram/frontend/src/components/ui/input.jsx b/findagram/frontend/src/components/ui/input.jsx
new file mode 100644
index 00000000..e2d47d5c
--- /dev/null
+++ b/findagram/frontend/src/components/ui/input.jsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+ return (
+
+ );
+});
+Input.displayName = "Input";
+
+export { Input };
diff --git a/findagram/frontend/src/components/ui/select.jsx b/findagram/frontend/src/components/ui/select.jsx
new file mode 100644
index 00000000..87959996
--- /dev/null
+++ b/findagram/frontend/src/components/ui/select.jsx
@@ -0,0 +1,143 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef(
+ ({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+
+ )
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef(
+ ({ className, ...props }, ref) => (
+
+
+
+ )
+);
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef(
+ ({ className, ...props }, ref) => (
+
+
+
+ )
+);
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef(
+ ({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+
+ {children}
+
+
+
+
+ )
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef(
+ ({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+ )
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+ Select,
+ SelectGroup,
+ SelectValue,
+ SelectTrigger,
+ SelectContent,
+ SelectLabel,
+ SelectItem,
+ SelectSeparator,
+ SelectScrollUpButton,
+ SelectScrollDownButton,
+};
diff --git a/findagram/frontend/src/components/ui/slider.jsx b/findagram/frontend/src/components/ui/slider.jsx
new file mode 100644
index 00000000..8a57a2ed
--- /dev/null
+++ b/findagram/frontend/src/components/ui/slider.jsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../lib/utils";
+
+const Slider = React.forwardRef(({ className, ...props }, ref) => (
+
+
+
+
+
+
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/findagram/frontend/src/components/ui/tabs.jsx b/findagram/frontend/src/components/ui/tabs.jsx
new file mode 100644
index 00000000..20ff0619
--- /dev/null
+++ b/findagram/frontend/src/components/ui/tabs.jsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/findagram/frontend/src/index.css b/findagram/frontend/src/index.css
new file mode 100644
index 00000000..2ee66e8e
--- /dev/null
+++ b/findagram/frontend/src/index.css
@@ -0,0 +1,74 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+ --primary: 262 83% 66%;
+ --primary-foreground: 210 40% 98%;
+ --secondary: 239 84% 67%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+ --accent: 330 81% 60%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 262 83% 66%;
+ --radius: 0.75rem;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ font-family: 'Inter', sans-serif;
+ }
+}
+
+/* Custom gradient backgrounds */
+.gradient-purple {
+ background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
+}
+
+.gradient-purple-light {
+ background: linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 100%);
+}
+
+/* Product card hover effect */
+.product-card {
+ @apply transition-all duration-200;
+}
+
+.product-card:hover {
+ @apply shadow-lg -translate-y-1;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ @apply bg-gray-100;
+}
+
+::-webkit-scrollbar-thumb {
+ @apply bg-primary-300 rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ @apply bg-primary-400;
+}
diff --git a/findagram/frontend/src/index.js b/findagram/frontend/src/index.js
new file mode 100644
index 00000000..2cb1087e
--- /dev/null
+++ b/findagram/frontend/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+
+
+
+);
diff --git a/findagram/frontend/src/lib/utils.js b/findagram/frontend/src/lib/utils.js
new file mode 100644
index 00000000..378ccef4
--- /dev/null
+++ b/findagram/frontend/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+ return twMerge(clsx(inputs));
+}
diff --git a/findagram/frontend/src/mockData.js b/findagram/frontend/src/mockData.js
new file mode 100644
index 00000000..bd831f76
--- /dev/null
+++ b/findagram/frontend/src/mockData.js
@@ -0,0 +1,343 @@
+// Mock product data for Find a Gram
+export const mockProducts = [
+ {
+ id: 1,
+ name: "Blue Dream",
+ brand: "Green Gardens",
+ category: "Flower",
+ subcategory: "Hybrid",
+ strainType: "Hybrid",
+ thc: 22,
+ cbd: 1,
+ price: 45.00,
+ priceRange: { min: 42.00, max: 55.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1603909075271-76c12e66bc99?w=400",
+ description: "A legendary sativa-dominant hybrid that delivers a balanced high with full-body relaxation paired with gentle cerebral invigoration.",
+ effects: ["Happy", "Relaxed", "Euphoric", "Uplifted", "Creative"],
+ flavors: ["Sweet", "Berry", "Blueberry", "Herbal"],
+ terpenes: ["Myrcene", "Pinene", "Caryophyllene"],
+ dispensaryCount: 8,
+ dispensaries: [
+ { dispensaryId: 1, dispensaryName: "Green Haven", price: 45.00, distance: 1.2, inStock: true, rating: 4.8 },
+ { dispensaryId: 2, dispensaryName: "Purple Lotus", price: 48.00, distance: 2.5, inStock: true, rating: 4.5 },
+ { dispensaryId: 3, dispensaryName: "High Society", price: 42.00, distance: 3.8, inStock: true, rating: 4.9 },
+ ]
+ },
+ {
+ id: 2,
+ name: "OG Kush",
+ brand: "Premium Cultivators",
+ category: "Flower",
+ subcategory: "Indica",
+ strainType: "Indica",
+ thc: 24,
+ cbd: 0.5,
+ price: 52.00,
+ priceRange: { min: 48.00, max: 58.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1603909075271-76c12e66bc99?w=400",
+ description: "The legendary OG Kush is a classic strain known for its stress-relieving and euphoric effects.",
+ effects: ["Relaxed", "Happy", "Euphoric", "Sleepy", "Hungry"],
+ flavors: ["Earthy", "Pine", "Woody", "Lemon"],
+ terpenes: ["Limonene", "Myrcene", "Caryophyllene"],
+ dispensaryCount: 12,
+ dispensaries: [
+ { dispensaryId: 1, dispensaryName: "Green Haven", price: 52.00, distance: 1.2, inStock: true, rating: 4.8 },
+ { dispensaryId: 4, dispensaryName: "Emerald City", price: 48.00, distance: 4.1, inStock: true, rating: 4.6 },
+ ]
+ },
+ {
+ id: 3,
+ name: "Sour Diesel",
+ brand: "Artisan Cannabis",
+ category: "Flower",
+ subcategory: "Sativa",
+ strainType: "Sativa",
+ thc: 26,
+ cbd: 0.3,
+ price: 55.00,
+ priceRange: { min: 50.00, max: 62.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1603909075271-76c12e66bc99?w=400",
+ description: "Fast-acting strain that delivers energizing, dreamy cerebral effects. A pungent diesel aroma.",
+ effects: ["Energetic", "Happy", "Uplifted", "Euphoric", "Creative"],
+ flavors: ["Diesel", "Pungent", "Earthy", "Citrus"],
+ terpenes: ["Caryophyllene", "Limonene", "Myrcene"],
+ dispensaryCount: 6,
+ dispensaries: [
+ { dispensaryId: 2, dispensaryName: "Purple Lotus", price: 55.00, distance: 2.5, inStock: true, rating: 4.5 },
+ { dispensaryId: 3, dispensaryName: "High Society", price: 50.00, distance: 3.8, inStock: true, rating: 4.9 },
+ ]
+ },
+ {
+ id: 4,
+ name: "Strawberry Gummies 10mg",
+ brand: "Sweet Leaf Edibles",
+ category: "Edibles",
+ subcategory: "Gummies",
+ strainType: "Hybrid",
+ thc: 10,
+ cbd: 0,
+ price: 25.00,
+ priceRange: { min: 22.00, max: 28.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1611091333792-03b1ac8ef92b?w=400",
+ description: "Delicious strawberry-flavored gummies with 10mg THC per piece. Perfect for micro-dosing.",
+ effects: ["Relaxed", "Happy", "Euphoric"],
+ flavors: ["Strawberry", "Sweet", "Fruity"],
+ terpenes: [],
+ dispensaryCount: 15,
+ dispensaries: [
+ { dispensaryId: 1, dispensaryName: "Green Haven", price: 25.00, distance: 1.2, inStock: true, rating: 4.8 },
+ { dispensaryId: 2, dispensaryName: "Purple Lotus", price: 24.00, distance: 2.5, inStock: true, rating: 4.5 },
+ { dispensaryId: 4, dispensaryName: "Emerald City", price: 22.00, distance: 4.1, inStock: true, rating: 4.6 },
+ ]
+ },
+ {
+ id: 5,
+ name: "Live Resin - Gorilla Glue",
+ brand: "Extract Masters",
+ category: "Concentrates",
+ subcategory: "Live Resin",
+ strainType: "Hybrid",
+ thc: 78,
+ cbd: 0.2,
+ price: 65.00,
+ priceRange: { min: 60.00, max: 72.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1621812958527-50048b6d66e8?w=400",
+ description: "Premium live resin made from fresh frozen Gorilla Glue flower. Incredibly potent.",
+ effects: ["Relaxed", "Euphoric", "Happy", "Sleepy"],
+ flavors: ["Earthy", "Pine", "Pungent"],
+ terpenes: ["Caryophyllene", "Limonene", "Myrcene"],
+ dispensaryCount: 4,
+ dispensaries: [
+ { dispensaryId: 3, dispensaryName: "High Society", price: 65.00, distance: 3.8, inStock: true, rating: 4.9 },
+ ]
+ },
+ {
+ id: 6,
+ name: "Northern Lights Vape Cart",
+ brand: "Cloud Nine",
+ category: "Vapes",
+ subcategory: "Cartridges",
+ strainType: "Indica",
+ thc: 85,
+ cbd: 0,
+ price: 40.00,
+ priceRange: { min: 38.00, max: 45.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1560065680-dbeb8cf8ea1f?w=400",
+ description: "Classic Northern Lights in a convenient vape cartridge. Perfect for relaxation.",
+ effects: ["Relaxed", "Happy", "Sleepy", "Euphoric"],
+ flavors: ["Sweet", "Earthy", "Spicy"],
+ terpenes: ["Myrcene", "Pinene"],
+ dispensaryCount: 10,
+ dispensaries: [
+ { dispensaryId: 1, dispensaryName: "Green Haven", price: 40.00, distance: 1.2, inStock: true, rating: 4.8 },
+ { dispensaryId: 2, dispensaryName: "Purple Lotus", price: 42.00, distance: 2.5, inStock: true, rating: 4.5 },
+ ]
+ },
+ {
+ id: 7,
+ name: "CBD Relief Balm",
+ brand: "Nature's Remedy",
+ category: "Topicals",
+ subcategory: "Balms",
+ strainType: null,
+ thc: 0,
+ cbd: 500,
+ price: 35.00,
+ priceRange: { min: 32.00, max: 38.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?w=400",
+ description: "Soothing CBD balm for targeted relief. Perfect for sore muscles and joints.",
+ effects: ["Pain Relief", "Relaxed"],
+ flavors: ["Lavender", "Eucalyptus"],
+ terpenes: [],
+ dispensaryCount: 8,
+ dispensaries: [
+ { dispensaryId: 1, dispensaryName: "Green Haven", price: 35.00, distance: 1.2, inStock: true, rating: 4.8 },
+ { dispensaryId: 4, dispensaryName: "Emerald City", price: 32.00, distance: 4.1, inStock: true, rating: 4.6 },
+ ]
+ },
+ {
+ id: 8,
+ name: "Full Spectrum Tincture 1000mg",
+ brand: "Healing Harvest",
+ category: "Tinctures",
+ subcategory: "Oil",
+ strainType: "Hybrid",
+ thc: 500,
+ cbd: 500,
+ price: 75.00,
+ priceRange: { min: 70.00, max: 82.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1616690248758-3ad58e5f73c4?w=400",
+ description: "Full spectrum 1:1 THC:CBD tincture for balanced effects. Sublingual or add to food.",
+ effects: ["Relaxed", "Pain Relief", "Calm"],
+ flavors: ["Natural", "Herbal"],
+ terpenes: ["Myrcene", "Linalool"],
+ dispensaryCount: 5,
+ dispensaries: [
+ { dispensaryId: 3, dispensaryName: "High Society", price: 75.00, distance: 3.8, inStock: true, rating: 4.9 },
+ ]
+ },
+ {
+ id: 9,
+ name: "Girl Scout Cookies",
+ brand: "Green Gardens",
+ category: "Flower",
+ subcategory: "Hybrid",
+ strainType: "Hybrid",
+ thc: 25,
+ cbd: 0.5,
+ price: 48.00,
+ priceRange: { min: 45.00, max: 55.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1603909075271-76c12e66bc99?w=400",
+ description: "The famous GSC delivers euphoric, full-body relaxation with sweet and earthy flavors.",
+ effects: ["Euphoric", "Happy", "Relaxed", "Creative"],
+ flavors: ["Sweet", "Earthy", "Mint", "Chocolate"],
+ terpenes: ["Caryophyllene", "Limonene", "Humulene"],
+ dispensaryCount: 11,
+ dispensaries: [
+ { dispensaryId: 1, dispensaryName: "Green Haven", price: 48.00, distance: 1.2, inStock: true, rating: 4.8 },
+ { dispensaryId: 2, dispensaryName: "Purple Lotus", price: 50.00, distance: 2.5, inStock: true, rating: 4.5 },
+ { dispensaryId: 3, dispensaryName: "High Society", price: 45.00, distance: 3.8, inStock: true, rating: 4.9 },
+ ]
+ },
+ {
+ id: 10,
+ name: "Chocolate Brownies 50mg",
+ brand: "Baked Bros",
+ category: "Edibles",
+ subcategory: "Baked Goods",
+ strainType: "Indica",
+ thc: 50,
+ cbd: 0,
+ price: 18.00,
+ priceRange: { min: 15.00, max: 20.00 },
+ inStock: false,
+ image: "https://images.unsplash.com/photo-1611091333792-03b1ac8ef92b?w=400",
+ description: "Rich, fudgy brownies infused with 50mg THC. Perfect for experienced users.",
+ effects: ["Relaxed", "Sleepy", "Happy", "Hungry"],
+ flavors: ["Chocolate", "Sweet"],
+ terpenes: [],
+ dispensaryCount: 3,
+ dispensaries: [
+ { dispensaryId: 4, dispensaryName: "Emerald City", price: 18.00, distance: 4.1, inStock: false, rating: 4.6 },
+ ]
+ },
+ {
+ id: 11,
+ name: "Pineapple Express",
+ brand: "Tropical Gardens",
+ category: "Flower",
+ subcategory: "Hybrid",
+ strainType: "Hybrid",
+ thc: 21,
+ cbd: 0.5,
+ price: 42.00,
+ priceRange: { min: 38.00, max: 48.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1603909075271-76c12e66bc99?w=400",
+ description: "Tropical and fruity, this energizing strain is perfect for productive afternoons.",
+ effects: ["Energetic", "Happy", "Uplifted", "Creative"],
+ flavors: ["Pineapple", "Tropical", "Citrus", "Sweet"],
+ terpenes: ["Caryophyllene", "Limonene", "Pinene"],
+ dispensaryCount: 7,
+ dispensaries: [
+ { dispensaryId: 1, dispensaryName: "Green Haven", price: 42.00, distance: 1.2, inStock: true, rating: 4.8 },
+ { dispensaryId: 2, dispensaryName: "Purple Lotus", price: 38.00, distance: 2.5, inStock: true, rating: 4.5 },
+ ]
+ },
+ {
+ id: 12,
+ name: "Shatter - Wedding Cake",
+ brand: "Extract Masters",
+ category: "Concentrates",
+ subcategory: "Shatter",
+ strainType: "Indica",
+ thc: 82,
+ cbd: 0,
+ price: 55.00,
+ priceRange: { min: 50.00, max: 60.00 },
+ inStock: true,
+ image: "https://images.unsplash.com/photo-1621812958527-50048b6d66e8?w=400",
+ description: "Crystal clear shatter with intense Wedding Cake flavor profile. Very potent.",
+ effects: ["Relaxed", "Happy", "Euphoric", "Sleepy"],
+ flavors: ["Sweet", "Vanilla", "Earthy"],
+ terpenes: ["Limonene", "Caryophyllene"],
+ dispensaryCount: 5,
+ dispensaries: [
+ { dispensaryId: 3, dispensaryName: "High Society", price: 55.00, distance: 3.8, inStock: true, rating: 4.9 },
+ { dispensaryId: 4, dispensaryName: "Emerald City", price: 50.00, distance: 4.1, inStock: true, rating: 4.6 },
+ ]
+ }
+];
+
+export const mockBrands = [
+ { id: 1, name: "Green Gardens", productCount: 45, logo: "", description: "Premium flower cultivators since 2015" },
+ { id: 2, name: "Premium Cultivators", productCount: 38, logo: "", description: "Craft cannabis for connoisseurs" },
+ { id: 3, name: "Sweet Leaf Edibles", productCount: 25, logo: "", description: "Delicious cannabis-infused treats" },
+ { id: 4, name: "Extract Masters", productCount: 18, logo: "", description: "High-potency concentrates" },
+ { id: 5, name: "Cloud Nine", productCount: 22, logo: "", description: "Premium vape cartridges" },
+ { id: 6, name: "Nature's Remedy", productCount: 15, logo: "", description: "Natural CBD products" },
+ { id: 7, name: "Healing Harvest", productCount: 12, logo: "", description: "Therapeutic cannabis solutions" },
+ { id: 8, name: "Artisan Cannabis", productCount: 30, logo: "", description: "Small batch artisan flower" },
+ { id: 9, name: "Baked Bros", productCount: 20, logo: "", description: "Cannabis-infused baked goods" },
+ { id: 10, name: "Tropical Gardens", productCount: 28, logo: "", description: "Exotic tropical strains" },
+];
+
+export const mockCategories = [
+ { id: 1, name: "Flower", slug: "flower", count: 156, icon: "Flower2", description: "Premium cannabis buds" },
+ { id: 2, name: "Edibles", slug: "edibles", count: 89, icon: "Cookie", description: "Cannabis-infused food & drinks" },
+ { id: 3, name: "Concentrates", slug: "concentrates", count: 67, icon: "Droplets", description: "Potent extracts & dabs" },
+ { id: 4, name: "Vapes", slug: "vapes", count: 54, icon: "Wind", description: "Vape cartridges & pens" },
+ { id: 5, name: "Topicals", slug: "topicals", count: 32, icon: "Hand", description: "Lotions, balms & creams" },
+ { id: 6, name: "Tinctures", slug: "tinctures", count: 28, icon: "TestTube", description: "Sublingual oils & drops" },
+];
+
+export const mockFavorites = [
+ { id: 1, productId: 1, productName: "Blue Dream", addedAt: "2024-01-15" },
+ { id: 2, productId: 4, productName: "Strawberry Gummies 10mg", addedAt: "2024-01-18" },
+ { id: 3, productId: 6, productName: "Northern Lights Vape Cart", addedAt: "2024-01-20" },
+];
+
+export const mockAlerts = [
+ { id: 1, productId: 1, productName: "Blue Dream", targetPrice: 40.00, currentPrice: 45.00, isActive: true, notifyVia: ["email"] },
+ { id: 2, productId: 5, productName: "Live Resin - Gorilla Glue", targetPrice: 55.00, currentPrice: 65.00, isActive: true, notifyVia: ["email", "sms"] },
+ { id: 3, productId: 9, productName: "Girl Scout Cookies", targetPrice: 42.00, currentPrice: 48.00, isActive: false, notifyVia: ["email"] },
+];
+
+export const mockSavedSearches = [
+ { id: 1, query: "indica flower", filters: { category: "Flower", strainType: "Indica" }, createdAt: "2024-01-10" },
+ { id: 2, query: "cheap edibles", filters: { category: "Edibles", priceMax: 30 }, createdAt: "2024-01-12" },
+ { id: 3, query: "high thc", filters: { thcMin: 25 }, createdAt: "2024-01-15" },
+];
+
+export const mockDispensaries = [
+ { id: 1, name: "Green Haven", address: "123 Main St, Phoenix, AZ", rating: 4.8, distance: 1.2 },
+ { id: 2, name: "Purple Lotus", address: "456 Oak Ave, Scottsdale, AZ", rating: 4.5, distance: 2.5 },
+ { id: 3, name: "High Society", address: "789 Pine Rd, Tempe, AZ", rating: 4.9, distance: 3.8 },
+ { id: 4, name: "Emerald City", address: "321 Elm St, Mesa, AZ", rating: 4.6, distance: 4.1 },
+];
+
+export const trendingSearches = [
+ "Blue Dream", "OG Kush", "Sour Diesel", "Girl Scout Cookies",
+ "Edibles", "Live Resin", "Vape Carts", "CBD Products"
+];
+
+export const strainTypes = ["Indica", "Sativa", "Hybrid"];
+
+export const effectsList = [
+ "Relaxed", "Happy", "Euphoric", "Uplifted", "Creative",
+ "Energetic", "Sleepy", "Hungry", "Focused", "Talkative"
+];
+
+export const flavorsList = [
+ "Sweet", "Earthy", "Citrus", "Berry", "Pine", "Diesel",
+ "Tropical", "Woody", "Spicy", "Herbal", "Pungent"
+];
diff --git a/findagram/frontend/src/pages/findagram/About.jsx b/findagram/frontend/src/pages/findagram/About.jsx
new file mode 100644
index 00000000..2d07f07e
--- /dev/null
+++ b/findagram/frontend/src/pages/findagram/About.jsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '../../components/ui/button';
+import { Card, CardContent } from '../../components/ui/card';
+import {
+ Leaf,
+ Search,
+ Bell,
+ MapPin,
+ Heart,
+ Shield,
+ Users,
+ TrendingUp,
+} from 'lucide-react';
+
+const About = () => {
+ const features = [
+ {
+ icon: Search,
+ title: 'Product Search',
+ description: 'Search thousands of cannabis products from brands across Arizona.',
+ },
+ {
+ icon: TrendingUp,
+ title: 'Price Comparison',
+ description: 'Compare prices across dispensaries to find the best deals.',
+ },
+ {
+ icon: Bell,
+ title: 'Price Alerts',
+ description: 'Get notified when your favorite products go on sale.',
+ },
+ {
+ icon: MapPin,
+ title: 'Find Nearby',
+ description: 'Discover dispensaries near you that carry the products you want.',
+ },
+ {
+ icon: Heart,
+ title: 'Save Favorites',
+ description: 'Build a collection of your favorite products for easy access.',
+ },
+ {
+ icon: Shield,
+ title: 'Verified Data',
+ description: 'Accurate, up-to-date product and pricing information.',
+ },
+ ];
+
+ const stats = [
+ { value: '10,000+', label: 'Products' },
+ { value: '500+', label: 'Brands' },
+ { value: '200+', label: 'Dispensaries' },
+ { value: 'Daily', label: 'Updates' },
+ ];
+
+ return (
+
+ {/* Hero Section */}
+
+
+
+
+
+ About Find a Gram
+
+
+ Your Guide to Leaf Products in Arizona
+
+
+ We help cannabis consumers find the best products and prices at
+ dispensaries near them. Our mission is to make cannabis shopping
+ easier, more informed, and more affordable.
+
+
+
+
+ {/* Stats */}
+
+
+
+ {stats.map((stat) => (
+
+
{stat.value}
+
{stat.label}
+
+ ))}
+
+
+
+ {/* Mission Section */}
+
+
+
+
+
Our Mission
+
+
+ Find a Gram was created to solve a common problem: finding the
+ right cannabis products at the best prices. With hundreds of
+ dispensaries and thousands of products in Arizona alone, it can
+ be overwhelming to find what you're looking for.
+
+
+ We aggregate product information and prices from dispensaries
+ across the state, making it easy to compare options and find
+ the best deals. Whether you're looking for a specific strain,
+ trying a new brand, or hunting for discounts, Find a Gram is
+ your go-to resource.
+
+
+ Our team is dedicated to providing accurate, up-to-date
+ information so you can make informed decisions about your
+ cannabis purchases.
+
+
+
+
+
+
+
+
Consumer First
+
+
+
+
Data Integrity
+
+
+
+
Daily Updates
+
+
+
+
Community Focus
+
+
+
+
+
+
+ {/* Features */}
+
+
+
+
What We Offer
+
+ Find a Gram provides the tools you need to discover, compare, and
+ save on cannabis products.
+
+
+
+
+ {features.map((feature) => (
+
+
+
+
+
+ {feature.title}
+ {feature.description}
+
+
+ ))}
+
+
+
+ {/* CTA */}
+
+
+
Ready to Find Your Perfect Product?
+
+ Start exploring thousands of cannabis products and find the best deals near you.
+
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+
+ Price Alerts
+
+
+ {activeAlerts.length} active alerts
+
+
+
+
+
+
+
+
+
+ {alerts.length > 0 ? (
+
+ {/* Active Alerts */}
+ {activeAlerts.length > 0 && (
+
+
+
+ Active Alerts ({activeAlerts.length})
+
+
+ {activeAlerts.map((alert) => {
+ const product = mockProducts.find((p) => p.id === alert.productId);
+ const priceDiff = product ? product.price - alert.targetPrice : 0;
+ const isTriggered = priceDiff <= 0;
+
+ return (
+
+
+
+
+
+
+
+
+ {product?.name}
+
+
{product?.brand}
+
+
+ Current: ${product?.price.toFixed(2)}
+
+
+ Target: ${alert.targetPrice.toFixed(2)}
+
+
+
+ {isTriggered && (
+
+
+ Price Dropped!
+
+ )}
+
+
+
+
+
+ );
+ })}
+
+
+ )}
+
+ {/* Paused Alerts */}
+ {pausedAlerts.length > 0 && (
+
+
+
+ Paused Alerts ({pausedAlerts.length})
+
+
+ {pausedAlerts.map((alert) => {
+ const product = mockProducts.find((p) => p.id === alert.productId);
+
+ return (
+
+
+
+
+
+
+ {product?.name}
+
+
{product?.brand}
+
+ Target: ${alert.targetPrice.toFixed(2)}
+
+
+
Paused
+
+
+
+
+
+ );
+ })}
+
+
+ )}
+
+ ) : (
+
+
+
+ No price alerts set
+
+
+ Set price alerts on products you're interested in and we'll notify you when they drop to your target price.
+
+
+
+
+
+ )}
+
+
+
+
Brand Not Found
+
+ {error || "The brand you're looking for doesn't exist."}
+
+
+
+
+
+
+ {/* Breadcrumb */}
+
+
+
+
+
+
+ {/* Brand Header */}
+
+
+
+ {/* Brand Logo */}
+
+ {brand.logo ? (
+
{
+ e.target.onerror = null;
+ e.target.style.display = 'none';
+ e.target.nextSibling.style.display = 'flex';
+ }}
+ />
+ ) : null}
+
+
+
+
+
+ {/* Brand Info */}
+
+
{brand.name}
+
+ {brand.productCount || products.length} Products
+ {brand.productTypes && brand.productTypes.length > 0 && brand.productTypes.map((type) => (
+
+ {type}
+
+ ))}
+
+ {brand.description && (
+
{brand.description}
+ )}
+
+ {brand.website && (
+
+
+ Website
+
+ )}
+
+
+ Arizona
+
+ {brand.dispensaryCount > 0 && (
+
+ Available at {brand.dispensaryCount} dispensaries
+
+ )}
+
+
+
+
+
+ {/* Products */}
+
+
+ Products by {brand.name}
+
+
+ {products.length > 0 ? (
+
+ {products.map((product) => (
+
+ ))}
+
+ ) : (
+
+
No products found for this brand.
+
+
+
+
+ )}
+
+
+ {/* Hero Section */}
+
+
+
+
+
+ Discover Top Brands
+
+
Browse by Brand
+
+ Explore products from {loading ? '...' : `${brands.length}+`} cannabis brands in Arizona.
+
+
+ {/* Search */}
+
+
+
+ setSearchQuery(e.target.value)}
+ className="pl-10 bg-white text-gray-900"
+ />
+
+
+
+
+
+
+ {/* Featured Brands */}
+
+ Featured Brands
+ {loading ? (
+
+
+
+ ) : (
+
+ {brands.slice(0, 6).map((brand) => (
+
+
+
+
+ {brand.logo ? (
+
+ ) : (
+
+ )}
+
+ {brand.name}
+
+
+ {brand.productCount} products
+
+
+
+
+ ))}
+
+
+ {/* All Brands A-Z */}
+
+ All Brands
+
+ {loading ? (
+
+
+
+ ) : (
+ <>
+ {/* Alphabet Navigation */}
+
+
+ {/* Brands by Letter */}
+
+ {sortedLetters.map((letter) => (
+
+
+ {letter}
+
+
+ {groupedBrands[letter].map((brand) => (
+
+
+
+
+ {brand.logo ? (
+
+ ) : (
+
+ )}
+
+ {brand.name}
+
+
+ {brand.productCount} products
+
+
+
+
+ ))}
+
+
+ ))}
+
+
+ {filteredBrands.length === 0 && !loading && (
+
+
No brands found matching "{searchQuery}"
+
+ )}
+
+
+ {/* Hero Section */}
+
+
+
+
+
+ Browse by Category
+
+
Product Categories
+
+ Explore cannabis products by category to find exactly what you're looking for.
+
+
+
+
+
+ {/* Category Grid */}
+ {loading ? (
+
+
+
+ ) : (
+
+ {categories.map((category) => {
+ const IconComponent = categoryIcons[category.slug] || Leaf;
+ const description = categoryDescriptions[category.slug] || `Browse ${category.name} products.`;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {category.name}
+
+
+ {category.productCount} products
+
+
+
{description}
+
+
+
+ );
+ })}
+
+ )}
+
+ {/* Popular Products Section */}
+
+
+
+ Not Sure What to Try?
+
+
+ Check out our featured products or browse deals to discover something new.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading category...
+
+
+
+
Category Not Found
+
+ {error || "The category you're looking for doesn't exist."}
+
+
+
+
+
+
+ {/* Breadcrumb */}
+
+
+
+
+
+
+ {/* Category Header */}
+
+
+
+
{category.name}
+
+ {category.productCount || products.length} products available
+
+
+
+
+ {/* Products */}
+
+ {/* Controls */}
+
+
+ Showing {sortedProducts.length} {category.name.toLowerCase()} products
+
+
+
+
+
+
+
+
+
+
+
+ {/* Strain Type Filter */}
+
+ setStrainFilter('all')}
+ >
+ All
+
+ setStrainFilter('sativa')}
+ >
+ Sativa
+
+ setStrainFilter('indica')}
+ >
+ Indica
+
+ setStrainFilter('hybrid')}
+ >
+ Hybrid
+
+
+
+ {sortedProducts.length > 0 ? (
+
+ {sortedProducts.map((product) => (
+
+ ))}
+
+ ) : (
+
+
No {category.name.toLowerCase()} products found.
+
+
+
+
+ )}
+
+
+ {/* Hero Section */}
+
+
+
+
+
+ Get in Touch
+
+
Contact Us
+
+ Have questions, feedback, or need assistance? We're here to help.
+
+
+
+
+
+
+ {/* Contact Form */}
+
+
+
+
+
+ Send us a Message
+
+
+
+ {submitted ? (
+
+
+
+
+
+ Message Sent!
+
+
+ Thank you for reaching out. We'll get back to you as soon as possible.
+
+
+