Hugging Face's logo

Spaces:
Polarisailabs
/
VegaTest
Sleeping

App Files Community
VegaTest / index.html
Polarisailabs's picture
Polarisailabs
Upload index.html
617be57 verified
raw
history blame contribute delete
26 kB
 <!DOCTYPE html>
<!-- saved from url=(1550)https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/54896421/e0cf6e13-36bf-497b-8928-18ae0404169c/index_teamtop_responsive.html?AWSAccessKeyId=ASIA2F3EMEYEQYBEAJAU&Signature=zOBqoaqoINKbtD0U5zcHalAGLqk%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEMX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJHMEUCIQC36KdtNpBG1cMzAXmR%2B%2BRDAaBONPqqpKBnEHmITfphRgIge5qocxed8hftUp30%2BNL79yRbnoTCutLvKwFPIxGO5j0q8QQIXRABGgw2OTk3NTMzMDk3MDUiDCzN%2F%2BumwOJo7ARSQSrOBEVCLzQ%2B%2By%2BRurUJEE3Uyar76Hci2PdLsOHskdGU4lcldqCqNgsh8Us5n9XBUpNBJ5rVET98VU%2BJuRl%2FrTjWsvkpvNOwEsr9KxUosQHwUSncfbXIhISqfO3KyDTTVTpTQeNFI49J%2BOHUBIZZKVUIAE2U6vZyj2emwBr9iAhjH1YkpwllEpey1Z3ArFtl33%2BUsRJNqfyFKN0Y2pbhXRRBGkMHekcwH6kewrHuTmWLyL3CvcPOITLs71kCIaa9XeBOD8XZOyjqe3X4AP2rQA7dOFDSEc8gw4dYRUQ2WM%2Bbt2xPnRms0a1ng4xxf4w0gEy5%2F8KLDlnANqNF9MqHXjz3vaf4ThE7hmPEAjChAm7RlB1FiDscBb1MgJgIEeRtE3L9IYCQgb26YweyXkV%2FGkzy%2FBUxDQEwP%2FpPthMZfUDxiCqfBWLf7uI5idSQDeTlMq7qHGKATnw56xjfy3KC%2FfwZmP4YVpSVuVMQUb7jsm8iBORhg0GnkQv05oPpGfVuVypvJSR%2FOSzEBNm9BupiLLlDcNKMyBnZSQURuhurlzANP5jjsG79%2BhvavHUSt5iOJoYzKkNd5%2FKStmYfcVThSygI9ELQlIhef3nioEYnzkt9U6mhygYe61%2Bu7cPq6UDu%2F0W15C4bHS9GnOXlzmW4YQY7rd6mMrr6TXohJs8KsY80HZwdm9nq5mDTg%2B1hbmGZaS7lHivPLIesHNu1EKt%2F%2FoQ7J40V94eT4iHtERmQKFBqnFNbyZXrBZUnmeBH8CSSSm2fKFqKa9z1z1Gfy3AyXuThMNmehMcGOpoBzY0kOLfpuuCXG93KpJaH5z8i%2FKGivW1i2WqJ4cuiVArWdIOzBugFYIqwuBvTA%2FMsfXFG1ElZk78OqEfjaIB56OUvSJ9Gh6DHMmvdSyxLdUshwGU%2FPLybAakyURdQsy5MBPM0XzCIYo7gMgKD1LWh8%2BO2WpyWWghsYAGaPQJpFGbpVwrOBYLfB7SvAjivdoABiUJ59cXlh0srUg%3D%3D&Expires=1759582364 -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="./Vega AI-powered Travel Co-Pilot_files/VegaLogo.png" rel="SHORTCUT ICON">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Vega AI-powered Travel Co-Pilot</title>
<style>
body {
min-height: 100vh;
background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
font-family: 'Montserrat', Arial, sans-serif;
margin: 0;
color: #1a1a1a;
}
.panel,
.feature-block,
.stat-block,
.flowchart {
background: rgba(255, 255, 255, 0.17);
box-shadow: 0 4px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.35);
transition: box-shadow 0.3s;
}
.panel:hover,
.feature-block:hover {
box-shadow: 0 8px 48px 0 rgba(31, 38, 135, 0.50);
}
header {
background: rgba(255,255,255,0.15);
box-shadow: 0 6px 32px 0 rgba(31, 38, 135, 0.11);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-bottom: 1.5px solid rgba(0,179,174,0.22);
text-align: center;
padding: 75px 0 54px 0;
}
.cta-btn {
background: rgba(2,215,206,0.7);
color: #fff;
border-radius: 38px;
border: none;
font-weight: bold;
font-size: 1.12rem;
padding: 17px 48px;
box-shadow: 0 0 0 4px rgba(0,179,174,0.18), 0 4px 24px rgba(0,179,174,0.25);
transition: box-shadow 0.3s, background 0.2s;
cursor: pointer;
}
.cta-btn:hover {
box-shadow: 0 0 0 8px rgba(0,179,174,0.35), 0 4px 34px rgba(0,179,174,0.32);
background: rgba(2,215,206,1);
}
header h1 {
font-size: 3.4rem;
font-weight: 600;
margin-bottom: 18px;
color: #1a1a1a;
letter-spacing: -2px;
}
header p {
font-size: 1rem;
color: #444c52;
margin-bottom: 36px;
}
section {
margin: 0 auto;
max-width: 1100px;
padding: 32px 18px 0 18px;
}
.panels {
display: flex;
flex-wrap: wrap;
gap: 36px;
justify-content: center;
margin-bottom: 38px;
}
.panel {
padding: 36px 28px 18px 28px;
border-radius: 26px;
min-width: 290px;
max-width: 420px;
flex: 1 1 340px;
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 255px;
justify-content: flex-start;
}
.panel h2 {
font-size: 1.13rem;
color: #02b7b2;
letter-spacing: 1px;
margin-top: 0;
margin-bottom: 6px;
}
.panel ul {
padding-left: 0;
width: 100%;
}
.panel li {
list-style: none;
padding: 0 0 14px 0;
font-size: 1.04rem;
color: #343f44;
display: flex;
align-items: center;
gap: 14px;
word-break: break-word;
}
.panel li svg {
flex-shrink: 0;
}
.panel li:last-child {
padding-bottom: 0;
}
.features-grid {
display: flex;
flex-wrap: wrap;
gap: 32px;
justify-content: center;
margin-bottom: 68px;
}
.feature-block {
border-radius: 30px;
padding: 32px 18px 22px 18px;
width: 250px;
text-align: center;
margin-bottom: 3px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 240px;
}
.feature-image {
width: 250px;
height: 150px;
border-radius: 18px;
margin: 0 auto 10px auto;
object-fit: cover;
box-shadow: 0 0 20px #00b3ae33;
}
.feature-block h3 {
font-size: 1.14rem;
color: #444c52;
margin-top: 0;
font-weight: 700;
}
.feature-block p {
color: #343f44;
margin-bottom: 0;
font-size: 0.97rem;
}
.stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin: 2px 0 74px 0;
}
.stat-block {
border-radius: 32px;
min-width: 230px;
max-width: 230px;
padding: 24px 0 13px 0;
text-align: center;
position: relative;
/* --- FIX START: Added transition for animation --- */
transition: transform 0.3s, box-shadow 0.3s;
/* --- FIX END --- */
}
/* --- FIX START: Added hover state for animation --- */
.stat-block:hover {
transform: translateY(-5px);
box-shadow: 0 12px 38px 0 rgba(31, 38, 135, 0.45);
}
/* --- FIX END --- */
.stat-figure {
font-size: 3rem;
color: #00b3ae;
margin-bottom: 9px;
font-weight: 700;
text-shadow: 0 0 12px #00b3ae44;
letter-spacing: -1px;
}
.stat-label {
font-size: 1rem;
color: #343f44;
}
.stat-inf {
display: block;
margin: 0 auto 10px auto;
max-width: 55px;
}
.flowchart {
margin: 0 auto 90px auto;
max-width: 770px;
padding: 32px 13px 40px 13px;
}
.flowchart-title {
text-align: center;
font-size: 1.26rem;
color: #444c52;
margin-bottom: 24px;
font-weight: 700;
}
.fc-steps {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
}
.fc-step {
text-align: center;
min-width: 140px;
margin: 0 18px 14px 18px;
/* --- FIX START: Added transition for animation --- */
transition: transform 0.3s;
/* --- FIX END --- */
}
/* --- FIX START: Added hover state for animation --- */
.fc-step:hover {
transform: translateY(-5px);
}
/* --- FIX END --- */
.fc-step .svg {
display: block;
margin: 0 auto 8px auto;
filter: drop-shadow(0 0 13px #00b3ae99);
}
.fc-arrow {
display: block;
margin: 0 14px;
}
@media (max-width: 980px) {
.panels,
.features-grid,
.stats {
flex-direction: column;
align-items: center;
}
.fc-steps {
flex-direction: column;
}
.fc-arrow {
display: none;
}
section {
padding: 12px;
}
}
/* Navigation Menu Styles */
nav a:hover {
color: #00b3ae !important;
}
nav .cta-btn:hover {
color: #fff !important;
}
/* Add padding to body to account for fixed nav */
body {
padding-top: 0px;
}
@media (max-width: 768px) {
#contact .panel {
max-width: 90% !important;
padding: 30px 25px !important;
margin: 0 auto !important;
}
input[type="text"],
input[type="email"],
textarea {
width: 100% !important;
}
#contact .cta-btn {
width: 100% !important;
}
}
@media (max-width: 480px) {
#contact .panel {
padding: 25px 20px !important;
}
}
</style>
<!-- Google tag (gtag.js) -->
<script async="" src="./Vega AI-powered Travel Co-Pilot_files/js"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-H59GNLS1M0');
</script>
<style>
/* Contact Section - Make text box and button fill the section */
#contact .panel {
max-width: 800px !important;
width: 100% !important;
padding: 40px 35px !important;
}
#contact form {
width: 100% !important;
display: flex;
flex-direction: column;
align-items: center;
}
#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
width: 100% !important;
box-sizing: border-box !important;
padding: 14px !important;
margin-bottom: 18px;
border-radius: 12px;
border: 2px solid rgba(0, 179, 174, 0.3) !important;
background: rgba(255, 255, 255, 0.7) !important;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1rem;
}
#contact .cta-btn {
width: 50% !important;
box-sizing: border-box;
}
#contact form > div {
width: 100%;
}
/* Mobile Menu Spacing */
nav ul {
gap: 35px !important;
}
@media (max-width: 768px) {
nav ul {
gap: 25px !important;
}
nav > div {
padding: 0 20px !important;
}
}
/* Team Section - Indent content to fill the section WITHOUT changing image size */
#team .panel {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
min-width: 220px;
max-width: 330px;
padding: 32px 24px 24px 24px !important;
}
#team .panel img {
margin: 0 auto 5px auto !important;
display: block !important;
width: 200px !important;
height: 250px !important;
object-fit: cover;
border-radius: 8px !important;
}
#team .panel h2,
#team .panel h3 {
text-align: center !important;
width: 100%;
padding: 0 8px;
}
#team .panel p {
width: 100%;
padding: 0 12px;
line-height: 1.6;
}
/* Keep first paragraph (Founder) centered, rest justified */
#team .panel p:first-of-type {
text-align: center !important;
margin-top: 5px !important;
margin-bottom: 10px !important;
}
#team .panel p:not(:first-of-type) {
text-align: justify !important;
}
@media (max-width: 680px) {
#team .panel {
padding: 24px 18px 18px 18px !important;
margin-bottom: 18px !important;
font-size: 0.97rem !important;
}
#team .panel img {
width: 200px !important;
height: 250px !important;
margin: 0 auto 5px auto !important;
}
#team .panel p:first-of-type {
margin-top: 5px !important;
}
#contact .panel {
max-width: 90% !important;
padding: 30px 20px !important;
margin: 0 auto !important;
}
#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
width: 100% !important;
}
#contact .cta-btn {
width: 80% !important;
}
}
@media (max-width: 480px) {
#contact .panel {
padding: 25px 20px !important;
}
#contact .cta-btn {
width: 100% !important;
}
}
</style></head>
<body>
<!-- Navigation Menu -->
<!-- <nav style="position: fixed; top: 0; left: 0; width: 100%; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 16px rgba(0,0,0,0.1); z-index: 1000; padding: 0px 0;">-->
<header id="home">
<nav style="position: fixed; top: 0; left: 0; width: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 0px rgba(0,0,0,0.1); z-index: 1000; padding: 0px 0;">
<div style="max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 100px;">
<div style="display: flex; align-items: center;">
<img alt="Vega Logo" src="./Pics/VegaLogo.png" style="height: 40px; margin-right: 10px;">
<span style="font-size: 1.5rem; font-weight: 700; color: #1a1a1a;">Vega</span>
</div>
<ul style="display: flex; list-style: none; margin: 0; padding: 0; gap: 35px; align-items: center;">
<!-- <li><a href="#home" style="text-decoration: none; color: #1a1a1a; font-weight: 600; font-size: 1rem; transition: color 0.3s;">Home</a></li>-->
<li><a href="#team" style="text-decoration: none; color: #1a1a1a; font-weight: 600; font-size: 1rem; transition: color 0.3s;">Team</a></li>
<li><a href="#contact" style="text-decoration: none; color: #1a1a1a; font-weight: 600; font-size: 1rem; transition: color 0.3s;">Contact</a></li>
</ul>
</div>
</nav>
<img alt="" src="./Pics/7.png" style="width: 60%; border-radius: 32px; min-height: 500px; max-height: 500px;">
<p>The world’s first travel co-pilot sourcing real-time, location-specific travel advice from top travel influencers<br><br>Plan safer, smarter journeys - powered by next-gen AI</p>
<a class="cta-btn" href="./VegaDemo.html">Try Vega Now</a>
</header>
<main>
<section class="panels">
<div class="panel">
<img alt="The Old Way" src="./Pics/1.png" style="width:100%;border-radius:32px 32px 0 0;display:block;margin-bottom:18px;object-fit:cover;object-position:top;min-height:96px;max-height:230px">
<ul>
<li><svg fill="none" height="30" viewBox="0 0 28 28" width="30" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" fill="#fff7f6" r="13" stroke="#E14D47" stroke-width="2"></circle><path d="M9.5 9.5l9 9m0-9l-9 9" stroke="#E14D47" stroke-linecap="round" stroke-width="2.5"></path></svg> Outdated, unsafe or generic travel advice</li>
<li><svg fill="none" height="30" viewBox="0 0 28 28" width="30" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" fill="#fff7f6" r="13" stroke="#E14D47" stroke-width="2"></circle><path d="M9.5 9.5l9 9m0-9l-9 9" stroke="#E14D47" stroke-linecap="round" stroke-width="2.5"></path></svg> Latest travel Info is buried across social media</li>
<li><svg fill="none" height="30" viewBox="0 0 28 28" width="30" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" fill="#fff7f6" r="13" stroke="#E14D47" stroke-width="2"></circle><path d="M9.5 9.5l9 9m0-9l-9 9" stroke="#E14D47" stroke-linecap="round" stroke-width="2.5"></path></svg> Higher risk of misinformation and unsafe decisions</li>
</ul>
</div>
<div class="panel">
<img alt="The Vega Way" src="./Pics/2.png" style="width:100%;border-radius:32px 32px 0 0;display:block;margin-bottom:18px;object-fit:cover;object-position:top;min-height:96px;max-height:230px">
<ul>
<li><svg fill="none" height="30" viewBox="0 0 28 28" width="30" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" fill="#ecfdfa" r="13" stroke="#00b3ae" stroke-width="2"></circle><path d="M7.5 14l4.8 5 8.2-9" stroke="#00b3ae" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path></svg> Instant, verified insights from trusted influencers</li>
<li><svg fill="none" height="30" viewBox="0 0 28 28" width="30" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" fill="#ecfdfa" r="13" stroke="#00b3ae" stroke-width="2"></circle><path d="M7.5 14l4.8 5 8.2-9" stroke="#00b3ae" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path></svg> 95% of content posted within the last 24 hours</li>
<li><svg fill="none" height="30" viewBox="0 0 28 28" width="30" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" fill="#ecfdfa" r="13" stroke="#00b3ae" stroke-width="2"></circle><path d="M7.5 14l4.8 5 8.2-9" stroke="#00b3ae" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path></svg> Unbiased, &lt;3s answers, &lt;1% misinformation rate</li>
</ul>
</div>
</section>
<section class="features-grid">
<div class="feature-block">
<img alt="Real-Time Curation Reference Image" class="feature-image" src="./Pics/3.png">
<h3>Real-Time Curation</h3>
<p>95% of content surfaced is from the past day or last 3 days - so you never rely on outdated info.</p>
</div>
<div class="feature-block">
<img alt="Safety-First Guidance Reference Image" class="feature-image" src="./Pics/4.png">
<h3>Safety-First Guidance</h3>
<p>Personalized "Things Not To Do" guidance and risk warnings powered by local data.</p>
</div>
<div class="feature-block">
<img alt="Pre-Travel Prerequisites Reference Image" class="feature-image" src="./Pics/5.png">
<h3>Pre-Travel Prerequisites</h3>
<p>Destination specific - documents, health, and safety checklists managed in one secure place.</p>
</div>
</section>
<section class="flowchart">
<img alt="The Vega Way" src="./Pics/6.png" style="width:100%;border-radius:32px 32px 0 0;display:block;margin-bottom:18px;object-fit:cover;object-position:top;min-height:96px;max-height:230px">
<div class="fc-steps">
<div class="fc-step">
<span class="svg"><svg fill="none" height="100" viewBox="0 0 40 40" width="100" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="15" r="7" stroke="#00b3ae" stroke-width="3"></circle><rect height="9" rx="3" stroke="#00b3ae" stroke-width="3" width="14" x="13" y="22"></rect><circle cx="26" cy="11" r="4" stroke="#00b3ae" stroke-width="3"></circle></svg></span>
<div>Influencer Content<br><small>Instagram, YouTube, TikTok</small></div>
</div>
<div class="fc-arrow"><svg fill="none" height="45" width="34" xmlns="http://www.w3.org/2000/svg"><path d="M12 24h18M24 15l6 9-6 9" stroke="#00b3ae" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path></svg></div>
<div class="fc-step">
<span class="svg"><svg fill="none" height="100" viewBox="0 0 40 40" width="100" xmlns="http://www.w3.org/2000/svg"><ellipse cx="20" cy="20" rx="13" ry="10" stroke="#00b3ae" stroke-width="3"></ellipse><path d="M13 21c2-7 18-7 14 5" stroke="#00b3ae" stroke-width="2.5"></path></svg></span>
<div>Vega AI Engine<br><small>Fine-Tuned SLMs, RAG, QLoRA</small></div>
</div>
<div class="fc-arrow"><svg fill="none" height="45" width="34" xmlns="http://www.w3.org/2000/svg"><path d="M12 24h18M24 15l6 9-6 9" stroke="#00b3ae" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path></svg></div>
<div class="fc-step">
<span class="svg"><svg fill="none" height="100" viewBox="0 0 40 40" width="100" xmlns="http://www.w3.org/2000/svg"><rect height="30" rx="5" stroke="#00b3ae" stroke-width="3" width="20" x="10" y="5"></rect><circle cx="20" cy="33" fill="#00b3ae" r="2"></circle></svg></span>
<div>User<br><small>Real-Time Recommendations</small></div>
</div>
</div>
</section>
<section class="features-grid">
<div class="stat-block">
<div class="stat-figure">&lt;3s</div>
<div class="stat-label">Query Response</div>
</div>
<div class="stat-block">
<div class="stat-figure">95%</div>
<div class="stat-label">Fresh Content</div>
</div>
<div class="stat-block">
<div class="stat-figure">&lt;1%</div>
<div class="stat-label">Misinformation Rate</div>
</div>
<div class="stat-block">
<div class="stat-figure">90%</div>
<div class="stat-label">User Satisfaction</div>
</div>
</section>
</main>
<!-- Team Section -->
<section id="team" style="padding: 60px 18px 0px 18px;">
<h2 style="text-align: center; font-size: 2.5rem; margin-bottom: 20px; margin-top: 0; color: #1a1a1a;">Our Team</h2>
<div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; max-width: 1100px; margin: 0 auto;">
<div class="panel" style="display: flex; flex-direction: column; align-items: flex-start; gap: 30px; max-width: 900px; padding: 40px 30px; width: 100%;;flex-direction:column;align-items:center;"><img alt="" class="img-responsive" src="./Pics/Gopala_Avatar.jpg" style="width: 200px; height: 250px; object-fit: cover; border-radius: 8px; display: block;"><div class="block-heading-two" style="flex-shrink: 0;">
</div><div style="flex: 1;">
<p style="color: #00b3ae; font-weight: 600; margin-top: 0; margin-bottom: 12px; text-align: left;;text-align:center;">Founder</p>
<p style="color: #444c52; font-size: 0.95rem; text-align: justify; line-height: 1.6; margin-bottom: 0;;text-align:center;">Gopala is a workafrolic and passionate product leader with a proven track record of launching successful products. Gopala has driven and launched 3B2B and 2B2C products, including Fabindia (<a href="https://www.fabindia.com/" target="_blank">Fabindia</a>) and Biba (<a href="https://www.biba.in/" target="_blank">Biba</a>), as well as two mobile apps, one e-commerce platform, and a travel platform (<a href="https://bit.ly/35pSI4w" target="_blank">Chase Ultimate Rewards</a>). With 16 years of professional experience, including a stint at <a href="https://www.microsoft.com/" target="_blank">Microsoft</a> and his own startup, Gopala's key strengths include a deep understanding of products, developing counter-intuitive strategies, scaling systems, evaluating technical possibilities, and producing valuable information through research. Gopala's personal traits include curiosity, persistence, and honesty. Gopala holds a B.Tech in Mechanical Engineering from <a href="https://www.iitb.ac.in/" target="_blank">IIT Bombay</a>, and he currently serves as an official mentor for students at <a href="https://www.iitb.ac.in/" target="_blank">IIT Bombay</a>. Check out Gopala's impressive product portfolio at <a href="https://gopalakrishna.tech/UIProductManagement/MyProductPage.aspx" target="_blank">Product Portfolio</a> and personal website at <a href="https://gopalakrishna.tech/" target="_blank">Personal Website</a> to learn more about his achievements.</p>
</div></div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" style="padding: 60px 18px 80px;">
<h2 style="text-align: center; font-size: 2.5rem; margin-bottom: 20px; color: #1a1a1a;">Get in Touch</h2>
<p style="text-align: center; font-size: 1.1rem; color: #444c52; margin-bottom: 50px;">Have questions? We'd love to hear from you</p>
<div class="panel" style="max-width: 500px; margin: 0 auto; padding: 40px 35px;">
<form style="display: flex; flex-direction: column; gap: 25px;">
<div>
<label style="display: block; margin-bottom: 8px; font-weight: 600; color: #1a1a1a;">Name</label>
<input placeholder="Your Name" style="width: 100%; padding: 14px; border: 2px solid rgba(0,179,174,0.3); border-radius: 12px; font-size: 1rem; background: rgba(255,255,255,0.7); box-sizing: border-box;" type="text">
</div>
<div>
<label style="display: block; margin-bottom: 8px; font-weight: 600; color: #1a1a1a;">Email</label>
<input placeholder="[email protected]" style="width: 100%; padding: 14px; border: 2px solid rgba(0,179,174,0.3); border-radius: 12px; font-size: 1rem; background: rgba(255,255,255,0.7); box-sizing: border-box;" type="email">
</div>
<div>
<label style="display: block; margin-bottom: 8px; font-weight: 600; color: #1a1a1a;">Message</label>
<textarea placeholder="Your message..." rows="6" style="width: 100%; padding: 14px; border: 2px solid rgba(0,179,174,0.3); border-radius: 12px; font-size: 1rem; background: rgba(255,255,255,0.7); resize: vertical; font-family: &#39;Montserrat&#39;, Arial, sans-serif; box-sizing: border-box;"></textarea>
</div>
<button class="cta-btn" style="width: 100%; align-self:center; margin-top: 10px; padding: 16px 32px; font-size: 1.1rem; border-radius: 50px; cursor: pointer; background: rgba(2,215,206,0.7); color: #fff; border: none;" type="submit">Send Message</button>
</form>
</div>
<div style="text-align: center; margin-top: 50px;">
<p style="color: #444c52; font-size: 1rem; margin-bottom: 15px;">Or reach us directly:</p>
<p style="color: #1a1a1a; font-size: 1.1rem; margin: 8px 0;"><strong>Email:</strong> [email protected]</p>
<p style="color: #1a1a1a; font-size: 1.1rem; margin: 8px 0;"><strong>Phone:</strong> +91 (8978556611)</p>
</div>
</section>
</body></html>