[V0_FILE]typescriptreact:file="app/order/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]png:file="public/images/classic-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8595f737-c061-4aca-b190-de65e3620d8e-YuZ4LFyrWFKBupa8W8Rmd9yFJFwX1y.png" isMerged="true" [V0_FILE]png:file="public/images/mango-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Jun%2021%2C%202025%2C%2005_50_49%20PM-TvzqvfbxlMDMJ3z4IEZ8zoDBZLClL4.png" isMerged="true" [V0_FILE]png:file="public/images/pistachio-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Jun%2021%2C%202025%2C%2005_57_32%20PM-ypW0X0SciYZL1rC9Ctx1nosaGqpCqI.png" isMerged="true" [V0_FILE]png:file="public/images/american-nut-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4605c4d3-8a39-4254-9684-b8b256c4f202-sk1cq1n5gSpxuSJ3DNFykImOODHbyo.png" isMerged="true" [V0_FILE]png:file="public/images/pineapple-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Jun%2021%2C%202025%2C%2006_07_12%20PM-dTVKvwvcQB1EuXd7PzqXDIOVoGZML4.png" isMerged="true" [V0_FILE]png:file="public/images/gulkand-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Jun%2021%2C%202025%2C%2006_19_52%20PM-ziAhLKYcZC97DNRUGxHhkVw0r9OzDp.png" isMerged="true" [V0_FILE]jpg:file="public/images/mango-shrikhand-new.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20250621-WA0006.jpg-s1Rf0X513iqWMIdfzsbsMv1e4tCyRB.jpeg" isMerged="true" [V0_FILE]png:file="public/images/fresh-milk-process.jpg" url="https://images.unsplash.com/photo-1563636619-e9143da7973b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]png:file="public/images/yogurt-straining-process.jpg" url="https://images.unsplash.com/photo-1571212515416-fef01fc43637?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]png:file="public/images/natural-ingredients.jpg" url="https://images.unsplash.com/photo-1596040033229-a9821ebd058d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]png:file="public/images/hand-churning-packaging.jpg" url="https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Phone, Mail, MapPin, Star, Heart, Award, Users, ArrowRight, Play, ChefHat, Sparkles } from "lucide-react" import Image from "next/image" export default function Component() { return (

{/* Header */}

श

Shakti Shrikhand

Traditional Taste, Pure Delight

{/* Enhanced Hero Section */}

{/* Background decorative elements */}

100% Pure & Traditional

Authentic{" "} Shrikhand
{" "} Made with Love

Experience the rich, creamy texture and divine taste of our traditional shrikhand, crafted using time-honored recipes passed down through generations.

{/* Quick Stats */}

25+

Years Experience

10K+

Happy Customers

100%

Natural

{/* Enhanced Image Section */}

{/* Main Product Showcase */}

{/* Main featured product */}

Classic Shrikhand

Traditional Recipe

{/* Secondary products */}

Mango

Pistachio

{/* Floating elements */}

{/* Interactive Stats Section */}

25+

Years of Tradition

10K+

Happy Customers

100%

Pure & Natural

4.9

Customer Rating

{/* Enhanced About Section */}

{/* Floating badge */}

Fresh Batches Daily!

Our Story

The Art of Traditional Shrikhand

Shrikhand is a beloved Indian dessert made from strained yogurt, sugar, and aromatic spices. At Shakti Shrikhand, we honor this ancient tradition by using only the finest ingredients and time-tested methods.

Our shrikhand is rich, creamy, and infused with cardamom, saffron, and other natural flavors that create an unforgettable taste experience. Every batch is made with devotion and care, ensuring the authentic taste that has delighted families for generations.

100% Natural Ingredients

No Artificial Preservatives

Traditional Recipe

Fresh Daily

{/* Enhanced Products Section */}

Our Products

Delicious Varieties

Choose from our range of traditional and innovative shrikhand flavors, each crafted with the same love and attention to detail.

Classic Shrikhand

Traditional Recipe

Bestseller

Classic Shrikhand

Traditional recipe with cardamom and saffron, creating the perfect balance of sweetness and aroma.

₹120

Mango Shrikhand

Seasonal Delight

Seasonal

Mango Shrikhand

Seasonal delight with fresh Alphonso mango pulp, available during mango season.

₹150

American Nuts Shrikhand

Premium Blend

Premium

American Nuts Shrikhand

Premium blend with almonds, walnuts, and cashews for the ultimate nutty experience.

₹200

{/* Customer Reviews Section */}

Customer Reviews

What Our Customers Say

{[...Array(5)].map((_, i) => ( ))}

"The best shrikhand I've ever tasted! Reminds me of my grandmother's homemade recipe. Pure, authentic, and absolutely delicious."

Priya Sharma

Mumbai

{[...Array(5)].map((_, i) => ( ))}

"Amazing quality and taste! The mango shrikhand is out of this world. Fast delivery and excellent packaging too."

Rajesh Patel

Pune

{[...Array(5)].map((_, i) => ( ))}

"Perfect for festivals and special occasions. The pistachio variety is my family's favorite. Highly recommended!"

Anita Desai

Delhi

{/* Enhanced Contact Section */}

Get in Touch

Ready to experience the authentic taste of Shakti Shrikhand? Contact us for orders, catering, or any questions.

Phone

+91 7709310571

Email

info@shaktishrikhand.com

Location

Mumbai, Maharashtra, India

Send us a Message

