;
+ return (
+
+
+
+
+
+
-
-
+
);
- }
-
- return ;
- },
- pre(props) {
- if (!isValidElement(props.children)) {
- return ;
- }
- const language =
- (isValidElement(props.children) &&
- props.children?.props.className?.replace(
- 'language-',
- '',
- )) ||
- '';
-
- return (
-
- Codex
+
+ );
+ }
+
+ const muxMatch = props.href?.match(muxPattern);
+ if (muxMatch) {
+ return (
+
+
- {children}
-
- ),
- 'demo-iframe': DemoIframe,
- a(props) {
- if (props.hasOwnProperty('data-footnote-ref')) {
- return [{props.children}];
- }
- if (props.children !== '!video') {
return ;
- }
+ },
+ pre(props) {
+ if (!isValidElement(props.children)) {
+ return ;
+ }
+ const language =
+ (isValidElement(props.children) &&
+ props.children?.props.className?.replace(
+ 'language-',
+ '',
+ )) ||
+ '';
- const ytMatch = props.href?.match(youtubePattern);
- if (ytMatch) {
return (
-
-
-
+
+
+ );
+}
+
+function PostCard({ post }: { post: EssaysIndexPost }) {
+ return (
+
+
+ {duration}
+
+ {authors.map((author) => (
+ 
+ ))}
+
+ {authors.map(authorFirstName).join(' & ')}
+
+ 
+
+ )}
+ {post.summary}
+ )} +
+ {post.thumbnail && (
+
+
+
+
+ )}
+
+
+ {post.title}
+
+ {post.summary && (
+
+ {post.summary}
+ )} +
-
-
-
Essays
+
+
);
diff --git a/client/www/pages/examples/[slug].tsx b/client/www/pages/examples/[slug].tsx
index 146ab86793..4eb12ee8e6 100644
--- a/client/www/pages/examples/[slug].tsx
+++ b/client/www/pages/examples/[slug].tsx
@@ -1,12 +1,7 @@
import Link from 'next/link';
import Head from 'next/head';
-import { Button } from '@/components/ui';
-import {
- LandingFooter,
- LandingContainer,
- MainNav,
- Section,
-} from '@/components/marketingUi';
+import { MainNav } from '@/components/marketingUi';
+import { TopWash } from '@/components/new-landing/TopWash';
import ReactMarkdown, { Components } from 'react-markdown';
import { Fence } from '@/components/ui';
import rehypeRaw from 'rehype-raw';
@@ -21,29 +16,34 @@ import {
getExampleAppBySlug,
} from '@/lib/examples/server';
import RatingBox from '@/components/docs/RatingBox';
+import { Footer } from '@/components/new-landing/Footer';
+
+const buttonVariants = {
+ cta: 'border border-transparent bg-orange-600 text-white hover:bg-orange-700',
+ secondary: 'border border-gray-200 bg-white text-gray-700 hover:bg-gray-50',
+};
function ActionButtons({ app }: { app: ExampleApp }) {
const { youtubeVideoId, githubUrl } = app;
const youtubeUrl = !youtubeVideoId
? null
: `https://www.youtube.com/watch?v=${youtubeVideoId}`;
- const githubVariant = !youtubeVideoId ? 'cta' : 'secondary';
- const githubSize = !youtubeVideoId ? 'normal' : 'mini';
return (
<>
{!youtubeUrl ? null : (
-
+
)}
-
+
);
}
@@ -56,7 +56,7 @@ function Content({ content }: { content: string }) {
components={
{
p: ({ children }) => (
-
+
-
+
-
- RSS Feed
+
- {posts
- .filter(({ isDraft }) => !isDraft)
- .map(({ title, slug, date, authors }, idx) => {
- return (
- Essays
-
- );
- })}
+
+ {hero &&
-
-
-
- - {title} -
-
-
- {authors.map((author, idx) => (
-
- {author.name}
- {idx !== authors.length - 1 ? ', ' : ''}
-
- ))}
-
- ·
- {format(
- parse(date, 'yyyy-MM-dd', new Date()),
- 'MMM do, yyyy',
- )}
-
-
+
+
+
+
+
+ {rest.map((post) => (
+
+
+
{children}
),
@@ -73,11 +73,11 @@ function Content({ content }: { content: string }) {
const ytMatch = props.href?.match(youtubePattern);
if (ytMatch) {
return (
-
+
@@ -101,6 +101,7 @@ function Content({ content }: { content: string }) {
-
-
+
+
+
+
{pageTitle}
-
+
);
};
diff --git a/client/www/pages/examples/index.tsx b/client/www/pages/examples/index.tsx
index 9de545ade8..c70144c994 100644
--- a/client/www/pages/examples/index.tsx
+++ b/client/www/pages/examples/index.tsx
@@ -1,22 +1,28 @@
import Head from 'next/head';
import { useRouter } from 'next/router';
-import { Button } from '@/components/ui';
import { AppMetadata, webMetas, mobileMetas } from '@/lib/examples/data';
+import { MainNav } from '@/components/marketingUi';
+import { Footer } from '@/components/new-landing/Footer';
+import { Section } from '@/components/new-landing/Section';
+import { TopWash } from '@/components/new-landing/TopWash';
+import { AnimateIn } from '@/components/new-landing/AnimateIn';
import {
- LandingFooter,
- LandingContainer,
- MainNav,
- Section,
- H2,
- H3,
-} from '@/components/marketingUi';
+ SectionTitle,
+ SectionSubtitle,
+ SmallButton,
+} from '@/components/new-landing/typography';
+import Link from 'next/link';
+import clsx from 'clsx';
+import { BrowserChrome } from '@/components/BrowserChrome';
function LeftColumn({ app }: { app: AppMetadata }) {
return (
-
);
@@ -158,18 +152,18 @@ const ExampleAppPage = ({ app }: { app: ExampleApp }) => {
const { title } = app;
const pageTitle = `${title} | InstantDB Examples`;
return (
-
-
-
- {title}
-
-
-
+
+
- {shortDescription}
-
-
-
-
-
-
+
- What did you think of this example? Are there any other apps you'd
- like to see implemented with InstantDB? Let us know and we'll do our
- best to add it!
-
- + {title} +
+{shortDescription}
+
+
+
+
+ What did you think of this example? Are there any other apps you'd
+ like to see implemented with InstantDB? Let us know and we'll do our
+ best to add it!
+
+
+
+
{/* Header */}
-
- Use setting
-
- );
-}
-
-const GlowBackground = ({ children }: PropsWithChildren) => (
- {
- setShowCopySuccess(true);
- setTimeout(() => setShowCopySuccess(false), 2000);
- }}
- >
-
- );
-}
-
-function LandingHero() {
- return (
-
- clsx(
- 'relative z-10 translate-x-1 px-5 py-2 outline-hidden last:translate-x-0',
- className,
- selected ? 'bg-prism-dark z-20' : 'bg-prism',
- )
- }
- >
- {children}
-
- );
-};
-
-function LandingCoreFeatures() {
- const isHydrated = useIsHydrated();
- return (
-
{app.title}
++ {app.title} +
{app.linesOfCode} lines of code
@@ -48,32 +54,25 @@ function LeftColumn({ app }: { app: AppMetadata }) { function RightColumn({ app }: { app: AppMetadata }) { return ( -
+
-
+ 
-
{/* Buttons */}
-
-
);
@@ -92,15 +91,15 @@ function TabToggle({
onTabChange: (tab: string) => void;
}) {
return (
-
+
-
{tabs.map((tab) => (
-
-
-);
-
-const ActiveSessionsCallout = () => {
- const { isLoading, error, data } = useTotalSessionsCount({
- refreshSeconds: 3,
- });
- const height = 38;
-
- if (isLoading || error || data <= 0) {
- return ;
- }
-
- return (
- {children}
-
-
- );
-};
-
-function CreateInstantApp() {
- const [showCopySuccess, setShowCopySuccess] = useState(false);
- const command = 'npx create-instant-app';
-
- return (
- sessions are connected on Instant right now
-
-
-
- {showCopySuccess ? (
-
-
- {command}
-
-
-
-
-
-
- );
-}
-
-function LandingProblemStatement() {
- return (
-
-
- Write your frontend and we handle the rest
-
-
- - Instant is the easy to use backend for your frontend. With - Instant you can build delightful apps in less than 10 minutes. -
-
-
-
-
-
- 
- Backed by Y Combinator
-
-
- Backed by Y Combinator
-
-
-
-
-
-
- );
-}
-
-function LandingCore() {
- return (
-
-
-
-
-
-
- Instant is a batteries included client-side database
-
-
- - To build an app you write two kinds of code. The business logic - that solves your specific problem, and the generic stuff that - most apps have to take care of: authenticating users, making - queries, running permissions, uploading files, and executing - transactions. -
-- The generic stuff is critical to get right, full of edge cases, - and also not the differentiating factor for your app — unless - they’re broken -
-If all this work isn’t differentiating, why work on it?
-- - Instant gives you a database with queries, transactions, auth, - permissions, storage, real-time and offline support. All in a - simple SDK you can use directly in the browser. - -
-
- Here we implement chat using three functions:{' '}
-
- `init`
-
- ,{' '}
-
- `useQuery`
-
- , and{' '}
-
- `transact`
-
-
-
-
-
-
-
-
-
- );
-}
-
-function LandingMulti() {
- return (
-
-
-
-
- Real-time by default
-
-
- - The best apps today have a common feature set. Every interaction - happens instantly, you rarely see loading screens, collaboration - is easy and delightful, and the app still works when offline.{' '} - - When you use Instant, you get these features for free - - . -
-
-
-
-
+
+
);
}
-const ThemedTab = ({
- children,
+function LandingBand({
+ id,
className,
-}: PropsWithChildren & { className?: string }) => {
- return (
-
-
-
-
- Built for humans and agents
-
-
- - When we started building Instant we wanted something great for - builders. We wanted to offer a generous free tier where projects - aren't limited or paused. To make this work we built Instant to be - multi-tenant.{' '} - - This means you can spin up a new database in less than 100ms. - -
-- Turns out when you make something great for humans, it also works - great for agents. Combine a multi-tenant database with a platform - SDK and you have infrastructure that lets an agent have a backend - for every chat. -
-- We wrote an essay to go deeper on what we mean. If this interests - you and your team we'd love to chat. -
-
-
-
-
-
-
-
-
- );
-}
-
-function Testimonial({
- blurb,
- person,
- role,
- photo,
+ fadeHeightClass,
+ background,
+ children,
}: {
- blurb: string;
- person: string;
- role: string;
- photo: string;
+ id?: string;
+ className: string;
+ fadeHeightClass: string;
+ background?: ReactNode;
+ children: ReactNode;
}) {
return (
-
-
-
-
-
-
-
-
-
-
- Instant Updates
-- When apps are at their best, every change a user make should - reflect instantly. There should be few spinners, loading states, - or refresh buttons. -
- -- To do this today, you write custom code for endpoints, logic to - apply optimistic updates, and to handle rollbacks. -
- -
- Databases already know how to apply changes and handle
- rollbacks. With Instant, you write{' '}
- `transact`,
- and optimistic updates are handled for you.
-
- {isHydrated ? (
-
-
-
- Instant
-
-
- Not Instant
-
-
-
-
-
-
-
-
-
- ) : null}
-
-
-
-
-
-
-
- Multiplayer
-- Users seek collaborative experiences and sync across devices. To - get this right, you need to set up sockets, cache and invalidate - queries, and set up permission filters. -
- -- Instant takes inspiration from systems like Figma’s LiveGraph - and Linear’s sync. We built the infrastructure that listens to - transactions, and updates relevant queries. -
-
-
-
-
- Offline Mode
-- Users want your app to work even when they're offline. Not only - does this make your app available everywhere, it makes your app - feel faster. The first time your app loads, users see a loading - screen. Every load afterwards gets satisfied by the local cache. -
-- To support this, you need a way to apply changes locally, - persist to disk, and reconcile when users come back online.{' '} -
-- Instant comes with this logic baked in: the local database knows - what is committed to the server and what is pending. No need to - deal with queues. -
-
-
-
-
- );
-}
-
-function LandingTestimonials() {
- return (
- - "{blurb}" -
-
-
-
- 
-
-
-
- {person}
- {role}
-
-
- );
-}
-
-const angels = [
- { name: 'James Tamplin', role: 'CEO of Firebase' },
- { name: 'Paul Graham', role: 'Co-Founder of YCombinator' },
- { name: 'Karri Saarinen', role: 'CEO of Linear' },
- { name: 'Amjad Masad', role: 'CEO of Replit' },
- { name: 'Zach Sims', role: 'CEO of Codecademy' },
- { name: 'Greg Brockman', role: 'Co-Founder of OpenAI' },
- { name: 'Jeff Dean', role: 'Chief Scientist of Google DeepMind' },
- {
- name: 'And 50+ technical founders',
- role: 'Sendbird, Panther, Segment and more',
- },
-];
-
-function AngelList() {
- return (
-
- {testimonials.map((t) => (
-
-
- {angels.map(({ name, role }) => {
- return (
-
-
- );
- })}
+
-
- {name}
- {role}
-
+ {background}
+
+
+
);
}
-function LandingTeam() {
+export default function Landing2026() {
return (
- {children}
-
-
-
-
-
-
- About the team
-
-
- - Instant is built by senior and staff engineers from Facebook and - Airbnb. We spent multiple years thinking deeply about this - problem and have built a product that we believe is the future - of application development. -
-- We're backed by YCombinator, SV Angel, and top investors like: -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- );
-}
-
-const SeeTheCodeButton = ({ href }: { href: string }) => (
-
- See the code
-
-
- {
- onChangeOnline(!state.online);
- }}
- className={clsx(
- 'flex w-36 cursor-pointer items-center space-x-2 rounded-sm px-2 py-2 shadow-xs transition-colors',
- state.online
- ? 'bg-emerald-500/10 text-emerald-700'
- : 'bg-gray-500/20 text-gray-900',
- )}
- >
-
-
- {(['queue1', 'queue2'] as const).map((q) => (
-
-
-
- Instant
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export function ExampleMultiPreview({
- numViews,
- appId,
- pathName,
-}: {
- numViews: number;
- appId: string;
- pathName: string;
-}) {
- return (
-
-
+
+
+
+
-
-
-
- Check-ins: {state[q].length + state.synced.length}
-
-
+
-
- );
-}
+
-export default function Landing2024() {
- return (
-
- {state[q].slice(-showQueueLength).map((item, i) => (
-
-
- {item.ts}
-
- ))}
+ }
+ >
+
+
- ))}
-
+
+
- {state[q].length > showQueueLength ? (
-
- {state[q].length - showQueueLength} more
-
- ) : null}
- {Array(numViews)
- .fill(null)
- .map((_, i) => (
-
- {appId ? (
-