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}`,
|
||||
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() {
|
||||
<T.About />
|
||||
<T.Skills />
|
||||
<T.Projects />
|
||||
<T.FlagshipProduct />
|
||||
<T.AgentShowcase />
|
||||
<T.Testimonials />
|
||||
<T.Timeline />
|
||||
|
||||
+28
-1
@@ -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",
|
||||
|
||||
@@ -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.Skills = Skills;
|
||||
window.SectionHeader = SectionHeader;
|
||||
window.Testimonials = Testimonials;
|
||||
window.FlagshipProduct = FlagshipProduct;
|
||||
|
||||
Reference in New Issue
Block a user