{/* Footer */}

) } [V0_FILE]png:file="public/images/chocolate-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Jun%2030%2C%202025%2C%2006_45_37%20PM-MXuhwijSgqFKPOLLgPb44h3QQQbsCZ.png" isMerged="true" [V0_FILE]png:file="public/images/strawberry-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/672a245b-9257-4bf8-b6a3-b3d866d33470-v4vPz7X93SQzxRHxBoCAmgxrau3QGl.png" isMerged="true" [V0_FILE]png:file="public/images/blueberry-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Jul%202%2C%202025%2C%2002_06_07%20PM-e2HalihBANUUZIyjSZa03O3ixQRUKi.png" isMerged="true" [V0_FILE]plaintext:file="public/images/dairy-farming-process.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dairy-farming-in-india-s8IuXdVY2ixwwWYlJcsRXNE9feeDSC.webp" isMerged="true" [V0_FILE]jpeg:file="public/images/natural-ingredients-process.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/images%20%282%29-LzK0dubWPqp2u3TmQUiG7NSkLj5lJp.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/yogurt-straining-process.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/images%20%281%29-BEJeAAcgpae0EWiYw0CM4kVXmlr1mR.jpeg" isMerged="true" [V0_FILE]png:file="public/images/mixed-fruit-shrikhand.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Jul%202%2C%202025%2C%2002_51_27%20PM-Mx6oVmcPS5ybqWmhYTDmj769VFen7I.png" isMerged="true" [V0_FILE]typescriptreact:file="app/our-process/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import Image from "next/image" import { ArrowLeft, Check, Leaf, Droplets, HeartPulse, Sparkles } from "lucide-react" export default function OurProcess() { return (

{/* Header */}

श

Shakti Shrikhand

Traditional Taste, Pure Delight

{/* Hero Section */}

Our Process

The Art of Making Pure Shrikhand

Discover how we craft our delicious shrikhand using traditional methods, without any additives or preservatives, creating a natural probiotic delight.

{/* Process Steps */}

Step 1: Selecting the Finest Milk

Our process begins with selecting the highest quality milk from local dairy farms. We work directly with farmers who maintain ethical practices and ensure their cows are grass-fed and well-cared for, resulting in milk that is rich in nutrients and flavor.

Ethically sourced from local farms

No hormones or antibiotics

Rich in essential nutrients

Fresh milk sourcing from local dairy farms with traditional farming practices

Step 2: Curdling and Straining

The milk is gently heated and cultured with traditional bacterial cultures that have been passed down through generations. This natural fermentation process creates yogurt rich in probiotics. The yogurt is then hung in muslin cloth for 8-12 hours, allowing the whey to drain naturally, resulting in thick, creamy "chakka" - the base for our shrikhand.

Natural fermentation process

Traditional straining techniques

No artificial thickeners

Traditional yogurt straining process using muslin cloth to create chakka

Step 3: Adding Natural Sweeteners and Flavors

Once we have our base, we blend it with organic sugar, honey, or jaggery depending on the variety. We then add natural flavors like saffron, cardamom, rose, and fresh fruits. For our nut varieties, we use only the highest quality nuts that are freshly roasted and ground. Every ingredient is carefully selected for its quality and purity.

Organic sweeteners only

Real spices and natural extracts

No artificial flavors or colors

Natural ingredients like honey, dates, and organic sweeteners used in shrikhand

Step 4: Hand-Churning and Packaging

The final step involves hand-churning the mixture to achieve the perfect smooth, creamy texture that Shakti Shrikhand is known for. This traditional method ensures that each batch has the ideal consistency. The shrikhand is then carefully packaged in eco-friendly containers that preserve its freshness without the need for any artificial preservatives.

Hand-churned for perfect texture

Eco-friendly packaging

No artificial preservatives

{/* Benefits Section */}

Health Benefits

Natural Goodness in Every Bite

Our traditional shrikhand is not just delicious, it's packed with health benefits that come from natural ingredients and probiotic cultures.

Probiotic Rich

Packed with beneficial bacteria that support gut health and boost your immune system.

100% Natural

Made with only natural ingredients - no artificial additives, preservatives, or colors.

Protein Rich

High in protein and calcium, supporting bone health and muscle maintenance.

Easy to Digest

The fermentation process breaks down lactose, making it easier to digest than many dairy products.

