Site Copy Guide

write a guide on how to build a site that is identical and has similar content to : https://onlineexeced.mccombs.utexas.edu/uta-artificial-intelligence-machine-learning?utm_source=facebook&utm_medium=lae&utm_campaign=AIML_Int_FB_LAE2-5%25_CustomWebConv_US&utm_campaignid=23859000812770749&utm_adsetid=23859000812830749&utm_adid=23859000812890749&utm_placement=Facebook_Desktop_Feed&utm_id=23859000812770749&utm_content=23859002289430749&utm_term=23859000812830749&fbclid=IwY2xjawLMIcZleHRuA2FlbQEwAGFkaWQBqxEqqkKb7mJyaWQRMVA5SGNTMnZlRkxKT3JwaGEBHpgFuQN_mtIo8iM7wG4C0USur43TmBgCsNLA5vFnk-_cYXIRRa3kpGze3e6V_aem_R5XrCnR474zBmVJKY1kJOA

Below is a battle-tested blueprint for recreating a landing page that looks and “feels” like UT Austin McCombs’ AI & ML certificate site—while still keeping you 100 % onside with copyright, accessibility, and modern web-perf best practices. --- ## 0. Legal & ethical checkpoint ☑️ 1. **Design vs. content.** Layout, color palette, information hierarchy, and interaction patterns can be emulated; exact wording, photos, and trademarked names may not. Rewrite copy in your own voice and swap imagery or use licensed stock. 2. **Course claims.** If you quote rankings, learner counts, or application-closed dates, verify your own numbers or label them as illustrative placeholders. 3. **Privacy & consent.** Any lead-gen form that collects email/phone must link to your own Terms of Use and Privacy Policy (the McCombs page does this just beneath the form) citeturn1view0. --- ## 1. Reverse-engineer the page structure Here’s the high-level outline you need to replicate (section names are mine; bullets are what the original page actually contains): | Order | Section name (yours) | What the McCombs page shows | Key UX devices | |-------|----------------------|-----------------------------|----------------| | 1 | **Hero / value prop** | Program title, 1-sentence hook, CTA buttons **Apply Now** & **Download Brochure**; meta stats (⭐ 4.72, 7 months, “Certificate”) | Two CTAs, social-proof metrics citeturn1view0 | | 2 | **Urgency banner** | “Application closes 3 Jul 2025” | Inline date badge citeturn1view0 | | 3 | **Trust bar** | Trustpilot / CourseReport ratings | Row of small logo+score items | | 4 | **Learner success stories** | 4 rotating testimonials with headshots & roles | Carousel / slider citeturn3view0 | | 5 | **Program outcomes** | Four bullet promises (“Lead AI innovation…”, “Build GenAI apps…”) | Icons + short copy citeturn1view0 | | 6 | **Rankings ribbon** | QS #6, FT #6, etc. | Stat tiles | | 7 | **Curriculum accordion** | Five modules: Statistics → ML → Adv. ML → DL → NLP/GenAI | Expand/collapse accordion citeturn2view0 | | 8 | **Lead-capture form** | Name, Email, Mobile, Experience dropdown | Two-column layout, required-fields asterisks | | 9 | **FAQ & footer** | Not in our snippet, but appears near bottom | Accordions, university + legal links | --- ## 2. Choose a modern tech stack | Layer | Recommended tool | Why | |-------|------------------|-----| | **Framework** | **Next.js 14 / React 18** | File-system routing, SSR + static export, great on Vercel/Netlify | | **Styling** | **Tailwind CSS** | Utility classes make McCombs-like spacing & font sizes trivial | | **Animation** | Framer Motion | Slide-in hero CTAs & testimonial carousel | | **Forms & CRM** | React-Hook-Form → POST to your backend or HubSpot/Mailchimp API | | **Deployment** | Vercel or Netlify | Free tier, global CDN, per-commit previews | | **CMS (optional)** | Sanity, Strapi, or Netlify CMS | Lets non-devs update testimonials, module text, deadlines | --- ## 3. Build the skeleton ```bash npx create-next-app ai-landing && cd ai-landing npm install tailwindcss @headlessui/react framer-motion react-hook-form npx tailwindcss init -p # add `content: ["./app/**/*.{js,jsx,ts,tsx}"]` ``` ### `/app/page.tsx` (outline only) ```tsx import Hero from "@/components/Hero"; import TrustBar from "@/components/TrustBar"; import Testimonials from "@/components/Testimonials"; import Outcomes from "@/components/Outcomes"; import Rankings from "@/components/Rankings"; import Curriculum from "@/components/Curriculum"; import LeadForm from "@/components/LeadForm"; import Faq from "@/components/Faq"; export default function Home() { return ( <main className="bg-white text-gray-900"> <Hero /> <TrustBar /> <Testimonials /> <Outcomes /> <Rankings /> <Curriculum /> <LeadForm /> <Faq /> </main> ); } ``` > 🔍 **Tip:** Keep each section in its own file so marketing can A/B-test copy independently via your CMS hooks. --- ## 4. Craft look-alike components | Component | Key Tailwind recipe | Extras | |-----------|--------------------|--------| | **Hero** | `py-20 lg:py-32 bg-[url('/hero.jpg')] bg-cover bg-center text-white` | absolute gradient overlay for text legibility; two `<Button>`s with `animate-bounce` on scroll | | **Carousel** | Use `embla-carousel-react` or Swiper; fade-in via Framer Motion | Autoplay + pause-on-hover | | **Accordion** | `<Disclosure>` from Headless UI; icon rotates 90 deg | Wrap each module title in a `h3` for accessibility | | **Stats tiles** | `grid grid-cols-2 md:grid-cols-4 gap-4 bg-slate-50 py-8` | Each tile: big number `text-3xl font-bold` + caption | --- ## 5. Rewrite the curriculum & promo copy Instead of lifting text like “Deep Learning carries out the Machine Learning process…”, summarize in your own words and adjust to your syllabus. Follow this formula per module: ``` ### Module N – Title 1-sentence outcome → Bulleted techniques → 1 hands-on project example ``` (Users skim first; details expand on click.) --- ## 6. Integrations & growth loops | Goal | Implementation | |------|----------------| | **Lead tracking** | Push UTM params to hidden fields in the form; store in your DB so sales can attribute conversions. | | **Deadline urgency** | Compute days left until `APPLICATION_DEADLINE` in a React hook; auto-switch banner color to red when <5 days. | | **Social proof** | Pull latest Trustpilot stars via API cron; cache in KV store so numbers stay fresh but not rate-limited. | | **SEO** | Use `next/seo` to add JSON-LD [“Course” schema](https://schema.org/Course) for better SERP rich-results; include “provider” set to your org. | | **Performance** | `next/image` for lazy-loading; `font-display: swap`; self-host only critical fonts. | --- ## 7. QA checklist before launch - Lighthouse performance ≥ 90 on mobile. - WCAG 2.1 AA contrast and keyboard nav pass. - Form double-opt-in email flow works. - All outbound links open in new tab with `rel="noopener"`. - 404 page and `/robots.txt` set. --- ## 8. Deploy & monitor ```bash git push origin main # Vercel/Netlify auto-builds ``` Add: * **Uptime ping** (StatusCake / Cronitor) * **Session replay** (OpenReplay) to see friction points * **A/B testing** (`next-experiment`) for hero headline variants --- ### Recap By mapping each “marketing block” of the UT Austin page to a reusable React component, styling with Tailwind, and filling it with your **own** copy + assets, you’ll ship a visually familiar, conversion-optimized page in days—not weeks—while steering clear of copyright landmines. Use the curriculum accordion, testimonial slider, and deadline banner as the conversion workhorses, then iterate with real-user data. Happy building—and may your brochure-download rate soar 🚀

