eid-salami 1.0.0

package/frontend/src/App.tsx

@@ -0,0 +1,22 @@
+import { Routes, Route } from 'react-router-dom'
+import HomePage from './pages/HomePage'
+import OrderPage from './pages/OrderPage'
+import PaymentCallbackPage from './pages/PaymentCallbackPage'
+import PaymentResultPage from './pages/PaymentResultPage'
+import Navbar from './components/Navbar'
+import Footer from './components/Footer'
+
+export default function App() {
+  return (
+    <>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/send" element={<OrderPage />} />
+        <Route path="/payment/callback" element={<PaymentCallbackPage />} />
+        <Route path="/payment/result" element={<PaymentResultPage />} />
+      </Routes>
+      <Footer />
+    </>
+  )
+}

package/frontend/src/api/client.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+const api = axios.create({
+    baseURL: import.meta.env.VITE_API_URL
+        ? `${import.meta.env.VITE_API_URL}/api`
+        : '/api',
+    headers: { 'Content-Type': 'application/json' },
+});
+export const getPackages = () => api.get('/packages').then(r => r.data);
+export const createOrder = (payload) => api.post('/orders/create', payload).then(r => r.data);
+export const submitTrxID = (orderId, trxID) => api.post('/orders/submit-trxid', { orderId, trxID }).then(r => r.data);
+export const getOrder = (id) => api.get(`/orders/${id}`).then(r => r.data);

package/frontend/src/api/client.ts

@@ -0,0 +1,57 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL
+    ? `${import.meta.env.VITE_API_URL}/api`
+    : '/api',
+  headers: { 'Content-Type': 'application/json' },
+})
+
+export interface Package {
+  id: string
+  name: string
+  slug: string
+  amount: number
+  emoji: string
+}
+
+export interface Order {
+  id: string
+  senderName: string
+  recipientName?: string
+  amount: number
+  senderMessage?: string
+  paymentStatus: 'pending' | 'pending_verification' | 'completed' | 'failed' | 'refunded'
+  deliveryStatus: 'waiting' | 'sent' | 'delivered'
+  bkashTrxID?: string
+  package: { name: string; amount: number; emoji: string }
+  createdAt: string
+}
+
+export interface CreateOrderPayload {
+  senderName: string
+  senderPhone: string
+  senderMessage?: string
+  recipientName?: string
+  recipientPhone?: string
+  packageId: string
+}
+
+export interface CreateOrderResult {
+  orderId: string
+  amount: number
+  bkashNumber: string
+  invoiceRef: string
+}
+
+export const getPackages = () =>
+  api.get<Package[]>('/packages').then(r => r.data)
+
+export const createOrder = (payload: CreateOrderPayload) =>
+  api.post<CreateOrderResult>('/orders/create', payload).then(r => r.data)
+
+export const submitTrxID = (orderId: string, trxID: string) =>
+  api.post('/orders/submit-trxid', { orderId, trxID }).then(r => r.data)
+
+export const getOrder = (id: string) =>
+  api.get<Order>(`/orders/${id}`).then(r => r.data)

package/frontend/src/components/Footer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './Footer.module.css';
+export default function Footer() {
+    return (_jsx("footer", { className: styles.footer, children: _jsxs("div", { className: styles.inner, children: [_jsx("p", { className: styles.bengali, children: "\u0988\u09A6 \u09AE\u09CB\u09AC\u09BE\u09B0\u0995 \uD83C\uDF19" }), _jsx("p", { className: styles.sub, children: "Made with love for Eid \u00B7 Powered by bKash" }), _jsxs("p", { className: styles.copy, children: ["\u00A9 ", new Date().getFullYear(), " Eid Salami. All rights reserved."] })] }) }));
+}

package/frontend/src/components/Footer.module.css

@@ -0,0 +1,27 @@
+.footer {
+  background: var(--emerald);
+  padding: 3rem clamp(1.5rem, 5vw, 4rem);
+  text-align: center;
+  border-top: 1px solid rgba(200, 153, 26, 0.25);
+}
+
+.inner { display: flex; flex-direction: column; gap: 0.4rem; }
+
+.bengali {
+  font-family: var(--font-bengali);
+  font-size: 1.5rem;
+  color: var(--gold-bright);
+  font-weight: 700;
+}
+
+.sub {
+  font-size: 0.85rem;
+  color: rgba(245, 225, 160, 0.6);
+  font-weight: 300;
+}
+
+.copy {
+  font-size: 0.75rem;
+  color: rgba(255,255,255,0.3);
+  margin-top: 0.5rem;
+}

