From 249bfbe0b48ed78daec9f16c42ddb1fba6c5e062 Mon Sep 17 00:00:00 2001 From: khondokartowsif171 Date: Tue, 26 May 2026 20:17:33 +0600 Subject: [PATCH] feat: add GlamourTouch flagship product showcase section - New 'In-House Product' section on homepage between Projects & AgentShowcase - Full FlagshipProduct component with browser-chrome mockup, live store badge, gradient brand display, feature list, stack pills, and CTAs - Bottom nudge bar: "Want a store like this? Starter from $499" - Updated web-app-dev demo URL to glamourstouch.com (real live store) - Added ownProducts data to PORTFOLIO_DATA - Added products meta tag for SEO - Responsive: single-column on mobile (< 860px) Co-Authored-By: Claude Sonnet 4.6 --- src/app.jsx | 5 + src/data.jsx | 29 ++++- src/sections.jsx | 281 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 314 insertions(+), 1 deletion(-) diff --git a/src/app.jsx b/src/app.jsx index 84ba1c8..231a108 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -111,6 +111,10 @@ function App() { title: `Blog — ${BASE}`, desc: 'Technical deep-dives on building AI agents, MT5 Expert Advisors, Meta Ads automation, and the infrastructure behind Aura Agentic AI.', }, + products: { + title: `Our Products — ${BASE}`, + desc: 'GlamourTouch — Aura\'s own live e-commerce store in beauty & lifestyle. A real, production product built on our stack. See exactly what we ship for clients.', + }, ...SERVICE_IDS, }; @@ -177,6 +181,7 @@ function App() { + diff --git a/src/data.jsx b/src/data.jsx index ac35d82..82dae11 100644 --- a/src/data.jsx +++ b/src/data.jsx @@ -83,7 +83,7 @@ const PORTFOLIO_DATA = { stack: ["SvelteKit", "Next.js", "React", "Tailwind", "PostgreSQL"], impact: { primary: "50k+", secondary: "daily users served" }, color: "violet", - demo: "https://demo-autostudio-ecomercewebsite.vercel.app", + demo: "https://glamourstouch.com", }, { id: "ai-agent-automation", @@ -355,6 +355,33 @@ const PORTFOLIO_DATA = { { t: 5400, kind: "system", text: "session.end :: tokens=8,412 · cost=$0.083 · duration=5.4s" }, ], + ownProducts: [ + { + id: "glamourstouch", + name: "Glamours Touch", + tagline: "Beauty & Lifestyle E-Commerce", + description: + "Aura's own fully-operational e-commerce store in the beauty & lifestyle space. Built end-to-end on our stack — custom storefront, product catalog, cart, payment integration, and admin dashboard. Clients see exactly what we ship for them.", + url: "https://glamourstouch.com", + badge: "Live Product", + stack: ["Next.js", "Stripe", "PostgreSQL", "Tailwind", "Vercel"], + features: [ + "Full product catalog with variants & inventory management", + "Stripe + local payment gateway integration", + "Mobile-first responsive storefront design", + "Admin dashboard for orders, products & analytics", + "SEO-optimized product pages with structured data", + "Real-time stock tracking & secure checkout flow", + ], + color: "rose", + stats: [ + { label: "Products live", value: "50+" }, + { label: "Avg load time", value: "<1.2s" }, + { label: "Mobile score", value: "98/100" }, + ], + }, + ], + experience: [ { year: "2024 — Present", diff --git a/src/sections.jsx b/src/sections.jsx index cd2d9fa..d184fde 100644 --- a/src/sections.jsx +++ b/src/sections.jsx @@ -321,7 +321,288 @@ const Testimonials = () => { ); }; +// ─── FLAGSHIP PRODUCT ──────────────────────────────────────────────────────── + +const FlagshipProduct = () => { + const D = PORTFOLIO_DATA; + const product = (D.ownProducts || [])[0]; + if (!product) return null; + + const rose = { bg: "rgba(244,63,94,0.08)", border: "rgba(244,63,94,0.22)", text: "#fda4af" }; + const violet = { bg: "rgba(124,92,255,0.08)", border: "rgba(124,92,255,0.22)", text: "#a78bfa" }; + + return ( +
+
+ We don't just build for clients — we build for ourselves.} + sub="GlamourTouch is Aura's own live e-commerce store — proof that we ship real products, not just client work. Visit it. Buy from it. That's what we build for you." + /> + + {/* Main showcase card */} +
+ + {/* ── LEFT: Visual preview ─────────────────────────────── */} +
+ {/* Decorative blobs */} +
+
+ + {/* Top bar */} +
+ + + LIVE STORE + + Built by Aura +
+ + {/* Brand hero */} +
+ {/* Fake browser chrome */} +
+ {/* Dots */} +
+ {["#ef4444","#f59e0b","#22c55e"].map(c => ( +
+ ))} +
+ + glamourstouch.com + +
+
+ + {/* Brand name */} +
Glamours Touch
+
Beauty · Lifestyle · E-Commerce
+ + {/* Mock product row */} +
+ {[ + { color: "rgba(253,164,175,0.3)", label: "Skincare" }, + { color: "rgba(167,139,250,0.3)", label: "Makeup" }, + { color: "rgba(103,232,249,0.3)", label: "Fragrance" }, + ].map(({ color, label }) => ( +
+ {label} +
+ ))} +
+
+
+ + {/* Stats row */} +
+ {product.stats.map(s => ( +
+
{s.value}
+
{s.label}
+
+ ))} +
+
+ + {/* ── RIGHT: Details ───────────────────────────────────── */} +
+ +
+
About the product
+

+ {product.description} +

+
+ + {/* Features */} +
+ {product.features.map((f, i) => ( +
+ ✓ + {f} +
+ ))} +
+ + {/* Stack */} +
+
Stack
+
+ {product.stack.map(s => ( + {s} + ))} +
+
+ + {/* CTAs */} + +
+
+ + {/* "Want one like this?" bottom nudge */} +
+
+ + Want a store like GlamourTouch for your brand? + + + Starter e-commerce from $499 · Delivered in 2–4 weeks + +
+ Get a Quote → +
+
+ + +
+ ); +}; + window.About = About; window.Skills = Skills; window.SectionHeader = SectionHeader; window.Testimonials = Testimonials; +window.FlagshipProduct = FlagshipProduct;