now write a guide in the form of a blog post with all of the details of how to build this site

Here's a full blog post-style guide on how to build a high-converting landing page inspired by [UT Austin’s AI & Machine Learning program page](https://onlineexeced.mccombs.utexas.edu/uta-artificial-intelligence-machine-learning): --- # 🧠 How to Build a Landing Page Like UT Austin's AI & ML Program (From Scratch) **June 2025 | by Daniel K.** > Ever stumbled on a university program page that just *works*? That’s exactly how I felt when I landed on UT Austin’s AI & Machine Learning Executive Education offering. It’s persuasive, polished, and packed with conversion-driving features. So I decided: Why not rebuild something like it… but better and fully open-source? In this guide, I’ll walk you through how to build a modern landing page modeled after UT Austin’s, using **Next.js**, **TailwindCSS**, and a few essential React libraries. Whether you're marketing a bootcamp, a course, or a digital product, this tutorial gives you a full-stack production-ready layout and strategy to ship fast. --- ## 🧭 What We’re Rebuilding We’re re-creating the following structure (all naming is customized for clarity): | Order | Section | Description | |-------|---------|-------------| | 1 | Hero | Title, tagline, and dual CTA buttons | | 2 | Deadline Banner | Application urgency callout | | 3 | Trust Logos | Trustpilot/CourseReport review badges | | 4 | Testimonials | Rotating quotes from past learners | | 5 | Outcomes | What you’ll learn, via icon bullets | | 6 | Rankings | University brag bar with rankings | | 7 | Curriculum | Accordion-style module breakdown | | 8 | Lead Capture Form | Email, phone, experience dropdown | | 9 | FAQ | Expandable Q&A below the fold | --- ## 🧱 Step 1: Bootstrapping the Project We'll use **Next.js 14 (App Router)** for static rendering and optimal performance. Start with: ```bash npx create-next-app@latest ai-landing --app cd ai-landing ``` Install core dependencies: ```bash npm install tailwindcss framer-motion react-hook-form @headlessui/react npx tailwindcss init -p ``` Update `tailwind.config.js`: ```js content: [ "./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], ``` Then in `app/globals.css`, paste: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` --- ## 🧱 Step 2: File Structure Organize reusable components: ``` /app └ page.tsx /components ├ Hero.tsx ├ DeadlineBanner.tsx ├ TrustBar.tsx ├ Testimonials.tsx ├ Outcomes.tsx ├ Rankings.tsx ├ Curriculum.tsx ├ LeadForm.tsx ├ Faq.tsx └ Button.tsx /public └ /images ``` --- ## 💡 Step 3: Build Each Component ### 🟨 Hero.tsx ```tsx import { motion } from "framer-motion"; export default function Hero() { return ( <section className="relative bg-[url('/images/hero-bg.jpg')] bg-cover bg-center text-white py-24 px-6 text-center"> <div className="bg-black/60 absolute inset-0" /> <motion.div className="relative z-10 max-w-3xl mx-auto" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3 }} > <h1 className="text-4xl font-bold mb-4">AI & Machine Learning for Leaders</h1> <p className="text-lg mb-6">Build real-world GenAI and ML systems in just 7 months.</p> <div className="flex justify-center gap-4"> <button className="bg-orange-500 hover:bg-orange-600 px-6 py-3 rounded-lg">Apply Now</button> <button className="bg-transparent border border-white px-6 py-3 rounded-lg">Download Brochure</button> </div> </motion.div> </section> ); } ``` --- ### 🟥 DeadlineBanner.tsx ```tsx export default function DeadlineBanner() { const deadline = new Date("2025-07-03"); const today = new Date(); const daysLeft = Math.ceil((deadline.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)); return ( <div className="bg-red-600 text-white text-center py-2 font-semibold"> Application closes in {daysLeft} days – July 3, 2025 </div> ); } ``` --- ### 🟦 TrustBar.tsx ```tsx export default function TrustBar() { const platforms = [ { name: "Trustpilot", rating: "4.8/5" }, { name: "CourseReport", rating: "4.7/5" }, ]; return ( <div className="bg-gray-100 py-4 flex justify-center gap-8"> {platforms.map((p) => ( <div key={p.name} className="text-center"> <p className="text-xl font-bold">{p.rating}</p> <p className="text-sm text-gray-600">{p.name}</p> </div> ))} </div> ); } ``` --- ### 🟩 Testimonials.tsx Use [Embla Carousel](https://www.embla-carousel.com/) or `react-slick` for a more robust slider. Placeholder version: ```tsx export default function Testimonials() { const testimonials = [ { name: "Casey L.", title: "CTO, Retail", quote: "This course changed the trajectory of my career." }, { name: "Amara G.", title: "Product Manager", quote: "Practical and relevant. Worth every minute." }, ]; return ( <div className="py-12 bg-white text-center"> <h2 className="text-2xl font-bold mb-6">Learner Testimonials</h2> <div className="space-y-6 max-w-xl mx-auto"> {testimonials.map((t) => ( <blockquote key={t.name} className="italic border-l-4 border-orange-500 pl-4"> “{t.quote}”<br /> <span className="block mt-2 text-sm font-medium">– {t.name}, {t.title}</span> </blockquote> ))} </div> </div> ); } ``` --- ### 🟨 Outcomes.tsx ```tsx const outcomes = [ "Lead AI and GenAI initiatives at your company", "Build ML pipelines from raw data to deployed models", "Understand LLMs and prompt engineering", "Capstone project with real-world AI challenge" ]; export default function Outcomes() { return ( <section className="bg-slate-50 py-12"> <h2 className="text-center text-2xl font-bold mb-6">What You'll Learn</h2> <ul className="max-w-xl mx-auto grid gap-4"> {outcomes.map((item, i) => ( <li key={i} className="bg-white p-4 rounded-md shadow-sm">{item}</li> ))} </ul> </section> ); } ``` --- ### 🟪 Curriculum.tsx (Accordion) ```tsx import { Disclosure } from "@headlessui/react"; const modules = [ { title: "Module 1: Statistics & Python", details: "Foundations of data analysis and Python for ML." }, { title: "Module 2: Machine Learning", details: "Supervised learning, cross-validation, pipelines." }, { title: "Module 3: Deep Learning", details: "CNNs, RNNs, transformers, training optimization." }, { title: "Module 4: Generative AI", details: "Prompting, LLMs, RLHF, LangChain, agents." }, ]; export default function Curriculum() { return ( <section className="py-12 px-4 bg-white max-w-3xl mx-auto"> <h2 className="text-2xl font-bold mb-6">Curriculum Overview</h2> {modules.map((m, i) => ( <Disclosure key={i}> {({ open }) => ( <> <Disclosure.Button className="w-full text-left font-medium py-2 border-b">{m.title}</Disclosure.Button> <Disclosure.Panel className="py-2 text-sm text-gray-600">{m.details}</Disclosure.Panel> </> )} </Disclosure> ))} </section> ); } ``` --- ### 🟫 LeadForm.tsx ```tsx import { useForm } from "react-hook-form"; export default function LeadForm() { const { register, handleSubmit } = useForm(); const onSubmit = (data: any) => console.log("Form Data:", data); return ( <form onSubmit={handleSubmit(onSubmit)} className="bg-gray-100 py-10 px-6 max-w-xl mx-auto rounded-md"> <h2 className="text-xl font-bold mb-4">Apply for the Program</h2> <input {...register("name")} placeholder="Full Name" className="w-full p-2 mb-4 border" /> <input {...register("email")} type="email" placeholder="Email" className="w-full p-2 mb-4 border" /> <input {...register("phone")} type="tel" placeholder="Phone Number" className="w-full p-2 mb-4 border" /> <select {...register("experience")} className="w-full p-2 mb-4 border"> <option value="">Experience Level</option> <option>Beginner</option> <option>Intermediate</option> <option>Advanced</option> </select> <button type="submit" className="bg-blue-600 text-white px-4 py-2">Submit</button> </form> ); } ``` --- ## 🚀 Step 4: Deploy It Push to GitHub and deploy to [Vercel](https://vercel.com) or [Netlify](https://netlify.com): ```bash git init git add . git commit -m "Initial site" ``` Vercel auto-detects Next.js, builds, and serves the app globally. --- ## 📈 Step 5: Add Growth Tools | Feature | Tool | |--------|------| | **Analytics** | Plausible / PostHog | | **Session Recording** | OpenReplay | | **A/B Testing** | `next-experiment`, or manually route traffic by UTM | | **CRM Integrations** | Zapier or serverless `/api/submit` → Mailchimp / HubSpot | | **SEO** | Add JSON-LD schema via `next/seo` | --- ## 🏁 Wrapping Up With this guide, you now have: ✅ A production-ready layout ✅ Responsive styling with Tailwind ✅ React component structure ✅ Form validation & lead capture ✅ Real-time urgency logic ✅ Expandable curriculum ✅ SEO-ready and deployable in one click Want to go further? Add AI-powered form auto-filling, testimonial sentiment scoring, or live chat with a local LLM. > 💬 Got questions or want the full template repo? Drop me a message on [GitHub](https://github.com/kliewerdaniel) or leave a comment below. --- **Now go forth, build fast—and convert smarter.** 🧠💻 ---

now convert into a CLIne prompt to build the landing page but with the information from danielkliewer.com/genai-course/

Below is a ready-to-paste **CLIne prompt** that will spin up a Next .js 14 + Tailwind landing page whose layout mimics the UT-Austin Exec-Ed AI program but whose copy, curriculum, and CTAs come straight from your **GEN-AI 4001: Applied Generative AI Engineering** course. Course facts (title, tagline, duration, module names) were taken from the published syllabus at danielkliewer.com/genai-course and danielkliewer.com/genai-course/syllabus citeturn5view0turn6view0. ```text # === CLIne • New Task ========================================= # GOAL Build a high-converting landing page for my free course “GEN-AI 4001: Applied Generative AI Engineering”. Match the visual rhythm of UT-Austin’s Exec-Ed AI page (hero, urgency banner, trust bar, testimonials, outcomes, rankings, accordion curriculum, lead-capture form, FAQ), but use the content & branding below. # TECH STACK & CONSTRAINTS - Next.js 14 (App Router, TypeScript, Server Components) - Tailwind CSS, Framer Motion (basic fade/slide), Headless UI - Form handled with react-hook-form → POST to /api/lead • Hidden inputs must capture all UTM params - Images: royalty-free or Unsplash placeholders only - All text/images must be CC-BY-SA friendly - CTAs: “Start Learning Free” & “Download Syllabus” - Deliver a PR-ready repo (no .git history) in /genai-landing # CONTENT (to drop straight into copy) courseTitle: GEN-AI 4001: Applied Generative AI Engineering tagLine: Building Production-Ready AI Systems from Foundation to Deployment metaStats: 24 weeks • Self-paced milestones • Intermediate-Advanced overview: This intensive, project-driven course transforms intermediate developers into production-ready Gen-AI engineers through six full-stack projects. modules: - Orientation – What is a Gen-AI Engineer? (Week 1) - Module 1 – Implementing Transformers from Scratch (Weeks 2-4) - Module 2 – Domain-Specific Fine-Tuning (Weeks 5-7) - Module 3 – Serving LLMs with FastAPI + VLLM (Weeks 8-10) - Module 4 – RAG with Vector Databases (Weeks 11-13) - Module 5 – Multimodal Reasoning & Guardrails (Weeks 14-16) - Module 6 – MLOps and Model Governance (Weeks 17-19) - Capstone – Job-Market Simulation (Weeks 20-24) keyOutcomes: • Implement transformer models from first principles • Deploy scalable LLM inference with FastAPI + VLLM • Build production RAG pipelines with vector DB back-ends • Ship multimodal systems with safety guardrails • Master MLOps & governance for real-world AI licensingNote: “Course content CC-BY-SA 4.0, code MIT” # DELIVERABLE FILES /app/page.tsx ← assembles sections in order /components/ Hero.tsx (bg-image, title, tagline, dual CTA) DeadlineBanner.tsx (dynamic calc daysLeft to next cohort) TrustBar.tsx (two rating placeholders 4.8 ★) Testimonials.tsx (slider with 3 stub quotes) Outcomes.tsx (icon bullets from keyOutcomes) Rankings.tsx (placeholder QS & FT tiles) Curriculum.tsx (accordion fed by modules[]) LeadForm.tsx (react-hook-form, hidden UTM fields) Faq.tsx (5 placeholder Q&As) /public/images/ (hero.jpg, placeholder headshots) /styles/globals.css (Tailwind directives) /api/lead/route.ts (POST stub logs JSON to console) # PLAN MODE 1. Scaffold project & install deps. 2. Generate Tailwind config; add brand colours in theme.extend. 3. Stub all components with props & Storybook-style example data. 4. Wire page.tsx to render components w/ dummy props. 5. Implement DeadlineBanner logic (targetDate = '2025-09-01'). 6. Hook LeadForm to /api/lead; console-log payload for now. 7. Ensure lighthouse ≥ 90, axe-core scan passes. 8. Hand back PR-ready folder structure. # ACT MODE After presenting the plan, wait for my 👍 before it writes code. # =============================================================== ``` Copy that block into your CLine chat, give it a quick “Go for it 👌”, and CLine will first outline the steps (Plan Mode). Approve, and it will execute the scaffold, generate code, and hand you a fully-functional landing page skeleton that’s ready for design polish and real testimonials.