+
diff --git a/project/component-library/src/app/card/card.component.scss b/project/component-library/src/app/card/card.component.scss
new file mode 100644
index 00000000..4b77d11b
--- /dev/null
+++ b/project/component-library/src/app/card/card.component.scss
@@ -0,0 +1,203 @@
+// Variables
+$primary-color: #4f46e5;
+$primary-darker: #4338ca;
+$text-color: #4b5563;
+$light-bg: #f9fafb;
+$white: #fff;
+$gradient-start: #6366f1;
+$gradient-end: #8b5cf6;
+$border-radius: 12px;
+$transition-standard: 0.3s ease;
+
+// Base Card Styling
+.card.clean {
+ border-radius: $border-radius;
+ overflow: hidden;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+ transition:
+ transform $transition-standard,
+ box-shadow $transition-standard;
+ margin-bottom: 1.5rem;
+ background-color: $white;
+ max-width: 400px;
+ animation: cardFadeIn 0.5s ease-out forwards;
+
+ &:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 12px 28px rgba(0, 0, 0, 0.048);
+
+ .card-image-container img {
+ transform: scale(1.05);
+ }
+
+ .card-overlay-caption {
+ transform: translateY(0);
+ opacity: 1;
+ }
+ }
+}
+
+// Image Container
+.card-image-container {
+ position: relative;
+ height: 220px;
+ background: linear-gradient(45deg, $gradient-start, $gradient-end);
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.5s ease;
+ }
+}
+
+// Badge Styling
+.card-badge-wrapper {
+ position: absolute;
+ top: 1rem;
+ left: 1rem;
+ z-index: 10;
+}
+
+.feature-badge {
+ background-color: rgba($white, 0.85);
+ color: $primary-color;
+ font-size: 0.7rem;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+ padding: 0.35rem 0.8rem;
+ border-radius: 20px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(4px);
+}
+
+// Caption Overlay
+.card-overlay-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(240, 240, 240, 0.6) 100%);
+ padding: 2rem 1.5rem 1.25rem;
+ transform: translateY(35%);
+ opacity: 0.9;
+ transition:
+ transform $transition-standard,
+ opacity $transition-standard;
+}
+
+.caption-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+}
+
+// Card Title and Subtitle
+.card-title {
+ margin-bottom: 0.3rem;
+ font-size: 1.25rem;
+ font-weight: 600;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.card-subtitle {
+ font-size: 0.85rem;
+ font-weight: 400;
+ opacity: 0.9;
+ margin-bottom: 0;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+// Card Body
+.card-body {
+ padding: 1.5rem;
+
+ .card-text {
+ color: $text-color;
+ font-size: 0.925rem;
+ line-height: 1.6;
+ margin-bottom: 0;
+ }
+}
+
+// Card Footer
+.card-footer {
+ padding: 1rem 1.5rem;
+ background-color: $light-bg;
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
+
+ .footer-content {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+// Read More Link
+.read-more-link {
+ color: $primary-color;
+ font-weight: 600;
+ font-size: 0.875rem;
+ text-decoration: none;
+ position: relative;
+ transition: color 0.2s ease;
+
+ &:after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0;
+ height: 2px;
+ background-color: $primary-color;
+ transition: width $transition-standard;
+ }
+
+ &:hover {
+ color: $primary-darker;
+
+ &:after {
+ width: 100%;
+ }
+ }
+}
+
+// Footer Actions
+.footer-actions {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.action-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ border-radius: 50%;
+ background-color: $white;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
+ transition: all 0.2s ease;
+ cursor: pointer;
+
+ &:hover {
+ background-color: $primary-color;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba($primary-color, 0.25);
+ }
+}
+
+// Animation
+@keyframes cardFadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
diff --git a/project/component-library/src/app/card/card.component.spec.ts b/project/component-library/src/app/card/card.component.spec.ts
new file mode 100644
index 00000000..8208f7c3
--- /dev/null
+++ b/project/component-library/src/app/card/card.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+ let component: CardComponent;
+ let fixture: ComponentFixture
+ ![]()
+
+
+
+
+
+ {{ badgeText }}
+
+
+
+
+
+
++ {{ bodyText }} +
+
+
diff --git a/project/component-library/src/app/header/header.component.scss b/project/component-library/src/app/header/header.component.scss
new file mode 100644
index 00000000..a1b812da
--- /dev/null
+++ b/project/component-library/src/app/header/header.component.scss
@@ -0,0 +1,141 @@
+.header {
+ display: flex;
+ width: 100%;
+ padding: 8px;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 0.7px solid rgba(122, 122, 122, 0.2);
+
+ .logo {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+
+ img {
+ width: 35px;
+ height: 35px;
+ margin: 5px;
+ }
+
+ span {
+ font-weight: bold;
+ font-size: large;
+ }
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2.6rem;
+ color: rgba(65, 63, 63, 0.84);
+ font-size: 0.9rem;
+
+ .link-item {
+ .link {
+ position: relative;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .nav-buttons {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+
+ .signup-btn {
+ $primary-color: #fff;
+ $secondary-color: #002152;
+ $hover-color: #eceff2;
+ $arrow-stroke: 2px; // Example value
+ $arrow-width: 16px; // Example value
+
+ box-sizing: border-box;
+ border: 0;
+ border-radius: 50px;
+ color: $secondary-color;
+ padding: 1em 1.8em;
+ background: $primary-color;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.6em;
+ font-weight: bold;
+ transition: background 0.2s;
+
+ .arrow-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .arrow {
+ margin-top: 1px;
+ width: $arrow-width;
+ height: $arrow-stroke;
+ background: $primary-color;
+ position: relative;
+ transition: 0.2s;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: -3px;
+ right: 3px;
+ padding: 3px;
+ transform: rotate(-45deg);
+ border: solid $secondary-color;
+ border-width: 0 $arrow-stroke $arrow-stroke 0;
+ transition: 0.2s;
+ }
+ }
+
+ &:hover {
+ background-color: $hover-color;
+
+ .arrow {
+ background: $secondary-color;
+
+ &::before {
+ right: 0;
+ }
+ }
+ }
+ }
+ }
+
+ .avatar {
+ $diameter: 2.5rem;
+ $nav-bg: #ffffff;
+ $nav-shadow: rgba(0, 0, 0, 0.1);
+ $nav-gray: #e0e0e0;
+ $font-family-main: 'Inter', sans-serif;
+
+ display: inline-block;
+ position: relative;
+ text-rendering: optimizeLegibility;
+
+ .user {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: $diameter;
+ height: $diameter;
+ background: black;
+ border: 1px solid black;
+ border-radius: 50%; // Circular shape
+ cursor: pointer;
+ overflow: hidden; // Ensures image stays within circle
+ transition: all 0.1s ease-in-out;
+ outline: 0.125em solid transparent;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ }
+ }
+ }
+}
diff --git a/project/component-library/src/app/header/header.component.spec.ts b/project/component-library/src/app/header/header.component.spec.ts
new file mode 100644
index 00000000..cf577957
--- /dev/null
+++ b/project/component-library/src/app/header/header.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+ let component: HeaderComponent;
+ let fixture: ComponentFixture
+ 
+ {{ title }}
+
+
+
+
+ {{ title }}
+
+
+
+
+
\ No newline at end of file
diff --git a/project/component-library/src/app/input/input.component.scss b/project/component-library/src/app/input/input.component.scss
new file mode 100644
index 00000000..e4f21fb3
--- /dev/null
+++ b/project/component-library/src/app/input/input.component.scss
@@ -0,0 +1,88 @@
+.input-group {
+ max-width: 190px;
+ display: flex;
+ flex-direction: column;
+
+ &.full-width {
+ max-width: 100%;
+ width: 100%;
+ }
+
+ .label {
+ margin-bottom: 0.3rem;
+ font-size: 0.9rem;
+ font-weight: bold;
+ color: #05060f99;
+ transition: color 0.3s cubic-bezier(0.25, 0.01, 0.25, 1);
+ }
+
+ .input {
+ width: 100%;
+ height: 44px;
+ background-color: #05060f0a;
+ border-radius: 0.5rem;
+ padding: 0 1rem;
+ border: 2px solid transparent;
+ font-size: 1rem;
+ transition: border-color 0.3s cubic-bezier(0.25, 0.01, 0.25, 1),
+ color 0.3s cubic-bezier(0.25, 0.01, 0.25, 1),
+ background 0.2s cubic-bezier(0.25, 0.01, 0.25, 1);
+
+ &:hover,
+ &:focus {
+ outline: none;
+ border-color: #05060f;
+ }
+
+ &:hover ~ .label,
+ &:focus ~ .label {
+ color: #05060fc2;
+ }
+
+ &.outline {
+ background-color: white;
+ border: 2px solid #ccc;
+ }
+
+ &.filled {
+ background-color: #f2f2f2;
+ border: none;
+ }
+
+ &.small {
+ height: 30px;
+ font-size: 0.8rem;
+ }
+
+ &.medium {
+ height: 38px;
+ font-size: 1rem;
+ }
+
+ &.large {
+ height: 46px;
+ font-size: 1.2rem;
+ }
+
+ &.outline {
+ border: 2px solid #d1d5db;
+ background-color: white;
+ }
+
+ &.filled {
+ border: none;
+ background-color: #f3f4f6;
+ }
+
+ &.outline:hover,
+ &.filled:hover {
+ border-color: #9ca3af;
+ }
+
+ &.outline:focus,
+ &.filled:focus {
+ border-color: #2563eb;
+ }
+
+ }
+}
diff --git a/project/component-library/src/app/input/input.component.spec.ts b/project/component-library/src/app/input/input.component.spec.ts
new file mode 100644
index 00000000..9f178393
--- /dev/null
+++ b/project/component-library/src/app/input/input.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputComponent } from './input.component';
+
+describe('InputComponent', () => {
+ let component: InputComponent;
+ let fixture: ComponentFixture
+
+
\ No newline at end of file
diff --git a/project/component-library/src/app/modal/modal.component.scss b/project/component-library/src/app/modal/modal.component.scss
new file mode 100644
index 00000000..51a23772
--- /dev/null
+++ b/project/component-library/src/app/modal/modal.component.scss
@@ -0,0 +1,66 @@
+$modal-bg: rgb(255, 250, 250);
+$modal-border: rgb(206, 206, 206);
+$text-color: rgb(34, 34, 34);
+$text-light: rgb(51, 51, 51);
+$hover-bg-light: #ddd;
+
+.modal-card {
+ width: 420px;
+ height: fit-content;
+ background-color: $modal-bg;
+ border-radius: 10px;
+ border: 1px solid $modal-border;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding: 20px;
+ gap: 15px;
+ position: relative;
+ font-family: Arial, Helvetica, sans-serif;
+ box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.066);
+
+ .modal-heading {
+ font-size: 1.3rem;
+ color: $text-color;
+ font-weight: 800;
+ }
+
+ .modal-para {
+ font-size: 1rem;
+ font-weight: 400;
+ color: $text-light;
+ }
+
+ .button-wrapper {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ }
+
+ .exit-button {
+ position: absolute;
+ top: 17px;
+ right: 17px;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: transparent;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: $hover-bg-light;
+ color: white;
+ }
+
+ .svgIconCross {
+ height: 10px;
+ }
+ }
+}
diff --git a/project/component-library/src/app/modal/modal.component.spec.ts b/project/component-library/src/app/modal/modal.component.spec.ts
new file mode 100644
index 00000000..2d3f7a7a
--- /dev/null
+++ b/project/component-library/src/app/modal/modal.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+ let component: ModalComponent;
+ let fixture: ComponentFixture{{ title }}
++ {{ content }} +
+ + +
+
diff --git a/project/component-library/src/stories/button.component.stories.ts b/project/component-library/src/stories/button.component.stories.ts
new file mode 100644
index 00000000..4829772e
--- /dev/null
+++ b/project/component-library/src/stories/button.component.stories.ts
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { ButtonComponent } from '../app/button/button.component';
+
+const meta: Meta
+ # C4GT - Component Library
+
+ The C4GT initiative enables development and long term maintenance of open-source products (DPGs and beyond), driving population-scale social impact by creating pathways and an ecosystem for young talent to contribute to these products through an active community.
+
+
+
+
+
+ Code For GovTech 2025
+
+ 
+
+
+
+
+ +
+ The C4GT initiative enables development and long-term maintenance of open-source products (DPGs and beyond), driving population-scale social impact by creating pathways and an ecosystem for young talent to contribute to these products through an active community 🚀
+
+
+
+ While the DPG builder ecosystem has seen exciting growth, much of it is still fueled by government or philanthropic funding, which can limit product innovation and long-term sustainability. On the flip side, countless open-source contributors from universities, tech communities, and professional networks are ready to jump in and support DPGs but often hit roadblocks like low visibility, limited opportunities, and a lack of mentorship.
+ C4GT is here to bridge that gap! We're bringing together organizations—both builders and adopters—with contributors ranging from students to seasoned professionals. Our mission? To foster ongoing collaborations in the open-source community, enhancing the quality and effectiveness of contributions to drive impactful outcomes. Join us in making a difference! 💡✨
+
+
+
+ Learn more about C4GT on our wiki page 👉🏻{" "}
+
+ C4GT Wiki
+
+
+
+
+
+ 
+ No Preview
Sorry, but you either have no stories or none are selected somehow.
- Please check the Storybook config.
- Try reloading the page.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
- Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
- Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
- Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.