Skip to content

Pull Request : AI Startup Landing Page #995

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
keshripritesh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Pull Request : AI Startup Landing Page #995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 167 additions & 0 deletions public/Day-200_AI_Startup_Landing_Page/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>NovaAI — Smart Assistant for Teams</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<div class="container header-inner">
<a class="brand" href="#">NovaAI</a>
<nav class="nav" id="nav">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#about">About</a>
<a href="#contact" class="cta small">Get Early Access</a>
</nav>
<button id="menuBtn" class="menu-btn" aria-label="menu">
<span></span><span></span><span></span>
</button>
</div>
</header>

<main>
<section class="hero">
<div class="container hero-grid">
<div class="hero-left">
<h1>AI that helps teams ship faster.</h1>
<p class="lead">NovaAI summarizes meetings, drafts emails, generates code snippets, and automates routine tasks — so your team focuses on impact.</p>
<div class="hero-actions">
<a class="btn primary" id="getAccess">Get Early Access</a>
<a class="btn ghost" href="#features">Explore features</a>
</div>
<div class="trust">
<span class="chip">Trusted by</span>
<div class="logos">
<span>Acme</span><span>Orbit</span><span>ByteLab</span>
</div>
</div>
</div>
<div class="hero-right">
<div class="device">
<div class="mockup">
<div class="mock-header">
<span>NovaAI • Workspace</span>
</div>
<div class="mock-body">
<div class="msg bot">Summary: Today's meeting action items: 1) finalize UI, 2) deploy to staging.</div>
<div class="msg user">Thanks! Can you draft the announcement?</div>
<div class="msg bot">Draft ready — copied to clipboard.</div>
</div>
</div>
<div class="floating-stats">
<div><strong>+40%</strong><span>faster delivery</span></div>
<div><strong>100k+</strong><span>monthly tasks</span></div>
</div>
</div>
</div>
</div>
</section>

<section id="features" class="section container features">
<h2 class="section-title">What NovaAI does</h2>
<div class="cards">
<article class="card">
<i class="material-icons">summarize</i>
<h3>Meeting Summaries</h3>
<p>Get concise action items, decisions and next steps instantly.</p>
</article>
<article class="card">
<i class="material-icons">code</i>
<h3>Code Assist</h3>
<p>Generate code snippets and tests for common tasks.</p>
</article>
<article class="card">
<i class="material-icons">mail</i>
<h3>Auto Emails</h3>
<p>Draft polished emails from bullet points in a click.</p>
</article>
<article class="card">
<i class="material-icons">bolt</i>
<h3>Workflows</h3>
<p>Automate repetitive tasks with simple rules.</p>
</article>
</div>
</section>

<section id="pricing" class="section container pricing">
<h2 class="section-title">Pricing</h2>
<div class="pricing-grid">
<div class="price-card">
<h3>Starter</h3>
<p class="price">Free</p>
<ul>
<li>Up to 3 users</li>
<li>Basic summaries</li>
<li>Email drafts</li>
</ul>
<a class="btn">Start for free</a>
</div>
<div class="price-card popular">
<h3>Team</h3>
<p class="price">₹799 / mo</p>
<ul>
<li>50 members</li>
<li>Premium summaries</li>
<li>Integrations</li>
</ul>
<a class="btn primary">Get Team</a>
</div>
<div class="price-card">
<h3>Enterprise</h3>
<p class="price">Contact</p>
<ul>
<li>Custom SLAs</li>
<li>On-prem options</li>
<li>Dedicated support</li>
</ul>
<a class="btn">Contact sales</a>
</div>
</div>
</section>

<section id="about" class="section about">
<div class="container about-grid">
<div>
<h2>Built for modern teams</h2>
<p>We combine language models with domain-specific prompts and private workspace controls to ensure reliability and privacy.</p>
<a class="btn ghost" href="#contact">Contact us</a>
</div>
<div class="team">
<div class="member"><img src="https://via.placeholder.com/72" alt=""><div><strong>Riya Patel</strong><small>CEO</small></div></div>
<div class="member"><img src="https://via.placeholder.com/72" alt=""><div><strong>Arjun Rao</strong><small>CTO</small></div></div>
<div class="member"><img src="https://via.placeholder.com/72" alt=""><div><strong>Sam Kim</strong><small>Product</small></div></div>
</div>
</div>
</section>

<section id="contact" class="section contact container">
<h2 class="section-title">Request early access</h2>
<form id="signupForm" class="contact-form">
<input type="text" id="name" placeholder="Your name" required />
<input type="email" id="email" placeholder="Your email" required />
<textarea id="msg" placeholder="Tell us about your team (optional)"></textarea>
<button class="btn primary" type="submit">Request access</button>
</form>
<p id="formMsg" class="form-msg" aria-live="polite"></p>
</section>
</main>

<footer class="site-footer">
<div class="container footer-inner">
<div>© <strong>NovaAI</strong> 2025</div>
<div class="foot-links">
<a href="#">Privacy</a>
<a href="#">Terms</a>
</div>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>
29 changes: 29 additions & 0 deletions public/Day-200_AI_Startup_Landing_Page/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// responsive nav
const menuBtn = document.getElementById('menuBtn');
const nav = document.getElementById('nav');
menuBtn.addEventListener('click', ()=> {
nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
nav.style.flexDirection = 'column';
nav.style.gap = '0.5rem';
nav.style.padding = '1rem';
});

