VidyaNet AI Design Improvements

Inspired by Continu & Competitive Analysis

---

Brand Identity

Company

• Name: VidyaNet AI
• Tagline: "Knowledge that grows with you"
• Usage: Website, marketing, legal pages, footer

AI Assistant

• Name: Vidya AI
• Tagline: "Intelligence that grows with you"
• Usage: Chat interface, AI tutor page, in-app references

---

Brand Positioning

Why "Knowledge that grows with you"

Meaning	Explanation
"Knowledge"	Plays on "Vidya" (Sanskrit for knowledge), covers education AND corporate training
"Grows"	AI learns YOUR content (RAG), platform scales with institution, students grow
"With you"	Partnership, not imposition - unlike competitors who force their curriculum

Competitive Differentiation

Competitor	Their Approach	VidyaNet Difference
LEAD School	Forces THEIR curriculum on schools	You bring YOUR curriculum, AI adapts
Teachmint	Teacher-centric tools only	Complete ecosystem for everyone
Byju's/Unacademy	Student-only, B2C, after-school	B2B2C, works through institutions
Continu	Corporate LMS only	Universal: schools to corporate
Generic AI	Doesn't know your content	AI grounded in YOUR curriculum

Key Messaging

Primary Message:

"Unlike platforms that force their curriculum, VidyaNet AI learns yours."

Supporting Messages: - "LEAD gives you their curriculum. We learn yours." - "Teachmint is for teachers. VidyaNet is for everyone." - "Your textbooks. Your syllabi. Your AI."

---

Target Segments

VidyaNet serves the complete learning ecosystem:

Segment	Description
K-12 Schools	Classes 1-12, CBSE/ICSE/State Boards
PU Colleges	Pre-University (11-12) with streams
Degree Colleges	Undergraduate programs
Engineering Colleges	B.Tech, M.Tech with branches
Universities	Multi-faculty institutions
Professional Tutors	Independent educators via marketplace
SMBs/Corporate	Employee training and LMS

---

1. Landing Page Improvements

Hero Section

Current:

Badge: "Now serving 2+ schools across India"
Title: "The AI platform for modern Indian schools"

New:

// Trust indicator with segment badges
<div className="flex flex-wrap items-center gap-2 mb-6">
  <span className="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">
    Schools
  </span>
  <span className="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">
    Colleges
  </span>
  <span className="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">
    Universities
  </span>
  <span className="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">
    Businesses
  </span>
</div>

// Main headline with tagline
<h1 className="text-5xl md:text-6xl font-bold text-slate-900 mb-6">
  Knowledge that grows
  <br />
  <span className="text-primary-600">with you</span>
</h1>

// Subtext emphasizing differentiation
<p className="text-xl text-slate-600 max-w-2xl mb-8">
  Unlike platforms that force their curriculum, VidyaNet AI learns yours.
  Upload your textbooks, syllabi, or training materials. Watch as AI
  becomes fluent in YOUR content.
</p>

// Dual CTAs
<div className="flex flex-wrap gap-4">
  <Button variant="primary" size="lg">
    Get a Demo
    <ArrowRightIcon className="w-4 h-4 ml-2" />
  </Button>
  <Button variant="outline" size="lg">
    See How It Works
  </Button>
</div>

"Meet Vidya AI" Banner

// Sticky announcement banner at top of page
<div className="bg-gradient-to-r from-primary-500 via-primary-600 to-purple-600 text-white text-center py-2.5 text-sm cursor-pointer hover:opacity-95 transition-opacity"
     onClick={() => navigate('/vidya-ai')}>
  <span className="inline-flex items-center gap-2">
    <span className="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center text-xs">
      ✨
    </span>
    <span>
      Meet <strong>Vidya AI</strong> — Intelligence that grows with you
    </span>
    <span className="ml-1">→</span>
  </span>
</div>

Value Proposition Section

<section className="py-20 bg-slate-50">
  <div className="max-w-6xl mx-auto px-6">
    <h2 className="text-3xl font-bold text-center mb-4">
      Why institutions choose VidyaNet
    </h2>
    <p className="text-slate-600 text-center max-w-2xl mx-auto mb-12">
      We don't replace your curriculum — we supercharge it with AI.
    </p>

    <div className="grid md:grid-cols-3 gap-8">
      <div className="bg-white rounded-xl p-6 shadow-sm">
        <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
          <BookOpenIcon className="w-6 h-6 text-primary-600" />
        </div>
        <h3 className="text-lg font-semibold mb-2">Your Content, AI-Powered</h3>
        <p className="text-slate-600 text-sm">
          Upload NCERT, CBSE, State Board, or your own materials.
          Vidya AI learns it and teaches from it.
        </p>
      </div>

      <div className="bg-white rounded-xl p-6 shadow-sm">
        <div className="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mb-4">
          <UsersIcon className="w-6 h-6 text-emerald-600" />
        </div>
        <h3 className="text-lg font-semibold mb-2">Everyone Connected</h3>
        <p className="text-slate-600 text-sm">
          Students, teachers, parents, administrators — one platform
          that serves the entire ecosystem.
        </p>
      </div>

      <div className="bg-white rounded-xl p-6 shadow-sm">
        <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
          <SparklesIcon className="w-6 h-6 text-purple-600" />
        </div>
        <h3 className="text-lg font-semibold mb-2">AI That Teaches</h3>
        <p className="text-slate-600 text-sm">
          Socratic method — guides students to understanding,
          doesn't just give answers.
        </p>
      </div>
    </div>
  </div>
</section>

---

2. Dedicated Vidya AI Landing Page

Page: /vidya-ai

