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 <noreply@anthropic.com>
This commit is contained in:
khondokartowsif171
@@ -111,6 +111,10 @@ function App() {
|
|||||||
title: `Blog — ${BASE}`,
|
title: `Blog — ${BASE}`,
|
||||||
desc: 'Technical deep-dives on building AI agents, MT5 Expert Advisors, Meta Ads automation, and the infrastructure behind Aura Agentic AI.',
|
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,
|
...SERVICE_IDS,
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -177,6 +181,7 @@ function App() {
|
|||||||
<T.About />
|
<T.About />
|
||||||
<T.Skills />
|
<T.Skills />
|
||||||
<T.Projects />
|
<T.Projects />
|
||||||
|
<T.FlagshipProduct />
|
||||||
<T.AgentShowcase />
|
<T.AgentShowcase />
|
||||||
<T.Testimonials />
|
<T.Testimonials />
|
||||||
<T.Timeline />
|
<T.Timeline />
|
||||||
|
|||||||
+28
-1
@@ -83,7 +83,7 @@ const PORTFOLIO_DATA = {
|
|||||||
stack: ["SvelteKit", "Next.js", "React", "Tailwind", "PostgreSQL"],
|
stack: ["SvelteKit", "Next.js", "React", "Tailwind", "PostgreSQL"],
|
||||||
impact: { primary: "50k+", secondary: "daily users served" },
|
impact: { primary: "50k+", secondary: "daily users served" },
|
||||||
color: "violet",
|
color: "violet",
|
||||||
demo: "https://demo-autostudio-ecomercewebsite.vercel.app",
|
demo: "https://glamourstouch.com",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "ai-agent-automation",
|
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" },
|
{ 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: [
|
experience: [
|
||||||
{
|
{
|
||||||
year: "2024 — Present",
|
year: "2024 — Present",
|
||||||
|
|||||||
@@ -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 (
|
||||||
|
<section style={{ padding: "120px 0", borderTop: "1px solid var(--line)" }}>
|
||||||
|
<div className="container">
|
||||||
|
<SectionHeader
|
||||||
|
eyebrow="In-House Product"
|
||||||
|
num="03.5 / 06"
|
||||||
|
title={<>We don't just build for clients — we build for <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400 }}>ourselves.</span></>}
|
||||||
|
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 */}
|
||||||
|
<div className="reveal glamour-card-grid" style={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: "1fr 1.15fr",
|
||||||
|
borderRadius: "var(--radius)",
|
||||||
|
border: `1px solid ${rose.border}`,
|
||||||
|
overflow: "hidden",
|
||||||
|
background: "var(--bg-card)",
|
||||||
|
}}>
|
||||||
|
|
||||||
|
{/* ── LEFT: Visual preview ─────────────────────────────── */}
|
||||||
|
<div style={{
|
||||||
|
background: "linear-gradient(135deg, rgba(244,63,94,0.14) 0%, rgba(124,92,255,0.12) 55%, rgba(0,212,255,0.07) 100%)",
|
||||||
|
padding: "52px 44px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
position: "relative",
|
||||||
|
overflow: "hidden",
|
||||||
|
minHeight: 380,
|
||||||
|
borderRight: `1px solid rgba(244,63,94,0.14)`,
|
||||||
|
}}>
|
||||||
|
{/* Decorative blobs */}
|
||||||
|
<div style={{
|
||||||
|
position: "absolute", top: -80, right: -80,
|
||||||
|
width: 280, height: 280, borderRadius: "50%", pointerEvents: "none",
|
||||||
|
background: "radial-gradient(circle, rgba(244,63,94,0.14) 0%, transparent 65%)",
|
||||||
|
}} />
|
||||||
|
<div style={{
|
||||||
|
position: "absolute", bottom: -50, left: -50,
|
||||||
|
width: 200, height: 200, borderRadius: "50%", pointerEvents: "none",
|
||||||
|
background: "radial-gradient(circle, rgba(124,92,255,0.13) 0%, transparent 65%)",
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{/* Top bar */}
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 10, position: "relative" }}>
|
||||||
|
<span style={{
|
||||||
|
display: "inline-flex", alignItems: "center", gap: 6,
|
||||||
|
background: "rgba(34,197,94,0.10)", border: "1px solid rgba(34,197,94,0.28)",
|
||||||
|
borderRadius: 999, padding: "4px 12px 4px 8px",
|
||||||
|
fontSize: 11, fontFamily: "var(--font-mono)", color: "#4ade80", fontWeight: 600,
|
||||||
|
letterSpacing: "0.06em",
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
width: 6, height: 6, borderRadius: "50%",
|
||||||
|
background: "#22c55e", boxShadow: "0 0 7px rgba(34,197,94,0.9)",
|
||||||
|
display: "inline-block", animation: "glamour-pulse 2s ease-in-out infinite",
|
||||||
|
}} />
|
||||||
|
LIVE STORE
|
||||||
|
</span>
|
||||||
|
<span style={{
|
||||||
|
fontSize: 10.5, color: "var(--text-faint)", fontFamily: "var(--font-mono)",
|
||||||
|
padding: "3px 10px", borderRadius: 999,
|
||||||
|
background: "var(--bg-elev)", border: "1px solid var(--line)",
|
||||||
|
}}>Built by Aura</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Brand hero */}
|
||||||
|
<div style={{ position: "relative", textAlign: "center", padding: "20px 0" }}>
|
||||||
|
{/* Fake browser chrome */}
|
||||||
|
<div style={{
|
||||||
|
background: "rgba(0,0,0,0.35)", borderRadius: 12,
|
||||||
|
padding: "10px 16px 20px",
|
||||||
|
border: "1px solid rgba(255,255,255,0.06)",
|
||||||
|
backdropFilter: "blur(12px)",
|
||||||
|
}}>
|
||||||
|
{/* Dots */}
|
||||||
|
<div style={{ display: "flex", gap: 5, marginBottom: 14 }}>
|
||||||
|
{["#ef4444","#f59e0b","#22c55e"].map(c => (
|
||||||
|
<div key={c} style={{ width: 8, height: 8, borderRadius: "50%", background: c, opacity: 0.7 }} />
|
||||||
|
))}
|
||||||
|
<div style={{
|
||||||
|
flex: 1, marginLeft: 8, height: 8, borderRadius: 4,
|
||||||
|
background: "rgba(255,255,255,0.07)",
|
||||||
|
display: "flex", alignItems: "center", paddingLeft: 8,
|
||||||
|
}}>
|
||||||
|
<span style={{ fontSize: 8, color: "rgba(255,255,255,0.3)", fontFamily: "var(--font-mono)" }}>
|
||||||
|
glamourstouch.com
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Brand name */}
|
||||||
|
<div style={{
|
||||||
|
fontSize: "clamp(22px, 3.5vw, 38px)",
|
||||||
|
fontWeight: 700,
|
||||||
|
fontFamily: "var(--font-serif)",
|
||||||
|
fontStyle: "italic",
|
||||||
|
letterSpacing: "-0.01em",
|
||||||
|
background: "linear-gradient(135deg, #fda4af 0%, #c084fc 50%, #67e8f9 100%)",
|
||||||
|
WebkitBackgroundClip: "text",
|
||||||
|
WebkitTextFillColor: "transparent",
|
||||||
|
backgroundClip: "text",
|
||||||
|
marginBottom: 6,
|
||||||
|
}}>Glamours Touch</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: 10.5, color: "rgba(255,255,255,0.35)",
|
||||||
|
fontFamily: "var(--font-mono)", letterSpacing: "0.15em",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
}}>Beauty · Lifestyle · E-Commerce</div>
|
||||||
|
|
||||||
|
{/* Mock product row */}
|
||||||
|
<div style={{
|
||||||
|
display: "flex", gap: 8, marginTop: 18, justifyContent: "center",
|
||||||
|
}}>
|
||||||
|
{[
|
||||||
|
{ 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 }) => (
|
||||||
|
<div key={label} style={{
|
||||||
|
flex: 1, height: 44, borderRadius: 8,
|
||||||
|
background: color,
|
||||||
|
border: "1px solid rgba(255,255,255,0.08)",
|
||||||
|
display: "flex", alignItems: "flex-end",
|
||||||
|
padding: "0 6px 5px",
|
||||||
|
}}>
|
||||||
|
<span style={{ fontSize: 8, color: "rgba(255,255,255,0.45)", fontFamily: "var(--font-mono)" }}>{label}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats row */}
|
||||||
|
<div style={{ display: "flex", gap: 16, position: "relative" }}>
|
||||||
|
{product.stats.map(s => (
|
||||||
|
<div key={s.label} style={{ textAlign: "center", flex: 1 }}>
|
||||||
|
<div style={{ fontSize: 16, fontWeight: 700, color: rose.text }}>{s.value}</div>
|
||||||
|
<div style={{ fontSize: 10, color: "var(--text-faint)", fontFamily: "var(--font-mono)", marginTop: 2 }}>{s.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── RIGHT: Details ───────────────────────────────────── */}
|
||||||
|
<div style={{ padding: "48px 44px", display: "flex", flexDirection: "column", gap: 24 }}>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-faint)",
|
||||||
|
textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 12,
|
||||||
|
}}>About the product</div>
|
||||||
|
<p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.65, color: "var(--text-dim)" }}>
|
||||||
|
{product.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features */}
|
||||||
|
<div style={{ display: "grid", gap: 9 }}>
|
||||||
|
{product.features.map((f, i) => (
|
||||||
|
<div key={i} style={{ display: "flex", gap: 10, fontSize: 13.5, color: "var(--text)" }}>
|
||||||
|
<span style={{ color: rose.text, flexShrink: 0, marginTop: 1, fontSize: 12 }}>✓</span>
|
||||||
|
{f}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stack */}
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-faint)",
|
||||||
|
textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 10,
|
||||||
|
}}>Stack</div>
|
||||||
|
<div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
|
||||||
|
{product.stack.map(s => (
|
||||||
|
<span key={s} style={{
|
||||||
|
fontSize: 11.5, padding: "4px 10px", borderRadius: 6,
|
||||||
|
background: rose.bg, border: `1px solid ${rose.border}`,
|
||||||
|
color: rose.text, fontFamily: "var(--font-mono)",
|
||||||
|
}}>{s}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTAs */}
|
||||||
|
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: "auto", paddingTop: 4 }}>
|
||||||
|
<a
|
||||||
|
href={product.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={{
|
||||||
|
display: "inline-flex", alignItems: "center", gap: 8,
|
||||||
|
padding: "12px 26px",
|
||||||
|
background: "linear-gradient(135deg, rgba(244,63,94,0.85), rgba(124,92,255,0.85))",
|
||||||
|
color: "#fff", borderRadius: 10, fontSize: 14, fontWeight: 600,
|
||||||
|
textDecoration: "none", transition: "opacity 0.15s",
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => e.currentTarget.style.opacity = "0.82"}
|
||||||
|
onMouseLeave={e => e.currentTarget.style.opacity = "1"}
|
||||||
|
>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
||||||
|
<polyline points="15,3 21,3 21,9"/>
|
||||||
|
<line x1="10" y1="14" x2="21" y2="3"/>
|
||||||
|
</svg>
|
||||||
|
Visit Store →
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#/services/web-app-dev"
|
||||||
|
style={{
|
||||||
|
display: "inline-flex", alignItems: "center", gap: 8,
|
||||||
|
padding: "12px 20px",
|
||||||
|
background: "transparent",
|
||||||
|
border: `1px solid ${rose.border}`,
|
||||||
|
color: rose.text, borderRadius: 10, fontSize: 14,
|
||||||
|
textDecoration: "none", transition: "background 0.15s",
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => e.currentTarget.style.background = rose.bg}
|
||||||
|
onMouseLeave={e => e.currentTarget.style.background = "transparent"}
|
||||||
|
>Build Mine →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* "Want one like this?" bottom nudge */}
|
||||||
|
<div className="reveal" style={{
|
||||||
|
marginTop: 20, padding: "22px 32px",
|
||||||
|
background: rose.bg, border: `1px solid ${rose.border}`,
|
||||||
|
borderRadius: "var(--radius)",
|
||||||
|
display: "flex", alignItems: "center", justifyContent: "space-between",
|
||||||
|
flexWrap: "wrap", gap: 16,
|
||||||
|
}}>
|
||||||
|
<div>
|
||||||
|
<span style={{ fontSize: 15, fontWeight: 500, color: "var(--text)" }}>
|
||||||
|
Want a store like GlamourTouch for your brand?
|
||||||
|
</span>
|
||||||
|
<span style={{
|
||||||
|
display: "block", fontSize: 13, color: "var(--text-faint)",
|
||||||
|
marginTop: 3, fontFamily: "var(--font-mono)",
|
||||||
|
}}>
|
||||||
|
Starter e-commerce from $499 · Delivered in 2–4 weeks
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#/services/web-app-dev"
|
||||||
|
style={{
|
||||||
|
padding: "11px 24px",
|
||||||
|
background: "var(--text)", color: "var(--bg)",
|
||||||
|
borderRadius: 9, fontSize: 13.5, fontWeight: 500,
|
||||||
|
textDecoration: "none", whiteSpace: "nowrap",
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
>Get a Quote →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>{`
|
||||||
|
@keyframes glamour-pulse {
|
||||||
|
0%, 100% { opacity: 1; box-shadow: 0 0 7px rgba(34,197,94,0.9); }
|
||||||
|
50% { opacity: 0.55; box-shadow: 0 0 2px rgba(34,197,94,0.3); }
|
||||||
|
}
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.glamour-card-grid { grid-template-columns: 1fr !important; }
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
window.About = About;
|
window.About = About;
|
||||||
window.Skills = Skills;
|
window.Skills = Skills;
|
||||||
window.SectionHeader = SectionHeader;
|
window.SectionHeader = SectionHeader;
|
||||||
window.Testimonials = Testimonials;
|
window.Testimonials = Testimonials;
|
||||||
|
window.FlagshipProduct = FlagshipProduct;
|
||||||
|
|||||||
Reference in New Issue
Block a user