Merge pull request #76 from rtCamp/feature/add-sections

Add sections for PPE and PAT

public/assets/styles/style.css

@@ -627,6 +627,8 @@ video {
 
 .container {
   width: 100%;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 @media (min-width: 640px) {
@@ -699,6 +701,10 @@ video {
   margin-bottom: 0.25rem;
 }
 
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -719,6 +725,14 @@ video {
   margin-left: 1rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -833,6 +847,10 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1019,6 +1037,10 @@ video {
   font-weight: 700;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .leading-tight {
   line-height: 1.25;
 }
@@ -1141,6 +1163,10 @@ video {
     max-width: 100%;
   }
 
+  .md\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
   .md\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

src/common/index.ejs

@@ -9,6 +9,7 @@
 <% } %>
 
 <div class="container-lg mx-auto py-8">
+    <h2 class="text-3xl font-bold text-left">PPE</h2>
     <div class="grid grid-cols-1  md:grid-cols-4 gap-6 mb-8 mt-8 w-full md:w-[60rem] mx-auto max-w-80 md:max-w-full">
         <%= renderCard('Analytics Tracking', '🔎', '/analytics') %>
         <%= renderCard('Embedded Content', '📽️', '/embedded-video') %>
@@ -27,5 +28,12 @@
         <%= renderCard('Frame Overlay', '🔲', '/frame-overlay') %>
     </div>
 </div>
+<div class="container-lg mx-auto py-8">
+    <h2 class="text-3xl font-bold text-left">PAT</h2>
+    <div class="grid grid-cols-1  md:grid-cols-4 gap-6 mb-8 mt-8 w-full md:w-[60rem] mx-auto max-w-80 md:max-w-full">
+        <%= renderCard('Privacy Sandcastle', '🔒', 'https://psat-pat-demos-home.dev/') %>
+        <%= renderCard('Casale Media Demo', '🛡️', 'https://privacysandboxdemos.domain-aaa.com/') %>
+    </div>
+</div>
 
 <%- include(commonPath + '/footer.ejs') %>

tailwind.config.js

@@ -6,6 +6,9 @@ module.exports = {
       'sans' : ['Open Sans', 'sans-serif'],
     },
     extend: {},
+    container: {
+      center: true,
+    },
   },
   plugins: [{
     tailwindcss: {},