{/* Footer */}

) } [V0_FILE]typescript:file="app/order/submit-order-action.ts" isDeleted="true" "use server" import { Resend } from "resend" import { sql } from "@/lib/db" // Initialize Resend with your API key const resend = new Resend(process.env.RESEND_API_KEY) // Business contact details const BUSINESS_EMAIL = "anushreehelonde@gmail.com" const BUSINESS_PHONE = "917709310571" // E.164 for WhatsApp (+91) const WHATSAPP_TO = "917709310571" // Send to this number on WhatsApp type OrderData = { items: { key: string productId: string productName: string size: string price: number quantity: number isSugarFree: boolean finalPrice: number }[] customerDetails: { firstName: string lastName: string phone: string email: string address: string city: string state: string pincode: string } deliveryOption: "standard" | "express" paymentMethod: "cod" | "card" | "upi" | "googlepay" | "paytm" | "phonepe" | "wallet" appliedPromo?: { code: string; type: string; discount: number; description: string } | null subtotal: number deliveryFee: number discount: number total: number orderDate: string orderId: string } function computeEta(deliveryOption: "standard" | "express") { const now = new Date() if (deliveryOption === "express") now.setHours(now.getHours() + 2) else now.setHours(now.getHours() + 24) return now } async function saveOrderToDb(data: OrderData, eta: Date) { await sql` insert into orders ( id, status, customer_first_name, customer_last_name, phone, email, address, city, state, pincode, delivery_option, payment_method, subtotal, delivery_fee, discount, total, promo_code, delivery_eta ) values ( ${data.orderId}, ${data.paymentMethod === "cod" ? "paid" : "pending_payment"}, ${data.customerDetails.firstName}, ${data.customerDetails.lastName}, ${data.customerDetails.phone}, ${data.customerDetails.email}, ${data.customerDetails.address}, ${data.customerDetails.city}, ${data.customerDetails.state}, ${data.customerDetails.pincode}, ${data.deliveryOption}, ${data.paymentMethod}, ${data.subtotal}, ${data.deliveryFee}, ${data.discount}, ${data.total}, ${data.appliedPromo?.code ?? null}, ${eta.toISOString()} ) ` for (const it of data.items) { await sql` insert into order_items ( order_id, product_id, product_name, size, price, quantity, is_sugar_free, final_price ) values ( ${data.orderId}, ${it.productId}, ${it.productName}, ${it.size}, ${it.price}, ${it.quantity}, ${it.isSugarFree}, ${it.finalPrice} ) ` } } async function sendWhatsAppOrder(data: OrderData, eta: Date) { if (!process.env.WHATSAPP_TOKEN || !process.env.WHATSAPP_PHONE_ID) { console.warn("WhatsApp environment vars missing - skipping WhatsApp send.") return } const lines = [ `New Order Received 🧡`, `Order ID: ${data.orderId}`, `Total: ₹${data.total}`, `Payment: ${data.paymentMethod.toUpperCase()}`, `Delivery: ${data.deliveryOption === "express" ? "Express (2h)" : "Standard (24h)"} | ETA: ${eta.toLocaleString()}`, `Customer: ${data.customerDetails.firstName} ${data.customerDetails.lastName}`, `Phone: ${data.customerDetails.phone}`, `Address: ${data.customerDetails.address}, ${data.customerDetails.city}, ${data.customerDetails.state} - ${data.customerDetails.pincode}`, `Items:`, ...data.items.map( (it) => `• ${it.productName} (${it.size})${it.isSugarFree ? " - Sugar Free" : ""} x${it.quantity} = ₹${ it.finalPrice * it.quantity }`, ), data.appliedPromo ? `Promo: ${data.appliedPromo.code} (₹${data.discount} off)` : undefined, `Track: https://your-domain.com/order/${data.orderId}/track`, ].filter(Boolean) const bodyText = lines.join("\n") await fetch(`https://graph.facebook.com/v20.0/${process.env.WHATSAPP_PHONE_ID}/messages`, { method: "POST", headers: { Authorization: `Bearer ${process.env.WHATSAPP_TOKEN}`, "Content-Type": "application/json", }, body: JSON.stringify({ messaging_product: "whatsapp", to: WHATSAPP_TO, type: "text", text: { body: bodyText }, }), }) } export async function submitOrder(orderData: OrderData) { try { const eta = computeEta(orderData.deliveryOption) // Save to DB await saveOrderToDb(orderData, eta) // Send WhatsApp notification to business await sendWhatsAppOrder(orderData, eta).catch((e) => console.warn("WhatsApp send failed", e)) // Prepare HTML for email const orderItemsHtml = orderData.items .map( (item) => ` ${item.productName} (${item.size})${item.isSugarFree ? " - Sugar Free" : ""} ${item.quantity} ₹${item.finalPrice * item.quantity} `, ) .join("") const emailHtml = `

🍯 Shakti Shrikhand

New Order Received!

Order ID: ${orderData.orderId}

ETA: ${eta.toLocaleString()}

Payment: ${orderData.paymentMethod.toUpperCase()}

Delivery: ${orderData.deliveryOption === "express" ? "Express (2 hours)" : "Standard (24 hours)"}

Customer

${orderData.customerDetails.firstName} ${orderData.customerDetails.lastName}

${orderData.customerDetails.phone} | ${orderData.customerDetails.email}

${orderData.customerDetails.address}, ${orderData.customerDetails.city}, ${orderData.customerDetails.state} - ${orderData.customerDetails.pincode}

Items

${orderItemsHtml}

Item	Qty	Price

Subtotal:₹${orderData.subtotal}

Delivery Fee:₹${orderData.deliveryFee}

${ orderData.appliedPromo ? `

Discount (${orderData.appliedPromo.code}):-₹${orderData.discount}

` : "" }

Total:₹${orderData.total}

