home page complete

web/src/lib/components/jolly-roger/Feature.svelte

@@ -14,6 +14,10 @@
 </div>
 
 <style>
+ h3 {
+ color: var(--color-background-primary-100);
+ }
+
  p,
  h3 {
  margin-block: 24px;

web/src/lib/components/jolly-roger/Showcase.svelte

@@ -10,16 +10,16 @@
 </script>
 
 <div class="wrapper">
- <div>
+ <div class="image-wrapper">
  <a {href} target="_blank" rel="noreferrer"><img src={url(preview)} alt={name} /></a>
  </div>
  <div class="info-wrapper">
  <div class="info">
- <p><a {href} target="_blank" rel="noreferrer">{name}</a></p>
- <div>
- <p>{title}</p>
- <p>{description}</p>
- <p>
+ <p class="name"><a {href} target="_blank" rel="noreferrer">{name}</a></p>
+ <div class="card-content">
+ <p class="card-title">{title}</p>
+ <p class="card-description">{description}</p>
+ <p class="card-source">
  {#if source}
  Check the <a href={source} target="_blank" rel="noreferrer">source code</a>.
  {:else}Source code not yet available.{/if}
@@ -30,26 +30,68 @@
 </div>
 
 <style>
- p {
- margin-block: 24px;
- }
-
  .wrapper {
  display: flex;
+ overflow: hidden;
  flex-direction: column;
- align-items: center;
+ border-radius: 0.5rem;
+ box-shadow:
+ 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+ background-color: var(--color-background-base-200);
+ }
+
+ .image-wrapper {
+ flex-shrink: 0;
  }
 
- .wrapper img {
+ .image-wrapper img {
  object-fit: cover;
+ width: 100%;
+ height: 12rem;
  }
 
  .info-wrapper {
  display: flex;
+ padding: 1.5rem;
  flex-direction: column;
+ flex: 1 1 0%;
+ justify-content: space-between;
  }
 
  .info {
  flex: 1;
  }
+
+ .name {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ font-weight: 500;
+ }
+ .name a {
+ color: var(--color-background-primary);
+ }
+
+ .card-content {
+ display: block;
+ margin-top: 0.5rem;
+ }
+
+ .card-title {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ font-weight: 600;
+ }
+
+ .card-description,
+ .card-source {
+ margin-top: 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ }
+
+ .card-source a {
+ text-decoration: underline;
+ }
 </style>

web/src/routes/+page.svelte

@@ -43,13 +43,13 @@
 </section>
 
 <section class="bottom">
- <div>
- <h2>Showcase</h2>
- <p>
+ <div class="bottom-header">
+ <h2 class="bottom-header-title">Showcase</h2>
+ <p class="bottom-header-description">
  Here are examples of apps built using "{name}"
  </p>
  </div>
- <div>
+ <div class="showcase-list">
  <Showcase
  href="https://bleeps.art"
  preview="/images/featured/bleeps-preview-small.webp"
@@ -77,10 +77,10 @@
  />
  </div>
 
- <div>
+ <div class="features-wrapper">
  <h2>Features</h2>
- <div>
- <div>
+ <div class="features-list-wrapper">
+ <div class="features-list">
  <Feature title="All Included">
  This template include setup for smart contracts, indexer and frontend. All runs locally for the best-in-class
  developer experience.
@@ -140,6 +140,102 @@
  max-width: 1280px;
  }
 
+ .bottom-header {
+ text-align: center;
+ }
+
+ .bottom-header-title {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+ font-weight: 800;
+ letter-spacing: -0.025em;
+ }
+
+ @media (min-width: 640px) {
+ .bottom-header-title {
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+ }
+ }
+
+ .bottom-header-description {
+ margin-top: 0.75rem;
+ max-width: 42rem;
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ margin-inline: auto;
+ }
+
+ @media (min-width: 640px) {
+ .bottom-header-description {
+ margin-top: 1rem;
+ }
+ }
+
+ .showcase-list {
+ display: grid;
+ margin-top: 3rem;
+ gap: 1.25rem;
+ max-width: 32rem;
+ margin-inline: auto;
+ }
+
+ @media (min-width: 1024px) {
+ .showcase-list {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ max-width: none;
+ }
+ }
+
+ .features-wrapper {
+ padding-bottom: 1rem;
+ padding-top: 4rem;
+ }
+
+ .features-wrapper > h2 {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+ font-weight: 800;
+ letter-spacing: -0.025em;
+ }
+
+ @media (min-width: 640px) {
+ .features-wrapper > h2 {
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+ }
+ }
+
+ .features-list-wrapper {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ max-width: 36rem;
+ margin-inline: auto;
+ }
+
+ @media (min-width: 640px) {
+ .features-list-wrapper {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+ }
+
+ @media (min-width: 1024px) {
+ .features-list-wrapper {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ max-width: 1280px;
+ }
+ }
+
+ @media (min-width: 1024px) {
+ .features-list {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 2rem;
+ }
+ }
+
  section > img {
  margin-inline: auto;
  }