<!
DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Your Project Title</title>
<!-- Tailwind CSS CDN -->
<script src="[Link]
<!-- Google Font - Inter -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link]
crossorigin>
<link href="[Link]
family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.loading-spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 36px;
height: 36px;
border-radius: 50%;
border-left-color: #6366f1;
animation: spin 1s ease infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Header & Navigation -->
<header class="bg-white sticky top-0 z-50 shadow-sm">
<nav class="container mx-auto px-4 py-4 flex items-center
justify-between">
<a href="#" class="text-2xl font-bold text-indigo-
600">Your Project</a>
<!-- Desktop Nav -->
<ul class="hidden md:flex space-x-8 text-lg">
<li><a href="#about" class="hover:text-indigo-600
transition-colors">About</a></li>
<li><a href="#features" class="hover:text-indigo-600
transition-colors">Features</a></li>
<li><a href="#tools" class="hover:text-indigo-600
transition-colors">AI Tools</a></li>
<li><a href="#contact" class="hover:text-indigo-600
transition-colors">Contact</a></li>
</ul>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="md:hidden p-2
rounded-md focus:outline-none focus:ring-2 focus:ring-inset
focus:ring-indigo-500">
<svg class="h-6 w-6 text-indigo-600" fill="none"
stroke="currentColor" viewBox="0 0 24 24"
xmlns="[Link]
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7
6h7"></path>
</svg>
</button>
</nav>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white
shadow-lg border-t border-gray-200">
<ul class="flex flex-col space-y-4 px-4 py-4 text-lg">
<li><a href="#about" class="block py-2 hover:text-
indigo-600 transition-colors">About</a></li>
<li><a href="#features" class="block py-2 hover:text-
indigo-600 transition-colors">Features</a></li>
<li><a href="#tools" class="block py-2 hover:text-
indigo-600 transition-colors">AI Tools</a></li>
<li><a href="#contact" class="block py-2 hover:text-
indigo-600 transition-colors">Contact</a></li>
</ul>
</div>
</header>
<main class="container mx-auto px-4 py-16">
<!-- Hero Section -->
<section id="hero" class="text-center py-20 bg-indigo-50
rounded-xl shadow-lg mb-16">
<div class="max-w-4xl mx-auto">
<h1 class="text-5xl md:text-6xl font-extrabold text-
indigo-700 leading-tight mb-4">
Innovate the Future with Our Groundbreaking Project
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-8 max-
w-2xl mx-auto">
A concise, powerful sentence that describes what
your project does and why it's amazing.
</p>
<a href="#tools" class="inline-block bg-indigo-600
text-white font-semibold py-3 px-8 rounded-full shadow-lg
hover:bg-indigo-700 transition-colors duration-300 transform
hover:scale-105">
Explore AI Tools
</a>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16">
<h2 class="text-4xl font-bold text-center text-gray-900
mb-12">About Our Mission</h2>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="order-2 md:order-1">
<p class="text-lg text-gray-600 mb-6">
Describe your project's history, the problem it
solves, and the team behind it. What inspired you to start this?
What is the core value you provide to your users or community?
</p>
<p class="text-lg text-gray-600">
Talk about the impact you hope to make. You can
mention your connection to the Kerala Startup Mission and how
their support has helped you grow. This section is all about
building trust and telling your story.
</p>
</div>
<div class="order-1 md:order-2">
<img
src="[Link]
text=Project+Image" alt="About section image" class="rounded-
xl shadow-xl w-full h-auto">
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-16 bg-white rounded-xl
shadow-lg mt-16">
<h2 class="text-4xl font-bold text-center text-gray-900
mb-12">Key Features</h2>
<div class="grid md:grid-cols-3 gap-8 px-4">
<!-- Feature 1 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md
hover:shadow-xl transition-shadow duration-300">
<div class="flex items-center justify-center h-12 w-
12 rounded-full bg-indigo-100 text-indigo-600 mb-4">
<svg class="h-6 w-6" fill="none"
stroke="currentColor" viewBox="0 0 24 24"
xmlns="[Link] stroke-
linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-
2">Feature One</h3>
<p class="text-gray-600">
Describe a key feature of your project. Be specific
about what it does and how it benefits the user.
</p>
</div>
<!-- Feature 2 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md
hover:shadow-xl transition-shadow duration-300">
<div class="flex items-center justify-center h-12 w-
12 rounded-full bg-indigo-100 text-indigo-600 mb-4">
<svg class="h-6 w-6" fill="none"
stroke="currentColor" viewBox="0 0 24 24"
xmlns="[Link] stroke-
linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-
9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18a9 9 0 009-9m-9-
9a9 9 0 019 9m-9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0
009-9"></path></svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-
2">Feature Two</h3>
<p class="text-gray-600">
Explain another important feature. Focus on the
user's experience and how this feature makes their life easier or
better.
</p>
</div>
<!-- Feature 3 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md
hover:shadow-xl transition-shadow duration-300">
<div class="flex items-center justify-center h-12 w-
12 rounded-full bg-indigo-100 text-indigo-600 mb-4">
<svg class="h-6 w-6" fill="none"
stroke="currentColor" viewBox="0 0 24 24"
xmlns="[Link] stroke-
linecap="round" stroke-linejoin="round" stroke-width="2" d="M9
12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955
11.955 0 018.382 15.044M12 20a8 8 0 100-16 8 8 0 000
16z"></path></svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-
2">Feature Three</h3>
<p class="text-gray-600">
Describe the third feature. This could be a unique
selling proposition or a core component of your project.
</p>
</div>
</div>
</section>
<!-- Innovation Tools Section -->
<section id="tools" class="py-16 bg-indigo-50 rounded-xl
shadow-lg mt-16">
<h2 class="text-4xl font-bold text-center text-gray-900
mb-12">Innovation Tools ✨</h2>
<p class="text-center text-gray-600 mb-12 max-w-2xl
mx-auto">
Use our AI-powered tools to accelerate your project's
development.
</p>
<div class="grid md:grid-cols-2 gap-8 px-4">
<!-- Startup Name & Tagline Generator -->
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-2xl font-bold text-gray-900 mb-
4">Startup Name & Tagline Generator</h3>
<p class="text-gray-600 mb-4">
Enter a few keywords about your project, and our
AI will suggest creative names and taglines.
</p>
<textarea id="keywordsInput" class="w-full p-3
rounded-lg border border-gray-300 focus:outline-none focus:ring-2
focus:ring-indigo-500 transition-shadow mb-4" rows="4"
placeholder="e.g., sustainable food delivery, AI education
platform, smart gardening app"></textarea>
<button id="generateNameBtn" class="w-full bg-
indigo-600 text-white font-semibold py-3 px-8 rounded-full
shadow-lg hover:bg-indigo-700 transition-colors duration-300
transform hover:scale-105">
Generate Ideas ✨
</button>
<div id="nameLoader" class="hidden flex justify-
center mt-4">
<div class="loading-spinner"></div>
</div>
<div id="nameOutput" class="mt-6 p-4 bg-gray-100
rounded-lg whitespace-pre-wrap text-sm text-gray-800
hidden"></div>
</div>
<!-- Pitch Deck Assistant -->
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-2xl font-bold text-gray-900 mb-
4">Pitch Deck Assistant</h3>
<p class="text-gray-600 mb-4">
Describe your project idea, and our AI will create a
basic outline for a pitch deck.
</p>
<textarea id="ideaInput" class="w-full p-3 rounded-
lg border border-gray-300 focus:outline-none focus:ring-2
focus:ring-indigo-500 transition-shadow mb-4" rows="4"
placeholder="e.g., A mobile app that connects local farmers
directly with restaurants to reduce food waste."></textarea>
<button id="generatePitchBtn" class="w-full bg-
indigo-600 text-white font-semibold py-3 px-8 rounded-full
shadow-lg hover:bg-indigo-700 transition-colors duration-300
transform hover:scale-105">
Generate Outline ✨
</button>
<div id="pitchLoader" class="hidden flex justify-
center mt-4">
<div class="loading-spinner"></div>
</div>
<div id="pitchOutput" class="mt-6 p-4 bg-gray-100
rounded-lg whitespace-pre-wrap text-sm text-gray-800
hidden"></div>
</div>
</div>
</section>
<!-- Call to Action Section -->
<section class="text-center py-20 bg-indigo-600 text-white
rounded-xl shadow-lg mt-16">
<h2 class="text-3xl md:text-4xl font-extrabold mb-
4">Ready to Get Started?</h2>
<p class="text-lg md:text-xl mb-8 max-w-3xl mx-auto
opacity-90">
Join our community, sign up for a demo, or simply get in
touch to learn more about our project.
</p>
<a href="#contact" class="inline-block bg-white text-
indigo-600 font-semibold py-3 px-8 rounded-full shadow-lg
hover:bg-gray-200 transition-colors duration-300 transform
hover:scale-105">
Contact Us
</a>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16">
<h2 class="text-4xl font-bold text-center text-gray-900
mb-12">Get in Touch</h2>
<div class="max-w-xl mx-auto bg-white p-8 rounded-xl
shadow-lg">
<form action="#" method="POST">
<div class="mb-4">
<label for="name" class="block text-gray-700
font-semibold mb-2">Name</label>
<input type="text" id="name" name="name"
class="w-full p-3 rounded-lg border border-gray-300 focus:outline-
none focus:ring-2 focus:ring-indigo-500 transition-shadow"
placeholder="Your Name">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700
font-semibold mb-2">Email</label>
<input type="email" id="email" name="email"
class="w-full p-3 rounded-lg border border-gray-300 focus:outline-
none focus:ring-2 focus:ring-indigo-500 transition-shadow"
placeholder="[Link]@[Link]">
</div>
<div class="mb-4">
<label for="message" class="block text-gray-700
font-semibold mb-2">Message</label>
<textarea id="message" name="message"
rows="5" class="w-full p-3 rounded-lg border border-gray-300
focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-
shadow" placeholder="Tell us about your project or
question..."></textarea>
</div>
<div class="text-center">
<button type="submit" class="bg-indigo-600 text-
white font-semibold py-3 px-8 rounded-full shadow-lg hover:bg-
indigo-700 transition-colors duration-300 transform hover:scale-
105">
Send Message
</button>
</div>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 mt-16">
<div class="container mx-auto px-4 text-center">
<p>© 2025 Your Project. All rights reserved.</p>
</div>
</footer>
<script>
// JavaScript for mobile menu functionality
const mobileMenuBtn = [Link]('mobile-
menu-btn');
const mobileMenu = [Link]('mobile-
menu');
[Link]('click', () => {
[Link]('hidden');
});
// --- Gemini API Integration ---
const generateNameBtn =
[Link]('generateNameBtn');
const keywordsInput =
[Link]('keywordsInput');
const nameOutput =
[Link]('nameOutput');
const nameLoader =
[Link]('nameLoader');
const generatePitchBtn =
[Link]('generatePitchBtn');
const ideaInput = [Link]('ideaInput');
const pitchOutput =
[Link]('pitchOutput');
const pitchLoader =
[Link]('pitchLoader');
// Function to handle API calls with exponential backoff
async function fetchWithExponentialBackoff(url, options,
retries = 5, delay = 1000) {
try {
const response = await fetch(url, options);
if (![Link]) {
if ([Link] === 429 && retries > 0) { // Too
Many Requests
await new Promise(res => setTimeout(res, delay));
return fetchWithExponentialBackoff(url, options,
retries - 1, delay * 2);
}
throw new Error(`API call failed with status: $
{[Link]}`);
}
return response;
} catch (error) {
if (retries > 0) {
await new Promise(res => setTimeout(res, delay));
return fetchWithExponentialBackoff(url, options,
retries - 1, delay * 2);
}
throw error;
}
}
// Generate Startup Name & Tagline
[Link]('click', async () => {
const keywords = [Link]();
if (!keywords) {
alert('Please enter some keywords.');
return;
}
[Link]('hidden');
[Link]('hidden');
const prompt = `Based on the following keywords for a
startup idea, generate 5 creative and memorable startup names
and a one-sentence tagline for each. Format the response as a
numbered list with the name on one line and the tagline on the
next. Keywords: ${keywords}`;
const payload = {
contents: [{ parts: [{ text: prompt }] }],
systemInstruction: {
parts: [{ text: "You are a creative brand naming
consultant. Your goal is to generate short, impactful, and
memorable names and taglines for startups based on user-
provided keywords." }]
}
};
const apiKey = "";
const apiUrl =
`[Link]
ni-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;
try {
const response = await
fetchWithExponentialBackoff(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: [Link](payload)
});
const result = await [Link]();
const text = result?.candidates?.[0]?.content?.parts?.
[0]?.text || "No results found. Please try again with different
keywords.";
[Link] = text;
[Link]('hidden');
} catch (error) {
[Link] = 'Failed to generate ideas.
Please try again.';
[Link]('hidden');
[Link]('Error generating name and tagline:',
error);
} finally {
[Link]('hidden');
}
});
// Generate Pitch Deck Outline
[Link]('click', async () => {
const idea = [Link]();
if (!idea) {
alert('Please describe your project idea.');
return;
}
[Link]('hidden');
[Link]('hidden');
const prompt = `Generate a detailed pitch deck outline for
a startup based on the following project idea. The outline should
include key slides like Problem, Solution, Market, Business Model,
Competition, Team, and Financials. Provide a short description for
each slide explaining what content should be included.
Project Idea: ${idea}`;
const payload = {
contents: [{ parts: [{ text: prompt }] }],
systemInstruction: {
parts: [{ text: "You are a seasoned startup mentor
and investor. Your goal is to provide a comprehensive and
professional pitch deck outline that helps entrepreneurs structure
their ideas for potential investors." }]
}
};
const apiKey = "";
const apiUrl =
`[Link]
ni-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;
try {
const response = await
fetchWithExponentialBackoff(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
bod