Order not found.

) } const steps = [ { key: "pending_payment", label: "Awaiting Payment", icon: Clock }, { key: "paid", label: "Payment Received", icon: CheckCircle }, { key: "preparing", label: "Preparing Order", icon: Package }, { key: "out_for_delivery", label: "Out for Delivery", icon: Bike }, { key: "delivered", label: "Delivered", icon: CheckCircle }, ] as const const currentIndex = steps.findIndex((s) => s.key === order.status) ?? 0 return (

Track your order

{order.id}

Status

{order.status.replaceAll("_", " ")}

{steps.map((step, idx) => { const Icon = step.icon const done = idx <= currentIndex return (

{step.label}

) })}

Delivery ETA

{order.delivery_eta ? new Date(order.delivery_eta).toLocaleString() : "Will be scheduled soon"}

Total

₹{order.total}

Items

{items.map((it, i) => (

{it.product_name} ({it.size}){it.is_sugar_free ? " - Sugar Free" : ""} x {it.quantity} ₹{it.final_price * it.quantity}

))}

Delivery Address

{order.address}, {order.city}, {order.state} - {order.pincode}

{order.status === "pending_payment" && (

Awaiting payment confirmation. If you have already paid, it will update soon.

)} {order.status === "cancelled" && (

This order was cancelled.

)}

) } [V0_FILE]typescriptreact:file="app/pay/upi/page.tsx" "use client" import { useEffect, useMemo, useState } from "react" import { useSearchParams } from "next/navigation" import QRCode from "qrcode" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { buildUpiUrl } from "@/lib/upi" import { Check, ExternalLink } from "lucide-react" const VPA = "yugandharathakre-2@okaxis" const PAYEE_NAME = "Shakti Shrikhand" export default function UpiPayPage() { const sp = useSearchParams() const orderId = sp.get("orderId") || "" const amount = Number(sp.get("amount") || "0") const note = `Order ${orderId} - Shakti Shrikhand` const upiUrl = useMemo( () => buildUpiUrl({ pa: VPA, pn: PAYEE_NAME, am: amount, tn: note, tr: orderId, }), [amount, note, orderId], ) const [qr, setQr] = useState("") useEffect(() => { QRCode.toDataURL(upiUrl).then(setQr).catch(console.error) }, [upiUrl]) useEffect(() => { // Attempt auto-redirect to UPI app const t = setTimeout(() => { window.location.href = upiUrl }, 800) return () => clearTimeout(t) }, [upiUrl]) return (

Pay via UPI

Order ID: {orderId}

Amount ₹{amount.toFixed(2)}

Payee UPI ID: {VPA}

Note: {note}

{qr && (

Scan with any UPI app

)}

Having trouble? Copy UPI link and paste into your app:

{upiUrl}

) } [V0_FILE]typescriptreact:file="app/pay/upi/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/pay/google-pay/page.tsx" "use client" import { useEffect, useMemo, useState } from "react" import { useSearchParams } from "next/navigation" import QRCode from "qrcode" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { buildGooglePayUrl } from "@/lib/upi" import { ExternalLink, Check } from "lucide-react" const VPA = "yugandharathakre-2@okaxis" export default function GooglePayPage() { const sp = useSearchParams() const orderId = sp.get("orderId") || "" const amount = Number(sp.get("amount") || "0") const note = `Order ${orderId} - Shakti Shrikhand` const urls = useMemo( () => buildGooglePayUrl({ pa: VPA, pn: "Shakti Shrikhand", am: amount, tn: note, tr: orderId, }), [amount, note, orderId], ) const [qr, setQr] = useState("") useEffect(() => { QRCode.toDataURL(urls[0]).then(setQr).catch(console.error) }, [urls]) useEffect(() => { // Try deep link in order let i = 0 const tryNext = () => { if (i < urls.length) { window.location.href = urls[i++] setTimeout(tryNext, 1200) } } const t = setTimeout(tryNext, 600) return () => clearTimeout(t) }, [urls]) return (

Pay with Google Pay

Order ID: {orderId}

Amount ₹{amount.toFixed(2)}

{qr && (

Scan with Google Pay

)}

) } [V0_FILE]typescriptreact:file="app/pay/google-pay/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/pay/paytm/page.tsx" "use client" import { useEffect, useMemo, useState } from "react" import { useSearchParams } from "next/navigation" import QRCode from "qrcode" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { buildPaytmUrl } from "@/lib/upi" import { ExternalLink, Check } from "lucide-react" const VPA = "yugandharathakre-2@okaxis" export default function PaytmPage() { const sp = useSearchParams() const orderId = sp.get("orderId") || "" const amount = Number(sp.get("amount") || "0") const note = `Order ${orderId} - Shakti Shrikhand` const urls = useMemo( () => buildPaytmUrl({ pa: VPA, pn: "Shakti Shrikhand", am: amount, tn: note, tr: orderId, }), [amount, note, orderId], ) const [qr, setQr] = useState("") useEffect(() => { QRCode.toDataURL(urls[0]).then(setQr).catch(console.error) }, [urls]) useEffect(() => { let i = 0 const tryNext = () => { if (i < urls.length) { window.location.href = urls[i++] setTimeout(tryNext, 1200) } } const t = setTimeout(tryNext, 600) return () => clearTimeout(t) }, [urls]) return (

Pay with Paytm

Order ID: {orderId}

Amount ₹{amount.toFixed(2)}

{qr && (

Scan with Paytm

)}

) } [V0_FILE]typescriptreact:file="app/pay/paytm/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/pay/phonepe/page.tsx" "use client" import { useEffect, useMemo, useState } from "react" import { useSearchParams } from "next/navigation" import QRCode from "qrcode" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { buildPhonePeUrl } from "@/lib/upi" import { ExternalLink, Check } from "lucide-react" const VPA = "yugandharathakre-2@okaxis" export default function PhonePePage() { const sp = useSearchParams() const orderId = sp.get("orderId") || "" const amount = Number(sp.get("amount") || "0") const note = `Order ${orderId} - Shakti Shrikhand` const urls = useMemo( () => buildPhonePeUrl({ pa: VPA, pn: "Shakti Shrikhand", am: amount, tn: note, tr: orderId, }), [amount, note, orderId], ) const [qr, setQr] = useState("") useEffect(() => { QRCode.toDataURL(urls[0]).then(setQr).catch(console.error) }, [urls]) useEffect(() => { let i = 0 const tryNext = () => { if (i < urls.length) { window.location.href = urls[i++] setTimeout(tryNext, 1200) } } const t = setTimeout(tryNext, 600) return () => clearTimeout(t) }, [urls]) return (

Pay with PhonePe

Order ID: {orderId}

Amount ₹{amount.toFixed(2)}

{qr && (

Scan with PhonePe

)}

) } [V0_FILE]typescriptreact:file="app/pay/phonepe/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/pay/card/page.tsx" "use client" import { useSearchParams } from "next/navigation" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Check, CreditCard } from "lucide-react" export default function CardPayPage() { const sp = useSearchParams() const orderId = sp.get("orderId") || "" const amount = Number(sp.get("amount") || "0") return (

Card Payment

Order ID: {orderId}

Amount ₹{amount.toFixed(2)}

Connect a real gateway (Razorpay/Stripe) here. For now, complete using UPI for fastest processing.

) } [V0_FILE]typescriptreact:file="app/pay/card/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescript:file="app/order/submit-order-action.tsx" isEdit="true" "use server" import { Resend } from "resend" import { sql } from "@/lib/db" // Initialize Resend with your API key const resend = new Resend(process.env.RESEND_API_KEY) // Business contact details const BUSINESS_EMAIL = "anushreehelonde@gmail.com" const BUSINESS_PHONE = "917709310571" // E.164 for WhatsApp (+91) const WHATSAPP_TO = "917709310571" // Send to this number on WhatsApp type OrderData = { items: { key: string productId: string productName: string size: string price: number quantity: number isSugarFree: boolean finalPrice: number }[] customerDetails: { firstName: string lastName: string phone: string email: string address: string city: string state: string pincode: string } deliveryOption: "standard" | "express" paymentMethod: "cod" | "card" | "upi" | "googlepay" | "paytm" | "phonepe" | "wallet" appliedPromo?: { code: string; type: string; discount: number; description: string } | null subtotal: number deliveryFee: number discount: number total: number orderDate: string orderId: string } function computeEta(deliveryOption: "standard" | "express") { const now = new Date() if (deliveryOption === "express") now.setHours(now.getHours() + 2) else now.setHours(now.getHours() + 24) return now } async function saveOrderToDb(data: OrderData, eta: Date) { await sql` insert into orders ( id, status, customer_first_name, customer_last_name, phone, email, address, city, state, pincode, delivery_option, payment_method, subtotal, delivery_fee, discount, total, promo_code, delivery_eta ) values ( ${data.orderId}, ${data.paymentMethod === "cod" ? "paid" : "pending_payment"}, ${data.customerDetails.firstName}, ${data.customerDetails.lastName}, ${data.customerDetails.phone}, ${data.customerDetails.email}, ${data.customerDetails.address}, ${data.customerDetails.city}, ${data.customerDetails.state}, ${data.customerDetails.pincode}, ${data.deliveryOption}, ${data.paymentMethod}, ${data.subtotal}, ${data.deliveryFee}, ${data.discount}, ${data.total}, ${data.appliedPromo?.code ?? null}, ${eta.toISOString()} ) ` for (const it of data.items) { await sql` insert into order_items ( order_id, product_id, product_name, size, price, quantity, is_sugar_free, final_price ) values ( ${data.orderId}, ${it.productId}, ${it.productName}, ${it.size}, ${it.price}, ${it.quantity}, ${it.isSugarFree}, ${it.finalPrice} ) ` } } async function sendWhatsAppOrder(data: OrderData, eta: Date) { if (!process.env.WHATSAPP_TOKEN || !process.env.WHATSAPP_PHONE_ID) { console.warn("WhatsApp environment vars missing - skipping WhatsApp send.") return } const lines = [ `New Order Received 🧡`, `Order ID: ${data.orderId}`, `Total: ₹${data.total}`, `Payment: ${data.paymentMethod.toUpperCase()}`, `Delivery: ${data.deliveryOption === "express" ? "Express (2h)" : "Standard (24h)"} | ETA: ${eta.toLocaleString()}`, `Customer: ${data.customerDetails.firstName} ${data.customerDetails.lastName}`, `Phone: ${data.customerDetails.phone}`, `Address: ${data.customerDetails.address}, ${data.customerDetails.city}, ${data.customerDetails.state} - ${data.customerDetails.pincode}`, `Items:`, ...data.items.map( (it) => `• ${it.productName} (${it.size})${it.isSugarFree ? " - Sugar Free" : ""} x${it.quantity} = ₹${ it.finalPrice * it.quantity }`, ), data.appliedPromo ? `Promo: ${data.appliedPromo.code} (₹${data.discount} off)` : undefined, `Track: https://your-domain.com/order/${data.orderId}/track`, ].filter(Boolean) const bodyText = lines.join("\n") await fetch(`https://graph.facebook.com/v20.0/${process.env.WHATSAPP_PHONE_ID}/messages`, { method: "POST", headers: { Authorization: `Bearer ${process.env.WHATSAPP_TOKEN}`, "Content-Type": "application/json", }, body: JSON.stringify({ messaging_product: "whatsapp", to: WHATSAPP_TO, type: "text", text: { body: bodyText }, }), }) } export async function submitOrder(orderData: OrderData) { try { const eta = computeEta(orderData.deliveryOption) // Save to DB await saveOrderToDb(orderData, eta) // Send WhatsApp notification to business await sendWhatsAppOrder(orderData, eta).catch((e) => console.warn("WhatsApp send failed", e)) // Prepare HTML for email const orderItemsHtml = orderData.items .map( (item) => ` ${item.productName} (${item.size})${item.isSugarFree ? " - Sugar Free" : ""} ${item.quantity} ₹${item.finalPrice * item.quantity} `, ) .join("") const emailHtml = `

🍯 Shakti Shrikhand

New Order Received!

Order ID: ${orderData.orderId}

ETA: ${eta.toLocaleString()}

Payment: ${orderData.paymentMethod.toUpperCase()}

Delivery: ${orderData.deliveryOption === "express" ? "Express (2 hours)" : "Standard (24 hours)"}

Customer

${orderData.customerDetails.firstName} ${orderData.customerDetails.lastName}

${orderData.customerDetails.phone} | ${orderData.customerDetails.email}

${orderData.customerDetails.address}, ${orderData.customerDetails.city}, ${orderData.customerDetails.state} - ${orderData.customerDetails.pincode}

Items

${orderItemsHtml}

Item	Qty	Price

Subtotal:₹${orderData.subtotal}

Delivery Fee:₹${orderData.deliveryFee}

${ orderData.appliedPromo ? `

Discount (${orderData.appliedPromo.code}):-₹${orderData.discount}

` : "" }

Total:₹${orderData.total}

` // Send email to business if (process.env.RESEND_API_KEY) { await resend.emails.send({ from: "orders@shaktishrikhand.com", to: [BUSINESS_EMAIL], subject: `New Order #${orderData.orderId} - ₹${orderData.total}`, html: emailHtml, }) } // Send confirmation to customer (optional) if (orderData.customerDetails.email && process.env.RESEND_API_KEY) { await resend.emails.send({ from: "orders@shaktishrikhand.com", to: [orderData.customerDetails.email], subject: `Order Confirmation #${orderData.orderId} - Shakti Shrikhand`, html: emailHtml, }) } return { success: true, orderId: orderData.orderId } } catch (error) { console.error("Error submitting order:", error) return { success: false, error: "Failed to submit order" } } } [V0_FILE]typescriptreact:file="app/order/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft, Check, CreditCard, MapPin, Truck, Tag, Gift, Plus, Minus } from "lucide-react" import Image from "next/image" import { submitOrder } from "./submit-order-action" const products = [ { id: "classic", name: "Kesar Elaichi Shrikhand", description: "Traditional recipe with cardamom and saffron", sizes: [ { weight: "250g", price: 110 }, { weight: "500g", price: 210 }, { weight: "1kg", price: 390 }, ], image: "/images/classic-shrikhand.png", }, { id: "american-nut", name: "American Nut Shrikhand", description: "Premium blend with almonds, walnuts, and cashews", sizes: [ { weight: "250g", price: 190 }, { weight: "500g", price: 370 }, { weight: "1kg", price: 740 }, ], image: "/images/american-nut-shrikhand.png", }, { id: "mango", name: "Mango Shrikhand", description: "Seasonal delight with fresh Alphonso mango pulp", sizes: [ { weight: "250g", price: 140 }, { weight: "500g", price: 270 }, { weight: "1kg", price: 510 }, ], image: "/images/mango-shrikhand-new.jpg", }, { id: "pistachio", name: "Pistachio Shrikhand", description: "Rich and nutty flavor with premium pistachios", sizes: [ { weight: "250g", price: 170 }, { weight: "500g", price: 330 }, { weight: "1kg", price: 640 }, ], image: "/images/pistachio-shrikhand.png", }, { id: "strawberry", name: "Strawberry Shrikhand", description: "Fresh strawberry flavor with real fruit pieces", sizes: [ { weight: "250g", price: 150 }, { weight: "500g", price: 290 }, { weight: "1kg", price: 570 }, ], image: "/images/strawberry-shrikhand.png", }, { id: "blueberry", name: "Blueberry Shrikhand", description: "Antioxidant-rich blueberry with natural sweetness", sizes: [ { weight: "250g", price: 160 }, { weight: "500g", price: 310 }, { weight: "1kg", price: 610 }, ], image: "/images/blueberry-shrikhand.png", }, { id: "chocolate", name: "Chocolate Shrikhand", description: "Rich chocolate fusion with traditional shrikhand", sizes: [ { weight: "250g", price: 160 }, { weight: "500g", price: 310 }, { weight: "1kg", price: 610 }, ], image: "/images/chocolate-shrikhand.png", }, { id: "gulkand", name: "Gulkand Shrikhand", description: "Traditional rose petal preserve with aromatic spices", sizes: [ { weight: "250g", price: 165 }, { weight: "500g", price: 320 }, { weight: "1kg", price: 630 }, ], image: "/images/gulkand-shrikhand.png", }, { id: "pineapple", name: "Pineapple Shrikhand", description: "Tropical tangy sweetness with fresh pineapple chunks", sizes: [ { weight: "250g", price: 145 }, { weight: "500g", price: 280 }, { weight: "1kg", price: 550 }, ], image: "/images/pineapple-shrikhand.png", }, { id: "fruit", name: "Mixed Fruit Shrikhand", description: "Seasonal fruits medley with apple, grapes, and pomegranate", sizes: [ { weight: "250g", price: 155 }, { weight: "500g", price: 300 }, { weight: "1kg", price: 590 }, ], image: "/images/mixed-fruit-shrikhand.png", }, ] // Sample promo codes const promoCodes = { SHAKTI10: { discount: 10, type: "percentage", description: "10% off on all orders" }, FIRST20: { discount: 20, type: "percentage", description: "20% off for first-time customers" }, FREEDEL500: { discount: 0, type: "free_delivery", description: "Free delivery on orders above ₹500" }, WELCOME15: { discount: 15, type: "percentage", description: "15% off welcome offer" }, SAVE100: { discount: 100, type: "fixed", description: "₹100 off on orders above ₹500" }, FESTIVE25: { discount: 25, type: "percentage", description: "25% off festive special" }, } export default function OrderPage() { const searchParams = useSearchParams() const initialProduct = searchParams.get("product") || "classic" const [activeTab, setActiveTab] = useState("products") const [selectedItems, setSelectedItems] = useState([]) const [deliveryOption, setDeliveryOption] = useState<"standard" | "express">("standard") const [paymentMethod, setPaymentMethod] = useState< "cod" | "card" | "upi" | "googlepay" | "paytm" | "phonepe" | "wallet" >("cod") const [promoCode, setPromoCode] = useState("") const [appliedPromo, setAppliedPromo] = useState(null) const [promoError, setPromoError] = useState("") const [location, setLocation] = useState(null) const [locationError, setLocationError] = useState("") const [isDetectingLocation, setIsDetectingLocation] = useState(false) const [sugarFreeItems, setSugarFreeItems] = useState>({}) const subtotal = selectedItems.reduce((total, item) => { const sugarFreeCost = sugarFreeItems[item.key] ? 50 : 0 return total + (item.price + sugarFreeCost) * item.quantity }, 0) const deliveryFee = deliveryOption === "express" ? 50 : 30 // Calculate discount let discount = 0 if (appliedPromo) { if (appliedPromo.type === "percentage") { discount = Math.round((subtotal * appliedPromo.discount) / 100) } else if (appliedPromo.type === "fixed") { discount = appliedPromo.discount } else if (appliedPromo.type === "free_delivery") { discount = deliveryFee } if (appliedPromo.type !== "free_delivery") { discount = Math.min(discount, subtotal) } } const total = subtotal + deliveryFee - discount useEffect(() => { window.scrollTo(0, 0) }, []) const handleQuantityChange = (productId: string, size: string, change: number) => { const product: any = products.find((p) => p.id === productId) const sizeData = product.sizes.find((s: any) => s.weight === size) const itemKey = `${productId}-${size}` setSelectedItems((prev) => { const existingItemIndex = prev.findIndex((item: any) => item.key === itemKey) if (existingItemIndex >= 0) { const newItems = [...prev] const newQuantity = newItems[existingItemIndex].quantity + change if (newQuantity <= 0) { newItems.splice(existingItemIndex, 1) } else { newItems[existingItemIndex].quantity = newQuantity } return newItems } else if (change > 0) { return [ ...prev, { key: itemKey, productId, productName: product.name, size: size, price: sizeData.price, quantity: 1, }, ] } return prev }) } const getItemQuantity = (productId: string, size: string) => { const itemKey = `${productId}-${size}` const item = selectedItems.find((item: any) => item.key === itemKey) return item ? item.quantity : 0 } const handleApplyPromo = () => { const code = promoCode.toUpperCase() if ((promoCodes as any)[code]) { if (code === "SAVE100" && subtotal < 500) { setPromoError("Minimum order of ₹500 required for this promo code") return } if (code === "FREEDEL500" && subtotal < 500) { setPromoError("Minimum order of ₹500 required for free delivery") return } setAppliedPromo({ ...(promoCodes as any)[code], code }) setPromoError("") } else { setPromoError("Invalid promo code") setAppliedPromo(null) } } const handleRemovePromo = () => { setAppliedPromo(null) setPromoCode("") setPromoError("") } const handleNextStep = () => { if (activeTab === "products") { setActiveTab("payment") } } const handlePreviousStep = () => { if (activeTab === "payment") { setActiveTab("products") } } const redirectToPaymentApp = (orderId: string) => { const amt = total const map: Record = { upi: `/pay/upi?orderId=${orderId}&amount=${amt}`, googlepay: `/pay/google-pay?orderId=${orderId}&amount=${amt}`, paytm: `/pay/paytm?orderId=${orderId}&amount=${amt}`, phonepe: `/pay/phonepe?orderId=${orderId}&amount=${amt}`, card: `/pay/card?orderId=${orderId}&amount=${amt}`, wallet: `/pay/card?orderId=${orderId}&amount=${amt}`, // placeholder cod: `/order/${orderId}/track`, } const href = map[paymentMethod] || map["upi"] window.location.href = href } const handlePlaceOrder = async () => { const orderData = { items: selectedItems.map((item: any) => ({ ...item, isSugarFree: sugarFreeItems[item.key] || false, finalPrice: item.price + (sugarFreeItems[item.key] ? 50 : 0), })), customerDetails: { firstName: (document.getElementById("firstName") as HTMLInputElement)?.value || "", lastName: (document.getElementById("lastName") as HTMLInputElement)?.value || "", phone: (document.getElementById("phone") as HTMLInputElement)?.value || "", email: (document.getElementById("email") as HTMLInputElement)?.value || "", address: (document.getElementById("address") as HTMLInputElement)?.value || "", city: (document.getElementById("city") as HTMLInputElement)?.value || "", state: (document.getElementById("state") as HTMLInputElement)?.value || "", pincode: (document.getElementById("pincode") as HTMLInputElement)?.value || "", }, deliveryOption, paymentMethod, appliedPromo, subtotal, deliveryFee, discount, total, orderDate: new Date().toISOString(), orderId: `SHAKTI-${Date.now()}`, } as const try { const result = await submitOrder(orderData as any) if (result.success) { // Redirect to payment application page based on selected method redirectToPaymentApp(orderData.orderId) } else { alert("There was an error processing your order. Please try again.") } } catch (error) { console.error("Order submission error:", error) alert("There was an error processing your order. Please try again.") } } const toggleSugarFree = (itemKey: string) => { setSugarFreeItems((prev) => ({ ...prev, [itemKey]: !prev[itemKey], })) } const detectLocation = () => { setIsDetectingLocation(true) setLocationError("") if (!navigator.geolocation) { setLocationError("Geolocation is not supported by this browser.") setIsDetectingLocation(false) return } navigator.geolocation.getCurrentPosition( (position) => { const { latitude, longitude } = position.coords setLocation({ lat: latitude, lng: longitude }) fetch( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=YOUR_GOOGLE_MAPS_API_KEY`, ) .then((response) => response.json()) .then((data) => { if (data.results && data.results[0]) { const result = data.results[0] const addressComponents = result.address_components ;(document.getElementById("address") as HTMLInputElement).value = result.formatted_address addressComponents.forEach((component: any) => { if (component.types.includes("locality")) { ;(document.getElementById("city") as HTMLInputElement).value = component.long_name } if (component.types.includes("administrative_area_level_1")) { const stateSelect = document.getElementById("state") as HTMLSelectElement const stateName = component.long_name.toLowerCase() if (stateName.includes("maharashtra")) stateSelect.value = "maharashtra" else if (stateName.includes("gujarat")) stateSelect.value = "gujarat" else if (stateName.includes("karnataka")) stateSelect.value = "karnataka" else if (stateName.includes("delhi")) stateSelect.value = "delhi" } if (component.types.includes("postal_code")) { ;(document.getElementById("pincode") as HTMLInputElement).value = component.long_name } }) } }) .catch((error) => console.error("Geocoding error:", error)) .finally(() => setIsDetectingLocation(false)) }, (error) => { switch (error.code) { case error.PERMISSION_DENIED: setLocationError("Location access denied by user.") break case error.POSITION_UNAVAILABLE: setLocationError("Location information is unavailable.") break case error.TIMEOUT: setLocationError("Location request timed out.") break default: setLocationError("An unknown error occurred.") break } setIsDetectingLocation(false) }, { enableHighAccuracy: true, timeout: 10000, maximumAge: 0, }, ) } return (

श

Shakti Shrikhand

Order & Checkout 1. Select Products 2. Delivery & Payment

{products.map((product: any) => (

{product.name}

{product.description}

Regular

{product.sizes.map((size: any) => { const quantity = getItemQuantity(product.id, size.weight) return (

{size.weight} ₹{size.price}

{quantity}

) })}

))}

{selectedItems.length > 0 && (

Selected Items

{selectedItems.map((item: any) => (

{item.productName} ({item.size}) x {item.quantity} ₹{item.price * item.quantity}

))}

Subtotal ₹{subtotal}

)}

{/* Delivery Details Section */}

Delivery Details

{location && ( ✓ Location detected )}

{locationError &&

{locationError}

}

First Name

Last Name

Phone Number

Email Address

Delivery Address

City

State

PIN Code

Delivery Options setDeliveryOption(v as any)} >

