Skip to content

refactor(SplashViz): migrate from SCSS to Tailwind CSS #8095

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.

Sign up for GitHub

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

Closed
mr-baraiya wants to merge 14 commits into from
Closed

refactor(SplashViz): migrate from SCSS to Tailwind CSS #8095

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
386bae3
refactor(SplashViz): migrate from SCSS to Tailwind CSS
mr-baraiya Mar 22, 2026
5a52049
fix(SplashViz): improve heading spacing by adjusting section padding
mr-baraiya Mar 23, 2026
be67067
fix(SplashViz): adjust spacing from navbar using section padding
mr-baraiya Mar 23, 2026
7085d2f
fix(SplashViz): match original SCSS spacing using heading margin
mr-baraiya Mar 23, 2026
98371f3
fix(SplashViz): match exact heading font size from original site
mr-baraiya Mar 23, 2026
7970f44
fix(SplashViz): refine heading structure and spacing for improved rea…
mr-baraiya Mar 25, 2026
4fc44d0
fix(SplashViz): align typography, font weight and spacing with webpac…
mr-baraiya Mar 26, 2026
f4738ac
fix(SplashViz): remove unused font dependency and rely on existing fo…
mr-baraiya Mar 26, 2026
176b794
refactor(SplashViz): use clsx for better class management and readabi…
mr-baraiya Mar 26, 2026
655d10f
fix(SplashViz): resolve import order and named import lint issues
mr-baraiya Mar 26, 2026
884487f
refactor(SplashViz): remove clsx and revert to standard
mr-baraiya Mar 26, 2026
b8f43e4
fix(SplashViz): center cube relative to SVG container
mr-baraiya Mar 26, 2026
5907501
fix(SplashViz): fine-tune section height and spacing to match origina…
mr-baraiya Mar 26, 2026
78249d6
fix(SplashViz): adjust text spacing to match original layout
mr-baraiya Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 17 additions & 13 deletions src/components/SplashViz/SplashViz.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,35 @@ import { Component } from "react";

// Import Components
import Cube from "../Cube/Cube.jsx";
import TextRotator from "../TextRotater/TextRotater.jsx";
import TextRotater from "../TextRotater/TextRotater.jsx";
import HomeSVG from "./SplashVizSVG.mjs";

// Load Styling
import "./SplashViz.scss";
// Tailwind CSS is now used for styling. Custom SCSS removed.

export default class SplashViz extends Component {
render() {
return (
<section className="splash-viz dark:bg-gray-900!">
<h1 className="splash-viz__heading">
<span> bundle your</span>
<TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
<span> assets </span>
<span> scripts </span>
<span> images </span>
<span> styles </span>
</TextRotator>
<section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
Copy link
Copy Markdown
Contributor

@rahul-kr-rai rahul-kr-rai Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use Clsx here?

Suggested change
<section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
className={clsx(
"relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16",
"bg-[#2b3a42] dark:bg-gray-900",
// height utilities
"h-[clamp(35rem,calc(100vh-80px),45rem)]",
"md:h-[clamp(30rem,calc(100vh-80px),35rem)]",
"sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]"
)}

Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use clsx only when our classes are conditional, for example:

<section className={clsx(["foo", isOpen ? "open" : "close", isBig ? "big" : "small"])}>

<h1 className="text-white text-center font-normal font-[Source_Sans_Pro] text-[30px] md:text-[40px] mt-[80px] md:mt-[90px] leading-[36px] md:leading-[48px] tracking-[0]">
<span>bundle your</span>
<span className="inline-block w-[120px] text-left">
<TextRotater delay={2000}>
<span>assets</span>
<span>scripts</span>
<span>images</span>
<span>styles</span>
</TextRotater>
</span>
</h1>
<div
className="splash-viz__modules"
className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block"
style={{ gridRow: "2/3" }}
dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
></div>

<Cube
className="splash-viz__cube"
className="absolute left-0 right-0 top-0 bottom-0 m-auto z-10"
depth={120}
repeatDelay={5000}
continuous
Expand Down
74 changes: 0 additions & 74 deletions src/components/SplashViz/SplashViz.scss
View file
Open in desktop

This file was deleted.

Loading