Add link to open source repo

src/components/Attribution.tsx

@@ -49,6 +49,22 @@ const Attribution: React.FC = () => {
           <FaLinkedin />
         </a>
       </div>
+
+      <div className="repository-section">
+        <div className="repository-text">
+          Open Source Project
+        </div>
+        <a
+          href="https://github.com/DeDuckProject/epp-demo"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="View source code on GitHub"
+          className="repository-link"
+        >
+          <FaGithub />
+          <span>View on GitHub</span>
+        </a>
+      </div>
     </div>
   );
 };

src/index.css

@@ -318,6 +318,45 @@ input:focus {
   background-color: rgba(59, 130, 246, 0.1);
 }
 
+/* Repository section styles */
+.repository-section {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--soft-gray);
+}
+
+.repository-text {
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: 0.5rem;
+  color: var(--secondary-color);
+  font-size: 0.75rem;
+}
+
+.repository-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  color: var(--primary-color);
+  text-decoration: none;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.repository-link:hover {
+  color: #2563eb;
+  background-color: rgba(59, 130, 246, 0.1);
+  transform: translateY(-1px);
+}
+
+.repository-link svg {
+  font-size: 0.875rem;
+}
+
 @media (max-width: 768px) {
   .attribution-container {
     bottom: 1rem;
@@ -335,6 +374,25 @@ input:focus {
     height: 1.25rem;
     font-size: 0.9rem;
   }
+
+  .repository-section {
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .repository-text {
+    font-size: 0.7rem;
+  }
+
+  .repository-link {
+    font-size: 0.7rem;
+    gap: 0.2rem;
+    padding: 0.2rem 0.4rem;
+  }
+
+  .repository-link svg {
+    font-size: 0.8rem;
+  }
 }
 
 @media (prefers-color-scheme: light) {

tests/components/Attribution.test.tsx

@@ -53,6 +53,30 @@ describe('Attribution Component', () => {
       expect(linksContainer).toHaveClass('attribution-links');
       expect(firstLink).toHaveClass('attribution-link');
     });
+
+    it('should display the repository section', () => {
+      render(<Attribution />);
+
+      expect(screen.getByText('Open Source Project')).toBeInTheDocument();
+      expect(screen.getByText('View on GitHub')).toBeInTheDocument();
+
+      const repoLink = screen.getByLabelText('View source code on GitHub');
+      expect(repoLink).toBeInTheDocument();
+      expect(repoLink).toHaveAttribute('href', 'https://github.com/DeDuckProject/epp-demo');
+      expect(repoLink).toHaveClass('repository-link');
+    });
+
+    it('should style the repository section correctly', () => {
+      render(<Attribution />);
+
+      const repoSection = screen.getByText('Open Source Project').closest('.repository-section');
+      const repoText = screen.getByText('Open Source Project');
+      const repoLink = screen.getByLabelText('View source code on GitHub');
+
+      expect(repoSection).toHaveClass('repository-section');
+      expect(repoText).toHaveClass('repository-text');
+      expect(repoLink).toHaveClass('repository-link');
+    });
   });
 
   describe('when users interact with the attribution', () => {
@@ -74,6 +98,7 @@ describe('Attribution Component', () => {
       expect(screen.getByLabelText('LinkedIn profile')).toBeInTheDocument();
       expect(screen.getByLabelText('X (Twitter) profile')).toBeInTheDocument();
       expect(screen.getByLabelText('Bluesky profile')).toBeInTheDocument();
+      expect(screen.getByLabelText('View source code on GitHub')).toBeInTheDocument();
     });
   });
 
@@ -90,13 +115,20 @@ describe('Attribution Component', () => {
 
       // The story continues: They want to connect with the creator
       const socialLinks = screen.getAllByRole('link');
-      expect(socialLinks).toHaveLength(4);
+      expect(socialLinks).toHaveLength(5); // Updated to include repository link
 
-      // The story concludes: They can easily access the creator's profiles
+      // The story concludes: They can easily access the creator's profiles and the source code
       socialLinks.forEach(link => {
         expect(link).toBeVisible();
         expect(link.getAttribute('href')).toMatch(/^https:\/\//);
       });
+
+      // And they can find the open source repository
+      const repoText = screen.getByText('Open Source Project');
+      const repoLink = screen.getByLabelText('View source code on GitHub');
+      expect(repoText).toBeVisible();
+      expect(repoLink).toBeVisible();
+      expect(repoLink.getAttribute('href')).toBe('https://github.com/DeDuckProject/epp-demo');
     });
   });
 });