Skip to content

Commit e5af116

Browse files
programmerprogrammer
authored
Update index.html
1 parent 04b1ad6 commit e5af116

File tree

1 file changed

+281
-0
lines changed

1 file changed

+281
-0
lines changed

‎index.html‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,287 @@ <h2>Ask us anything about the process</h2>
152152
</div>
153153
</section>
154154
</main>
155+
<div class="background-glow"></div>
156+
<header class="site-header">
157+
<div class="brand">PointA</div>
158+
<nav class="nav-links">
159+
<a data-href-en="#stories" data-href-fr="#histoires" data-label-en="Guides" data-label-fr="Guides" href="#stories">Guides</a>
160+
<a data-href-en="blogs.html" data-href-fr="blogs.html#articles-fr" data-label-en="Blogs" data-label-fr="Blogues" href="blogs.html">Blogs</a>
161+
<a data-href-en="#contact" data-href-fr="#contact-fr" data-label-en="Contact" data-label-fr="Contact" href="#contact">Contact</a>
162+
</nav>
163+
<div class="lang-toggle" aria-label="Language toggle">
164+
<button type="button" class="pill is-active" data-lang="en">English</button>
165+
<button type="button" class="pill pill--ghost" data-lang="fr">Français</button>
166+
</div>
167+
<a class="pill" href="#contact">Let’s talk</a>
168+
</header>
169+
170+
<main>
171+
<div class="lang-view is-active" data-lang="en">
172+
<section class="hero" data-animate>
173+
<div class="hero__copy">
174+
<p class="eyebrow">Post-secondary made simple</p>
175+
<h1>Your starting point for college and university success.</h1>
176+
<p class="lede">From applications to essays to choosing the right program, PointA walks you step by step through every part of getting into post-secondary without the stress.</p>
177+
<div class="hero__cta">
178+
<a class="pill pill--primary" href="#stories">Explore tutorials</a>
179+
<a class="pill pill--ghost" href="#contact">Ask a question</a>
180+
</div>
181+
</div>
182+
<figure class="hero__visual" data-pop>
183+
<img src="greta-600x.png" alt="Student collage" />
184+
<div class="floating-tag">applications</div>
185+
<div class="floating-tag floating-tag--alt">planning</div>
186+
</figure>
187+
</section>
188+
189+
<section class="badge-trail" aria-hidden="true">
190+
<div class="badge">no fluff</div>
191+
<div class="badge">step by step</div>
192+
<div class="badge">authentic guidance</div>
193+
<div class="badge">student first</div>
194+
<div class="badge">practical skills</div>
195+
</section>
196+
197+
<section class="feature" data-animate>
198+
<div class="feature__media" data-pop>
199+
<a class="media-placeholder" href="#" aria-label="Placeholder for future video">Video placeholder</a>
200+
</div>
201+
<div class="feature__copy">
202+
<p class="eyebrow">Learn at your pace</p>
203+
<h2>Tutorials that turn big decisions into clear steps.</h2>
204+
<p>Whether you are choosing programs, figuring out OUAC or OCAS, or preparing your supplemental applications, each lesson expands as you scroll. Clear and simple, never overwhelming.</p>
205+
<ul class="chips">
206+
<li>Short breakdowns</li>
207+
<li>Visual explanations</li>
208+
<li>Real examples</li>
209+
</ul>
210+
</div>
211+
</section>
212+
213+
<section class="grid" id="stories">
214+
<div class="grid__header">
215+
<p class="eyebrow">Latest guides</p>
216+
<h2>Start with what matters most</h2>
217+
</div>
218+
<div class="grid__items">
219+
<article class="card" data-pop>
220+
<div class="card__media">
221+
<a class="media-placeholder" href="#" aria-label="Placeholder for tutorial">Placeholder</a>
222+
</div>
223+
<div class="card__body">
224+
<p class="eyebrow">Applications</p>
225+
<h3>How to choose the right program</h3>
226+
<p>A simple framework for comparing schools, programs, and outcomes. Clear reasoning, no filler.</p>
227+
</div>
228+
</article>
229+
230+
<article class="card" data-pop>
231+
<div class="card__media">
232+
<a class="media-placeholder" href="#" aria-label="Placeholder for tutorial">Placeholder</a>
233+
</div>
234+
<div class="card__body">
235+
<p class="eyebrow">Essays and Supplements</p>
236+
<h3>Writing a strong personal statement</h3>
237+
<p>Tips, templates, and sample paragraphs to help you explain your story without sounding forced.</p>
238+
</div>
239+
</article>
240+
241+
<article class="card" data-pop>
242+
<div class="card__media">
243+
<a class="media-placeholder" href="#" aria-label="Placeholder for tutorial">Placeholder</a>
244+
</div>
245+
<div class="card__body">
246+
<p class="eyebrow">Financial Aid</p>
247+
<h3>OSAP, scholarships, and budgeting</h3>
248+
<p>A student friendly explanation of funding, eligibility, and the most common mistakes to avoid.</p>
249+
</div>
250+
</article>
251+
</div>
252+
</section>
253+
254+
<section class="values" id="values" data-animate>
255+
<div class="values__content">
256+
<p class="eyebrow">Our approach</p>
257+
<h2>Guidance that feels supportive and calm</h2>
258+
<div class="pill-list">
259+
<span class="pill pill--primary">Clarity</span>
260+
<span class="pill">Confidence</span>
261+
<span class="pill pill--ghost">Direction</span>
262+
<span class="pill">Accessibility</span>
263+
</div>
264+
<p>PointA is designed to remove confusion around post-secondary. We turn complicated systems into easy steps so you can focus on choosing the right path, not decoding the process.</p>
265+
</div>
266+
<div class="values__art">
267+
<img src="bol-600x.png" alt="Abstract collage" />
268+
<img src="fist-600x.png" alt="Educational poster" />
269+
</div>
270+
</section>
271+
272+
<section class="contact" id="contact" data-animate>
273+
<div class="contact__copy">
274+
<p class="eyebrow">Need some guidance?</p>
275+
<h2>Ask us anything about the process</h2>
276+
<p>Whether you feel lost or just want a second opinion, send your question. We reply with honesty, clarity, and zero judgment.</p>
277+
<form class="contact__form">
278+
<label>
279+
Name
280+
<input type="text" placeholder="Your name" required />
281+
</label>
282+
<label>
283+
Email
284+
<input type="email" placeholder="you@example.com" required />
285+
</label>
286+
<label>
287+
What do you need help with?
288+
<textarea placeholder="Tell us your question" rows="3"></textarea>
289+
</label>
290+
<button type="submit" class="pill pill--primary">Send</button>
291+
</form>
292+
</div>
293+
<div class="contact__aside">
294+
<div class="sticky-note" data-pop>
295+
<p>"PointA helped me go from overwhelmed to confident. Their guides made everything easier."</p>
296+
<span>Happy student</span>
297+
</div>
298+
<img src="ricky-600x.png" alt="Student collage" class="contact__img" />
299+
</div>
300+
</section>
301+
</div>
302+
303+
<div class="lang-view" data-lang="fr">
304+
<section class="hero" data-animate id="accueil-fr">
305+
<div class="hero__copy">
306+
<p class="eyebrow">Lancement en douceur</p>
307+
<h1>Votre point de départ pour réussir au cégep et à l’université.</h1>
308+
<p class="lede">Retrouvez une version française prête à modifier : ajustez les titres, les paragraphes et les appels à l’action pour créer votre propre ton.</p>
309+
<div class="hero__cta">
310+
<a class="pill pill--primary" href="#histoires">Voir les guides</a>
311+
<a class="pill pill--ghost" href="#contact-fr">Poser une question</a>
312+
</div>
313+
</div>
314+
<figure class="hero__visual" data-pop>
315+
<img src="greta-600x.png" alt="Collage étudiant" />
316+
<div class="floating-tag">dossiers</div>
317+
<div class="floating-tag floating-tag--alt">organisation</div>
318+
</figure>
319+
</section>
320+
321+
<section class="badge-trail" aria-hidden="true">
322+
<div class="badge">pas de jargon</div>
323+
<div class="badge">étapes claires</div>
324+
<div class="badge">calme</div>
325+
<div class="badge">humain</div>
326+
<div class="badge">pratique</div>
327+
</section>
328+
329+
<section class="feature" data-animate>
330+
<div class="feature__copy">
331+
<p class="eyebrow">Parcours éditable</p>
332+
<h2>Un gabarit français à personnaliser.</h2>
333+
<p>Utilisez cette mise en page comme base : remplacez le texte par vos traductions, changez les liens et ajustez les puces pour raconter votre approche en français.</p>
334+
<ul class="chips">
335+
<li>Sections prêtes à modifier</li>
336+
<li>Ton chaleureux</li>
337+
<li>Aligné sur le design original</li>
338+
</ul>
339+
</div>
340+
<div class="feature__media" data-pop>
341+
<a class="media-placeholder" href="#" aria-label="Zone pour votre média">Ajoutez votre média</a>
342+
</div>
343+
</section>
344+
345+
<section class="grid" id="histoires">
346+
<div class="grid__header">
347+
<p class="eyebrow">Guides en vedette</p>
348+
<h2>Commencez par l’essentiel</h2>
349+
<p class="lede">Chaque carte ci-dessous peut être renommée : insérez vos propres titres, sous-titres et liens vers des ressources en français.</p>
350+
</div>
351+
<div class="grid__items">
352+
<article class="card" data-pop>
353+
<div class="card__media">
354+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Remplacer l’image</a>
355+
</div>
356+
<div class="card__body">
357+
<p class="eyebrow">Admissions</p>
358+
<h3>Choisir le bon programme (FR)</h3>
359+
<p>Adaptez ce paragraphe pour expliquer vos conseils sur la sélection des programmes et des écoles.</p>
360+
</div>
361+
</article>
362+
363+
<article class="card" data-pop>
364+
<div class="card__media">
365+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Remplacer l’image</a>
366+
</div>
367+
<div class="card__body">
368+
<p class="eyebrow">Rédaction</p>
369+
<h3>Écrire une lettre de motivation</h3>
370+
<p>Utilisez vos propres exemples, modèles ou conseils pour guider les étudiants francophones.</p>
371+
</div>
372+
</article>
373+
374+
<article class="card" data-pop>
375+
<div class="card__media">
376+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Remplacer l’image</a>
377+
</div>
378+
<div class="card__body">
379+
<p class="eyebrow">Finances</p>
380+
<h3>Bourses et budget</h3>
381+
<p>Décrivez les ressources, les étapes OSAP/AFE ou les conseils que vous souhaitez partager.</p>
382+
</div>
383+
</article>
384+
</div>
385+
</section>
386+
387+
<section class="values" id="approche-fr" data-animate>
388+
<div class="values__art">
389+
<img src="bol-600x.png" alt="Affiche abstraite" />
390+
<img src="fist-600x.png" alt="Affiche éducative" />
391+
</div>
392+
<div class="values__content">
393+
<p class="eyebrow">Notre approche</p>
394+
<h2>Un accompagnement clair et rassurant</h2>
395+
<div class="pill-list">
396+
<span class="pill pill--primary">Clarté</span>
397+
<span class="pill">Confiance</span>
398+
<span class="pill pill--ghost">Direction</span>
399+
<span class="pill">Accessibilité</span>
400+
</div>
401+
<p>Remplacez ou ajustez cette description pour détailler votre manière d’aider les étudiants en français.</p>
402+
</div>
403+
</section>
404+
405+
<section class="contact" id="contact-fr" data-animate>
406+
<div class="contact__copy">
407+
<p class="eyebrow">Besoin d’un coup de main ?</p>
408+
<h2>Écrivez-nous votre question</h2>
409+
<p>Ajoutez votre propre formulaire ou gardez celui-ci pour recevoir les demandes en français. Tous les champs peuvent être renommés.</p>
410+
<form class="contact__form">
411+
<label>
412+
Nom
413+
<input type="text" placeholder="Votre nom" required />
414+
</label>
415+
<label>
416+
Courriel
417+
<input type="email" placeholder="vous@example.com" required />
418+
</label>
419+
<label>
420+
Ce qu’il vous faut
421+
<textarea placeholder="Expliquez votre question" rows="3"></textarea>
422+
</label>
423+
<button type="submit" class="pill pill--primary">Envoyer</button>
424+
</form>
425+
</div>
426+
<div class="contact__aside">
427+
<div class="sticky-note" data-pop>
428+
<p>« Cette version française est prête à être personnalisée pour votre site. »</p>
429+
<span>Équipe PointA</span>
430+
</div>
431+
<img src="ricky-600x.png" alt="Collage étudiant" class="contact__img" />
432+
</div>
433+
</section>
434+
</div>
435+
</main>
155436

156437
<footer class="site-footer">
157438
<p>Helping students move forward. © 2024 PointA</p>

0 commit comments

Comments
 (0)