package/frontend/src/components/Footer.tsx

@@ -0,0 +1,13 @@
+import styles from './Footer.module.css'
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.inner}>
+        <p className={styles.bengali}>ঈদ মোবারক 🌙</p>
+        <p className={styles.sub}>Made with love for Eid · Powered by bKash</p>
+        <p className={styles.copy}>© {new Date().getFullYear()} Eid Salami. All rights reserved.</p>
+      </div>
+    </footer>
+  )
+}

package/frontend/src/components/Navbar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import styles from './Navbar.module.css';
+export default function Navbar() {
+    return (_jsxs("nav", { className: styles.nav, children: [_jsxs(Link, { to: "/", className: styles.brand, children: [_jsx("span", { className: styles.moon, children: "\u263D" }), _jsx("span", { className: styles.title, children: "\u0988\u09A6 \u09B8\u09BE\u09B2\u09BE\u09AE\u09BF" })] }), _jsx(Link, { to: "/send", className: styles.cta, children: "\u09B8\u09BE\u09B2\u09BE\u09AE\u09BF \u09AA\u09BE\u09A0\u09BE\u09A8" })] }));
+}

package/frontend/src/components/Navbar.module.css

@@ -0,0 +1,54 @@
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 clamp(1.5rem, 5vw, 4rem);
+  height: 68px;
+  background: rgba(13, 59, 46, 0.97);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(200, 153, 26, 0.2);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.moon {
+  font-size: 1.4rem;
+  color: var(--gold-bright);
+  animation: sway 4s ease-in-out infinite;
+}
+
+@keyframes sway {
+  0%, 100% { transform: rotate(-8deg); }
+  50%       { transform: rotate(8deg); }
+}
+
+.title {
+  font-family: var(--font-bengali);
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--gold-pale);
+  letter-spacing: 0.01em;
+}
+
+.cta {
+  font-family: var(--font-bengali);
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--emerald);
+  background: var(--gold-bright);
+  padding: 0.45rem 1.2rem;
+  border-radius: 100px;
+  transition: background 0.2s, transform 0.15s;
+}
+
+.cta:hover {
+  background: var(--gold-pale);
+  transform: translateY(-1px);
+}

package/frontend/src/components/Navbar.tsx

@@ -0,0 +1,16 @@
+import { Link } from 'react-router-dom'
+import styles from './Navbar.module.css'
+
+export default function Navbar() {
+  return (
+    <nav className={styles.nav}>
+      <Link to="/" className={styles.brand}>
+        <span className={styles.moon}>☽</span>
+        <span className={styles.title}>ঈদ সালামি</span>
+      </Link>
+      <Link to="/send" className={styles.cta}>
+        সালামি পাঠান
+      </Link>
+    </nav>
+  )
+}

package/frontend/src/components/PackageCard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './PackageCard.module.css';
+export default function PackageCard({ pkg, selected, onSelect }) {
+    return (_jsxs("button", { className: `${styles.card} ${selected ? styles.selected : ''}`, onClick: () => onSelect(pkg.id), type: "button", "aria-pressed": selected, children: [_jsx("span", { className: styles.emoji, children: pkg.emoji }), _jsx("span", { className: styles.name, children: pkg.name }), _jsxs("span", { className: styles.amount, children: ["\u09F3", pkg.amount.toLocaleString('en-BD')] }), selected && _jsx("span", { className: styles.check, children: "\u2713" })] }));
+}

package/frontend/src/components/PackageCard.module.css

@@ -0,0 +1,64 @@
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem 1rem;
+  background: var(--white);
+  border: 2px solid transparent;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+  min-width: 130px;
+}
+
+.card:hover {
+  border-color: var(--gold);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 30px rgba(200, 153, 26, 0.2);
+}
+
+.selected {
+  border-color: var(--gold-bright) !important;
+  background: linear-gradient(135deg, #fffdf5 0%, #fff8e1 100%);
+  box-shadow: 0 8px 30px rgba(200, 153, 26, 0.25) !important;
+  transform: translateY(-3px);
+}
+
+.emoji {
+  font-size: 2rem;
+  line-height: 1;
+}
+
+.name {
+  font-family: var(--font-bengali);
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--emerald);
+  text-align: center;
+}
+
+.amount {
+  font-family: var(--font-display);
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--gold);
+}
+
+.check {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.6rem;
+  font-size: 0.75rem;
+  color: var(--white);
+  background: var(--gold-bright);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+}

