Skip to content

Commit 44d2774

Browse files
matas-bitbybit-devmatas-bitbybit-dev
committed
improved some homepage editor related styling
1 parent acc9966 commit 44d2774

File tree

3 files changed

+325
-33
lines changed

3 files changed

+325
-33
lines changed

‎docs/src/components/Icons/index.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -351,3 +351,60 @@ export const NoCodeIcon: React.FC<IconProps> = ({ size = defaultSize, color = de
351351
</svg>
352352
);
353353

354+
export const ReteEditorIcon: React.FC<IconProps> = ({ size = defaultSize, color = "currentColor", className }) => (
355+
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" className={className}>
356+
{/* Top Left Node */}
357+
<rect x="2" y="4" width="18" height="16" rx="2" stroke={color} strokeWidth="1.5" fill="none"/>
358+
<circle cx="20" cy="12" r="2.5" fill={color}/>
359+
<line x1="5" y1="12" x2="14" y2="12" stroke={color} strokeWidth="1" opacity="0.5"/>
360+
361+
{/* Bottom Left Node */}
362+
<rect x="2" y="44" width="18" height="16" rx="2" stroke={color} strokeWidth="1.5" fill="none"/>
363+
<circle cx="20" cy="52" r="2.5" fill={color}/>
364+
<line x1="5" y1="52" x2="14" y2="52" stroke={color} strokeWidth="1" opacity="0.5"/>
365+
366+
{/* Right Node (receives both inputs) */}
367+
<rect x="42" y="18" width="20" height="28" rx="2" stroke={color} strokeWidth="1.5" fill="none"/>
368+
<circle cx="42" cy="26" r="2.5" fill={color}/>
369+
<circle cx="42" cy="38" r="2.5" fill={color}/>
370+
<line x1="46" y1="32" x2="56" y2="32" stroke={color} strokeWidth="1" opacity="0.5"/>
371+
372+
{/* Bezier Wires - two outputs to two inputs on one node */}
373+
<path d="M20 12 C 32 12, 30 26, 42 26" stroke={color} strokeWidth="1.5" fill="none"/>
374+
<path d="M20 52 C 32 52, 30 38, 42 38" stroke={color} strokeWidth="1.5" fill="none"/>
375+
</svg>
376+
);
377+
378+
export const BlocklyEditorIcon: React.FC<IconProps> = ({ size = defaultSize, color = "currentColor", className }) => (
379+
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" className={className}>
380+
<rect x="8" y="8" width="20" height="14" rx="3" stroke={color} strokeWidth="2" fill="none"/>
381+
<rect x="8" y="26" width="28" height="14" rx="3" stroke={color} strokeWidth="2" fill="none"/>
382+
<rect x="8" y="44" width="24" height="14" rx="3" stroke={color} strokeWidth="2" fill="none"/>
383+
<path d="M28 15h8" stroke={color} strokeWidth="2" strokeLinecap="round"/>
384+
<path d="M36 33h12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
385+
<path d="M32 51h16" stroke={color} strokeWidth="2" strokeLinecap="round"/>
386+
<circle cx="40" cy="15" r="4" stroke={color} strokeWidth="2" fill="none"/>
387+
<circle cx="52" cy="33" r="4" stroke={color} strokeWidth="2" fill="none"/>
388+
<circle cx="52" cy="51" r="4" stroke={color} strokeWidth="2" fill="none"/>
389+
</svg>
390+
);
391+
392+
export const TypeScriptEditorIcon: React.FC<IconProps> = ({ size = defaultSize, color = "currentColor", className }) => (
393+
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" className={className}>
394+
{/* Code editor window */}
395+
<rect x="4" y="4" width="56" height="36" rx="3" stroke={color} strokeWidth="1.5" fill="none"/>
396+
<line x1="4" y1="12" x2="60" y2="12" stroke={color} strokeWidth="1.5"/>
397+
<circle cx="10" cy="8" r="1.5" fill={color} opacity="0.6"/>
398+
<circle cx="16" cy="8" r="1.5" fill={color} opacity="0.6"/>
399+
<circle cx="22" cy="8" r="1.5" fill={color} opacity="0.6"/>
400+
401+
{/* Code lines */}
402+
<path d="M10 18h20" stroke={color} strokeWidth="1.5" strokeLinecap="round" opacity="0.7"/>
403+
<path d="M10 24h28" stroke={color} strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
404+
<path d="M10 30h16" stroke={color} strokeWidth="1.5" strokeLinecap="round" opacity="0.7"/>
405+
406+
{/* TS Badge - larger and more prominent */}
407+
<rect x="32" y="44" width="28" height="18" rx="3" stroke={color} strokeWidth="1.5" fill={color} fillOpacity="0.15"/>
408+
<text x="37" y="57" fontFamily="Arial, sans-serif" fontSize="12" fontWeight="bold" fill={color}>TS</text>
409+
</svg>
410+
);

‎docs/src/pages/index.module.css‎

Lines changed: 188 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -970,34 +970,188 @@
970970
font-size: 0.9rem;
971971
}
972972

