The source code for our eny.social landing page, which is mirrored in a different repository as part of the CI setup. eny.social
social-network eny local-first
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor(ValueCards): align correctly and add the correct placeholders

Sam Sauer 992c0af3 e15ff188

+56 -69
+56 -69
app/components/ValueCards.tsx
··· 1 1 export default function ValueCards() { 2 2 const cards = [ 3 3 { 4 - type: "text" as const, 4 + label: "", 5 + body: "", 6 + bg: "var(--tangerine-dream)", 7 + shape: "pill-right" as const, 8 + }, 9 + { 5 10 label: "Everything in one place", 6 11 body: "People, media, and services. One home.", 7 12 bg: "var(--cotton-candy)", 8 13 }, 9 - { type: "image" as const, gradient: "from-monte-carlo to-pacific" }, 10 14 { 11 - type: "text" as const, 12 15 label: "Secure by design", 13 16 body: "We don't sell your data. Period.", 14 17 bg: "var(--apricot-dream)", 15 18 shape: "star" as const, 16 19 }, 17 - { type: "image" as const, gradient: "from-cotton-candy to-tangerine" }, 18 20 { 19 - type: "text" as const, 20 21 label: "Made in Europe", 21 22 body: "Built, hosted, and governed in Europe.", 22 23 bg: "var(--monte-carlo)", 23 24 shape: "pill-left" as const, 25 + }, 26 + { 27 + label: "", 28 + body: "", 29 + bg: "var(--pacific-blue)", 30 + shape: "circle" as const, 24 31 }, 25 32 ]; 26 33 ··· 86 93 </svg> 87 94 88 95 <div className="relative"> 89 - <div className="hide-scrollbar flex gap-6 overflow-x-auto px-6 pb-4 md:px-12"> 90 - {cards.map((card, i) => 91 - card.type === "text" ? ( 96 + <div className="hide-scrollbar flex gap-6 overflow-x-auto pb-4 -ml-[130px] -mr-[130px] pl-0 pr-0 lg:justify-center items-center"> 97 + {cards.map((card, i) => ( 98 + <div 99 + key={i} 100 + className={`relative shrink-0 overflow-hidden ${ 101 + card.shape === "star" 102 + ? "min-w-[320px] max-w-[320px] aspect-square flex items-center justify-center p-8" 103 + : card.shape === "pill-left" 104 + ? "min-w-[280px] max-w-[320px] rounded-tl-[50%] rounded-bl-[50%] rounded-tr-3xl rounded-br-3xl pl-24 pr-4 py-8" 105 + : card.shape === "pill-right" 106 + ? "min-w-[280px] max-w-[320px] h-[260px] rounded-tr-[50%] rounded-br-[50%] rounded-tl-3xl rounded-bl-3xl p-8" 107 + : card.shape === "circle" 108 + ? "w-[260px] h-[260px] rounded-full" 109 + : "min-w-[280px] max-w-[320px] rounded-3xl p-8" 110 + }`} 111 + style={{ 112 + backgroundColor: card.bg, 113 + ...(card.shape === "star" 114 + ? { clipPath: "url(#star-clip)" } 115 + : {}), 116 + }} 117 + > 118 + {/* Grain overlay */} 92 119 <div 93 - key={i} 94 - className={`relative shrink-0 overflow-hidden ${ 95 - "shape" in card && card.shape === "star" 96 - ? "min-w-[320px] max-w-[320px] aspect-square flex items-center justify-center p-8" 97 - : "shape" in card && card.shape === "pill-left" 98 - ? "min-w-[280px] max-w-[320px] rounded-tl-[50%] rounded-bl-[50%] rounded-tr-3xl rounded-br-3xl pl-24 pr-4 py-8" 99 - : "min-w-[280px] max-w-[320px] rounded-3xl p-8" 100 - }`} 101 - style={{ 102 - backgroundColor: card.bg, 103 - ...("shape" in card && card.shape === "star" 104 - ? { clipPath: "url(#star-clip)" } 105 - : {}), 106 - }} 120 + className="pointer-events-none absolute inset-0" 121 + style={{ filter: "url(#grain)" }} 107 122 > 108 - {/* Grain overlay */} 123 + <div 124 + className="h-full w-full" 125 + style={{ backgroundColor: card.bg }} 126 + /> 127 + </div> 128 + {(card.label || card.body) && ( 109 129 <div 110 - className="pointer-events-none absolute inset-0" 111 - style={{ filter: "url(#grain)" }} 130 + className={`relative flex flex-col ${ 131 + card.shape === "star" 132 + ? "items-center text-center justify-center" 133 + : "h-full" 134 + }`} 112 135 > 113 - <div 114 - className="h-full w-full" 115 - style={{ backgroundColor: card.bg }} 116 - /> 117 - </div> 118 - <div className={`relative flex flex-col ${ 119 - "shape" in card && card.shape === "star" 120 - ? "items-center text-center justify-center" 121 - : "h-full" 122 - }`}> 123 - <span className={`headline-label mb-6 ${ 124 - "shape" in card && card.shape === "star" ? "" : "self-start" 125 - }`}> 136 + <span 137 + className={`headline-label mb-6 ${ 138 + card.shape === "star" ? "" : "self-start" 139 + }`} 140 + > 126 141 {card.label} 127 142 </span> 128 143 <p className="card-headline">{card.body}</p> 129 144 </div> 130 - </div> 131 - ) : ( 132 - <div 133 - key={i} 134 - className={`min-w-[220px] max-w-[260px] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-br ${card.gradient}`} 135 - > 136 - {/* Mood image placeholder with blob overlay */} 137 - <div className="relative h-64"> 138 - <svg 139 - className="absolute inset-0 h-full w-full opacity-30" 140 - viewBox="0 0 260 260" 141 - fill="none" 142 - > 143 - <path 144 - d="M180 130C180 170 160 210 130 220C100 230 60 200 40 160C20 120 50 60 90 40C130 20 180 70 180 130Z" 145 - fill="white" 146 - /> 147 - </svg> 148 - <div className="flex h-full items-center justify-center text-white/30"> 149 - <svg 150 - className="h-16 w-16" 151 - fill="currentColor" 152 - viewBox="0 0 24 24" 153 - > 154 - <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" /> 155 - </svg> 156 - </div> 157 - </div> 158 - </div> 159 - ) 160 - )} 145 + )} 146 + </div> 147 + ))} 161 148 </div> 162 149 </div> 163 150 </section>