GoITExpress

<!DOCTYPE html>

<head>

<title>Digital Marketing Services</title>

<style>

/* 1. RESET & BASE */

:root {

–bg-dark: #0f172a;

–card-bg: rgba(255, 255, 255, 0.03);

–accent-primary: #a8ff78; /* Neon Green */

–accent-secondary: #78ffd6; /* Cyan-ish */

–text-main: #f8fafc;

–text-muted: #94a3b8;

–gradient-text: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%);

–input-bg: rgba(0, 0, 0, 0.3);

–input-border: rgba(255, 255, 255, 0.1);

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background-color: #0f172a;

color: var(–text-main);

font-family: ‘Inter’, sans-serif;

display: flex;

flex-direction: column;

align-items: center;

gap: 40px;

padding: 40px 0;

overflow-x: hidden;

min-height: 100vh;

}

/* 2. ANIMATIONS */

@keyframes fadeUp {

from { opacity: 0; transform: translateY(30px); }

to { opacity: 1; transform: translateY(0); }

}

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

100% { transform: translateY(0px); }

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* 3. SLIDE CONTAINER */

.slide-container {

width: 1280px;

height: 720px;

background: linear-gradient(145deg, #1e293b, #0f172a);

border-radius: 24px;

position: relative;

overflow: hidden;

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

padding: 60px 80px;

display: flex;

flex-direction: column;

justify-content: center;

border: 1px solid rgba(255, 255, 255, 0.05);

text-align: left;

flex-shrink: 0; /* Prevents shrinking if inside flex */

}

/* Abstract Background blobs */

.slide-container::before {

content: ”;

position: absolute;

top: -100px;

right: -100px;

width: 500px;

height: 500px;

background: radial-gradient(circle, rgba(120, 255, 214, 0.08) 0%, rgba(0,0,0,0) 70%);

border-radius: 50%;

pointer-events: none;

}

.slide-container::after {

content: ”;

position: absolute;

bottom: -150px;

left: -150px;

width: 600px;

height: 600px;

background: radial-gradient(circle, rgba(168, 255, 120, 0.05) 0%, rgba(0,0,0,0) 70%);

border-radius: 50%;

pointer-events: none;

}

/* 4. TYPOGRAPHY */

h1, h2, h3 {

font-family: ‘Outfit’, sans-serif;

font-weight: 700;

line-height: 1.1;

letter-spacing: -0.02em;

}

h1 {

font-size: 82px;

margin-bottom: 24px;

background: var(–gradient-text);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: fadeUp 0.8s ease-out;

}

h2.slide-title {

font-size: 48px;

margin-bottom: 40px;

padding-bottom: 20px;

border-bottom: 1px solid rgba(255,255,255,0.1);

color: white;

position: relative;

display: inline-block;

width: 100%;

animation: fadeUp 0.8s ease-out;

}

h2.slide-title::after {

content: ”;

position: absolute;

bottom: -1px;

left: 0;

width: 100px;

height: 3px;

background: var(–gradient-text);

}

p, li {

font-size: 22px;

color: var(–text-muted);

line-height: 1.6;

font-weight: 300;

}

.highlight-text {

color: var(–accent-primary);

font-weight: 500;

}

/* 5. LAYOUT UTILITIES */

.two-column {

display: grid;

grid-template-columns: 1fr 1.2fr;

gap: 60px;

align-items: center;

height: 100%;

}

.content-area {

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

/* 6. COMPONENTS */

/* Glass Cards */

.glass-card {

background: var(–card-bg);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.08);

border-radius: 20px;

padding: 35px;

transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

animation: fadeUp 0.8s ease-out 0.2s backwards;

}

.glass-card:hover {

transform: translateY(-5px);

background: rgba(255, 255, 255, 0.05);

border-color: rgba(168, 255, 120, 0.3);

box-shadow: 0 20px 40px rgba(0,0,0,0.2);

}

/* Icons & Placeholders */

.icon-box {

font-size: 48px;

margin-bottom: 20px;

background: var(–gradient-text);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

display: inline-block;

}

.big-icon-placeholder {

display: flex;

justify-content: center;

align-items: center;

height: 450px;

background: rgba(255, 255, 255, 0.02);

border-radius: 24px;

border: 1px solid rgba(255, 255, 255, 0.05);

animation: fadeUp 1s ease-out, float 6s ease-in-out infinite;

}

.big-icon-placeholder i {

font-size: 150px;

color: rgba(255, 255, 255, 0.1);

transition: color 0.3s ease;

}

.big-icon-placeholder:hover i {

color: var(–accent-primary);

}

/* Lists */

.feature-list li {

margin-bottom: 20px;

display: flex;

align-items: flex-start;

animation: fadeUp 0.5s ease-out backwards;

}

.feature-list li:nth-child(1) { animation-delay: 0.2s; }

.feature-list li:nth-child(2) { animation-delay: 0.3s; }

.feature-list li:nth-child(3) { animation-delay: 0.4s; }

.feature-list i {

color: var(–accent-primary);

margin-right: 15px;

margin-top: 5px;

font-size: 18px;

}

/* Section Title Slide */

.section-slide {

align-items: center;

text-align: center;

}

.section-slide h2 {

font-size: 90px;

margin-bottom: 20px;

background: var(–gradient-text);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.section-slide p {

font-size: 32px;

color: white;

letter-spacing: 2px;

text-transform: uppercase;

}

/* Grid Layouts */

.grid-2 {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 40px;

width: 100%;

}

.grid-3 {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 30px;

width: 100%;

}

/* Contact Button */

.btn-contact {

background: var(–gradient-text);

color: #0f172a;

padding: 15px 40px;

border-radius: 50px;

font-size: 24px;

font-weight: 700;

text-decoration: none;

display: inline-block;

margin-top: 40px;

transition: transform 0.2s;

box-shadow: 0 10px 20px rgba(168, 255, 120, 0.2);

}

.btn-contact:hover {

transform: scale(1.05);

box-shadow: 0 15px 30px rgba(168, 255, 120, 0.3);

}

/* AI Form Styles */

.ai-form-container {

display: flex;

flex-direction: column;

gap: 15px;

width: 100%;

}

.ai-input-group {

display: flex;

flex-direction: column;

gap: 8px;

}

.ai-label {

font-size: 16px;

color: var(–text-muted);

}

.ai-input, .ai-select {

background: var(–input-bg);

border: 1px solid var(–input-border);

border-radius: 12px;

padding: 12px 16px;

color: white;

font-family: ‘Inter’, sans-serif;

font-size: 16px;

outline: none;

transition: border-color 0.3s;

}

textarea.ai-input {

resize: none;

}

.ai-input:focus, .ai-select:focus {

border-color: var(–accent-primary);

}

.ai-btn-generate {

background: var(–gradient-text);

color: #0f172a;

border: none;

padding: 12px;

border-radius: 12px;

font-weight: 700;

font-size: 18px;

cursor: pointer;

margin-top: 10px;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

transition: transform 0.2s;

}

.ai-btn-generate:hover {

transform: scale(1.02);

}

.ai-btn-generate:disabled {

opacity: 0.7;

cursor: not-allowed;

transform: none;

}

.ai-output-area {

background: rgba(0,0,0,0.2);

border-radius: 12px;

padding: 20px;

min-height: 150px;

border: 1px solid var(–input-border);

margin-top: 20px;

font-size: 18px;

line-height: 1.6;

white-space: pre-line;

display: none; /* Hidden by default */

}

.ai-output-area.visible {

display: block;

animation: fadeUp 0.5s ease-out;

}

/* AI Image Output Styles */

.ai-image-output-container {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.ai-generated-image {

width: 100%;

height: 100%;

object-fit: contain;

border-radius: 12px;

}

.spinner {

border: 3px solid rgba(255, 255, 255, 0.1);

border-radius: 50%;

border-top: 3px solid #0f172a;

width: 20px;

height: 20px;

animation: spin 1s linear infinite;

}

</style>

</head>

<body>

<!– Slide 1: Title –>

<div style=”font-size: 24px; color: var(–accent-secondary); margin-bottom: 20px; letter-spacing: 4px; font-weight: 700;”>PRESENTATION</div>

<h1>Comprehensive Digital<br>Marketing Solutions</h1>

<p style=”font-size: 28px; max-width: 800px; margin: 0 auto;”>Propel your business forward with data-driven strategies and cutting-edge creativity.</p>

</div>

<!– Slide 2: Section – Social Media –>

<div>

<h2>The Power of Social Media</h2>

<p>Facebook | Instagram | TikTok</p>

</div>

<!– Slide 3: Facebook & Instagram –>

<h2 class=”slide-title”>Facebook & Instagram</h2>

</div>

<div>

<h3 style=”color: white; margin-bottom: 20px; font-size: 32px;”>Reach Customers Where They Are</h3>

<li>

<div>

<span class=”highlight-text”>Laser Targeting:</span> Reach exact audiences by interest, demographics, and buying behavior.

</div>

</li>

<li>

<div>

<span class=”highlight-text”>Scroll-Stopping Creative:</span> Visual ads designed to grab attention in the first few seconds.

</div>

</li>

<li>

<div>

<span class=”highlight-text”>Smart Remarketing:</span> Re-engage users who showed interest but haven’t converted yet.

</div>

</li>

</ul>

</div>

<!– Slide 4: TikTok –>

<h2 class=”slide-title”>TikTok Ads</h2>

<div>

<h3 style=”font-size: 36px; margin-bottom: 20px; color: white;”>The Next Gen of Advertising</h3>

<p style=”margin-bottom: 30px;”>TikTok isn’t just for dancing – it’s a content platform generating virality and massive reach at cost-effective rates.</p>

<p style=”font-size: 18px; margin: 0;”><strong style=”color:var(–accent-secondary)”>Our Secret:</strong> Creating authentic User Generated Content (UGC) that feels natural in the feed, not like an “ad”.</p>

</div>

</div>

<!– Slide 5: Section – Google & Search –>

<div>

<h2>Search & Local Presence</h2>

<p>Google Ads | Maps | SEO</p>

</div>

<!– Slide 6: Google Ads –>

<h2 class=”slide-title”>Google Ads</h2>

<h3 style=”color: white; font-size: 28px; margin-bottom: 15px;”>Search Network</h3>

<p>Be there exactly when customers search for your solution. High-intent keyword strategies that capture ready-to-buy leads.</p>

</div>

<h3 style=”color: white; font-size: 28px; margin-bottom: 15px;”>Measurement & Optimization</h3>

<p>The Google advantage: Everything is measurable. We monitor every click and conversion to ensure maximum ROI for every dollar spent.</p>

</div>

<!– Slide 7: Google Maps –>

<h2 class=”slide-title”>Google Maps</h2>

<h3 style=”color:white; font-size: 24px; margin-bottom:10px;”>Local Dominance</h3>

<p style=”font-size: 18px;”>Appear first when businesses are searched in your area.</p>

</div>

<h3 style=”color:white; font-size: 24px; margin-bottom:10px;”>Drive Action</h3>

<p style=”font-size: 18px;”>Quick call buttons and direct navigation to your storefront.</p>

</div>

<h3 style=”color:white; font-size: 24px; margin-bottom:10px;”>Reputation</h3>

<p style=”font-size: 18px;”>Review and rating management to build instant trust.</p>

</div>

<!– Slide 8: LINE Ads –>

<div>

<p style=”margin-bottom: 20px;”>A platform combining personal chat with powerful marketing tools.</p>

<li><i class=”fa-solid fa-check”></i> <span>Exceptionally high open rates</span></li>

<li><i class=”fa-solid fa-check”></i> <span>Membership & coupon management</span></li>

<li><i class=”fa-solid fa-check”></i> <span>1:1 Personal communication with customers</span></li>

</ul>

</div>

</div>

<!– Slide 9: Creative & Management –>

<h2 class=”slide-title”>Creative & Management</h2>

<h3 style=”color:white; font-size: 24px;”>Graphic Design</h3>

<p style=”font-size: 18px; color: #ddd;”>Banners, landing pages, and visual branding.</p>

</div>

<h3 style=”color:white; font-size: 24px;”>Community Management</h3>

<p style=”font-size: 18px; color: #ddd;”>Content planning, reply management, and engagement.</p>

</div>

<!– Slide 10: AI Text Generator –>

<h2 class=”slide-title”>AI Copywriting Generator ✨</h2>

<div>

<p style=”margin-bottom: 20px;”>Try our AI technology: Enter details and get winning post ideas instantly.</p>

<label class=”ai-label”>Business Name / Product</label>

</div>

<label class=”ai-label”>What are you selling?</label>

</div>

<label class=”ai-label”>Tone of Voice</label>

<option value=”Professional & Serious”>Professional & Serious</option>

<option value=”Young & Trendy”>Young & Trendy</option>

<option value=”Urgent & Promotional”>Urgent & Promotional</option>

<option value=”Humorous”>Humorous</option>

</select>

</div>

<span id=”btnText”>Create Magic ✨</span>

</button>

</div>

<h3 style=”color: var(–accent-secondary); margin-bottom: 15px;”>Result:</h3>

Result will appear here…

</div>

<!– NEW Slide: AI Image Generator –>

<h2 class=”slide-title”>AI Ad Image Generator 🎨</h2>

<div>

<p style=”margin-bottom: 20px;”>Create 1:1 ad graphics instantly with the power of AI.</p>

<label class=”ai-label”>Image Prompt</label>

</div>

<span id=”btnImgText”>Generate Image 🖼️</span>

</button>

</div>

</div>

<!– Slide 12: Contact –>

<h2 style=”font-size: 72px; margin-bottom: 20px; background: var(–gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent;”>Ready to Start?</h2>

<p class=”subtitle” style=”font-size: 24px; max-width: 700px; margin: 0 auto;”>We are ready to build your winning strategy.</p>

<a href=”#” class=”btn-contact”>Contact Us Now <i class=”fa-solid fa-arrow-right” style=”margin-left: 10px;”></i></a>

</div>

const apiKey = “”; // Will be injected by runtime

async function generateAdCopy() {

const businessName = document.getElementById(‘businessName’).value;

const productDesc = document.getElementById(‘productDesc’).value;

const tone = document.getElementById(‘toneSelect’).value;

const outputArea = document.getElementById(‘aiOutput’);

const btnText = document.getElementById(‘btnText’);

const loader = document.getElementById(‘loader’);

const btn = document.querySelector(‘.ai-btn-generate’);

if (!businessName || !productDesc) {

alert(‘Please fill in all fields’);

return;

}

// UI Loading State

btnText.style.display = ‘none’;

loader.style.display = ‘block’;

btn.disabled = true;

outputArea.classList.remove(‘visible’);

outputArea.innerText = ‘The robots are working… 🤖’;

outputArea.style.display = ‘block’;

const prompt = `Write a short, engaging marketing post in English for Facebook/Instagram for a business named “${businessName}”.

The product/service is: ${productDesc}.

The tone should be: ${tone}.

Add relevant emojis. Split into short paragraphs. Do not add introductions, just the ad copy.`;

try {

const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {

method: ‘POST’,

headers: {

‘Content-Type’: ‘application/json’

body: JSON.stringify({

contents: [{

parts: [{

text: prompt

}]

})

});

if (!response.ok) {

throw new Error(‘Network response was not ok’);

}

const data = await response.json();

const generatedText = data.candidates[0].content.parts[0].text;

// Typing effect

outputArea.innerText = ”;

outputArea.classList.add(‘visible’);

let i = 0;

const speed = 15; // ms per char

function typeWriter() {

if (i < generatedText.length) {

outputArea.textContent += generatedText.charAt(i);

i++;

setTimeout(typeWriter, speed);

}

typeWriter();

} catch (error) {

console.error(‘Error:’, error);

outputArea.innerText = ‘Oops! There was an error generating content. Please try again later.’;

} finally {

// Reset UI

btnText.style.display = ‘block’;

loader.style.display = ‘none’;

btn.disabled = false;

}

async function generateAdImage() {

const promptText = document.getElementById(‘imagePrompt’).value;

const btnText = document.getElementById(‘btnImgText’);

const loader = document.getElementById(‘loaderImg’);

const outputContainer = document.getElementById(‘imageOutput’);

const btn = btnText.parentElement;

if (!promptText) {

alert(‘Please enter an image prompt’);

return;

}

// UI Loading State

btnText.style.display = ‘none’;

loader.style.display = ‘block’;

btn.disabled = true;

outputContainer.innerHTML = ‘<div class=”spinner” style=”width: 40px; height: 40px;”></div>’;

try {

const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-001:predict?key=${apiKey}`, {

method: ‘POST’,

headers: {

‘Content-Type’: ‘application/json’

body: JSON.stringify({

instances: [{

prompt: promptText

}],

parameters: {

sampleCount: 1

}

})

});

if (!response.ok) {

throw new Error(‘Network response was not ok’);

}

const data = await response.json();

if (data.predictions && data.predictions[0] && data.predictions[0].bytesBase64Encoded) {

const imageUrl = `data:image/png;base64,${data.predictions[0].bytesBase64Encoded}`;

outputContainer.innerHTML = `<img src=”${imageUrl}” class=”ai-generated-image” alt=”Generated Ad”>`;

} else {

throw new Error(‘No image data returned’);

}

} catch (error) {

console.error(‘Error:’, error);

outputContainer.innerHTML = ‘<div style=”text-align:center; color: #ff6b6b;”><i class=”fa-solid fa-triangle-exclamation” style=”font-size: 32px; margin-bottom: 10px;”></i><br>Error Generating Image</div>’;

} finally {

// Reset UI

btnText.style.display = ‘block’;

loader.style.display = ‘none’;

btn.disabled = false;

}

</script>

</body>

</html>