Standard Delivery

Delivery within 24 hours (₹30)

Express Delivery

Delivery within 2 hours (₹50)

{/* Payment Method Section */}

Payment Method setPaymentMethod(v as any)} >

Cash on Delivery

Pay when your order arrives

Credit/Debit Card

Redirect to card page

UPI (Any App)

Pay to UPI ID: yugandharathakre-2@okaxis

Google Pay

Redirect to Google Pay app

Paytm

Redirect to Paytm app

₹

PhonePe

Redirect to PhonePe app

{/* Card/UPI extra inputs (optional) - keeping light */} {/* Promo Section */}

Promo Code

{!appliedPromo ? (

setPromoCode(e.target.value)} className="flex-1" />

) : (

{appliedPromo.code} Applied!

{appliedPromo.description}

)} {promoError &&

{promoError}

}

{/* Order Summary */}

Order Summary

{selectedItems.map((item: any) => (

{item.productName} ({item.size}){sugarFreeItems[item.key] ? " - Sugar Free" : ""} x{" "} {item.quantity} ₹{(item.price + (sugarFreeItems[item.key] ? 50 : 0)) * item.quantity}

))} {selectedItems.length > 0 && (

Sugar-Free Options (+₹50 each)

{selectedItems.map((item: any) => (

toggleSugarFree(item.key)} >

toggleSugarFree(item.key)} className="mr-2" /> Make {item.productName} ({item.size}) Sugar-Free

+₹50

))}

)}

