Skip to content

Commit

Permalink
add some more copy to the home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@tim-smart
tim-smart committed Dec 21, 2023
1 parent 00cf933 commit 5e4b9e3
Showing 1 changed file with 70 additions and 44 deletions.
114 changes: 70 additions & 44 deletions src/components/sections/screenshots.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,67 @@
'use client'
"use client"

import {useState} from 'react'
import {Glow} from '../layout/glow'
import {GlowingIcon} from '../atoms/glowing-icon'
import {Icon} from '../icons'
import Image from 'next/image'
import {Divider} from '../layout/divider'
import Image from "next/image"
import { useState } from "react"
import { Icon } from "../icons"
import { Divider } from "../layout/divider"
import { Glow } from "../layout/glow"

const screenshots = [
{
src: '/images/screenshots/placeholder.jpg',
alt: 'Short description of the screenshot',
src: "/images/screenshots/placeholder.jpg",
alt: "Short description of the screenshot",
width: 1000,
height: 633,
heading: 'Composable & Reusable',
text: 'Lorem ipsum dolor sit amet consectetur. Egestas maecenas sed egestas eget arcu parturient purus bibendum viverra. Sed molestie et commodo habitant purus orci habitasse facilisis. Est tellus integer odio elit proin ultricies tortor.'
heading: "Composable & Reusable",
text: "Everything in the Effect ecosystem is designed to work together. Building applications with Effect feels like playing with Lego."
},
{
src: '/images/screenshots/placeholder.jpg',
alt: 'Short description of the screenshot',
src: "/images/screenshots/placeholder.jpg",
alt: "Short description of the screenshot",
width: 1000,
height: 633,
heading: 'Maximum Type-Safety',
text: 'Lorem ipsum dolor sit amet consectetur. Egestas maecenas sed egestas eget arcu parturient purus bibendum viverra. Sed molestie et commodo habitant purus orci habitasse facilisis. Est tellus integer odio elit proin ultricies tortor.'
heading: "Maximum Type-Safety",
text: "Effect leverages the full power of Typescript to give you confidence in your code. From errors to managing dependencies — if it compiles, it works."
},
{
src: '/images/screenshots/placeholder.jpg',
alt: 'Short description of the screenshot',
src: "/images/screenshots/placeholder.jpg",
alt: "Short description of the screenshot",
width: 1000,
height: 633,
heading: 'Built-In Tracing (e.g. Otel)',
text: `Tracing in TypeScript applications involves tracking the execution flow and interactions in the codebase. It provides developers with insights into the application's behavior, helping identify performance bottlenecks, debug issues, and optimize code, enhancing the efficiency and reliability of TypeScript applications.`
heading: "Built-In Tracing (e.g. Otel)",
text: "The built-in support for tracing & metrics is first-class. Effect integrates seamlessly with OpenTelemetry to give you full visibility over your application's performance."
},
{
src: '/images/screenshots/placeholder.jpg',
alt: 'Short description of the screenshot',
src: "/images/screenshots/placeholder.jpg",
alt: "Short description of the screenshot",
width: 1000,
height: 633,
heading: 'Coherent Building Blocks',
text: 'Lorem ipsum dolor sit amet consectetur. Egestas maecenas sed egestas eget arcu parturient purus bibendum viverra. Sed molestie et commodo habitant purus orci habitasse facilisis. Est tellus integer odio elit proin ultricies tortor.'
heading: "Coherent Building Blocks",
text: "Lorem ipsum dolor sit amet consectetur. Egestas maecenas sed egestas eget arcu parturient purus bibendum viverra. Sed molestie et commodo habitant purus orci habitasse facilisis. Est tellus integer odio elit proin ultricies tortor."
},
{
src: '/images/screenshots/placeholder.jpg',
alt: 'Short description of the screenshot',
src: "/images/screenshots/placeholder.jpg",
alt: "Short description of the screenshot",
width: 1000,
height: 633,
heading: 'Extensive Ecosystem',
text: 'Lorem ipsum dolor sit amet consectetur. Egestas maecenas sed egestas eget arcu parturient purus bibendum viverra. Sed molestie et commodo habitant purus orci habitasse facilisis. Est tellus integer odio elit proin ultricies tortor.'
heading: "Extensive Ecosystem",
text: "Whether you're building a web app, a CLI, or a UI, Effect has you covered. The ecosystem contains many high-quality libraries that are crafted to work seamlessly together."
},
{
src: '/images/screenshots/placeholder.jpg',
alt: 'Short description of the screenshot',
src: "/images/screenshots/placeholder.jpg",
alt: "Short description of the screenshot",
width: 1000,
height: 633,
heading: 'Easy to refactor',
text: 'Lorem ipsum dolor sit amet consectetur. Egestas maecenas sed egestas eget arcu parturient purus bibendum viverra. Sed molestie et commodo habitant purus orci habitasse facilisis. Est tellus integer odio elit proin ultricies tortor.'
heading: "Easy to refactor",
text: "Lorem ipsum dolor sit amet consectetur. Egestas maecenas sed egestas eget arcu parturient purus bibendum viverra. Sed molestie et commodo habitant purus orci habitasse facilisis. Est tellus integer odio elit proin ultricies tortor."
},
{
src: '/images/screenshots/placeholder.jpg',
alt: 'Short description of the screenshot',
src: "/images/screenshots/placeholder.jpg",
alt: "Short description of the screenshot",
width: 1000,
height: 633,
heading: 'High Performance',
text: 'Lorem ipsum dolor sit amet consectetur. Egestas maecenas sed egestas eget arcu parturient purus bibendum viverra. Sed molestie et commodo habitant purus orci habitasse facilisis. Est tellus integer odio elit proin ultricies tortor.'
heading: "High Performance",
text: "Effect makes it easy to create high-performance applications. Structured concurrency, async primitives, and a powerful runtime make writing fast code simple."
}
]

