[WIP] Add the skeleton of a "goals" page, as per the designs

Still quite a few TODOs in here, but it's starting to come together...
alphagov · Oct 11, 2024 · aa0a99d · aa0a99d
1 parent 45f3a3f
commit aa0a99d
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 0 deletions.
diff --git a/app/assets/images/landing_page/placeholder/960x640.png b/app/assets/images/landing_page/placeholder/960x640.png
diff --git a/app/views/landing_page/blocks/_image.html.erb b/app/views/landing_page/blocks/_image.html.erb
@@ -0,0 +1,5 @@
+<%= image_tag(
+      block.data["src"],
+      alt: block.data["alt"],
+      class: ("govuk-!-width-full" if block.data["theme"] == "full_width")
+    ) %>
diff --git a/lib/data/landing_page_content_items/goals.yaml b/lib/data/landing_page_content_items/goals.yaml
@@ -0,0 +1,99 @@
+blocks:
+  - type: govspeak
+    content: |
+      <p>TODO - breadcrumbs, heading, goal / tasks nav</p>
+  - type: hero
+    image:
+      alt: "Placeholder alt text"
+      sources:
+        desktop: "landing_page/placeholder/desktop.png"
+        desktop_2x: "landing_page/placeholder/desktop_2x.png"
+        mobile: "landing_page/placeholder/mobile.png"
+        mobile_2x: "landing_page/placeholder/mobile_2x.png"
+        tablet: "landing_page/placeholder/tablet.png"
+        tablet_2x: "landing_page/placeholder/tablet_2x.png"
+    hero_content:
+      blocks:
+        - type: govspeak
+          content: |
+            <h2>Government Goals</h2>
+            
+            <p>Culpa atque nostrum numquam eveniet. Cum exercitationem perferendis accusamus minima possimus dolor enim eius. Et est impedit vel voluptate sunt.</p>
+  - type: two_column_layout
+    theme: two_thirds_one_third
+    blocks:
+    - type: govspeak
+      content: |
+        <p>From: <a href="/number10">Prime Minister's Office, 10 Downing Street</a>
+        <p>Published 26 September 2024</p>
+        
+        <p><a href="https://www.youtube.com/watch?v=k7_dDHMG6bc">Watch a video about government goals</a></p>
+        
+        <p>Korem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus.</p>
+
+        <p>Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis. Suspendisse quis arcu sem. Aenean feugiat ex eu vestibulum vestibulum. Morbi a eleifend magna. Nam metus lacus, porttitor eu mauris a, blandit ultrices nibh. Mauris sit amet magna non ligula vestibulum eleifend. Nulla varius volutpat turpis sed lacinia. Nam eget mi in purus lobortis eleifend. Sed nec ante dictum sem condimentum ullamcorper quis venenatis nisi. Proin vitae facilisis nisi, ac posuere leo.</p>
+
+        <p>Nam pulvinar blandit velit, id condimentum diam faucibus at. Aliquam lacus nisi, sollicitudin at nisi nec, fermentum congue felis. Quisque mauris dolor, fringilla sed tincidunt ac, finibus non odio. Sed vitae mauris nec ante pretium finibus. Donec nisl neque, pharetra ac elit eu, faucibus aliquam ligula. Nullam dictum, tellus tincidunt tempor laoreet, nibh elit sollicitudin felis, eget feugiat sapien diam nec nisl. Aenean gravida turpis nisi, consequat dictum risus dapibus a. Duis felis ante, varius in neque eu, tempor suscipit sem. Maecenas ullamcorper gravida sem sit amet cursus. Etiam pulvinar purus vitae justo pharetra consequat. Mauris id mi ut arcu feugiat maximus. Mauris consequat tellus id tempus aliquet.</p>
+        
+        <h2>Goal 1: Playing sports at a grassroots level</h2>
+    # TODO - it would be nice if the two column layout didn't mandate a second column
+    - type: govspeak
+      content: ""
+  - type: two_column_layout
+    theme: two_thirds_one_third
+    blocks:
+      - type: image
+        theme: full_width
+        src: "landing_page/placeholder/960x640.png"
+        alt: "Placeholder image"
+      # TODO - it would be nice if the two column layout didn't mandate a second column
+      - type: govspeak
+        content: ""
+  - type: two_column_layout
+    theme: two_thirds_one_third
+    blocks:
+      - type: govspeak
+        content: |
+          <p>Korem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus.</p>
+          
+          <p>Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis. Suspendisse quis arcu sem. Aenean feugiat ex eu vestibulum vestibulum. Morbi a eleifend magna. Nam metus lacus, porttitor eu mauris a, blandit ultrices nibh. Mauris sit amet magna non ligula vestibulum eleifend. Nulla varius volutpat turpis sed lacinia. Nam eget mi in purus lobortis eleifend. Sed nec ante dictum sem condimentum ullamcorper quis venenatis nisi. Proin vitae facilisis nisi, ac posuere leo.</p>
+          
+          <p>Nam pulvinar blandit velit, id condimentum diam faucibus at. Aliquam lacus nisi, sollicitudin at nisi nec, fermentum congue felis. Quisque mauris dolor, fringilla sed tincidunt ac, finibus non odio. Sed vitae mauris nec ante pretium finibus. Donec nisl neque, pharetra ac elit eu, faucibus aliquam ligula. Nullam dictum, tellus tincidunt tempor laoreet, nibh elit sollicitudin felis, eget feugiat sapien diam nec nisl. Aenean gravida turpis nisi, consequat dictum risus dapibus a. Duis felis ante, varius in neque eu, tempor suscipit sem. Maecenas ullamcorper gravida sem sit amet cursus. Etiam pulvinar purus vitae justo pharetra consequat. Mauris id mi ut arcu feugiat maximus. Mauris consequat tellus id tempus aliquet.</p>
+      # TODO - it would be nice if the two column layout didn't mandate a second column
+      - type: govspeak
+        content: ""
+  # TODO: we need another theme for this hero image,
+  # so that the text is vertically centered instead of pinned to the bottom
+  - type: hero
+    image:
+      alt: "Placeholder alt text"
+      sources:
+        desktop: "landing_page/placeholder/desktop.png"
+        desktop_2x: "landing_page/placeholder/desktop_2x.png"
+        mobile: "landing_page/placeholder/mobile.png"
+        mobile_2x: "landing_page/placeholder/mobile_2x.png"
+        tablet: "landing_page/placeholder/tablet.png"
+        tablet_2x: "landing_page/placeholder/tablet_2x.png"
+    hero_content:
+      blocks:
+        - type: govspeak
+          content: |
+            <blockquote><p>Yorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis class.</p></blockquote>
+            <p>Corem ipsum dolor sit, 28 September 2024</p>
+  - type: two_column_layout
+    theme: two_thirds_one_third
+    blocks:
+      - type: govspeak
+        content: |
+          <p>Korem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus.</p>
+          
+          <p>Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis. Suspendisse quis arcu sem. Aenean feugiat ex eu vestibulum vestibulum. Morbi a eleifend magna. Nam metus lacus, porttitor eu mauris a, blandit ultrices nibh. Mauris sit amet magna non ligula vestibulum eleifend. Nulla varius volutpat turpis sed lacinia. Nam eget mi in purus lobortis eleifend. Sed nec ante dictum sem condimentum ullamcorper quis venenatis nisi. Proin vitae facilisis nisi, ac posuere leo.</p>
+          
+          <p>Nam pulvinar blandit velit, id condimentum diam faucibus at. Aliquam lacus nisi, sollicitudin at nisi nec, fermentum congue felis. Quisque mauris dolor, fringilla sed tincidunt ac, finibus non odio. Sed vitae mauris nec ante pretium finibus. Donec nisl neque, pharetra ac elit eu, faucibus aliquam ligula. Nullam dictum, tellus tincidunt tempor laoreet, nibh elit sollicitudin felis, eget feugiat sapien diam nec nisl. Aenean gravida turpis nisi, consequat dictum risus dapibus a. Duis felis ante, varius in neque eu, tempor suscipit sem. Maecenas ullamcorper gravida sem sit amet cursus. Etiam pulvinar purus vitae justo pharetra consequat. Mauris id mi ut arcu feugiat maximus. Mauris consequat tellus id tempus aliquet.</p>
+          
+          <h2>Dorem sit</h2>
+          
+          <p>TODO - social media links</p>
+      # TODO - it would be nice if the two column layout didn't mandate a second column
+      - type: govspeak
+        content: ""