// Hero - Dark theme (like Continu's Eddy page)
<section className="bg-gradient-to-b from-slate-900 to-slate-800 py-24 text-center">
  {/* Gradient orb logo */}
  <div className="w-28 h-28 mx-auto mb-8 rounded-full bg-gradient-to-br from-primary-400 via-purple-500 to-pink-500 shadow-2xl shadow-purple-500/30 flex items-center justify-center">
    <SparklesIcon className="w-12 h-12 text-white" />
  </div>

  <h1 className="text-5xl md:text-6xl font-bold text-white mb-4">
    Meet <span className="bg-gradient-to-r from-primary-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">Vidya AI</span>
  </h1>

  <p className="text-xl text-slate-300 max-w-2xl mx-auto mb-4">
    Intelligence that grows with you
  </p>

  <p className="text-lg text-slate-400 max-w-3xl mx-auto mb-10">
    The only AI that learns YOUR curriculum. Upload your textbooks,
    syllabi, and materials — Vidya AI grounds every response in
    your content, not generic internet knowledge.
  </p>

  <div className="flex flex-wrap gap-4 justify-center">
    <Button variant="primary" size="lg">
      Try Vidya AI
    </Button>
    <Button variant="outline" size="lg" className="border-slate-600 text-white hover:bg-slate-800">
      Watch Demo
    </Button>
  </div>
</section>

// "Unlike Other AI" comparison section
<section className="py-20 bg-white">
  <div className="max-w-4xl mx-auto px-6">
    <h2 className="text-3xl font-bold text-center mb-12">
      Not all AI is created equal
    </h2>

    <div className="grid md:grid-cols-2 gap-8">
      {/* Generic AI */}
      <div className="bg-slate-100 rounded-xl p-6">
        <h3 className="text-lg font-semibold text-slate-500 mb-4">Generic AI</h3>
        <ul className="space-y-3 text-slate-600">
          <li className="flex items-start gap-2">
            <XCircleIcon className="w-5 h-5 text-red-400 mt-0.5" />
            <span>Doesn't know NCERT from CBSE</span>
          </li>
          <li className="flex items-start gap-2">
            <XCircleIcon className="w-5 h-5 text-red-400 mt-0.5" />
            <span>Generic answers from internet</span>
          </li>
          <li className="flex items-start gap-2">
            <XCircleIcon className="w-5 h-5 text-red-400 mt-0.5" />
            <span>Same response for Class 5 and Class 12</span>
          </li>
          <li className="flex items-start gap-2">
            <XCircleIcon className="w-5 h-5 text-red-400 mt-0.5" />
            <span>Does homework for students</span>
          </li>
        </ul>
      </div>

      {/* Vidya AI */}
      <div className="bg-gradient-to-br from-primary-50 to-purple-50 rounded-xl p-6 border-2 border-primary-200">
        <h3 className="text-lg font-semibold text-primary-700 mb-4">Vidya AI</h3>
        <ul className="space-y-3 text-slate-700">
          <li className="flex items-start gap-2">
            <CheckCircleIcon className="w-5 h-5 text-emerald-500 mt-0.5" />
            <span>Trained on YOUR curriculum</span>
          </li>
          <li className="flex items-start gap-2">
            <CheckCircleIcon className="w-5 h-5 text-emerald-500 mt-0.5" />
            <span>Cites textbook chapters & pages</span>
          </li>
          <li className="flex items-start gap-2">
            <CheckCircleIcon className="w-5 h-5 text-emerald-500 mt-0.5" />
            <span>Age-appropriate responses</span>
          </li>
          <li className="flex items-start gap-2">
            <CheckCircleIcon className="w-5 h-5 text-emerald-500 mt-0.5" />
            <span>Guides to understanding (Socratic)</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

