feat: add Snehalata to Aura own-products showcase
- Add Snehalata (AI clothing ecosystem) to ownProducts in data.jsx - Redesign FlagshipProduct section: single-product -> scalable multi-product grid - New OwnProductCard component: color-coded per product, features, stack, CTAs - Section header updated to be generic (not GlamourTouch-specific) - Bottom nudge: 'Want Aura to build your product? From $499' - Both snehalata.com and glamourstouch.com now showcased side by side Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
khondokartowsif171
@@ -356,6 +356,25 @@ const PORTFOLIO_DATA = {
|
|||||||
],
|
],
|
||||||
|
|
||||||
ownProducts: [
|
ownProducts: [
|
||||||
|
{
|
||||||
|
id: "snehalata",
|
||||||
|
name: "Snehalata",
|
||||||
|
tagline: "AI-Powered Clothing Ecosystem",
|
||||||
|
description:
|
||||||
|
"Aura's own multi-vendor clothing marketplace for Bangladesh. Vendors register, list products, and sell — while Gemini AI handles style refinement, virtual try-on, fraud audits, and a 24/7 Bengali-language chat assistant. Built end-to-end on Aura's stack.",
|
||||||
|
url: "https://snehalata.com",
|
||||||
|
badge: "Ecosystem",
|
||||||
|
stack: ["SvelteKit", "Supabase", "Gemini AI", "Tailwind", "Vercel"],
|
||||||
|
features: [
|
||||||
|
"Multi-vendor marketplace with AI-powered vendor onboarding audit",
|
||||||
|
"Gemini-powered virtual try-on and style transfer for every product",
|
||||||
|
"24/7 Bengali AI chat assistant for shopping guidance",
|
||||||
|
"Bangladesh district-level vendor & product filtering",
|
||||||
|
"Full order lifecycle: placement → quality check → delivery tracking",
|
||||||
|
"CEO & vendor dashboards with real-time ecosystem stats",
|
||||||
|
],
|
||||||
|
color: "violet",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "glamourstouch",
|
id: "glamourstouch",
|
||||||
name: "Glamours Touch",
|
name: "Glamours Touch",
|
||||||
|
|||||||
+164
-209
@@ -321,12 +321,158 @@ const Testimonials = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// ─── FLAGSHIP PRODUCT ────────────────────────────────────────────────────────
|
// ─── FLAGSHIP PRODUCTS ───────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const PRODUCT_COLORS = {
|
||||||
|
rose: { bg: "rgba(244,63,94,0.08)", border: "rgba(244,63,94,0.22)", text: "#fda4af" },
|
||||||
|
violet: { bg: "rgba(124,92,255,0.08)", border: "rgba(124,92,255,0.22)", text: "#a78bfa" },
|
||||||
|
cyan: { bg: "rgba(0,212,255,0.07)", border: "rgba(0,212,255,0.20)", text: "#67e8f9" },
|
||||||
|
green: { bg: "rgba(34,197,94,0.07)", border: "rgba(34,197,94,0.20)", text: "#86efac" },
|
||||||
|
amber: { bg: "rgba(251,191,36,0.08)", border: "rgba(251,191,36,0.22)", text: "#fde68a" },
|
||||||
|
};
|
||||||
|
|
||||||
|
const OwnProductCard = ({ product }) => {
|
||||||
|
const c = PRODUCT_COLORS[product.color] || PRODUCT_COLORS.violet;
|
||||||
|
return (
|
||||||
|
<div className="reveal" style={{
|
||||||
|
borderRadius: "var(--radius)", border: `1px solid ${c.border}`,
|
||||||
|
background: "var(--bg-card)", overflow: "hidden",
|
||||||
|
display: "flex", flexDirection: "column",
|
||||||
|
}}>
|
||||||
|
{/* Card header */}
|
||||||
|
<div style={{
|
||||||
|
background: `linear-gradient(145deg, ${c.bg.replace('0.08', '0.13')} 0%, rgba(0,0,0,0) 100%)`,
|
||||||
|
padding: "36px 36px 28px", borderBottom: `1px solid ${c.border}`,
|
||||||
|
position: "relative", overflow: "hidden",
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
position: "absolute", top: -50, right: -50, width: 180, height: 180,
|
||||||
|
borderRadius: "50%", pointerEvents: "none",
|
||||||
|
background: `radial-gradient(circle, ${c.bg.replace('0.08', '0.18')} 0%, transparent 65%)`,
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{/* Badges */}
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 20, position: "relative" }}>
|
||||||
|
<span style={{
|
||||||
|
display: "inline-flex", alignItems: "center", gap: 5,
|
||||||
|
background: "rgba(34,197,94,0.10)", border: "1px solid rgba(34,197,94,0.28)",
|
||||||
|
borderRadius: 999, padding: "3px 10px 3px 7px",
|
||||||
|
fontSize: 10, fontFamily: "var(--font-mono)", color: "#4ade80", fontWeight: 600,
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
width: 5, height: 5, borderRadius: "50%", background: "#22c55e",
|
||||||
|
boxShadow: "0 0 6px rgba(34,197,94,0.9)", display: "inline-block",
|
||||||
|
animation: "glamour-pulse 2s ease-in-out infinite",
|
||||||
|
}} />
|
||||||
|
LIVE
|
||||||
|
</span>
|
||||||
|
{product.badge && (
|
||||||
|
<span style={{
|
||||||
|
fontSize: 10, fontFamily: "var(--font-mono)", color: c.text,
|
||||||
|
padding: "3px 9px", borderRadius: 999,
|
||||||
|
background: c.bg, border: `1px solid ${c.border}`,
|
||||||
|
}}>{product.badge}</span>
|
||||||
|
)}
|
||||||
|
<span style={{
|
||||||
|
fontSize: 10, color: "var(--text-faint)", fontFamily: "var(--font-mono)",
|
||||||
|
padding: "3px 9px", borderRadius: 999,
|
||||||
|
background: "var(--bg-elev)", border: "1px solid var(--line)",
|
||||||
|
marginLeft: "auto",
|
||||||
|
}}>Built by Aura</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Brand name */}
|
||||||
|
<div style={{ position: "relative" }}>
|
||||||
|
<h3 style={{
|
||||||
|
margin: "0 0 6px",
|
||||||
|
fontSize: "clamp(22px, 2.5vw, 32px)",
|
||||||
|
fontWeight: 700, fontFamily: "var(--font-serif)", fontStyle: "italic",
|
||||||
|
letterSpacing: "-0.01em",
|
||||||
|
background: `linear-gradient(135deg, ${c.text} 0%, #fff 80%)`,
|
||||||
|
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
||||||
|
backgroundClip: "text",
|
||||||
|
}}>{product.name}</h3>
|
||||||
|
<p style={{
|
||||||
|
margin: 0, fontSize: 11.5, color: "var(--text-faint)",
|
||||||
|
fontFamily: "var(--font-mono)", letterSpacing: "0.1em",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
}}>{product.tagline}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card body */}
|
||||||
|
<div style={{ padding: "28px 36px 32px", display: "flex", flexDirection: "column", gap: 20, flex: 1 }}>
|
||||||
|
<p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.65, color: "var(--text-dim)" }}>
|
||||||
|
{product.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Top 3 features */}
|
||||||
|
<div style={{ display: "grid", gap: 8 }}>
|
||||||
|
{product.features.slice(0, 3).map((f, i) => (
|
||||||
|
<div key={i} style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--text)" }}>
|
||||||
|
<span style={{ color: c.text, flexShrink: 0, fontSize: 11, marginTop: 2 }}>✓</span>
|
||||||
|
{f}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{product.features.length > 3 && (
|
||||||
|
<div style={{ fontSize: 12, color: "var(--text-faint)", fontFamily: "var(--font-mono)", paddingLeft: 21 }}>
|
||||||
|
+{product.features.length - 3} more capabilities
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stack */}
|
||||||
|
<div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
|
||||||
|
{product.stack.map(s => (
|
||||||
|
<span key={s} style={{
|
||||||
|
fontSize: 11, padding: "3px 9px", borderRadius: 5,
|
||||||
|
background: c.bg, border: `1px solid ${c.border}`,
|
||||||
|
color: c.text, fontFamily: "var(--font-mono)",
|
||||||
|
}}>{s}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTAs */}
|
||||||
|
<div style={{ display: "flex", gap: 10, marginTop: "auto", paddingTop: 4 }}>
|
||||||
|
<a
|
||||||
|
href={product.url} target="_blank" rel="noopener noreferrer"
|
||||||
|
style={{
|
||||||
|
display: "inline-flex", alignItems: "center", gap: 7,
|
||||||
|
padding: "10px 20px",
|
||||||
|
background: `linear-gradient(135deg, ${c.bg.replace('0.08','0.6')}, ${c.bg.replace('0.08','0.4')})`,
|
||||||
|
color: "#fff", borderRadius: 9, fontSize: 13, fontWeight: 600,
|
||||||
|
textDecoration: "none", border: `1px solid ${c.border}`,
|
||||||
|
transition: "opacity 0.15s",
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => e.currentTarget.style.opacity = "0.82"}
|
||||||
|
onMouseLeave={e => e.currentTarget.style.opacity = "1"}
|
||||||
|
>
|
||||||
|
<svg width="12" height="12" 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 →
|
||||||
|
</a>
|
||||||
|
<a href="#/services/web-app-dev" style={{
|
||||||
|
display: "inline-flex", alignItems: "center", gap: 7,
|
||||||
|
padding: "10px 16px",
|
||||||
|
background: "transparent", border: `1px solid ${c.border}`,
|
||||||
|
color: c.text, borderRadius: 9, fontSize: 13,
|
||||||
|
textDecoration: "none", transition: "background 0.15s",
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => e.currentTarget.style.background = c.bg}
|
||||||
|
onMouseLeave={e => e.currentTarget.style.background = "transparent"}
|
||||||
|
>Build Mine →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const FlagshipProduct = () => {
|
const FlagshipProduct = () => {
|
||||||
const D = PORTFOLIO_DATA;
|
const D = PORTFOLIO_DATA;
|
||||||
const product = (D.ownProducts || [])[0];
|
const products = D.ownProducts || [];
|
||||||
if (!product) return null;
|
if (!products.length) return null;
|
||||||
|
|
||||||
const rose = { bg: "rgba(244,63,94,0.08)", border: "rgba(244,63,94,0.22)", text: "#fda4af" };
|
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" };
|
const violet = { bg: "rgba(124,92,255,0.08)", border: "rgba(124,92,255,0.22)", text: "#a78bfa" };
|
||||||
@@ -335,237 +481,46 @@ const FlagshipProduct = () => {
|
|||||||
<section style={{ padding: "120px 0", borderTop: "1px solid var(--line)" }}>
|
<section style={{ padding: "120px 0", borderTop: "1px solid var(--line)" }}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
eyebrow="In-House Product"
|
eyebrow="Our Own Products"
|
||||||
num="03.5 / 06"
|
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></>}
|
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."
|
sub="These are Aura's own live products — real businesses we built, run, and grow. Visit them. That's exactly what we ship for you."
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Main showcase card */}
|
{/* Products grid */}
|
||||||
<div className="reveal glamour-card-grid" style={{
|
<div className="own-products-grid" style={{
|
||||||
display: "grid",
|
display: "grid",
|
||||||
gridTemplateColumns: "1fr 1.15fr",
|
gridTemplateColumns: `repeat(${Math.min(products.length, 2)}, 1fr)`,
|
||||||
borderRadius: "var(--radius)",
|
gap: 20,
|
||||||
border: `1px solid ${rose.border}`,
|
|
||||||
overflow: "hidden",
|
|
||||||
background: "var(--bg-card)",
|
|
||||||
}}>
|
}}>
|
||||||
|
{products.map(p => <OwnProductCard key={p.id} product={p} />)}
|
||||||
{/* ── LEFT: Brand panel ────────────────────────────────── */}
|
|
||||||
<div style={{
|
|
||||||
background: "linear-gradient(145deg, rgba(244,63,94,0.10) 0%, rgba(124,92,255,0.09) 60%, rgba(0,212,255,0.05) 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.13)`,
|
|
||||||
}}>
|
|
||||||
{/* Subtle radial glows */}
|
|
||||||
<div style={{
|
|
||||||
position: "absolute", top: -60, right: -60, width: 260, height: 260,
|
|
||||||
borderRadius: "50%", pointerEvents: "none",
|
|
||||||
background: "radial-gradient(circle, rgba(244,63,94,0.12) 0%, transparent 65%)",
|
|
||||||
}} />
|
|
||||||
<div style={{
|
|
||||||
position: "absolute", bottom: -40, left: -40, width: 180, height: 180,
|
|
||||||
borderRadius: "50%", pointerEvents: "none",
|
|
||||||
background: "radial-gradient(circle, rgba(124,92,255,0.11) 0%, transparent 65%)",
|
|
||||||
}} />
|
|
||||||
|
|
||||||
{/* Top: live badge */}
|
|
||||||
<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
|
|
||||||
</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)",
|
|
||||||
}}>Our Own Product</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Center: brand identity */}
|
{/* Bottom nudge */}
|
||||||
<div style={{ position: "relative", textAlign: "center" }}>
|
|
||||||
<div style={{
|
|
||||||
fontSize: "clamp(30px, 4vw, 52px)",
|
|
||||||
fontWeight: 700, letterSpacing: "-0.02em",
|
|
||||||
fontFamily: "var(--font-serif)", fontStyle: "italic",
|
|
||||||
background: "linear-gradient(135deg, #fda4af 0%, #c084fc 50%, #67e8f9 100%)",
|
|
||||||
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
|
||||||
backgroundClip: "text",
|
|
||||||
lineHeight: 1.1, marginBottom: 12,
|
|
||||||
}}>Glamours Touch</div>
|
|
||||||
<div style={{
|
|
||||||
fontSize: 11.5, color: "var(--text-faint)",
|
|
||||||
fontFamily: "var(--font-mono)", letterSpacing: "0.14em",
|
|
||||||
textTransform: "uppercase",
|
|
||||||
}}>Beauty · Lifestyle · E-Commerce</div>
|
|
||||||
|
|
||||||
{/* Divider line */}
|
|
||||||
<div style={{
|
|
||||||
width: 48, height: 2, margin: "20px auto",
|
|
||||||
background: "linear-gradient(90deg, #fda4af, #a78bfa)",
|
|
||||||
borderRadius: 2,
|
|
||||||
}} />
|
|
||||||
|
|
||||||
<p style={{
|
|
||||||
margin: 0, fontSize: 14, lineHeight: 1.6,
|
|
||||||
color: "var(--text-faint)", maxWidth: 280, marginLeft: "auto", marginRight: "auto",
|
|
||||||
}}>
|
|
||||||
A real, live store — browse it, buy from it. This is what Aura ships.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bottom: real URL link */}
|
|
||||||
<div style={{ position: "relative", textAlign: "center" }}>
|
|
||||||
<a
|
|
||||||
href="https://glamourstouch.com"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
style={{
|
|
||||||
display: "inline-flex", alignItems: "center", gap: 7,
|
|
||||||
fontSize: 13, fontFamily: "var(--font-mono)",
|
|
||||||
color: "#fda4af", textDecoration: "none",
|
|
||||||
padding: "8px 18px",
|
|
||||||
background: "rgba(244,63,94,0.09)",
|
|
||||||
border: "1px solid rgba(244,63,94,0.22)",
|
|
||||||
borderRadius: 8, transition: "all 0.15s",
|
|
||||||
}}
|
|
||||||
onMouseEnter={e => { e.currentTarget.style.background = "rgba(244,63,94,0.17)"; e.currentTarget.style.borderColor = "rgba(244,63,94,0.38)"; }}
|
|
||||||
onMouseLeave={e => { e.currentTarget.style.background = "rgba(244,63,94,0.09)"; e.currentTarget.style.borderColor = "rgba(244,63,94,0.22)"; }}
|
|
||||||
>
|
|
||||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
||||||
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
|
|
||||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
|
||||||
</svg>
|
|
||||||
glamourstouch.com ↗
|
|
||||||
</a>
|
|
||||||
</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={{
|
<div className="reveal" style={{
|
||||||
marginTop: 20, padding: "22px 32px",
|
marginTop: 20, padding: "22px 32px",
|
||||||
background: rose.bg, border: `1px solid ${rose.border}`,
|
background: "var(--bg-card)", border: "1px solid var(--line)",
|
||||||
borderRadius: "var(--radius)",
|
borderRadius: "var(--radius)",
|
||||||
display: "flex", alignItems: "center", justifyContent: "space-between",
|
display: "flex", alignItems: "center", justifyContent: "space-between",
|
||||||
flexWrap: "wrap", gap: 16,
|
flexWrap: "wrap", gap: 16,
|
||||||
}}>
|
}}>
|
||||||
<div>
|
<div>
|
||||||
<span style={{ fontSize: 15, fontWeight: 500, color: "var(--text)" }}>
|
<span style={{ fontSize: 15, fontWeight: 500, color: "var(--text)" }}>
|
||||||
Want a store like GlamourTouch for your brand?
|
Want Aura to build your product?
|
||||||
</span>
|
</span>
|
||||||
<span style={{
|
<span style={{
|
||||||
display: "block", fontSize: 13, color: "var(--text-faint)",
|
display: "block", fontSize: 13, color: "var(--text-faint)",
|
||||||
marginTop: 3, fontFamily: "var(--font-mono)",
|
marginTop: 3, fontFamily: "var(--font-mono)",
|
||||||
}}>
|
}}>
|
||||||
Starter e-commerce from $499 · Delivered in 2–4 weeks
|
E-commerce · AI marketplace · SaaS — from $499 · Delivered in 2–4 weeks
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<a
|
<a href="#/contact" style={{
|
||||||
href="#/services/web-app-dev"
|
|
||||||
style={{
|
|
||||||
padding: "11px 24px",
|
padding: "11px 24px",
|
||||||
background: "var(--text)", color: "var(--bg)",
|
background: "var(--text)", color: "var(--bg)",
|
||||||
borderRadius: 9, fontSize: 13.5, fontWeight: 500,
|
borderRadius: 9, fontSize: 13.5, fontWeight: 500,
|
||||||
textDecoration: "none", whiteSpace: "nowrap",
|
textDecoration: "none", whiteSpace: "nowrap", flexShrink: 0,
|
||||||
flexShrink: 0,
|
}}>Start a Project →</a>
|
||||||
}}
|
|
||||||
>Get a Quote →</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -575,7 +530,7 @@ const FlagshipProduct = () => {
|
|||||||
50% { opacity: 0.55; box-shadow: 0 0 2px rgba(34,197,94,0.3); }
|
50% { opacity: 0.55; box-shadow: 0 0 2px rgba(34,197,94,0.3); }
|
||||||
}
|
}
|
||||||
@media (max-width: 860px) {
|
@media (max-width: 860px) {
|
||||||
.glamour-card-grid { grid-template-columns: 1fr !important; }
|
.own-products-grid { grid-template-columns: 1fr !important; }
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user