in website/src/pages/Build-IA/30-days-of-ia-2024.js [156:292]
function BlogCards({ cardHeader }) {
console.log("Resolved Image URL:", useBaseUrl(cardHeader)); // Debugging
return (
<section className={styles.features}>
<div className="container">
<div className="row gap--md">
{/* AI-Powered Content - Full Height */}
<div className="col col--6 padding--sm">
<div className="card h-100">
{/* <div className="cardHeader">
<Image
style={{
height: 'auto',
width: '100%',
}}
alt=""
role="presentation"
img={useBaseUrl('/img/meetup-card-header-1.webp')}
/>
</div> */}
<div className="card__body">
<h2>AI-powered Content Generation</h2>
<p>Discover how you can use Azure services to take advantage of generative AI capabilities to build an intelligent application.</p>
<ul>
{aiPoweredContentGeneration.map((item, index) => (
item.url ? (
<li className="padding-bottom--sm" key={index}>
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'underline' }}
>
{item.title}
</a>
</li>
) : (
<li key={index}>{item.title} (URL not available)</li>
)
))}
</ul>
</div>
</div>
</div>
{/* Right Column - Stacked "Copilot" & "AI-Assisted" */}
<div className="col col--6 padding--sm">
<div className="row h-100 gap--md">
{/* Copilot Section */}
<div className="col col--12 margin-bottom--md">
<div className="card h-100">
{/* <div className="cardHeader">
<Image
style={{
height: 'auto',
width: '100%',
}}
alt=""
role="presentation"
img={useBaseUrl('/img/meetup-card-header-2.webp')}
/>
</div> */}
<div className="card__body">
<h2>Build your own copilot</h2>
<p>Learn to build a custom copilot with full control over every step of the end-to-end workflow from prompt to production.</p>
<ul>
{buildYourOwnCopilot.map((item, index) => (
item.url ? (
<li className="padding-bottom--sm" key={index}>
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'underline' }}
>
{item.title}
</a>
</li>
) : (
<li key={index}>{item.title} (URL not available)</li>
)
))}
</ul>
</div>
</div>
</div>
{/* AI-Assisted Section */}
<div className="col col--12">
<div className="card h-100">
{/* <div className="cardHeader">
<Image
style={{
height: 'auto',
width: '100%',
}}
alt=""
role="presentation"
img={useBaseUrl('/img/meetup-card-header-3.webp')}
/>
</div> */}
<div className="card__body">
<h2>AI-assisted development</h2>
<p>Evolve the developer experience (DevEx) by learning how our dev tools can improve every stage of the developer workflow.</p>
<ul>
{aiAssistedDevelopment.map((item, index) => (
item.url ? (
<li className="padding-bottom--sm" key={index}>
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'underline' }}
>
{item.title}
</a>
</li>
) : (
<li key={index}>{item.title} (URL not available)</li>
)
))}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}