973-
/* ===== CTA SECTION ===== */
973+
/* ===== CTA / EDITOR LAUNCH SECTION ===== */
974974
.ctaSection {
975-
padding: 5rem 0;
975+
padding: 5rem 0 6rem;
976976
background: linear-gradient(135deg, rgba(240, 206, 187, 0.1) 0%, rgba(220, 150, 110, 0.05) 100%);
977977
border-top: 1px solid rgba(240, 206, 187, 0.1);
978978
}
979979

980-
.ctaContent {
980+
.ctaFooter {
981981
text-align: center;
982+
margin-top: 3rem;
982983
}
983984

984-
.ctaContent h2 {
985-
color: #ffffff;
986-
font-size: 2.5rem;
987-
margin-bottom: 1rem;
985+
.ctaHeader {
986+
text-align: center;
987+
margin-bottom: 2.5rem;
988+
}
989+
990+
/* Editor Cards Grid */
991+
.editorCardsGrid {
992+
display: grid;
993+
grid-template-columns: repeat(3, 1fr);
994+
gap: 2rem;
995+
max-width: 1200px;
996+
margin: 0 auto;
997+
}
998+
999+
.editorCard {
1000+
position: relative;
1001+
background: linear-gradient(135deg, rgba(26, 28, 31, 0.95) 0%, rgba(35, 40, 48, 0.9) 100%);
1002+
border: 1px solid rgba(240, 206, 187, 0.2);
1003+
border-radius: 24px;
1004+
padding: 40px 30px;
1005+
text-decoration: none;
1006+
color: white;
1007+
overflow: hidden;
1008+
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
1009+
text-align: center;
1010+
}
1011+
1012+
.editorCard:hover {
1013+
transform: translateY(-12px);
1014+
border-color: #F0CEBB;
1015+
text-decoration: none;
1016+
}
1017+
1018+
.editorCard:hover .editorCardGlow {
1019+
opacity: 1;
1020+
}
1021+
1022+
.editorCard:hover .editorIconWrapper {
1023+
transform: scale(1.15);
1024+
background: #F0CEBB;
1025+
color: #1a1c1f;
1026+
}
1027+
1028+
.editorCard:hover .editorIconWrapper svg {
1029+
color: #1a1c1f;
1030+
}
1031+
1032+
.editorCard:hover .editorLaunchBtn {
1033+
background: #F0CEBB;
1034+
color: #1a1c1f;
1035+
}
1036+
1037+
.editorCard:hover .editorLaunchBtn svg {
1038+
transform: translateX(5px);
1039+
}
1040+
1041+
.editorCard:hover .editorCardShine {
1042+
transform: translateX(100%);
1043+
}
1044+
1045+
.editorCardGlow {
1046+
position: absolute;
1047+
inset: -2px;
1048+
background: linear-gradient(135deg, #F0CEBB, transparent 50%, #d6b39f);
1049+
border-radius: 26px;
1050+
opacity: 0;
1051+
transition: opacity 0.4s ease;
1052+
z-index: -1;
1053+
filter: blur(15px);
1054+
}
1055+
1056+
.editorCardContent {
1057+
position: relative;
1058+
z-index: 2;
1059+
}
1060+
1061+
.editorCardShine {
1062+
position: absolute;
1063+
top: 0;
1064+
left: -100%;
1065+
width: 100%;
1066+
height: 100%;
1067+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
1068+
transition: transform 0.6s ease;
1069+
z-index: 1;
1070+
}
1071+
1072+
.editorIconWrapper {
1073+
width: 80px;
1074+
height: 80px;
1075+
margin: 0 auto 25px;
1076+
background: rgba(240, 206, 187, 0.15);
1077+
border-radius: 20px;
1078+
display: flex;
1079+
align-items: center;
1080+
justify-content: center;
1081+
color: #F0CEBB;
1082+
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
1083+
}
1084+
1085+
.editorIconWrapper svg {
1086+
color: inherit;
1087+
transition: color 0.4s ease;
1088+
}
1089+
1090+
.editorTitle {
1091+
font-size: 22px;
1092+
font-weight: 600;
1093+
margin-bottom: 12px;
1094+
letter-spacing: 1px;
1095+
color: white;
9881096
}
9891097

990-
.ctaContent p {
1098+
.editorDescription {
1099+
font-size: 15px;
9911100
color: rgba(255, 255, 255, 0.7);
992-
font-size: 1.2rem;
993-
margin-bottom: 2rem;
1101+
line-height: 1.6;
1102+
margin-bottom: 20px;
9941103
}
9951104

996-
.ctaButtons {
1105+
.editorTags {
9971106
display: flex;
998-
gap: 1rem;
1107+
gap: 8px;
9991108
justify-content: center;
10001109
flex-wrap: wrap;
1110+
margin-bottom: 25px;
1111+
}
1112+
1113+
.editorTag {
1114+
background: rgba(240, 206, 187, 0.1);
1115+
border: 1px solid rgba(240, 206, 187, 0.2);
1116+
border-radius: 20px;
1117+
padding: 6px 14px;
1118+
font-size: 12px;
1119+
color: #F0CEBB;
1120+
text-transform: uppercase;
1121+
letter-spacing: 1px;
1122+
}
1123+
1124+
.editorLaunchBtn {
1125+
display: inline-flex;
1126+
align-items: center;
1127+
gap: 10px;
1128+
background: rgba(240, 206, 187, 0.15);
1129+
border: 1px solid #F0CEBB;
1130+
border-radius: 30px;
1131+
padding: 12px 28px;
1132+
font-size: 14px;
1133+
font-weight: 600;
1134+
color: #F0CEBB;
1135+
text-transform: uppercase;
1136+
letter-spacing: 1px;
1137+
transition: all 0.3s ease;
1138+
}
1139+
1140+
.editorLaunchBtn svg {
1141+
transition: transform 0.3s ease;
1142+
}
1143+
1144+
/* Card-specific hover colors */
1145+
.editorCardRete:hover {
1146+
box-shadow: 0 20px 50px rgba(240, 206, 187, 0.2);
1147+
}
1148+
1149+
.editorCardBlockly:hover {
1150+
box-shadow: 0 20px 50px rgba(240, 206, 187, 0.2);
1151+
}
1152+
1153+
.editorCardTypescript:hover {
1154+
box-shadow: 0 20px 50px rgba(240, 206, 187, 0.2);
10011155
}
10021156

10031157
.outlineButton {
@@ -1069,6 +1223,15 @@
10691223
.shopifyBitsGrid {
10701224
grid-template-columns: 1fr;
10711225
}
1226+
1227+
.editorCardsGrid {
1228+
grid-template-columns: 1fr;
1229+
max-width: 400px;
1230+
}
1231+
1232+
.editorCard {
1233+
padding: 30px 24px;
1234+
}
10721235
}
10731236

10741237
@media screen and (max-width: 768px) {
@@ -1110,11 +1273,6 @@
11101273
gap: 1.5rem;
11111274
}
11121275

1113-
.ctaButtons {
1114-
flex-direction: column;
1115-
align-items: center;
1116-
}
1117-
11181276
.sectionHeader h2 {
11191277
font-size: 2rem;
11201278
}
@@ -1129,4 +1287,17 @@
11291287
font-size: 12px;
11301288
padding: 6px 16px;
11311289
}
1290+
1291+
.editorIconWrapper {
1292+
width: 64px;
1293+
height: 64px;
1294+
}
1295+
1296+
.editorTitle {
1297+
font-size: 18px;
1298+
}
1299+
1300+
.editorDescription {
1301+
font-size: 14px;
1302+
}
11321303
}

0 commit comments

Comments
 (0)