Skip to content

Commit 0d97bab

Browse files
adithyaakrishnaadithyaakrishna
committed
chore: other updates
1 parent 2812ab9 commit 0d97bab

File tree

4 files changed

+137
-77
lines changed

4 files changed

+137
-77
lines changed

‎apps/sim/app/(home)/components/features/components/features-preview.tsx‎

Lines changed: 58 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,9 @@ function WorkspacePreview({ activeTab, isActive }: { activeTab: number; isActive
141141

142142
const [expandedTab, setExpandedTab] = useState<number | null>(null)
143143
const [revealedRows, setRevealedRows] = useState(0)
144+
const prevTabRef = useRef(activeTab)
145+
const wasExpandedRef = useRef(false)
146+
const expandTransitionRef = useRef<'scale' | 'crossfade'>('scale')
144147

145148
const isMothership = activeTab === 0 && isActive
146149
const isExpandTab = activeTab >= 1 && activeTab <= 4 && isActive
@@ -186,17 +189,37 @@ function WorkspacePreview({ activeTab, isActive }: { activeTab: number; isActive
186189
}, [inView, isMothership])
187190

188191
useEffect(() => {
192+
const prevTab = prevTabRef.current
193+
const wasPrevExpanded = wasExpandedRef.current
194+
prevTabRef.current = activeTab
195+
189196
if (!isExpandTab || !showGrid) {
190197
if (!isExpandTab) {
198+
wasExpandedRef.current = false
191199
setExpandedTab(null)
192200
setRevealedRows(0)
193201
}
194202
return
195203
}
196-
setExpandedTab(null)
197-
setRevealedRows(0)
198-
const timer = setTimeout(() => setExpandedTab(activeTab), 300)
199-
return () => clearTimeout(timer)
204+
205+
const comingFromExpanded =
206+
wasPrevExpanded && prevTab >= 1 && prevTab <= 4 && prevTab !== activeTab
207+
208+
if (comingFromExpanded) {
209+
expandTransitionRef.current = 'crossfade'
210+
wasExpandedRef.current = true
211+
setRevealedRows(EXPAND_ROW_COUNTS[activeTab] ?? 10)
212+
setExpandedTab(activeTab)
213+
} else {
214+
expandTransitionRef.current = 'scale'
215+
setExpandedTab(null)
216+
setRevealedRows(0)
217+
const timer = setTimeout(() => {
218+
wasExpandedRef.current = true
219+
setExpandedTab(activeTab)
220+
}, 300)
221+
return () => clearTimeout(timer)
222+
}
200223
}, [isExpandTab, activeTab, showGrid])
201224

202225
useEffect(() => {
@@ -276,23 +299,37 @@ function WorkspacePreview({ activeTab, isActive }: { activeTab: number; isActive
276299
</div>
277300
)}
278301

279-
{isExpanded && expandTarget && (
280-
<motion.div
281-
key={expandedTab}
282-
className='absolute inset-0 overflow-hidden border border-[#E5E5E5] bg-white'
283-
initial={{ opacity: 0, scale: 0.15 }}
284-
animate={{ opacity: 1, scale: 1 }}
285-
transition={{ duration: 0.55, ease: [0.4, 0, 0.2, 1] }}
286-
style={{
287-
transformOrigin: `${GRID_PAD + expandTarget.col * GRID_STEP + CARD_SIZE / 2}px ${GRID_PAD + expandTarget.row * GRID_STEP + CARD_SIZE / 2}px`,
288-
}}
289-
>
290-
{expandedTab === 1 && <MockFullTable revealedRows={revealedRows} />}
291-
{expandedTab === 2 && <MockFullFiles />}
292-
{expandedTab === 3 && <MockFullKnowledgeBase revealedRows={revealedRows} />}
293-
{expandedTab === 4 && <MockFullLogs revealedRows={revealedRows} />}
294-
</motion.div>
295-
)}
302+
<AnimatePresence mode='wait'>
303+
{isExpanded && expandTarget && (
304+
<motion.div
305+
key={expandedTab}
306+
className='absolute inset-0 overflow-hidden border border-[#E5E5E5] bg-white'
307+
initial={
308+
expandTransitionRef.current === 'crossfade'
309+
? { opacity: 0 }
310+
: { opacity: 0, scale: 0.15 }
311+
}
312+
animate={{ opacity: 1, scale: 1 }}
313+
exit={{ opacity: 0 }}
314+
transition={{
315+
duration: expandTransitionRef.current === 'crossfade' ? 0.3 : 0.55,
316+
ease: [0.4, 0, 0.2, 1],
317+
}}
318+
style={
319+
expandTransitionRef.current === 'scale'
320+
? {
321+
transformOrigin: `${GRID_PAD + expandTarget.col * GRID_STEP + CARD_SIZE / 2}px ${GRID_PAD + expandTarget.row * GRID_STEP + CARD_SIZE / 2}px`,
322+
}
323+
: undefined
324+
}
325+
>
326+
{expandedTab === 1 && <MockFullTable revealedRows={revealedRows} />}
327+
{expandedTab === 2 && <MockFullFiles />}
328+
{expandedTab === 3 && <MockFullKnowledgeBase revealedRows={revealedRows} />}
329+
{expandedTab === 4 && <MockFullLogs revealedRows={revealedRows} />}
330+
</motion.div>
331+
)}
332+
</AnimatePresence>
296333
</div>
297334
)
298335
}

‎apps/sim/app/(home)/components/features/features.tsx‎

Lines changed: 76 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { useRef, useState } from 'react'
4-
import { type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
4+
import { AnimatePresence, type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
55
import Image from 'next/image'
66
import Link from 'next/link'
77
import { Badge, ChevronDown } from '@/components/emcn'
@@ -168,6 +168,8 @@ function DotGrid({
168168
)
169169
}
170170

171+
const INDICATOR_TRANSITION_MS = 300
172+
171173
export default function Features() {
172174
const sectionRef = useRef<HTMLDivElement>(null)
173175
const [activeTab, setActiveTab] = useState(0)
@@ -259,7 +261,10 @@ export default function Features() {
259261
aria-selected={index === activeTab}
260262
onClick={() => setActiveTab(index)}
261263
className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-[12px] font-medium font-season text-[#212121] text-[12px] uppercase lg:px-0 lg:text-[14px]${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[#E9E9E9] border-l' : ''}`}
262-
style={{ backgroundColor: index === activeTab ? '#FDFDFD' : '#F6F6F6' }}
264+
style={{
265+
backgroundColor: index === activeTab ? '#FDFDFD' : '#F6F6F6',
266+
transition: `background-color ${INDICATOR_TRANSITION_MS}ms ease`,
267+
}}
263268
>
264269
{tab.mobileLabel ? (
265270
<>
@@ -269,21 +274,25 @@ export default function Features() {
269274
) : (
270275
tab.label
271276
)}
272-
{index === activeTab && (
273-
<div className='absolute right-0 bottom-0 left-0 flex h-[6px]'>
274-
{tab.segments.map(([opacity, width], i) => (
275-
<div
276-
key={i}
277-
className='h-full shrink-0'
278-
style={{
279-
width: `${width}%`,
280-
backgroundColor: tab.color,
281-
opacity,
282-
}}
283-
/>
284-
))}
285-
</div>
286-
)}
277+
<div
278+
className='pointer-events-none absolute right-0 bottom-0 left-0 flex h-[6px]'
279+
style={{
280+
opacity: index === activeTab ? 1 : 0,
281+
transition: `opacity ${INDICATOR_TRANSITION_MS}ms ease`,
282+
}}
283+
>
284+
{tab.segments.map(([segOpacity, width], i) => (
285+
<div
286+
key={i}
287+
className='h-full shrink-0'
288+
style={{
289+
width: `${width}%`,
290+
backgroundColor: tab.color,
291+
opacity: segOpacity,
292+
}}
293+
/>
294+
))}
295+
</div>
287296
</button>
288297
))}
289298
</div>
@@ -299,38 +308,57 @@ export default function Features() {
299308
</div>
300309

301310
<div className='mt-[32px] flex flex-col gap-[24px] px-[24px] lg:mt-[60px] lg:grid lg:grid-cols-[1fr_2.8fr] lg:gap-[60px] lg:px-[120px]'>
302-
<div className='flex flex-col items-start justify-between gap-[24px] pt-[20px] lg:h-[560px] lg:gap-0'>
303-
<div className='flex flex-col items-start gap-[16px]'>
304-
<h3 className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[120%] tracking-[-0.02em] lg:text-[28px]'>
305-
{FEATURE_TABS[activeTab].title}
306-
</h3>
307-
<p className='font-[430] font-season text-[#1C1C1C]/50 text-[16px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
308-
{FEATURE_TABS[activeTab].description}
309-
</p>
310-
</div>
311-
<Link
312-
href='/signup'
313-
className='group/cta inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-[10px] font-[430] font-season text-[14px] text-white transition-colors hover:border-[#2A2A2A] hover:bg-[#2A2A2A]'
314-
>
315-
{FEATURE_TABS[activeTab].cta}
316-
<span className='relative h-[10px] w-[10px] shrink-0'>
317-
<ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
318-
<svg
319-
className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
320-
viewBox='0 0 10 10'
321-
fill='none'
311+
<div className='relative flex flex-col items-start justify-between gap-[24px] pt-[20px] lg:h-[560px] lg:gap-0'>
312+
<AnimatePresence mode='wait'>
313+
<motion.div
314+
key={activeTab}
315+
className='flex flex-col items-start gap-[16px]'
316+
initial={{ opacity: 0, y: 8 }}
317+
animate={{ opacity: 1, y: 0 }}
318+
exit={{ opacity: 0, y: -8 }}
319+
transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
320+
>
321+
<h3 className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[120%] tracking-[-0.02em] lg:text-[28px]'>
322+
{FEATURE_TABS[activeTab].title}
323+
</h3>
324+
<p className='font-[430] font-season text-[#1C1C1C]/50 text-[16px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
325+
{FEATURE_TABS[activeTab].description}
326+
</p>
327+
</motion.div>
328+
</AnimatePresence>
329+
<AnimatePresence mode='wait'>
330+
<motion.div
331+
key={activeTab}
332+
initial={{ opacity: 0 }}
333+
animate={{ opacity: 1 }}
334+
exit={{ opacity: 0 }}
335+
transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
336+
>
337+
<Link
338+
href='/signup'
339+
className='group/cta inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-[10px] font-[430] font-season text-[14px] text-white transition-colors hover:border-[#2A2A2A] hover:bg-[#2A2A2A]'
322340
>
323-
<path
324-
d='M1 5H8M5.5 2L8.5 5L5.5 8'
325-
stroke='currentColor'
326-
strokeWidth='1.33'
327-
strokeLinecap='square'
328-
strokeLinejoin='miter'
329-
fill='none'
330-
/>
331-
</svg>
332-
</span>
333-
</Link>
341+
{FEATURE_TABS[activeTab].cta}
342+
<span className='relative h-[10px] w-[10px] shrink-0'>
343+
<ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
344+
<svg
345+
className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
346+
viewBox='0 0 10 10'
347+
fill='none'
348+
>
349+
<path
350+
d='M1 5H8M5.5 2L8.5 5L5.5 8'
351+
stroke='currentColor'
352+
strokeWidth='1.33'
353+
strokeLinecap='square'
354+
strokeLinejoin='miter'
355+
fill='none'
356+
/>
357+
</svg>
358+
</span>
359+
</Link>
360+
</motion.div>
361+
</AnimatePresence>
334362
</div>
335363

336364
<FeaturesPreview activeTab={activeTab} />

‎apps/sim/app/(landing)/blog/[slug]/page.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@ import type { Author, BlogMeta } from '@/lib/blog/schema'
99
import { buildArticleJsonLd, buildBreadcrumbJsonLd, buildPostMetadata } from '@/lib/blog/seo'
1010
import { formatDate } from '@/lib/core/utils/formatting'
1111
import { getBaseUrl } from '@/lib/core/utils/urls'
12-
import {
13-
AnimatedColorBlocks,
14-
AnimatedColorBlocksVertical,
15-
} from '@/app/(landing)/blog/[slug]/animated-blocks'
1612
import { ArticleHeaderItem, ArticleHeaderMotion } from '@/app/(landing)/blog/[slug]/article-header'
1713
import { ArticleSidebar } from '@/app/(landing)/blog/[slug]/article-sidebar'
1814
import { ShareButtons } from '@/app/(landing)/blog/[slug]/share-button'

‎apps/sim/app/(landing)/blog/studio-content.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ export function StudioContent({ posts, initialTag, initialQuery }: StudioContent
193193
</h2>
194194
<SidebarSearch value={query} onChange={handleSearch} />
195195
</div>
196-
<CategoriesDepthContainer color={activeItem?.color ?? '#00F701'}>
196+
<CategoriesDepthContainer>
197197
<h2 className='mb-3 font-season text-[10px] uppercase tracking-widest text-[#ECECEC]'>
198198
Categories
199199
</h2>
@@ -329,14 +329,13 @@ export function StudioContent({ posts, initialTag, initialQuery }: StudioContent
329329
}
330330

331331
interface CategoriesDepthContainerProps {
332-
color: string
333332
children: React.ReactNode
334333
}
335334

336-
function CategoriesDepthContainer({ color, children }: CategoriesDepthContainerProps) {
335+
function CategoriesDepthContainer({ children }: CategoriesDepthContainerProps) {
337336
return (
338337
<div className='pt-6'>
339-
<div className='bg-transparent p-'>{children}</div>
338+
<div className='bg-transparent'>{children}</div>
340339
</div>
341340
)
342341
}

0 commit comments

Comments
 (0)