polish FunInfo

src/components/FunInfo.astro

@@ -1,4 +1,7 @@
 ---
+import HeadingFlanked from "./HeadingFlanked.astro";
+import VenuePhotos from "./VenuePhotos.astro";
+
 const sections = [
 	[
 		"🎪",
@@ -8,7 +11,7 @@ const sections = [
 	[
 		"🏙️",
 		"Lovely Location",
-		"Right in Boston’s historic district, next to Faneuil Hall Marketplace and the Boston harbor.",
+		"Right in the heart of downtown Boston’s historic district, next to Faneuil Hall Marketplace, sitting in the Boston harbor.",
 	],
 	[
 		"🗣️",
@@ -23,45 +26,66 @@ const sections = [
 ];
 ---
 
-<ul class="secondary-info">
-	{
-		sections.map(([emoji, title, contents]) => (
-			<li class="item">
-				<h3>
-					<div class="emoji">{emoji}</div>
-					<div class="title">
-						{title.split(" ").map((word) => (
-							<div>{word}</div>
-						))}
-					</div>
-				</h3>
-				<div class="contents">{contents}</div>
-			</li>
-		))
-	}
-</ul>
+<div class="funInfo">
+	<HeadingFlanked id="experience">Event Highlights</HeadingFlanked>
+
+	<ul class="secondary-info">
+		{
+			sections.map(([emoji, title, contents]) => (
+				<li class="item">
+					<h3 class="section">
+						<div class="emoji">{emoji}</div>
+						<div class="title">
+							{title.split(" ").map((word) => (
+								<div>{word}</div>
+							))}
+						</div>
+					</h3>
+					<div class="contents">{contents}</div>
+				</li>
+			))
+		}
+	</ul>
+
+	<VenuePhotos />
+</div>
 
 <style>
+	.funInfo {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+	}
+
 	.secondary-info {
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
 		font-family: var(--fontFamilyHeading);
 		justify-content: space-between;
 		list-style: none;
-		margin: auto;
+		margin-top: -2rem;
 		max-width: var(--widthBodyFull);
 		padding: 0 var(--widthBodyPadding);
 		row-gap: 2rem;
 		text-align: center;
 		width: 100%;
 	}
 
+	.section {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
 	.emoji {
 		font-size: 3rem;
+		margin-right: 1rem;
 	}
 
 	.title {
+		line-height: var(--lineHeightBody);
 		font-size: var(--fontSizeH4);
 	}
 
@@ -73,6 +97,17 @@ const sections = [
 		line-height: var(--lineHeightSecondary);
 	}
 
+	@media (min-width: 0) {
+		.secondary-info {
+			justify-content: center;
+		}
+
+		.item {
+			max-width: calc(80% - 1.5rem);
+			padding: 0 0.25rem;
+		}
+	}
+
 	@media (min-width: 700px) {
 		.secondary-info {
 			justify-content: center;

src/components/VenuePhotos.astro

@@ -2,7 +2,6 @@
 import simonsTheaterLecture from "~/assets/photos/simons-theater-lecture.jpg";
 import simonsTheaterLobby from "~/assets/photos/simons-theatre-lobby.jpg";
 import BodyText from "./BodyText.astro";
-import HeadingFlanked from "./HeadingFlanked.astro";
 
 interface Props {
 	class?: string;
@@ -12,12 +11,13 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <div class="venue-photos">
+	<div class="title"><div class="emoji">🎥</div>The Simons IMAX Theater</div>
 	<img
 		alt="Audience view of the Simons Theater showing a giant screen and people seated in the movie theater seats. Two people are sitting on Q&A seats in front of the screen."
 		class="venue-photo"
 		src={simonsTheaterLecture.src}
 	/>
-	<BodyText>
+	<BodyText class="description">
 		Experience the tech conference with the most comfortable theater seats, the
 		best viewing angle, and the most spectacular IMAX screen.
 		<br />
@@ -26,18 +26,40 @@ const { class: className, ...rest } = Astro.props;
 </div>
 
 <style>
+	.title {
+		font-family: var(--fontFamilyHeading);
+
+		line-height: var(--lineHeightBody);
+		font-size: var(--fontSizeH3);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.emoji {
+		font-size: 3rem;
+		margin-right: 1rem;
+	}
+
 	.venue-photos {
 		align-items: center;
 		display: flex;
 		flex-direction: column;
-		gap: 1rem;
 		max-width: var(--widthBodyFull);
 		text-align: center;
 		width: 100%;
 	}
 
 	.venue-photo {
 		width: 100%;
+		margin-top: 0.5rem;
 		max-width: calc(100vw - var(--widthBodyPadding));
+		border-radius: 0.5rem;
+		border: 1px solid var(--colorBackdropOff);
+		box-shadow: 0 0 0.125rem var(--colorTextShadow);
+	}
+
+	.description {
+		margin-top: 1rem;
 	}
 </style>

src/pages/index.astro

@@ -8,7 +8,6 @@ import PrimaryHero from "~/components/PrimaryHero.astro";
 import PrimaryInfo from "~/components/PrimaryInfo.astro";
 import SpeakersContent from "~/components/SpeakersContent.astro";
 import Sponsors from "~/components/Sponsors.astro";
-import VenuePhotos from "~/components/VenuePhotos.astro";
 import ContentLayout from "~/layouts/ContentLayout.astro";
 ---
 
@@ -23,7 +22,6 @@ import ContentLayout from "~/layouts/ContentLayout.astro";
 			<Partners />
 			<Newsletter class="newsletter" />
 			<FunInfo />
-			<VenuePhotos />
 		</div>
 	</PrimaryContents>
 </ContentLayout>