Expand All @@ -72,7 +71,9 @@ export const Screenshots = () => {
<section className="relative">
<Glow direction="down" />
<div className="w-full max-w-screen-xl mx-auto px-4 sm:px-8 lg:px-16 pt-32 pb-24">
<h2 className="font-display text-2xl sm:text-3xl lg:text-4xl text-white text-center mb-16">Effect gives you new Superpowers</h2>
<h2 className="font-display text-2xl sm:text-3xl lg:text-4xl text-white text-center mb-16">
Effect gives you new Superpowers
</h2>
<div className="grid grid-cols-1 md:grid-cols-2">
<div className="hidden md:flex flex-col items-center gap-3">
<div className="relative p-px overflow-hidden rounded-[2rem] bg-gradient-to-br from-zinc-700 to-zinc-800">
Expand All @@ -88,22 +89,41 @@ export const Screenshots = () => {
</div>
</div>
</div>
<p className="text-sm text-zinc-500">{screenshots[currentIndex].alt}</p>
<p className="text-sm text-zinc-500">
{screenshots[currentIndex].alt}
</p>
</div>
<div className="md:pl-16 relative space-y-6">
{screenshots.map(({heading, text}, index) => (
{screenshots.map(({ heading, text }, index) => (
<div
key={index}
onClick={() => setCurrentIndex(index)}
className={`rounded-2xl p-6 ${
index === currentIndex ? 'bg-gradient-to-br from-zinc-800 to-zinc-900' : 'py-0 bg-transparent cursor-pointer'
index === currentIndex
? "bg-gradient-to-br from-zinc-800 to-zinc-900"
: "py-0 bg-transparent cursor-pointer"
}`}
>
<div className="flex items-center">
<h3 className={`grow font-display text-xl ${index === currentIndex ? 'text-white' : ''}`}>{heading}</h3>
<Icon name="chevron-right" className={`h-5 ${index === currentIndex ? 'rotate-90' : 'text-zinc-600'}`} />
<h3
className={`grow font-display text-xl ${
index === currentIndex ? "text-white" : ""
}`}
>
{heading}
</h3>
<Icon
name="chevron-right"
className={`h-5 ${
index === currentIndex ? "rotate-90" : "text-zinc-600"
}`}
/>
</div>
<div className={`${index === currentIndex ? 'flex md:hidden' : 'hidden'} my-6 flex-col items-center gap-3`}>
<div
className={`${
index === currentIndex ? "flex md:hidden" : "hidden"
} my-6 flex-col items-center gap-3`}
>
<div className="relative p-px overflow-hidden rounded-[2rem] bg-gradient-to-br from-zinc-700 to-zinc-800">
<div className="rounded-[31px] overflow-hidden p-1.5 bg-gradient-to-br from-zinc-900 to-zinc-950">
<div className="rounded-[25px] border border-zinc-700 overflow-hidden">
Expand All @@ -117,9 +137,15 @@ export const Screenshots = () => {
</div>
</div>
</div>
<p className="text-sm text-zinc-500">{screenshots[currentIndex].alt}</p>
<p className="text-sm text-zinc-500">
{screenshots[currentIndex].alt}
</p>
</div>
<p className={`${index === currentIndex ? 'mt-3' : 'sr-only'}`}>{text}</p>
<p
className={`${index === currentIndex ? "mt-3" : "sr-only"}`}
>
{text}
</p>
</div>
))}
</div>
Expand Down

0 comments on commit 5e4b9e3

Please sign in to comment.