// simple form behaviour (no backend)
const form = document.getElementById('signupForm');
const formMsg = document.getElementById('formMsg');
form.addEventListener('submit', (e)=>{
e.preventDefault();
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
if(!name || !email){ formMsg.textContent = 'Please enter name & email'; return; }
formMsg.textContent = `Thanks ${name}! We'll email you at ${email} when early access opens.`;
form.reset();
});

// smooth scroll for CTA
document.querySelectorAll('a[href^="#"]').forEach(a=>{
a.addEventListener('click', (e)=>{
const target = document.querySelector(a.getAttribute('href'));
if(target){ e.preventDefault(); target.scrollIntoView({behavior:'smooth'}); }
});
});
93 changes: 93 additions & 0 deletions public/Day-200_AI_Startup_Landing_Page/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
:root{
--bg:#0f1724;
--card: rgba(255,255,255,0.04);
--glass: rgba(255,255,255,0.06);
--accent: linear-gradient(135deg,#6ee7b7,#60a5fa);
--text:#e6eef8;
--muted: #9fb4cf;
--primary: #6ee7b7;
--container: 1100px;
font-family: 'Inter', system-ui, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
background: radial-gradient(1000px 400px at 10% 10%, rgba(96,165,250,0.06), transparent),
radial-gradient(800px 300px at 90% 90%, rgba(110,231,183,0.04), transparent),
var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.5;
}
.container{max-width:var(--container);margin:0 auto;padding:1.5rem}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0}
.brand{font-weight:700;color:var(--primary);text-decoration:none;font-size:1.15rem}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:0.5rem}
.nav a.cta{border-radius:8px;padding:0.4rem 0.9rem;background:transparent;border:1px solid rgba(255,255,255,0.06)}
.menu-btn{display:none;background:none;border:0;cursor:pointer}
.menu-btn span{display:block;height:2px;width:20px;background:var(--text);margin:4px 0;border-radius:2px}

/* HERO */
.hero{padding:3rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 480px;gap:2rem;align-items:center}
.hero-left h1{font-size:2.2rem;margin:0 0 0.6rem;color: white}
.lead{color:var(--muted);max-width:540px}
.hero-actions{display:flex;gap:0.75rem;margin-top:1rem}
.btn{display:inline-block;padding:0.65rem 1rem;border-radius:10px;text-decoration:none;cursor:pointer;border:none}
.btn.primary{background:var(--primary);color:#032026;box-shadow:0 6px 18px rgba(96,165,250,0.06)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}
.small{padding:0.4rem 0.6rem;font-size:0.9rem}
.trust{display:flex;align-items:center;gap:1rem;margin-top:1.2rem}
.chip{background:rgba(255,255,255,0.03);padding:0.25rem 0.5rem;border-radius:999px;color:var(--muted);font-size:0.85rem}
.logos span{margin-left:0.9rem;font-size:0.9rem;color:var(--muted)}

/* mockup */
.device{position:relative}
.mockup{width:100%;background:linear-gradient(180deg,rgba(255,255,255,0.02), transparent);border-radius:14px;padding:0.5rem;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.mock-header{font-size:0.9rem;padding:0.6rem 0.9rem;color:var(--muted)}
.mock-body{padding:0.8rem;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:8px;min-height:160px}
.msg{padding:0.6rem 0.8rem;border-radius:10px;margin-bottom:0.6rem;max-width:80%}
.msg.bot{background:rgba(255,255,255,0.03);align-self:flex-start}
.msg.user{background:linear-gradient(90deg,#6ee7b7,#60a5fa);color:#022c26;margin-left:auto}

/* features */
.section{padding:3rem 0}
.section-title{font-size:1.2rem;margin-bottom:1rem}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:12px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.03)}
.card i{font-size:28px;color:var(--primary)}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.price-card{background:var(--glass);padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}
.price-card.popular{transform:scale(1.03);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.price{font-size:1.5rem}

/* about/team */
.about-grid{display:flex;gap:2rem;align-items:center}
.team{display:flex;gap:1rem}
.member{display:flex;gap:0.6rem;align-items:center;background:rgba(255,255,255,0.02);padding:0.6rem;border-radius:10px}
.member img{border-radius:8px}

/* contact */
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;max-width:720px}
.contact-form input, .contact-form textarea{padding:0.7rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.contact-form textarea{grid-column:1/3;min-height:120px}
.form-msg{margin-top:0.6rem;color:var(--primary)}

/* footer */
.site-footer{padding:1rem 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}

/* responsive */
@media (max-width:980px){
.hero-grid{grid-template-columns:1fr;gap:1.25rem}
.cards{grid-template-columns:repeat(2,1fr)}
.pricing-grid{grid-template-columns:1fr}
.contact-form{grid-template-columns:1fr}
.nav{display:none}
.menu-btn{display:block}
}