Delivery Fee ₹{deliveryFee}

{appliedPromo && (

Discount ({appliedPromo.code}) -₹{discount}

)}

Total ₹{total}

) }

Authentic{" "} Shrikhand {" "} Made with Love

Classic Shrikhand

25+

10K+

100%

4.9

The Art of Traditional Shrikhand

Delicious Varieties

Classic Shrikhand

Classic Shrikhand

Mango Shrikhand

Mango Shrikhand

American Nuts Shrikhand

American Nuts Shrikhand

What Our Customers Say

Priya Sharma

Rajesh Patel

Anita Desai

Get in Touch

Phone

Email

Location

Send us a Message

The Art of Making Pure Shrikhand

Step 1: Selecting the Finest Milk

Step 2: Curdling and Straining

Step 3: Adding Natural Sweeteners and Flavors

Step 4: Hand-Churning and Packaging

Natural Goodness in Every Bite

Probiotic Rich

100% Natural

Protein Rich

Easy to Digest

🍯 Shakti Shrikhand

Customer

Items

Track your order

Pay via UPI

Pay with Google Pay

Pay with Paytm

Pay with PhonePe

Card Payment

🍯 Shakti Shrikhand

Customer

Items

Shakti Shrikhand

{product.name}

Regular

Selected Items

Delivery Details

Order Summary

Sugar-Free Options (+₹50 each)

Authentic{" "} Shrikhand
{" "} Made with Love