Skip to content

Commit

Permalink
SEP tabbed table 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@CherrelleTucker
CherrelleTucker committed Dec 30, 2024
1 parent c96356d commit 1d8413e
Showing 1 changed file with 129 additions and 141 deletions.
270 changes: 129 additions & 141 deletions _tabs/SEP.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,156 +48,147 @@ order: 2
<label for="lifecycle-tab">Solution Lifecycle</label>
<label for="resources-tab">Resources</label>
</div>

<!-- Overview Section -->
<div id="overview" class="tab-content active">
<div class="content-section">
<h2 class="text-xl font-bold mb-4">Program Overview</h2>
<div class="grid-container">
<div class="card">
<div class="card-header">
<i class="fas fa-bullseye"></i>
<h3>Mission</h3>
<div class="tabs-content">
<!-- Overview Section -->
<div id="overview" class="tab-content">
<h4>Program Overview</h4>
<div class="grid-container">
<div class="card">
<div class="card-header">
<i class="fas fa-bullseye"></i>
<h3>Mission</h3>
</div>
<p>Support the development of user-centric SNWG satellite-related solutions for federal agencies by facilitating collaborative stakeholder engagement and information sharing.</p>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-eye"></i>
<h3>Vision</h3>
</div>
<p>Create a culture of information sharing, collaboration, and co-design that empowers agency representatives to have greater ownership of solutions being developed.</p>
</div>
</div>
<p>Support the development of user-centric SNWG satellite-related solutions for federal agencies by facilitating collaborative stakeholder engagement and information sharing.</p>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-eye"></i>
<h3>Vision</h3>
<div class="card mt-6">
<div class="card-header">
<i class="fas fa-star"></i>
<h3>Core Values</h3>
</div>
<div class="grid-container">
<div class="card">
<h4 class="font-medium">Trust & Transparency</h4>
<p>Building relationships that foster collaboration and co-design</p>
</div>
<div class="card">
<h4 class="font-medium">Curiosity & Empathy</h4>
<p>Understanding stakeholder needs through active listening</p>
</div>
<div class="card">
<h4 class="font-medium">Ingenuity & Creativity</h4>
<p>Developing actionable, tailored solutions</p>
</div>
</div>
</div>
<p>Create a culture of information sharing, collaboration, and co-design that empowers agency representatives to have greater ownership of solutions being developed.</p>
</div>
</div>
<div class="card mt-6">
<div class="card-header">
<i class="fas fa-star"></i>
<h3>Core Values</h3>
</div>
<!-- Philosophy Section -->
<div id="philosophy" class="tab-content">
<h4>Our Engagement Philosophy</h4>
<div class="grid-container">
<div class="card">
<h4 class="font-medium">Trust & Transparency</h4>
<p>Building relationships that foster collaboration and co-design</p>
<div class="card-header">
<i class="fas fa-handshake"></i>
<h3>Co-Design Approach</h3>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Early and continuous stakeholder involvement
<br><i class="fas fa-check text-blue-600 mr-2"></i> Collaborative solution development
<br><i class="fas fa-check text-blue-600 mr-2"></i> Iterative feedback and refinement
<br><i class="fas fa-check text-blue-600 mr-2"></i> Shared ownership of outcomes
</ul>
</div>
<div class="card">
<h4 class="font-medium">Curiosity & Empathy</h4>
<p>Understanding stakeholder needs through active listening</p>
</div>
<div class="card">
<h4 class="font-medium">Ingenuity & Creativity</h4>
<p>Developing actionable, tailored solutions</p>
</div>
</div>
</div>
</div>
</div>

<!-- Philosophy Section -->
<div id="philosophy" class="tab-content">
<div class="content-section">
<h2 class="text-xl font-bold mb-6">Our Engagement Philosophy</h2>
<div class="grid-container">
<div class="card">
<div class="card-header">
<i class="fas fa-handshake"></i>
<h3>Co-Design Approach</h3>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Early and continuous stakeholder involvement
<br><i class="fas fa-check text-blue-600 mr-2"></i> Collaborative solution development
<br><i class="fas fa-check text-blue-600 mr-2"></i> Iterative feedback and refinement
<br><i class="fas fa-check text-blue-600 mr-2"></i> Shared ownership of outcomes
</ul>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-users"></i>
<h3>Stakeholder Focus</h3>
<div class="card-header">
<i class="fas fa-users"></i>
<h3>Stakeholder Focus</h3>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Understanding agency needs and contexts
<br><i class="fas fa-check text-blue-600 mr-2"></i> Facilitating multi-agency collaboration
<br><i class="fas fa-check text-blue-600 mr-2"></i> Building long-term relationships
<br><i class="fas fa-check text-blue-600 mr-2"></i> Measuring and communicating impact
</ul>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Understanding agency needs and contexts
<br><i class="fas fa-check text-blue-600 mr-2"></i> Facilitating multi-agency collaboration
<br><i class="fas fa-check text-blue-600 mr-2"></i> Building long-term relationships
<br><i class="fas fa-check text-blue-600 mr-2"></i> Measuring and communicating impact
</ul>
</div>
</div>
</div>
</div>

