-
Notifications
You must be signed in to change notification settings - Fork 307
feat: add AI section to homepage #2768
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
+872
−6
Merged
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
eb7f465
feat: add AI section to homepage
chenparnasa dcd4151
Refine AI section layout
chenparnasa 390b22e
refactor: AI section visuals
chenparnasa 2c099ba
refactor: AI section visuals and run format to pass CI
chenparnasa 2b5b5da
Update AI section title; add models and Compatibility scores to IDE t…
chenparnasa b373997
feat: added benchmark preview to AI section
chenparnasa 15320ca
New illustrations and benchmark section
chenparnasa 29a3336
Merge branch 'main' into feat-ai-section
HarshMN2345 60231ea
some fixes
HarshMN2345 19c89c3
error with build
HarshMN2345 73f989b
fix table and added realtime sync
HarshMN2345 3783e4d
opn in new tab instalkl skill
HarshMN2345 77cc5b6
Merge branch 'main' into feat-ai-section
HarshMN2345 2114133
fix table
HarshMN2345 3031890
format:
HarshMN2345 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
189 changes: 189 additions & 0 deletions
189
src/routes/(marketing)/(components)/(ai-animations)/mcp.svelte
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| <script lang="ts"> | ||
| import { isMobile } from '$lib/utils/is-mobile'; | ||
| import GridPaper from '../grid-paper.svelte'; | ||
| import { hover, inView } from 'motion'; | ||
| import { write, unwrite, type WriteAnimation } from '$lib/animations'; | ||
|
|
||
| let container: HTMLElement; | ||
| let typedText = $state(''); | ||
| let active = $state(false); | ||
| let currentAnimation: WriteAnimation | null = null; | ||
|
|
||
| const TYPED_MESSAGE = 'Add a password attribute'; | ||
|
|
||
| const codeLines = [ | ||
| { w: '60%' }, | ||
| { w: '45%', indent: true }, | ||
| { w: '0' }, | ||
| { w: '70%' }, | ||
| { w: '55%', indent: true }, | ||
| { w: '50%', indent: true }, | ||
| { w: '0' }, | ||
| { w: '65%' }, | ||
| { w: '0' }, | ||
| { w: '40%' }, | ||
| { w: '55%', indent: true } | ||
| ]; | ||
|
|
||
| $effect(() => { | ||
| hover(container, () => { | ||
| if (isMobile()) return; | ||
| active = true; | ||
| currentAnimation?.cancel(); | ||
| currentAnimation = write(TYPED_MESSAGE, (v) => (typedText = v), 500, typedText.length); | ||
| return () => { | ||
| active = false; | ||
| currentAnimation?.cancel(); | ||
| currentAnimation = unwrite( | ||
| typedText, | ||
| (v) => (typedText = v), | ||
| (typedText.length / TYPED_MESSAGE.length) * 500 | ||
| ); | ||
| }; | ||
| }); | ||
|
|
||
| inView( | ||
| container, | ||
| () => { | ||
| if (!isMobile()) return; | ||
| active = true; | ||
| currentAnimation?.cancel(); | ||
| currentAnimation = write( | ||
| TYPED_MESSAGE, | ||
| (v) => (typedText = v), | ||
| 500, | ||
| typedText.length | ||
| ); | ||
| return () => { | ||
| active = false; | ||
| currentAnimation?.cancel(); | ||
| currentAnimation = unwrite( | ||
| typedText, | ||
| (v) => (typedText = v), | ||
| (typedText.length / TYPED_MESSAGE.length) * 500 | ||
| ); | ||
| }; | ||
| }, | ||
| { amount: 'all' } | ||
| ); | ||
| }); | ||
| </script> | ||
|
|
||
| <div bind:this={container} class="relative flex h-56 flex-col overflow-hidden sm:h-72"> | ||
| <!-- IDE Window --> | ||
| <div | ||
| class="mx-5 mt-4 flex flex-1 flex-col overflow-hidden rounded-[1.25rem] bg-[#232325]/90 mask-b-from-70% mask-b-to-100% px-1 pb-1 backdrop-blur-md sm:mx-10 sm:mt-6" | ||
| > | ||
| <!-- Title bar --> | ||
| <div class="flex h-7 w-full items-center gap-1 pl-2"> | ||
| {#each Array(3) as _} | ||
| <div class="size-2 rounded-full bg-[#D9D9D9]"></div> | ||
| {/each} | ||
| </div> | ||
|
|
||
| <!-- Content: File tree + Code + Chat --> | ||
| <div class="flex flex-1 overflow-hidden rounded-2xl bg-[#19191C]"> | ||
| <!-- File tree hint --> | ||
| <div class="flex w-14 shrink-0 flex-col gap-2 border-r border-white/[0.04] px-2 pt-3"> | ||
| <!-- Folder --> | ||
| <div class="flex items-center gap-1"> | ||
| <div class="size-1.5 shrink-0 rounded-sm bg-white/10"></div> | ||
| <div class="h-1 w-full rounded-full bg-white/[0.08]"></div> | ||
| </div> | ||
| <!-- Nested file --> | ||
| <div class="flex items-center gap-1 pl-2"> | ||
| <div class="size-1 shrink-0 rounded-full bg-white/[0.06]"></div> | ||
| <div class="h-1 w-3/4 rounded-full bg-white/[0.06]"></div> | ||
| </div> | ||
| <!-- Nested file (active) --> | ||
| <div class="flex items-center gap-1 pl-2"> | ||
| <div class="size-1 shrink-0 rounded-full bg-white/10"></div> | ||
| <div class="h-1 w-full rounded-full bg-white/10"></div> | ||
| </div> | ||
| <!-- Nested file --> | ||
| <div class="flex items-center gap-1 pl-2"> | ||
| <div class="size-1 shrink-0 rounded-full bg-white/[0.06]"></div> | ||
| <div class="h-1 w-2/3 rounded-full bg-white/[0.06]"></div> | ||
| </div> | ||
| <!-- Folder --> | ||
| <div class="flex items-center gap-1"> | ||
| <div class="size-1.5 shrink-0 rounded-sm bg-white/10"></div> | ||
| <div class="h-1 w-4/5 rounded-full bg-white/[0.08]"></div> | ||
| </div> | ||
| <!-- Nested file --> | ||
| <div class="flex items-center gap-1 pl-2"> | ||
| <div class="size-1 shrink-0 rounded-full bg-white/[0.06]"></div> | ||
| <div class="h-1 w-3/5 rounded-full bg-white/[0.06]"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Code pane (hint lines) --> | ||
| <div class="flex flex-1 flex-col gap-[7px] px-3 pt-3 pb-2"> | ||
| {#each codeLines as line} | ||
| <div class="flex"> | ||
| {#if line.w !== '0'} | ||
| <div | ||
| class="h-1 rounded-full bg-white/[0.08] {line.indent ? 'ml-3' : ''}" | ||
| style:width={line.w} | ||
| ></div> | ||
| {:else} | ||
| <div class="h-1"></div> | ||
| {/if} | ||
| </div> | ||
| {/each} | ||
| </div> | ||
|
|
||
| <!-- Chat pane --> | ||
| <div | ||
| class="flex w-[42%] flex-col gap-2 border-l border-white/[0.04] px-3 py-3 tracking-normal" | ||
| style="font-family: 'Inter', sans-serif; font-size: 11px" | ||
| > | ||
| <!-- User message bubble --> | ||
| <span class="text-primary mt-1 w-fit rounded-md bg-white/[0.05] px-2.5 py-1" | ||
| >Create a collection for user profiles</span | ||
| > | ||
|
|
||
| <!-- AI response --> | ||
| <div class="text-secondary flex gap-2 leading-relaxed"> | ||
| <div class="mt-[6px] size-1.5 shrink-0 rounded-full bg-white/12"></div> | ||
| <span>Setting up collection with email and name attributes.</span> | ||
| </div> | ||
|
|
||
| <!-- Input field with send button --> | ||
| <div | ||
| class="mt-auto flex items-start gap-1 rounded-lg border border-white/[0.06] px-2 py-1.5" | ||
| > | ||
| <span class="min-h-[2lh] flex-1" | ||
| >{#if typedText}<span class="text-primary">{typedText}</span>{:else}<span | ||
| class="text-white/20">Ask anything...</span | ||
| >{/if}</span | ||
| > | ||
| <div | ||
| class="ml-auto flex size-4 shrink-0 items-center justify-center rounded transition-colors duration-500" | ||
| style="background: {active ? '#FD366E' : 'rgba(255,255,255,0.1)'}" | ||
| > | ||
| <svg | ||
| width="8" | ||
| height="8" | ||
| viewBox="0 0 8 8" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M4 7V1M4 1L1.5 3.5M4 1L6.5 3.5" | ||
| style="stroke: {active | ||
| ? '#ffffff' | ||
| : '#ADADB0'}; transition: stroke 0.5s ease" | ||
| stroke-width="1.2" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <GridPaper class="absolute inset-0 -z-10 bg-size-[calc(100%/11)] opacity-90" /> | ||
| </div> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.