package/frontend/src/components/PackageCard.tsx

@@ -0,0 +1,24 @@
+import styles from './PackageCard.module.css'
+import type { Package } from '../api/client'
+
+interface Props {
+  pkg: Package
+  selected: boolean
+  onSelect: (id: string) => void
+}
+
+export default function PackageCard({ pkg, selected, onSelect }: Props) {
+  return (
+    <button
+      className={`${styles.card} ${selected ? styles.selected : ''}`}
+      onClick={() => onSelect(pkg.id)}
+      type="button"
+      aria-pressed={selected}
+    >
+      <span className={styles.emoji}>{pkg.emoji}</span>
+      <span className={styles.name}>{pkg.name}</span>
+      <span className={styles.amount}>৳{pkg.amount.toLocaleString('en-BD')}</span>
+      {selected && <span className={styles.check}>✓</span>}
+    </button>
+  )
+}

package/frontend/src/main.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/global.css';
+ReactDOM.createRoot(document.getElementById('root')).render(_jsx(React.StrictMode, { children: _jsx(BrowserRouter, { children: _jsx(App, {}) }) }));

package/frontend/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './styles/global.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+)

package/frontend/src/pages/HomePage.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { getPackages } from '../api/client';
+import styles from './HomePage.module.css';
+const STARS = Array.from({ length: 28 }, (_, i) => ({
+    id: i,
+    x: Math.random() * 100,
+    y: Math.random() * 60,
+    size: 2 + Math.random() * 3,
+    delay: Math.random() * 3,
+}));
+const STEPS = [
+    { emoji: '🎁', title: 'প্যাকেজ বেছে নিন', sub: 'Choose a salami amount' },
+    { emoji: '✍️', title: 'তথ্য পূরণ করুন', sub: 'Fill sender & recipient details' },
+    { emoji: '💚', title: 'bKash-এ পেমেন্ট', sub: 'Pay securely via bKash' },
+    { emoji: '🌙', title: 'সালামি পৌঁছে যাবে', sub: 'Salami delivered instantly' },
+];
+export default function HomePage() {
+    const [packages, setPackages] = useState([]);
+    useEffect(() => {
+        getPackages().then(setPackages).catch(() => { });
+    }, []);
+    return (_jsxs("main", { children: [_jsxs("section", { className: styles.hero, children: [_jsx("div", { className: styles.starfield, children: STARS.map(s => (_jsx("span", { className: styles.star, style: {
+                                left: `${s.x}%`,
+                                top: `${s.y}%`,
+                                width: s.size,
+                                height: s.size,
+                                animationDelay: `${s.delay}s`,
+                            } }, s.id))) }), _jsxs("div", { className: styles.heroContent, children: [_jsx("p", { className: styles.eyebrow, children: "\u0988\u09A6 \u09AE\u09CB\u09AC\u09BE\u09B0\u0995 \u2728" }), _jsxs("h1", { className: styles.heroTitle, children: ["Send Eid Salami", _jsx("br", {}), _jsx("em", { children: "with Love & Joy" })] }), _jsx("p", { className: styles.heroSub, children: "\u09AA\u09CD\u09B0\u09BF\u09AF\u09BC\u099C\u09A8\u0995\u09C7 \u0988\u09A6\u09C7\u09B0 \u09B8\u09BE\u09B2\u09BE\u09AE\u09BF \u09AA\u09BE\u09A0\u09BE\u09A8 \u2014 \u09B8\u09B9\u099C\u09C7, \u09A6\u09CD\u09B0\u09C1\u09A4, bKash-\u098F\u09B0 \u09AE\u09BE\u09A7\u09CD\u09AF\u09AE\u09C7\u0964" }), _jsxs("div", { className: styles.heroCtas, children: [_jsx(Link, { to: "/send", className: styles.btnPrimary, children: "\u098F\u0996\u09A8\u0987 \u09B8\u09BE\u09B2\u09BE\u09AE\u09BF \u09AA\u09BE\u09A0\u09BE\u09A8 \u2192" }), _jsx("a", { href: "#how", className: styles.btnGhost, children: "\u0995\u09C0\u09AD\u09BE\u09AC\u09C7 \u0995\u09BE\u099C \u0995\u09B0\u09C7?" })] }), _jsxs("div", { className: styles.heroStats, children: [_jsxs("div", { className: styles.stat, children: [_jsx("span", { className: styles.statNum, children: "\u09F3100" }), _jsx("span", { className: styles.statLabel, children: "\u09A5\u09C7\u0995\u09C7 \u09B6\u09C1\u09B0\u09C1" })] }), _jsx("div", { className: styles.statDivider }), _jsxs("div", { className: styles.stat, children: [_jsx("span", { className: styles.statNum, children: "bKash" }), _jsx("span", { className: styles.statLabel, children: "\u09AA\u09C7\u09AE\u09C7\u09A8\u09CD\u099F" })] }), _jsx("div", { className: styles.statDivider }), _jsxs("div", { className: styles.stat, children: [_jsx("span", { className: styles.statNum, children: "\u09A4\u09BE\u09CE\u0995\u09CD\u09B7\u09A3\u09BF\u0995" }), _jsx("span", { className: styles.statLabel, children: "\u09A1\u09C7\u09B2\u09BF\u09AD\u09BE\u09B0\u09BF" })] })] })] }), _jsxs("div", { className: styles.heroArt, children: [_jsx("div", { className: styles.moonRing, children: _jsx("div", { className: styles.moonInner, children: "\u263D" }) }), _jsx("div", { className: styles.lantern, children: "\uD83E\uDE94" }), _jsx("div", { className: styles.stars2, children: "\u2726 \u2726 \u2726" })] })] }), _jsx("section", { id: "how", className: styles.howSection, children: _jsxs("div", { className: styles.sectionInner, children: [_jsx("h2", { className: styles.sectionTitle, children: "\u0995\u09C0\u09AD\u09BE\u09AC\u09C7 \u0995\u09BE\u099C \u0995\u09B0\u09C7" }), _jsx("p", { className: styles.sectionSub, children: "\u09AE\u09BE\u09A4\u09CD\u09B0 \u09EA\u099F\u09BF \u09B8\u09B9\u099C \u09A7\u09BE\u09AA\u09C7 \u09B8\u09BE\u09B2\u09BE\u09AE\u09BF \u09AA\u09BE\u09A0\u09BE\u09A8" }), _jsx("div", { className: styles.steps, children: STEPS.map((step, i) => (_jsxs("div", { className: styles.step, children: [_jsx("div", { className: styles.stepNum, children: i + 1 }), _jsx("div", { className: styles.stepEmoji, children: step.emoji }), _jsx("h3", { className: styles.stepTitle, children: step.title }), _jsx("p", { className: styles.stepSub, children: step.sub })] }, i))) })] }) }), packages.length > 0 && (_jsx("section", { className: styles.packagesSection, children: _jsxs("div", { className: styles.sectionInner, children: [_jsx("h2", { className: styles.sectionTitle, children: "\u09B8\u09BE\u09B2\u09BE\u09AE\u09BF \u09AA\u09CD\u09AF\u09BE\u0995\u09C7\u099C" }), _jsx("p", { className: styles.sectionSub, children: "Choose the perfect amount for your loved one" }), _jsx("div", { className: styles.packagesGrid, children: packages.map(pkg => (_jsxs(Link, { to: `/send?package=${pkg.id}`, className: styles.pkgCard, children: [_jsx("span", { className: styles.pkgEmoji, children: pkg.emoji }), _jsx("span", { className: styles.pkgName, children: pkg.name }), _jsxs("span", { className: styles.pkgAmount, children: ["\u09F3", pkg.amount.toLocaleString()] }), _jsx("span", { className: styles.pkgBtn, children: "\u09AA\u09BE\u09A0\u09BE\u09A8 \u2192" })] }, pkg.id))) })] }) })), _jsx("section", { className: styles.ctaBanner, children: _jsxs("div", { className: styles.ctaInner, children: [_jsx("h2", { children: "\u0986\u099C\u0987 \u09B6\u09C1\u09B0\u09C1 \u0995\u09B0\u09C1\u09A8 \uD83C\uDF19" }), _jsx("p", { children: "\u0988\u09A6\u09C7\u09B0 \u0986\u09A8\u09A8\u09CD\u09A6 \u09AD\u09BE\u0997 \u0995\u09B0\u09C7 \u09A8\u09BF\u09A8 \u09AA\u09CD\u09B0\u09BF\u09AF\u09BC\u099C\u09A8\u09C7\u09B0 \u09B8\u09BE\u09A5\u09C7" }), _jsx(Link, { to: "/send", className: styles.btnPrimary, children: "\u09B8\u09BE\u09B2\u09BE\u09AE\u09BF \u09AA\u09BE\u09A0\u09BE\u09A8" })] }) })] }));
+}