<!-- Solution Lifecycle Section -->
<div id="lifecycle" class="tab-content">
<div class="content-section">
<h2 class="text-xl font-bold mb-6">Engagement Throughout the Solution Lifecycle</h2>
<div class="space-y-6">
<div class="card">
<div class="card-header">
<i class="fas fa-search"></i>
<h3>Assessment Phase</h3>
<!-- Solution Lifecycle Section -->
<div id="lifecycle" class="tab-content">
<h4>Engagement Throughout the Solution Lifecycle</h4>
<div class="grid-container">
<div class="card">
<div class="card-header">
<i class="fas fa-search"></i>
<h3>Assessment Phase</h3>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Survey development and feedback
<br><i class="fas fa-check text-blue-600 mr-2"></i> Agency interviews and needs analysis
<br><i class="fas fa-check text-blue-600 mr-2"></i> Solution co-design workshops
<br><i class="fas fa-check text-blue-600 mr-2"></i> Stakeholder review and prioritization
</ul>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Survey development and feedback
<br><i class="fas fa-check text-blue-600 mr-2"></i> Agency interviews and needs analysis
<br><i class="fas fa-check text-blue-600 mr-2"></i> Solution co-design workshops
<br><i class="fas fa-check text-blue-600 mr-2"></i> Stakeholder review and prioritization
</ul>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-cogs"></i>
<h3>Development Phase</h3>
<div class="card">
<div class="card-header">
<i class="fas fa-cogs"></i>
<h3>Development Phase</h3>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Regular stakeholder touchpoints
<br><i class="fas fa-check text-blue-600 mr-2"></i> Implementation team support
<br><i class="fas fa-check text-blue-600 mr-2"></i> Progress updates and feedback
<br><i class="fas fa-check text-blue-600 mr-2"></i> Training needs assessment
</ul>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Regular stakeholder touchpoints
<br><i class="fas fa-check text-blue-600 mr-2"></i> Implementation team support
<br><i class="fas fa-check text-blue-600 mr-2"></i> Progress updates and feedback
<br><i class="fas fa-check text-blue-600 mr-2"></i> Training needs assessment
</ul>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-rocket"></i>
<h3>Implementation Phase</h3>
<div class="card">
<div class="card-header">
<i class="fas fa-rocket"></i>
<h3>Implementation Phase</h3>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Solution deployment support
<br><i class="fas fa-check text-blue-600 mr-2"></i> Training and documentation
<br><i class="fas fa-check text-blue-600 mr-2"></i> User community building
<br><i class="fas fa-check text-blue-600 mr-2"></i> Impact assessment
</ul>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Solution deployment support
<br><i class="fas fa-check text-blue-600 mr-2"></i> Training and documentation
<br><i class="fas fa-check text-blue-600 mr-2"></i> User community building
<br><i class="fas fa-check text-blue-600 mr-2"></i> Impact assessment
</ul>
</div>
</div>
</div>
</div>

<!-- Resources Section -->
<div id="resources" class="tab-content">
<div class="content-section">
<h2 class="text-xl font-bold mb-6">Engagement Resources</h2>
<div class="grid-container">
<div class="card">
<div class="card-header">
<i class="fas fa-book"></i>
<h3>Tools & Templates</h3>
<!-- Resources Section -->
<div id="resources" class="tab-content">
<h4>Engagement Resources</h4>
<div class="grid-container">
<div class="card">
<div class="card-header">
<i class="fas fa-book"></i>
<h3>Tools & Templates</h3>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Solution Implementation Workflow Checklist
<br><i class="fas fa-check text-blue-600 mr-2"></i> Stakeholder Communication Templates
<br><i class="fas fa-check text-blue-600 mr-2"></i> Co-Design Activity Guides
<br><i class="fas fa-check text-blue-600 mr-2"></i> Impact Assessment Framework
</ul>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Solution Implementation Workflow Checklist
<br><i class="fas fa-check text-blue-600 mr-2"></i> Stakeholder Communication Templates
<br><i class="fas fa-check text-blue-600 mr-2"></i> Co-Design Activity Guides
<br><i class="fas fa-check text-blue-600 mr-2"></i> Impact Assessment Framework
</ul>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-graduation-cap"></i>
<h3>Training & Support</h3>
<div class="card">
<div class="card-header">
<i class="fas fa-graduation-cap"></i>
<h3>Training & Support</h3>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Co-Design Training Program
<br><i class="fas fa-check text-blue-600 mr-2"></i> Best Practices Documentation
<br><i class="fas fa-check text-blue-600 mr-2"></i> Implementation Team Guidance
<br><i class="fas fa-check text-blue-600 mr-2"></i> Facilitation Support
</ul>
</div>
<ul class="space-y-2">
<br><i class="fas fa-check text-blue-600 mr-2"></i> Co-Design Training Program
<br><i class="fas fa-check text-blue-600 mr-2"></i> Best Practices Documentation
<br><i class="fas fa-check text-blue-600 mr-2"></i> Implementation Team Guidance
<br><i class="fas fa-check text-blue-600 mr-2"></i> Facilitation Support
</ul>
</div>
</div>
</div>
Expand Down Expand Up @@ -249,9 +240,8 @@ order: 2
</div>
</div>

<style>
<!-- JavaScript for card toggling -->
<script>
/* JavaScript for card toggling */
/**
* Toggles the expanded/collapsed state of a card
* @param {HTMLElement} header - The header element that was clicked
Expand All @@ -273,8 +263,10 @@ function toggleCard(header) {
}
});
}
</script>

/* Base styles from Overview page */
<style>
/* Base styles from Overview page */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
Expand Down Expand Up @@ -464,7 +456,7 @@ body {
#philosophy-tab:checked ~ .tabs-content #philosophy,
#lifecycle-tab:checked ~ .tabs-content #lifecycle,
#resources-tab:checked ~ .tabs-content #resources {
display: block !important;
display: block !important; /* Using !important to override any other display rules */
}

/* Style for active tab label */
Expand Down Expand Up @@ -614,10 +606,6 @@ h2, h3, h4 {
display: none;
}

.tab-content.active {
display: block;
}

/* List styles */
ul {
list-style: none;
Expand Down

0 comments on commit 1d8413e

Please sign in to comment.