// Role-based benefits
<section className="py-20 bg-slate-50">
  <div className="max-w-6xl mx-auto px-6">
    <h2 className="text-3xl font-bold text-center mb-4">
      Intelligence for everyone
    </h2>
    <p className="text-slate-600 text-center max-w-2xl mx-auto mb-12">
      Vidya AI adapts to every role in your institution
    </p>

    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
      {[
        {
          role: 'Students',
          icon: <AcademicCapIcon />,
          benefits: ['24/7 doubt resolution', 'Homework guidance', 'Exam preparation'],
        },
        {
          role: 'Teachers',
          icon: <UserIcon />,
          benefits: ['Lesson generation', 'Quiz creation', 'Grading assistance'],
        },
        {
          role: 'Parents',
          icon: <HomeIcon />,
          benefits: ['Progress insights', 'Learning reports', 'Attendance alerts'],
        },
        {
          role: 'Administrators',
          icon: <ChartBarIcon />,
          benefits: ['Analytics dashboards', 'Institution reports', 'Usage insights'],
        },
      ].map((item) => (
        <div key={item.role} className="bg-white rounded-xl p-6 shadow-sm">
          <div className="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
            {item.icon}
          </div>
          <h3 className="font-semibold mb-3">{item.role}</h3>
          <ul className="space-y-2 text-sm text-slate-600">
            {item.benefits.map((b) => (
              <li key={b} className="flex items-center gap-2">
                <CheckIcon className="w-4 h-4 text-emerald-500" />
                {b}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  </div>
</section>

---

3. Use Case Cards (Homepage)

<section className="py-20">
  <h2 className="text-3xl font-semibold text-center mb-4">
    Solutions for every institution
  </h2>
  <p className="text-slate-600 text-center max-w-2xl mx-auto mb-12">
    From K-12 classrooms to corporate training rooms
  </p>

  <div className="grid md:grid-cols-3 gap-6">
    {[
      {
        icon: <BuildingLibraryIcon />,
        title: 'K-12 Schools',
        description: 'CBSE, ICSE, State Boards — AI grounded in your syllabus',
        link: '/solutions/k12',
      },
      {
        icon: <AcademicCapIcon />,
        title: 'Colleges & Universities',
        description: 'Semester management, department analytics, research support',
        link: '/solutions/higher-ed',
      },
      {
        icon: <BriefcaseIcon />,
        title: 'Corporate Training',
        description: 'Employee onboarding, compliance training, skill development',
        link: '/solutions/corporate',
      },
      {
        icon: <UserGroupIcon />,
        title: 'Professional Tutors',
        description: 'Create, sell, and scale your teaching with AI assistance',
        link: '/solutions/tutors',
      },
      {
        icon: <GlobeAltIcon />,
        title: 'Coaching Institutes',
        description: 'Competitive exam prep with personalized AI tutoring',
        link: '/solutions/coaching',
      },
      {
        icon: <SparklesIcon />,
        title: 'Custom Solutions',
        description: 'White-label platform tailored to your brand and needs',
        link: '/solutions/enterprise',
      },
    ].map((card, i) => (
      <Link
        key={i}
        to={card.link}
        className="bg-white border border-slate-200 rounded-xl p-6 hover:border-primary-300 hover:shadow-md transition-all group"
      >
        <div className="w-12 h-12 rounded-lg bg-primary-50 flex items-center justify-center mb-4 group-hover:bg-primary-100 transition-colors">
          <span className="w-6 h-6 text-primary-600">{card.icon}</span>
        </div>
        <h3 className="font-semibold mb-2">{card.title}</h3>
        <p className="text-sm text-slate-600 mb-4">{card.description}</p>
        <span className="text-sm text-primary-600 font-medium group-hover:underline">
          Learn more →
        </span>
      </Link>
    ))}
  </div>
</section>

---

4. Stats/Impact Section

<section className="py-16 bg-slate-900">
  <div className="max-w-6xl mx-auto px-6">
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center">
      {[
        { value: '50+', label: 'Institutions', sublabel: 'schools, colleges, businesses' },
        { value: '500+', label: 'Educators', sublabel: 'using AI daily' },
        { value: '10K+', label: 'Learners', sublabel: 'growing with us' },
        { value: '1M+', label: 'AI Sessions', sublabel: 'knowledge delivered' },
      ].map((stat, i) => (
        <div key={i}>
          <div className="text-4xl sm:text-5xl font-bold text-white mb-1">
            {stat.value}
          </div>
          <div className="text-slate-300 text-sm">{stat.label}</div>
          <div className="text-slate-500 text-xs">{stat.sublabel}</div>
        </div>
      ))}
    </div>
  </div>
</section>

---

5. Testimonials with Metrics

<section className="py-20">
  <h2 className="text-3xl font-semibold text-center mb-12">
    Trusted by educators who demand results
  </h2>

  <div className="grid md:grid-cols-3 gap-6">
    {[
      {
        metric: '60%',
        metricLabel: 'time saved',
        quote: "VidyaNet reduced our teachers' content creation time by 60%. The AI actually understands our CBSE syllabus.",
        author: 'Dr. Sunita Sharma',
        role: 'Principal, Bethany International School',
      },
      {
        metric: '40%',
        metricLabel: 'better engagement',
        quote: "Students love Vidya AI. Doubt resolution that used to take days now happens instantly.",
        author: 'Prof. Rajesh Kumar',
        role: 'Dean, Engineering College',
      },
      {
        metric: '3x',
        metricLabel: 'faster onboarding',
        quote: "We onboarded 200 employees in half the time. The AI learned our company policies perfectly.",
        author: 'Priya Mehta',
        role: 'HR Director, Tech Startup',
      },
    ].map((t, i) => (
      <div key={i} className="bg-slate-50 rounded-xl p-6">
        <div className="mb-4">
          <span className="text-3xl font-bold text-slate-900">{t.metric}</span>
          <span className="text-sm text-slate-500 ml-2">{t.metricLabel}</span>
        </div>
        <p className="text-slate-600 text-sm leading-relaxed mb-6">"{t.quote}"</p>
        <div className="flex items-center gap-3 pt-4 border-t border-slate-200">
          <div className="w-10 h-10 rounded-full bg-slate-300" />
          <div>
            <p className="text-sm font-medium text-slate-900">{t.author}</p>
            <p className="text-xs text-slate-500">{t.role}</p>
          </div>
        </div>
      </div>
    ))}
  </div>
</section>

---

6. Footer Updates

<footer className="bg-slate-900 py-12">
  <div className="max-w-6xl mx-auto px-6">
    <div className="grid md:grid-cols-5 gap-8 mb-12">
      {/* Brand column */}
      <div className="md:col-span-2">
        <div className="flex items-center gap-2 mb-4">
          <Logo className="h-8 text-white" />
          <span className="text-white font-semibold">VidyaNet AI</span>
        </div>
        <p className="text-sm text-slate-400 mb-2 font-medium">
          Knowledge that grows with you
        </p>
        <p className="text-sm text-slate-500 mb-6">
          The AI learning platform for schools, colleges,
          universities, and businesses worldwide.
        </p>

        {/* Compliance badges */}
        <div className="flex flex-wrap gap-2">
          <span className="px-2 py-1 bg-slate-800 text-slate-400 text-xs rounded">DPDP Compliant</span>
          <span className="px-2 py-1 bg-slate-800 text-slate-400 text-xs rounded">POCSO Safe</span>
          <span className="px-2 py-1 bg-slate-800 text-slate-400 text-xs rounded">SOC 2</span>
        </div>
      </div>

      {/* Product */}
      <div>
        <h4 className="text-sm font-medium text-white mb-4">Product</h4>
        <ul className="space-y-3 text-sm text-slate-400">
          <li><Link to="/platform">Platform</Link></li>
          <li><Link to="/vidya-ai">Vidya AI</Link></li>
          <li><Link to="/pricing">Pricing</Link></li>
          <li><Link to="/integrations">Integrations</Link></li>
        </ul>
      </div>

      {/* Solutions */}
      <div>
        <h4 className="text-sm font-medium text-white mb-4">Solutions</h4>
        <ul className="space-y-3 text-sm text-slate-400">
          <li><Link to="/solutions/k12">K-12 Schools</Link></li>
          <li><Link to="/solutions/higher-ed">Higher Education</Link></li>
          <li><Link to="/solutions/corporate">Corporate Training</Link></li>
          <li><Link to="/solutions/tutors">Professional Tutors</Link></li>
        </ul>
      </div>

      {/* Company */}
      <div>
        <h4 className="text-sm font-medium text-white mb-4">Company</h4>
        <ul className="space-y-3 text-sm text-slate-400">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
          <li><Link to="/privacy">Privacy Policy</Link></li>
          <li><Link to="/terms">Terms of Service</Link></li>
        </ul>
      </div>
    </div>

    {/* Bottom */}
    <div className="pt-8 border-t border-slate-800 flex flex-wrap items-center justify-between gap-4">
      <p className="text-sm text-slate-500">
        © 2026 VidyaNet AI. All rights reserved.
      </p>
      <div className="flex items-center gap-4">
        <a href="#" className="text-slate-400 hover:text-white">
          <TwitterIcon className="w-5 h-5" />
        </a>
        <a href="#" className="text-slate-400 hover:text-white">
          <LinkedInIcon className="w-5 h-5" />
        </a>
        <a href="#" className="text-slate-400 hover:text-white">
          <YouTubeIcon className="w-5 h-5" />
        </a>
      </div>
    </div>
  </div>
</footer>

---

7. AI Tutor Page UI Updates

Chat Header

<div className="flex items-center gap-3 p-4 border-b bg-white">
  {/* Vidya AI avatar */}
  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-primary-400 via-purple-500 to-pink-500 flex items-center justify-center shadow-lg shadow-purple-500/20">
    <SparklesIcon className="w-5 h-5 text-white" />
  </div>
  <div>
    <h1 className="font-semibold text-slate-900">Vidya AI</h1>
    <p className="text-xs text-slate-500">Intelligence that grows with you</p>
  </div>
</div>

Empty State

<div className="flex-1 flex flex-col items-center justify-center text-center px-4">
  {/* Vidya AI logo */}
  <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-400 via-purple-500 to-pink-500 flex items-center justify-center mb-6 shadow-2xl shadow-purple-500/30">
    <SparklesIcon className="w-10 h-10 text-white" />
  </div>

  <h2 className="text-2xl font-bold mb-2">Hi, I'm Vidya AI</h2>
  <p className="text-slate-500 mb-2 text-sm font-medium">
    Intelligence that grows with you
  </p>
  <p className="text-slate-500 mb-8 max-w-md">
    {isStudent && "I'm trained on your curriculum. Ask me anything about your subjects!"}
    {isTeacher && "I can help you create lessons, quizzes, and teaching materials."}
    {isParent && "Ask me about your child's progress and learning journey."}
    {isAdmin && "I can provide insights and reports about your institution."}
  </p>

  {/* Suggestion chips */}
  <div className="flex flex-wrap gap-2 justify-center max-w-lg">
    {suggestions.map((s, i) => (
      <button
        key={i}
        onClick={() => setInput(s)}
        className="px-4 py-2 bg-slate-100 hover:bg-slate-200 rounded-full text-sm transition-colors"
      >
        {s}
      </button>
    ))}
  </div>
</div>

---

8. Navigation Structure

<nav className="sticky top-0 z-50 bg-white border-b">
  {/* AI Banner */}
  <div className="bg-gradient-to-r from-primary-500 via-primary-600 to-purple-600 text-white text-center py-2 text-sm">
    <Link to="/vidya-ai" className="inline-flex items-center gap-2 hover:opacity-90">
      <span>✨</span>
      <span>Meet <strong>Vidya AI</strong> — Intelligence that grows with you</span>
      <span>→</span>
    </Link>
  </div>

  {/* Main nav */}
  <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
    <div className="flex items-center gap-8">
      <Link to="/" className="flex items-center gap-2">
        <Logo className="h-8" />
        <span className="font-semibold">VidyaNet AI</span>
      </Link>

      <div className="hidden md:flex items-center gap-6">
        <NavDropdown label="Product">
          <NavItem to="/platform">Platform Overview</NavItem>
          <NavItem to="/vidya-ai">Vidya AI</NavItem>
          <NavItem to="/features">Features</NavItem>
          <NavItem to="/integrations">Integrations</NavItem>
        </NavDropdown>

        <NavDropdown label="Solutions">
          <NavItem to="/solutions/k12">K-12 Schools</NavItem>
          <NavItem to="/solutions/higher-ed">Higher Education</NavItem>
          <NavItem to="/solutions/corporate">Corporate Training</NavItem>
          <NavItem to="/solutions/tutors">Professional Tutors</NavItem>
        </NavDropdown>

        <NavItem to="/pricing">Pricing</NavItem>
        <NavItem to="/resources">Resources</NavItem>
      </div>
    </div>

    <div className="flex items-center gap-3">
      <Link to="/login" className="text-sm font-medium text-slate-600 hover:text-slate-900">
        Sign in
      </Link>
      <Button to="/demo" variant="primary">
        Get a Demo
      </Button>
    </div>
  </div>
</nav>

---

9. How It Works Section (Replacing GIF Videos)

Instead of GIF videos that show one-dimensional demos, we'll use an interactive, role-based experience selector that lets visitors explore the platform from their perspective.

Design Concept: "Experience It Your Way"

<section className="py-20 bg-gradient-to-b from-white to-slate-50">
  <div className="max-w-6xl mx-auto px-6">
    <div className="text-center mb-12">
      <h2 className="text-3xl font-bold mb-4">
        See how it works for you
      </h2>
      <p className="text-slate-600 max-w-2xl mx-auto">
        VidyaNet adapts to every role. Select yours to see what's possible.
      </p>
    </div>

    {/* Role Selector Tabs - Use Heroicons for icons */}
    <div className="flex flex-wrap justify-center gap-3 mb-12">
      {[
        { id: 'student', label: 'Student', icon: 'academic-cap' },
        { id: 'teacher', label: 'Teacher', icon: 'user' },
        { id: 'parent', label: 'Parent', icon: 'home' },
        { id: 'admin', label: 'Administrator', icon: 'building-office' },
      ].map((role) => (
        <button
          key={role.id}
          onClick={() => setActiveRole(role.id)}
          className={`px-6 py-3 rounded-lg font-medium transition-all flex items-center gap-2 ${
            activeRole === role.id
              ? 'bg-primary-500 text-white shadow-lg'
              : 'bg-white text-slate-600 border border-slate-200 hover:border-primary-300'
          }`}
        >
          <IconComponent name={role.icon} className="w-5 h-5" />
          {role.label}
        </button>
      ))}
    </div>

    {/* Dynamic Content Based on Role */}
    <div className="bg-white rounded-2xl shadow-xl border border-slate-100 overflow-hidden">
      {activeRole === 'student' && <StudentJourney />}
      {activeRole === 'teacher' && <TeacherJourney />}
      {activeRole === 'parent' && <ParentJourney />}
      {activeRole === 'admin' && <AdminJourney />}
    </div>
  </div>
</section>

Journey Components (Instead of GIFs)

Each journey uses a 3-step animated timeline with static UI mockups that transition smoothly:

StudentJourney Component

const StudentJourney = () => {
  const [step, setStep] = useState(1);

  const steps = [
    {
      number: 1,
      title: 'Ask Vidya AI anything',
      description: 'Get instant help with homework, exam prep, or concept doubts. AI trained on YOUR syllabus.',
      mockup: (
        <div className="bg-slate-900 rounded-lg p-4 text-white font-mono text-sm">
          <div className="flex items-center gap-2 mb-3 text-slate-400">
            <span className="w-3 h-3 rounded-full bg-red-500" />
            <span className="w-3 h-3 rounded-full bg-yellow-500" />
            <span className="w-3 h-3 rounded-full bg-green-500" />
          </div>
          <div className="mb-3 p-3 bg-slate-800 rounded">
            <span className="text-blue-400">You:</span> Explain photosynthesis simply
          </div>
          <div className="p-3 bg-gradient-to-r from-primary-500/20 to-purple-500/20 rounded border border-primary-500/30">
            <span className="text-purple-400">Vidya AI:</span> Think of a plant as a tiny food factory...
            <br />
            <span className="text-slate-400 text-xs">Source: NCERT Class 10, Ch. 6</span>
          </div>
        </div>
      ),
    },
    {
      number: 2,
      title: 'Track your progress',
      description: 'Earn XP, maintain streaks, unlock achievements. Learning becomes a game.',
      mockup: (
        <div className="bg-white rounded-lg border p-4">
          <div className="flex items-center justify-between mb-4">
            <div className="text-lg font-bold text-slate-900">Level 12</div>
            <div className="text-sm text-primary-500 flex items-center gap-1">
              <FireIcon className="w-4 h-4" /> 15 day streak
            </div>
          </div>
          <div className="w-full bg-slate-100 rounded-full h-3 mb-4">
            <div className="bg-gradient-to-r from-primary-500 to-primary-600 h-3 rounded-full w-3/4" />
          </div>
          <div className="grid grid-cols-3 gap-3 text-center">
            <div className="bg-amber-50 rounded-lg p-3">
              <TrophyIcon className="w-6 h-6 text-amber-600 mx-auto mb-1" />
              <div className="text-xs text-slate-600">Top 10%</div>
            </div>
            <div className="bg-emerald-50 rounded-lg p-3">
              <CheckCircleIcon className="w-6 h-6 text-emerald-600 mx-auto mb-1" />
              <div className="text-xs text-slate-600">42 lessons</div>
            </div>
            <div className="bg-blue-50 rounded-lg p-3">
              <StarIcon className="w-6 h-6 text-blue-600 mx-auto mb-1" />
              <div className="text-xs text-slate-600">1,250 XP</div>
            </div>
          </div>
        </div>
      ),
    },
    {
      number: 3,
      title: 'Submit assignments instantly',
      description: 'Complete homework, take quizzes, get instant feedback. All in one place.',
      mockup: (
        <div className="bg-white rounded-lg border p-4">
          <div className="flex items-center gap-3 mb-4 pb-3 border-b">
            <div className="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
              <CheckIcon className="w-5 h-5 text-emerald-600" />
            </div>
            <div>
              <div className="font-medium">Physics Quiz: Motion</div>
              <div className="text-sm text-emerald-600">Submitted • 85% correct</div>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="text-slate-600">Time taken</span>
              <span className="font-medium">12 mins</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-slate-600">Class average</span>
              <span className="font-medium">78%</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-slate-600">Your rank</span>
              <span className="font-medium text-primary-500">#3 of 45</span>
            </div>
          </div>
        </div>
      ),
    },
  ];

  return (
    <div className="grid lg:grid-cols-2 gap-8 p-8">
      {/* Left: Timeline */}
      <div className="space-y-6">
        {steps.map((s) => (
          <button
            key={s.number}
            onClick={() => setStep(s.number)}
            className={`w-full text-left p-4 rounded-xl transition-all ${
              step === s.number
                ? 'bg-primary-50 border-2 border-primary-500'
                : 'bg-slate-50 hover:bg-slate-100'
            }`}
          >
            <div className="flex items-start gap-4">
              <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
                step === s.number
                  ? 'bg-primary-500 text-white'
                  : 'bg-slate-200 text-slate-600'
              }`}>
                {s.number}
              </div>
              <div>
                <h4 className="font-semibold text-slate-900 mb-1">{s.title}</h4>
                <p className="text-sm text-slate-600">{s.description}</p>
              </div>
            </div>
          </button>
        ))}
      </div>

      {/* Right: Animated Mockup */}
      <div className="flex items-center justify-center">
        <div className="w-full max-w-md transition-all duration-500 transform">
          {steps.find(s => s.number === step)?.mockup}
        </div>
      </div>
    </div>
  );
};

TeacherJourney Component

const teacherSteps = [
  {
    number: 1,
    title: 'Generate lessons with AI',
    description: 'Turn your curriculum into rich, interactive lessons in minutes. AI follows YOUR textbook.',
    mockup: <AILessonGeneratorMockup />,
  },
  {
    number: 2,
    title: 'Create assignments instantly',
    description: 'Auto-generate quizzes, homework, or tests. Aligned to your syllabus.',
    mockup: <AssignmentCreatorMockup />,
  },
  {
    number: 3,
    title: 'Track every student',
    description: 'Real-time analytics on engagement, completion, and performance.',
    mockup: <TeacherDashboardMockup />,
  },
];

ParentJourney Component

const parentSteps = [
  {
    number: 1,
    title: 'See your child's progress',
    description: 'Real-time visibility into attendance, grades, and learning activity.',
    mockup: <ParentDashboardMockup />,
  },
  {
    number: 2,
    title: 'Get notified instantly',
    description: 'Alerts for assignments due, grades posted, or attendance issues.',
    mockup: <NotificationMockup />,
  },
  {
    number: 3,
    title: 'Message teachers directly',
    description: 'Secure communication with educators without sharing personal numbers.',
    mockup: <ParentChatMockup />,
  },
];

AdminJourney Component

const adminSteps = [
  {
    number: 1,
    title: 'Manage your institution',
    description: 'Users, classes, departments, semesters — all from one dashboard.',
    mockup: <AdminDashboardMockup />,
  },
  {
    number: 2,
    title: 'Analytics at a glance',
    description: 'Institution-wide insights: engagement, performance, attendance trends.',
    mockup: <AnalyticsMockup />,
  },
  {
    number: 3,
    title: 'AI that knows YOUR curriculum',
    description: 'Upload textbooks and syllabi. Watch AI become fluent in your content.',
    mockup: <RAGUploadMockup />,
  },
];

Why This Is Better Than GIFs

GIF Approach	Interactive Approach
One-size-fits-all	Personalized by role
Passive viewing	Active exploration
Large file sizes	Lightweight UI components
Fixed narrative	User-controlled pace
Can't show context	Real UI mockups
Accessibility issues	Fully accessible

---

10. Early Adopter Section (Replacing Partner Logos)

Since we don't have real partner logos yet, we replace the "Trusted by" section with a launch momentum section.

Design: "Join the Future of Learning"

<section className="py-16 bg-slate-900 text-white">
  <div className="max-w-6xl mx-auto px-6 text-center">
    {/* Launch Badge */}
    <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 rounded-full text-sm mb-8">
      <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
      <span>Now accepting early adopters</span>
    </div>

    <h2 className="text-3xl font-bold mb-4">
      Be among the first 100 institutions
    </h2>
    <p className="text-slate-300 max-w-2xl mx-auto mb-10">
      Join forward-thinking schools, colleges, and organizations
      shaping the future of education with AI.
    </p>

    {/* Segment Badges - Use Heroicons */}
    <div className="flex flex-wrap justify-center gap-4 mb-12">
      {[
        { label: 'Schools', icon: 'building-library', count: '35' },
        { label: 'Colleges', icon: 'academic-cap', count: '12' },
        { label: 'Universities', icon: 'building-office-2', count: '5' },
        { label: 'Businesses', icon: 'briefcase', count: '8' },
      ].map((segment) => (
        <div
          key={segment.label}
          className="bg-white/5 border border-white/10 rounded-xl px-6 py-4 text-center"
        >
          <IconComponent name={segment.icon} className="w-8 h-8 text-white/60 mx-auto mb-2" />
          <div className="text-2xl font-bold mb-1">{segment.count}+</div>
          <div className="text-sm text-slate-400">{segment.label}</div>
        </div>
      ))}
    </div>

    {/* Early Adopter Benefits */}
    <div className="grid md:grid-cols-3 gap-6 mb-12 text-left">
      <div className="bg-white/5 rounded-xl p-6">
        <div className="w-10 h-10 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
          <GiftIcon className="w-5 h-5 text-emerald-400" />
        </div>
        <h3 className="font-semibold mb-2">Founding Partner Pricing</h3>
        <p className="text-sm text-slate-400">
          Lock in special rates for life. Early adopters get permanent discounts.
        </p>
      </div>
      <div className="bg-white/5 rounded-xl p-6">
        <div className="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
          <WrenchScrewdriverIcon className="w-5 h-5 text-blue-400" />
        </div>
        <h3 className="font-semibold mb-2">Shape the Product</h3>
        <p className="text-sm text-slate-400">
          Direct access to our team. Your feedback drives our roadmap.
        </p>
      </div>
      <div className="bg-white/5 rounded-xl p-6">
        <div className="w-10 h-10 bg-primary-500/20 rounded-lg flex items-center justify-center mb-4">
          <RocketLaunchIcon className="w-5 h-5 text-primary-400" />
        </div>
        <h3 className="font-semibold mb-2">White-Glove Onboarding</h3>
        <p className="text-sm text-slate-400">
          Dedicated support, custom setup, and training for your team.
        </p>
      </div>
    </div>

    {/* CTA */}
    <Button size="lg" variant="primary">
      Apply for Early Access
      <ArrowRightIcon className="w-4 h-4 ml-2" />
    </Button>

    <p className="text-sm text-slate-500 mt-4">
      Limited to first 100 institutions • Applications reviewed weekly
    </p>
  </div>
</section>

Alternative: Simple "Coming Soon" Style

For an even cleaner approach:

<section className="py-12 border-y border-slate-200 bg-slate-50">
  <div className="max-w-6xl mx-auto px-6">
    <div className="flex flex-col md:flex-row items-center justify-between gap-6">
      <div>
        <div className="text-sm text-primary-600 font-medium mb-1">
          Launching 2026
        </div>
        <h3 className="text-xl font-bold text-slate-900">
          Join 60+ institutions already signed up
        </h3>
      </div>
      <div className="flex items-center gap-4">
        <div className="flex -space-x-2">
          {/* Placeholder avatars representing different institution types */}
          <div className="w-10 h-10 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center">
            <BuildingLibraryIcon className="w-5 h-5 text-blue-600" />
          </div>
          <div className="w-10 h-10 rounded-full bg-purple-100 border-2 border-white flex items-center justify-center">
            <AcademicCapIcon className="w-5 h-5 text-purple-600" />
          </div>
          <div className="w-10 h-10 rounded-full bg-emerald-100 border-2 border-white flex items-center justify-center">
            <BuildingOffice2Icon className="w-5 h-5 text-emerald-600" />
          </div>
          <div className="w-10 h-10 rounded-full bg-amber-100 border-2 border-white flex items-center justify-center">
            <BriefcaseIcon className="w-5 h-5 text-amber-600" />
          </div>
          <div className="w-10 h-10 rounded-full bg-slate-100 border-2 border-white flex items-center justify-center text-xs font-medium">+56</div>
        </div>
        <Button variant="outline">
          Join waitlist
        </Button>
      </div>
    </div>
  </div>
</section>

---

11. Terminology Guidelines

Universal Language (Not "Schools")

To avoid biasing the platform toward K-12 schools when we support all institutions, use these terms:

Avoid	Use Instead
Schools	Institutions
Students & Teachers	Learners & Educators (when speaking universally)
School Admin	Institution Admin
Partner Schools	Partner Institutions or Early Adopters
School Dashboard	Institution Dashboard
For schools	For institutions or For your organization
Teachers	Educators (when universal) or keep Teachers (in K-12 context)

Context-Specific Usage

When speaking to a specific segment, use their language:

Segment	Terminology
K-12	Schools, Teachers, Students, Classes
Higher Ed	Colleges/Universities, Faculty/Professors, Students, Departments, Semesters
Corporate	Companies, Trainers, Employees, Teams, Training Programs
Tutors	Tutors, Students, Sessions, Courses

Configuration Changes

File: landingContent.ts

// BEFORE
export const heroBadgeText = 'Now serving 2+ schools across India';
export const partnerSchools = [...];
export const showPartnerSchools = true;

// AFTER
export const heroBadgeText = 'Now accepting early adopters';
export const earlyAdopters = {
  total: 60,
  breakdown: {
    schools: 35,
    colleges: 12,
    universities: 5,
    businesses: 8,
  },
};
export const showEarlyAdopterSection = true;

File: landingContent.ts - Hero Content

// BEFORE
export const heroContent = {
  title: {
    line1: 'The AI platform for',
    line2: 'modern Indian schools',
  },
  // ...
};

// AFTER
export const heroContent = {
  title: {
    line1: 'Knowledge that grows',
    line2: 'with you',
  },
  subtitle: 'Unlike platforms that force their curriculum, VidyaNet AI learns yours. Upload your textbooks, syllabi, or training materials. Watch as AI becomes fluent in YOUR content.',
  ctaPrimary: 'Get a Demo',
  ctaSecondary: 'See How It Works',
};

File: landingContent.ts - Stats

// BEFORE
export const platformStats = {
  schools: { value: 2, suffix: '+', label: 'Schools' },
  // ...
};

// AFTER
export const platformStats = {
  institutions: { value: 60, suffix: '+', label: 'Institutions' },
  educators: { value: 500, suffix: '+', label: 'Educators' },
  learners: { value: '10K', suffix: '+', label: 'Learners' },
  aiSessions: { value: '1M', suffix: '+', label: 'AI Sessions' },
};

Segment Badges Pattern

When you need to show all supported segments, use segment badges:

<div className="flex flex-wrap items-center gap-2">
  <span className="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">
    Schools
  </span>
  <span className="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">
    Colleges
  </span>
  <span className="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">
    Universities
  </span>
  <span className="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">
    Businesses
  </span>
</div>

Or as a single line:

<p className="text-sm text-slate-500">
  For Schools • Colleges • Universities • Businesses
</p>

---

Implementation Priority

Phase 1: Quick Wins (1-2 days)

• [ ] Update tagline in landingContent.ts to "Knowledge that grows with you"
• [ ] Update company name to "VidyaNet AI" in footer
• [ ] Add "Vidya AI" branding to AI tutor chat header
• [ ] Update hero section copy
• [ ] Add segment badges (Schools, Colleges, Universities, Businesses)

Phase 2: Medium Effort (3-5 days)

• [ ] Create /vidya-ai landing page
• [ ] Add "Meet Vidya AI" announcement banner
• [ ] Update use case cards with new segments
• [ ] Enhance testimonials with metrics
• [ ] Update footer structure

Phase 3: Larger Changes (1-2 weeks)

• [ ] Full navigation redesign with dropdowns
• [ ] Dark theme Vidya AI page
• [ ] Integration showcase section
• [ ] Solutions pages for each segment
• [ ] Mobile app branding updates

---

File Changes Required

File	Changes
landingContent.ts	Update tagline, hero copy, segments
LandingPage.tsx	Hero section, value props, use cases
AITutorPage.tsx	Vidya AI header, empty state, tagline
App.tsx	Add /vidya-ai route
Footer.tsx	New structure, tagline, compliance badges
Navbar.tsx	Add AI banner, dropdown menus
NEW VidyaAIPage.tsx	Dedicated AI landing page
NEW solutions/*.tsx	Segment-specific pages

---

Brand Guidelines Summary

Element	Value
Company Name	VidyaNet AI
Company Tagline	Knowledge that grows with you
AI Assistant	Vidya AI
AI Tagline	Intelligence that grows with you
Voice	Confident, empowering, partnership-focused
Key Message	"Unlike platforms that force their curriculum, we learn yours"

---

12. Design System

Color Palette

Use a consistent color scheme throughout the website. The primary color is Deep Saffron, with slate neutrals for text and backgrounds.

Primary Colors

Name	Hex	Usage
Primary 50	#fff7ed	Light backgrounds, hover states
Primary 100	#ffedd5	Light backgrounds
Primary 200	#fed7aa	Borders, light accents
Primary 300	#fdba74	Secondary accents
Primary 400	#fb923c	Hover states
Primary 500	#f97316	Main brand color (CTAs, highlights)
Primary 600	#ea580c	Pressed states, dark accents
Primary 700	#c2410c	Dark accents
Primary 800	#9a3412	Very dark accents
Primary 900	#7c2d12	Darkest accents

Neutral Colors (Slate)

Name	Hex	Usage
Slate 50	#f8fafc	Page backgrounds
Slate 100	#f1f5f9	Card backgrounds, alternating rows
Slate 200	#e2e8f0	Borders, dividers
Slate 300	#cbd5e1	Disabled states
Slate 400	#94a3b8	Placeholder text
Slate 500	#64748b	Secondary text
Slate 600	#475569	Body text
Slate 700	#334155	Dark sections
Slate 800	#1e293b	Dark backgrounds
Slate 900	#0f172a	Headings, dark sections

Semantic Colors

Name	Hex	Usage
Success	#10b981 (Emerald 500)	Success states, positive metrics
Error	#ef4444 (Red 500)	Error states, destructive actions
Warning	#f59e0b (Amber 500)	Warning states
Info	#3b82f6 (Blue 500)	Informational states

Typography

Use Inter as the primary font throughout the website for a clean, professional look.

Font Families

/* Primary - All UI text */
font-family: 'Inter', system-ui, -apple-system, sans-serif;

/* Headings - Optional for display text */
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;

Font Sizes

Name	Size	Usage
Hero	60px (3.75rem)	Main hero headline
H1	48px (3rem)	Page titles
H2	36px (2.25rem)	Section headings
H3	24px (1.5rem)	Subsection headings
H4	20px (1.25rem)	Card titles
Body	16px (1rem)	Default text
Small	14px (0.875rem)	Secondary text, captions
XS	12px (0.75rem)	Labels, badges

Font Weights

Weight	Value	Usage
Regular	400	Body text
Medium	500	UI labels, buttons
Semibold	600	Subheadings, emphasis
Bold	700	Headings, key metrics

Spacing

Use consistent spacing based on a 4px grid.

Name	Size	Tailwind	Usage
xs	4px	p-1	Tight spacing
sm	8px	p-2	Compact elements
md	16px	p-4	Default spacing
lg	24px	p-6	Card padding
xl	32px	p-8	Section gaps
2xl	48px	p-12	Large sections
3xl	64px	p-16	Section padding
section	80px	py-20	Vertical section padding

Border Radius

Name	Size	Tailwind	Usage
sm	6px	rounded	Buttons, inputs
md	8px	rounded-md	Cards, dropdowns
lg	12px	rounded-lg	Large cards
xl	16px	rounded-xl	Feature cards
2xl	24px	rounded-2xl	Hero elements
full	9999px	rounded-full	Pills, badges, avatars

Shadows

Name	Tailwind	Usage
sm	shadow-sm	Subtle elevation
default	shadow	Cards, dropdowns
md	shadow-md	Hover states
lg	shadow-lg	Modals, popovers
xl	shadow-xl	Hero elements

Icons

Use Heroicons (24px outline style) consistently throughout the website.

// Import from @heroicons/react/24/outline
import {
  AcademicCapIcon,
  BookOpenIcon,
  BriefcaseIcon,
  BuildingLibraryIcon,
  BuildingOffice2Icon,
  ChartBarIcon,
  CheckCircleIcon,
  Cog6ToothIcon,
  GiftIcon,
  LifebuoyIcon,
  RocketLaunchIcon,
  ShieldCheckIcon,
  SparklesIcon,
  StarIcon,
  TrophyIcon,
  UserGroupIcon,
  WrenchScrewdriverIcon,
} from '@heroicons/react/24/outline';

Icon Sizing

Context	Size	Tailwind
Inline with text	16px	w-4 h-4
Buttons, small cards	20px	w-5 h-5
Feature icons	24px	w-6 h-6
Large feature icons	32px	w-8 h-8

Component Patterns

Buttons

// Primary button
<button className="px-6 py-3 bg-primary-500 text-white font-medium rounded-lg
  hover:bg-primary-600 transition-colors shadow-sm">
  Get a Demo
</button>

// Secondary/Outline button
<button className="px-6 py-3 bg-white text-slate-700 font-medium rounded-lg
  border border-slate-200 hover:border-primary-300 transition-colors">
  Learn More
</button>

Cards

// Standard card
<div className="bg-white rounded-xl p-6 border border-slate-200 shadow-sm">
  <div className="w-12 h-12 bg-primary-50 rounded-lg flex items-center justify-center mb-4">
    <SparklesIcon className="w-6 h-6 text-primary-500" />
  </div>
  <h3 className="text-lg font-semibold text-slate-900 mb-2">Feature Title</h3>
  <p className="text-sm text-slate-600">Feature description text here.</p>
</div>

Section Layout

// Standard section
<section className="py-20 bg-white">
  <div className="max-w-6xl mx-auto px-6">
    <div className="text-center mb-12">
      <h2 className="text-3xl font-bold text-slate-900 mb-4">
        Section Heading
      </h2>
      <p className="text-lg text-slate-600 max-w-2xl mx-auto">
        Section description text that provides context.
      </p>
    </div>
    {/* Content grid */}
    <div className="grid md:grid-cols-3 gap-6">
      {/* Cards go here */}
    </div>
  </div>
</section>

Do's and Don'ts

Do	Don't
Use Heroicons for all icons	Use emojis in UI
Stick to the color palette	Introduce random colors
Use Inter font family	Mix multiple fonts
Maintain consistent spacing	Use arbitrary pixel values
Use slate for text colors	Use pure black (#000)
Apply subtle shadows	Use heavy drop shadows
Keep UI clean and minimal	Add decorative elements

---

Competitive Positioning Summary

LEAD School gives you their curriculum. We learn yours.

Teachmint is for teachers. VidyaNet is for everyone.

Generic AI doesn't know your content. Vidya AI is trained on it.

---

Last updated: January 2026