<!doctype html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/_sdk/element_sdk.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; width: 100%; }
body {
height: 100%;
width: 100%;
font-family: 'Outfit', sans-serif;
font-weight: 300;
color: #e8e0e8;
background: #0a0a0a;
overflow: hidden;
margin: 0;
padding: 0;
}
.page-wrap {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
/* ---- Typography ---- */
.font-display { font-family: 'Cormorant Garamond', serif; }
.font-body { font-family: 'Outfit', sans-serif; }
/* ---- Hero ---- */
.hero-section {
position: relative;
width: 100%;
min-height: 90%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 20% 80%, rgba(114, 47, 88, 0.35) 0%, transparent 70%),
radial-gradient(ellipse 50% 40% at 80% 20%, rgba(0, 105, 78, 0.25) 0%, transparent 70%),
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(114, 47, 88, 0.08) 0%, transparent 80%);
background-size: cover;
background-position: center;
z-index: 0;
}
.hero-bg-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-color: rgba(0, 0, 0, 0.3);
z-index: 0;
}
.hero-noise {
position: absolute;
inset: 0;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px;
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
}
.hero-tag {
display: inline-block;
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: #00694e;
margin-bottom: 32px;
padding: 6px 20px;
border: 1px solid rgba(0, 105, 78, 0.3);
border-radius: 100px;
}
.hero-headline {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: clamp(2.4rem, 5vw, 4.2rem);
line-height: 1.15;
color: #f5f0f5;
margin-bottom: 24px;
letter-spacing: -0.5px;
}
.hero-headline em {
font-style: italic;
background: linear-gradient(90deg, #9b5a80, #00c78a, #722f58, #9b5a80);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientFlow 6s ease infinite;
}
@keyframes gradientFlow {
0% { background-position: 0% center; }
50% { background-position: 100% center; }
100% { background-position: 0% center; }
}
.hero-subtext {
font-size: clamp(1rem, 1.8vw, 1.15rem);
line-height: 1.7;
color: #b8a8b8;
max-width: 580px;
margin: 0 auto 40px;
}
.btn-group {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
color: #f5f0f5;
background: linear-gradient(135deg, #722f58, #5a2445);
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.btn-primary:hover {
background: linear-gradient(135deg, #8a3a6c, #722f58);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(114, 47, 88, 0.3);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
color: #00694e;
background: transparent;
border: 1px solid rgba(0, 105, 78, 0.4);
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.btn-secondary:hover {
background: rgba(0, 105, 78, 0.1);
border-color: #00694e;
transform: translateY(-2px);
}
/* ---- Divider ---- */
.section-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(155, 90, 128, 0.25), rgba(0, 105, 78, 0.2), transparent);
}
/* ---- About ---- */
.about-section {
width: 100%;
padding: 100px 24px;
display: flex;
justify-content: center;
}
.about-inner {
max-width: 1000px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: flex-start;
}
.about-left {
display: flex;
flex-direction: column;
}
.section-label {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: #00694e;
margin-bottom: 16px;
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: clamp(2rem, 3.5vw, 3rem);
color: #f5f0f5;
line-height: 1.15;
margin-bottom: 8px;
}
.about-accent {
width: 48px;
height: 3px;
background: linear-gradient(90deg, #722f58, #00694e);
border-radius: 2px;
margin-top: 16px;
}
.about-image-container {
position: relative;
width: 100%;
aspect-ratio: 3/4;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(155, 90, 128, 0.15);
display: flex;
align-items: center;
justify-content: center;
max-width: 320px;
margin: 0 auto;
}
.about-image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(114, 47, 88, 0.1), rgba(0, 105, 78, 0.08));
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: rgba(155, 90, 128, 0.3);
font-weight: 300;
}
.about-image-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-right p {
font-size: 1.05rem;
line-height: 1.8;
color: #b8a8b8;
margin-bottom: 32px;
}
/* ---- Gallery ---- */
.gallery-section {
width: 100%;
padding: 100px 24px;
text-align: center;
position: relative;
overflow: hidden;
}
.gallery-glow {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(120px);
opacity: 0.12;
pointer-events: none;
}
.gallery-glow-1 { background: #722f58; top: -100px; right: -100px; }
.gallery-glow-2 { background: #00694e; bottom: -100px; left: -100px; }
.gallery-inner {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
}
.gallery-inner .section-title { margin-bottom: 20px; }
.gallery-inner p {
font-size: 1.05rem;
line-height: 1.8;
color: #b8a8b8;
margin-bottom: 36px;
}
.carousel-container {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 auto 36px;
height: 450px;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(155, 90, 128, 0.15);
}
.carousel-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-slide.active {
opacity: 1;
}
.carousel-slide-image {
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(114, 47, 88, 0.1), rgba(0, 105, 78, 0.08));
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
color: rgba(155, 90, 128, 0.2);
font-weight: 300;
}
.carousel-slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 10;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.carousel-dot.active {
background: #00c78a;
border-color: #00c78a;
transform: scale(1.2);
}
/* ---- Values ---- */
.values-section {
width: 100%;
padding: 100px 24px;
}
.values-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.values-inner .section-title { margin-bottom: 48px; }
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.value-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(155, 90, 128, 0.12);
border-radius: 8px;
padding: 36px 20px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.value-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #722f58, #00694e);
opacity: 0;
transition: opacity 0.4s ease;
}
.value-card:hover {
border-color: rgba(155, 90, 128, 0.3);
background: rgba(255, 255, 255, 0.04);
transform: translateY(-4px);
}
.value-card:hover::before { opacity: 1; }
.value-icon {
width: 48px;
height: 48px;
margin: 0 auto 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.value-icon-1 { background: rgba(114, 47, 88, 0.15); color: #9b5a80; }
.value-icon-2 { background: rgba(0, 105, 78, 0.15); color: #00c78a; }
.value-icon-3 { background: rgba(155, 90, 128, 0.12); color: #b87aa0; }
.value-icon-4 { background: rgba(0, 105, 78, 0.12); color: #00a06d; }
.value-name {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 1.15rem;
color: #f5f0f5;
margin-bottom: 12px;
}
.value-desc {
font-size: 0.9rem;
line-height: 1.6;
color: #b8a8b8;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
}
.value-card:hover .value-desc {
opacity: 1;
max-height: 150px;
}
/* ---- CTA ---- */
.cta-section {
width: 100%;
padding: 100px 24px;
text-align: center;
position: relative;
}
.cta-border {
max-width: 800px;
margin: 0 auto;
padding: 64px 48px;
border: 1px solid rgba(155, 90, 128, 0.15);
border-radius: 12px;
background: rgba(255, 255, 255, 0.01);
position: relative;
overflow: hidden;
}
.cta-border::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 60% at 30% 70%, rgba(114, 47, 88, 0.08) 0%, transparent 70%),
radial-gradient(ellipse 60% 60% at 70% 30%, rgba(0, 105, 78, 0.06) 0%, transparent 70%);
z-index: 0;
}
.cta-content {
position: relative;
z-index: 1;
}
.cta-content .section-title { margin-bottom: 16px; }
.cta-content p {
font-size: 1.05rem;
line-height: 1.7;
color: #b8a8b8;
margin-bottom: 36px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
/* ---- Scroll Animations ---- */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.35s; }
/* Hero entrance */
.hero-content .hero-tag { opacity: 0; animation: fadeUp 0.7s 0.2s ease forwards; }
.hero-content .hero-headline { opacity: 0; animation: fadeUp 0.7s 0.4s ease forwards; }
.hero-content .hero-subtext { opacity: 0; animation: fadeUp 0.7s 0.6s ease forwards; }
.hero-content .btn-group { opacity: 0; animation: fadeUp 0.7s 0.8s ease forwards; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
.about-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
.about-accent { margin: 16px auto 0; }
.values-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cta-border { padding: 48px 28px; }
}
@media (max-width: 480px) {
.values-grid { grid-template-columns: 1fr; }
.hero-section { padding: 60px 20px; }
}
</style>
<style>body { box-sizing: border-box; }</style>
<script src="https://cdn.tailwindcss.com/3.4.17" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js" type="text/javascript"></script>
<script src="/_sdk/data_sdk.js" type="text/javascript"></script>
</head>
<body>
<div class="page-wrap"><!-- Hero -->
<section class="hero-section">
<div class="hero-bg"></div>
<div class="hero-bg-image" id="heroBgImage"></div>
<div class="hero-noise"></div>
<div class="hero-content"><span class="hero-tag">Creative · Strategic · Purposeful</span>
<h1 class="hero-headline" id="heroHeadline">Socially Progressive <em>Artistic Entrepreneur</em> & Efficiency Coordinator</h1>
<p class="hero-subtext" id="heroSubtext">Blending creativity, strategy, and purpose to build meaningful projects and experiences.</p>
<div class="btn-group"><a href="#about" class="btn-primary">Learn More</a> <a href="#gallery" class="btn-secondary">Explore My Work</a>
</div>
</div>
</section>
<div class="section-divider"></div><!-- About -->
<section class="about-section" id="about">
<div class="about-inner">
<div class="about-left reveal">
<p class="section-label">Introduction</p>
<h2 class="section-title" id="aboutTitle">About Me</h2>
<div class="about-accent"></div>
<p id="aboutContent" style="margin-top: 24px;">I am a socially progressive artistic entrepreneur and efficiency coordinator focused on using creativity and organization to make ideas impactful. My work combines art, leadership, and strategic planning to create meaningful change and innovative experiences.</p><a href="#" class="btn-secondary" style="margin-top: 24px; width: fit-content;">Discover My Story</a>
</div>
<div class="about-right reveal reveal-delay-1">
<div class="about-image-container">
<div class="about-image-placeholder">
<img id="aboutImage" src="" alt="Profile" style="display:none;"> <span id="aboutImagePlaceholder">📷</span>
</div>
</div>
</div>
</div>
</section>
<div class="section-divider"></div><!-- Gallery -->
<section class="gallery-section" id="gallery">
<div class="gallery-glow gallery-glow-1"></div>
<div class="gallery-glow gallery-glow-2"></div>
<div class="gallery-inner">
<p class="section-label reveal">Portfolio</p>
<h2 class="section-title reveal reveal-delay-1" id="galleryTitle">Experience Gallery</h2>
<p class="reveal reveal-delay-2" id="galleryContent">Uncover the moments, projects, and experiences that have shaped who I am today. Explore the journey behind my work, creativity, and growth.</p>
<div class="carousel-container reveal reveal-delay-3">
<div class="carousel-slide active">
<div class="carousel-slide-image">
<img src="" alt="Experience 1" style="display:none;"> <span class="carousel-placeholder">🖼</span>
</div>
</div>
<div class="carousel-slide">
<div class="carousel-slide-image">
<img src="" alt="Experience 2" style="display:none;"> <span class="carousel-placeholder">🖼</span>
</div>
</div>
<div class="carousel-slide">
<div class="carousel-slide-image">
<img src="" alt="Experience 3" style="display:none;"> <span class="carousel-placeholder">🖼</span>
</div>
</div>
<div class="carousel-nav">
<div class="carousel-dot active" data-slide="0"></div>
<div class="carousel-dot" data-slide="1"></div>
<div class="carousel-dot" data-slide="2"></div>
</div>
</div><a href="#" class="btn-primary reveal reveal-delay-4">Explore Experiences</a>
</div>
</section>
<div class="section-divider"></div><!-- Values -->
<section class="values-section">
<div class="values-inner">
<p class="section-label reveal">Philosophy</p>
<h2 class="section-title reveal" id="valuesTitle">What Drives My Work</h2>
<div class="values-grid">
<div class="value-card reveal reveal-delay-1">
<div class="value-icon value-icon-1">
✊
</div>
<p class="value-name">Social Progress</p>
<p class="value-desc" id="valueDesc1">Driving positive change through creative initiatives that address social challenges and empower communities.</p>
</div>
<div class="value-card reveal reveal-delay-2">
<div class="value-icon value-icon-2">
✦
</div>
<p class="value-name">Artistic Innovation</p>
<p class="value-desc" id="valueDesc2">Pushing creative boundaries to develop fresh perspectives and experimental approaches to art and design.</p>
</div>
<div class="value-card reveal reveal-delay-3">
<div class="value-icon value-icon-3">
⚡
</div>
<p class="value-name">Efficient Systems</p>
<p class="value-desc" id="valueDesc3">Building organized, scalable frameworks that maximize impact while minimizing waste and complexity.</p>
</div>
<div class="value-card reveal reveal-delay-4">
<div class="value-icon value-icon-4">
◎
</div>
<p class="value-name">Purpose-Driven Projects</p>
<p class="value-desc" id="valueDesc4">Creating meaningful work that aligns with values and leaves a lasting impact on audiences and communities.</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div><!-- CTA -->
<section class="cta-section">
<div class="cta-border">
<div class="cta-content">
<p class="section-label reveal">Get In Touch</p>
<h2 class="section-title reveal reveal-delay-1" id="ctaTitle">Let's Build Something Meaningful</h2>
<p class="reveal reveal-delay-2" id="ctaText">Interested in collaborating, learning more about my work, or exploring creative projects together?</p>
<div class="btn-group reveal reveal-delay-3"><a href="#" class="btn-primary">Contact Me</a> <a href="#" class="btn-secondary">View My Portfolio</a>
</div>
</div>
</div>
</section>
<div style="height: 0;"></div>
</div>
<script>
// ---- Carousel ----
let currentSlide = 0;
const slides = document.querySelectorAll('.carousel-slide');
const dots = document.querySelectorAll('.carousel-dot');
function showSlide(n) {
slides.forEach(s => s.classList.remove('active'));
dots.forEach(d => d.classList.remove('active'));
slides[n].classList.add('active');
dots[n].classList.add('active');
}
dots.forEach(dot => {
dot.addEventListener('click', () => {
currentSlide = parseInt(dot.dataset.slide);
showSlide(currentSlide);
});
});
// Auto-advance carousel every 5 seconds
setInterval(() => {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}, 5000);
// ---- Scroll Reveal ----
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// ---- Smooth scroll for hash links ----
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', (e) => {
e.preventDefault();
const target = document.querySelector(a.getAttribute('href'));
if (target) target.scrollIntoView({ behavior: 'smooth' });
});
});
// ---- Element SDK ----
const defaultConfig = {
background_color: '#0a0a0a',
surface_color: '#722f58',
text_color: '#b8a8b8',
primary_action_color: '#722f58',
secondary_action_color: '#00694e',
font_family: 'Cormorant Garamond',
font_size: 16,
hero_headline: 'Socially Progressive <em>Artistic Entrepreneur</em> & Efficiency Coordinator',
hero_subtext: 'Blending creativity, strategy, and purpose to build meaningful projects and experiences.',
about_title: 'About Me',
about_content: 'I am a socially progressive artistic entrepreneur and efficiency coordinator focused on using creativity and organization to make ideas impactful. My work combines art, leadership, and strategic planning to create meaningful change and innovative experiences.',
gallery_title: 'Experience Gallery',
gallery_content: 'Uncover the moments, projects, and experiences that have shaped who I am today. Explore the journey behind my work, creativity, and growth.',
values_title: 'What Drives My Work',
values_desc_1: 'Driving positive change through creative initiatives that address social challenges and empower communities.',
values_desc_2: 'Pushing creative boundaries to develop fresh perspectives and experimental approaches to art and design.',
values_desc_3: 'Building organized, scalable frameworks that maximize impact while minimizing waste and complexity.',
values_desc_4: 'Creating meaningful work that aligns with values and leaves a lasting impact on audiences and communities.',
cta_title: "Let's Build Something Meaningful",
cta_text: 'Interested in collaborating, learning more about my work, or exploring creative projects together?'
};
function applyConfig(config) {
const c = { ...defaultConfig, ...config };
const bg = c.background_color;
const surface = c.surface_color;
const text = c.text_color;
const primary = c.primary_action_color;
const secondary = c.secondary_action_color;
const font = c.font_family;
const baseSize = c.font_size;
// Background
document.body.style.background = bg;
// Text colors
document.querySelectorAll('.hero-subtext, .about-right p, .gallery-inner p, .cta-content p:not(.section-label)').forEach(el => el.style.color = text);
// Heading color - lighter version
const headingColor = '#f5f0f5';
// Primary buttons
document.querySelectorAll('.btn-primary').forEach(el => {
el.style.background = `linear-gradient(135deg, ${primary}, ${primary}dd)`;
});
// Secondary buttons & labels
document.querySelectorAll('.btn-secondary').forEach(el => {
el.style.color = secondary;
el.style.borderColor = secondary + '66';
});
document.querySelectorAll('.section-label, .hero-tag').forEach(el => {
el.style.color = secondary;
if (el.classList.contains('hero-tag')) el.style.borderColor = secondary + '4d';
});
// Value card borders
document.querySelectorAll('.value-card').forEach(el => {
el.style.borderColor = surface + '1f';
});
// Fonts
const fontStack = `${font}, serif`;
document.querySelectorAll('.hero-headline, .section-title, .value-name').forEach(el => {
el.style.fontFamily = fontStack;
});
// Font sizing
const hl = document.getElementById('heroHeadline');
if (hl) hl.style.fontSize = `clamp(${baseSize * 1.5}px, 5vw, ${baseSize * 2.6}px)`;
document.querySelectorAll('.section-title').forEach(el => {
el.style.fontSize = `clamp(${baseSize * 1.25}px, 3.5vw, ${baseSize * 1.875}px)`;
});
document.querySelectorAll('.hero-subtext, .about-right p, .gallery-inner p, .cta-content p:not(.section-label)').forEach(el => {
el.style.fontSize = `${baseSize * 1.05}px`;
});
// Text content
const setText = (id, val) => { const el = document.getElementById(id); if (el && val !== undefined) el.innerHTML = val; };
setText('heroHeadline', c.hero_headline);
setText('heroSubtext', c.hero_subtext);
setText('aboutTitle', c.about_title);
setText('aboutContent', c.about_content);
setText('galleryTitle', c.gallery_title);
setText('galleryContent', c.gallery_content);
setText('valuesTitle', c.values_title);
setText('valueDesc1', c.values_desc_1);
setText('valueDesc2', c.values_desc_2);
setText('valueDesc3', c.values_desc_3);
setText('valueDesc4', c.values_desc_4);
setText('ctaTitle', c.cta_title);
setText('ctaText', c.cta_text);
}
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig,
onConfigChange: async (config) => applyConfig(config),
mapToCapabilities: (config) => {
const c = { ...defaultConfig, ...config };
const makeColor = (key) => ({
get: () => c[key] || defaultConfig[key],
set: (v) => { c[key] = v; window.elementSdk.setConfig({ [key]: v }); }
});
return {
recolorables: [
makeColor('background_color'),
makeColor('surface_color'),
makeColor('text_color'),
makeColor('primary_action_color'),
makeColor('secondary_action_color')
],
borderables: [],
fontEditable: {
get: () => c.font_family || defaultConfig.font_family,
set: (v) => { c.font_family = v; window.elementSdk.setConfig({ font_family: v }); }
},
fontSizeable: {
get: () => c.font_size || defaultConfig.font_size,
set: (v) => { c.font_size = v; window.elementSdk.setConfig({ font_size: v }); }
}
};
},
mapToEditPanelValues: (config) => {
const c = { ...defaultConfig, ...config };
return new Map([
['hero_headline', c.hero_headline],
['hero_subtext', c.hero_subtext],
['about_title', c.about_title],
['about_content', c.about_content],
['gallery_title', c.gallery_title],
['gallery_content', c.gallery_content],
['values_title', c.values_title],
['values_desc_1', c.values_desc_1],
['values_desc_2', c.values_desc_2],
['values_desc_3', c.values_desc_3],
['values_desc_4', c.values_desc_4],
['cta_title', c.cta_title],
['cta_text', c.cta_text]
]);
}
});
}
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9e9996b031ae3c2d',t:'MTc3NTczODUxNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>