Skip to content

Commit 968a5c0

Browse files
author
LorenzoTettamanti
committed
updated homepage design (xs mobile)
1 parent 45dddd0 commit 968a5c0

8 files changed

Lines changed: 248 additions & 1878 deletions

File tree

‎public/style.css‎

Lines changed: 213 additions & 1858 deletions
Large diffs are not rendered by default.

‎src/components/Footer/footer.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ const Footer = () => {
1313
class="font-poppins font-medium self-center tracking-wide whitespace-nowrap dark:text-white
1414
lg:text-5xl
1515
md:text-5xl md:mr-10
16-
xs:text-5xl xs:mb-10"
16+
xs:text-5xl xs:mb-10
17+
sxs:text-5xl sxs:mb-10"
1718
>
1819
CortexFlow
1920
</span>
@@ -132,18 +133,19 @@ const Footer = () => {
132133
</div>
133134
</div>
134135
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
135-
<div class="sm:flex sm:items-center sm:justify-between">
136+
<div class="w-full sm:flex sm:items-center sm:justify-between">
136137
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400 font-poppins">
137138
© 2025{" "}
138139
<Link to="https://github.com/CortexFlow" class="hover:underline">
139140
CortexFlow
140141
</Link>
141142
. All Rights Reserved.
142143
</span>
143-
<div class="flex mt-4 sm:justify-center sm:mt-0">
144+
<div class="flex mt-4 sm:justify-center sm:mt-0
145+
sxs:justify-center sxs:mx-auto lg:mr-5 md:mr-5 ">
144146
<Link
145147
to="https://github.com/CortexFlow"
146-
class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
148+
class="text-gray-500 hover:text-gray-900 dark:hover:text-white lg:ms-5"
147149
>
148150
<svg
149151
class="w-4 h-4"

‎src/components/HomePage/Announcements.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33
const Announcements = () => {
44
return (
55
<div className="w-full mx-auto border-b border-green-400 bg-transparent px-4 py-2 text-gray-900">
6-
<p className="text-center font-medium lg:text-[13px] md:text-[13px] xs:text-[11px]">
6+
<p className="text-center font-medium lg:text-[13px] md:text-[13px] xs:text-[11px] sxs:text-[11px]">
77
⭐ CortexBrain is currently in active development so occasional bugs may
88
occur ⭐
99
<a href="#" className="inline-block underline">

‎src/components/HomePage/FeatureShow.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const FeatureShow = () => {
117117
alt="Product screenshot"
118118
className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10
119119
sm:hidden md:-ml-4 lg:-ml-0
120-
md:hidden lg:flex xs:hidden"
120+
md:hidden lg:flex xs:hidden sxs:hidden"
121121
width="2432"
122122
height="1442"
123123
/>

‎src/components/HomePage/hands_on.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ const HandsOn = () => {
99
</div>
1010

1111
<div data-aos="fade-up">
12-
<p className="w-full mt-2 text-gray-900 font-semibold tracking-tight text-2xl sm:text-3xl md:text-[35px] lg:text-5xl">
12+
<p className="w-full mt-2 text-gray-900 font-semibold tracking-tight text-4xl
13+
sm:text-4xl md:text-4xl lg:text-4xl xs:text-4xl">
1314
Get started with CortexFlow
1415
</p>
1516

@@ -69,7 +70,8 @@ const HandsOn = () => {
6970
>
7071
<Link
7172
to="https://docs.cortexflow.org"
72-
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg font-medium shadow transition duration-300"
73+
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg font-medium shadow transition duration-300
74+
"
7375
>
7476
Install CortexBrain
7577
</Link>

‎src/components/HomePage/home.jsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ const Homepg = () => {
2626
const typedRef = useRef(null); // Referenza per il DOM di Typed.js
2727

2828
const components = [
29-
<div key="1" class="lg:flex md:hidden sm:hidden xs:hidden">
29+
<div key="1" class="lg:flex md:hidden sm:hidden xs:hidden sxs:hidden">
3030
<Character1 />
3131
</div>,
32-
<div key="1" class="lg:flex md:hidden sm:hidden xs:hidden">
32+
<div key="1" class="lg:flex md:hidden sm:hidden xs:hidden sxs:hidden">
3333
<Character1 />
3434
</div>,
3535
];
@@ -93,6 +93,7 @@ const Homepg = () => {
9393
md:max-w-[600px] md:text-7xl md:mx-0
9494
sm:max-w-[400px] sm:text-3xl
9595
xs:max-w-[600px] xs:text-7xl xs:mt-6 xs:mx-auto
96+
sxs:max-w-[600px] sxs:text-6xl sxs:mt-6 sxs:mx-auto
9697
"
9798
>
9899
CortexFlow
@@ -104,21 +105,30 @@ const Homepg = () => {
104105
lg:text-left
105106
md:max-w-[600px] md:text-4xl md:text-left
106107
xs:max-w-[600px] xs:text-xl xs:text-center
108+
sxs:max-w-[600px] sxs:text-xl sxs:text-center
107109
"
108110
>
109111
Open-source Container Networking Infrastructure and Monitoring
110112
Platform
111113
</h1>
112114
<p
113-
class="mb-3 mt-10 font-poppins text-base xs:mx-auto xs:text-center xs:mt-5 lg:text-left md:text-left lg:mx-0 md:mx-0"
115+
class="mb-3 mt-10 font-poppins text-base
116+
xs:mx-auto xs:text-center xs:mt-5
117+
sxs:mx-auto sxs:text-center sxs:mt-5
118+
lg:text-left md:text-left lg:mx-0
119+
md:mx-0"
114120
data-aos="fade-up"
115121
data-aos-delay="100"
116122
ref={typedRef} // Imposta la referenza qui
117123
>
118124
{/* Typed.js scriverà qui */}
119125
</p>
120126
<div
121-
className="mt-5 flex align-items-center xs:mx-auto md:mx-0 lg:mx-0
127+
className="mt-5 flex align-items-center
128+
xs:mx-auto
129+
sxs:mx-auto
130+
md:mx-0
131+
lg:mx-0
122132
"
123133
data-aos="fade-up"
124134
data-aos-delay="200"
@@ -191,11 +201,11 @@ const Homepg = () => {
191201
<section id="key-features">
192202
<KeyFeatures />
193203
</section>
194-
<section id="features" class="xs:pt-[20px]">
204+
<section id="features" class="xs:pt-[20px] sxs:pt-[0px]">
195205
<FeatureShow />
196206
<TechFeatures />
197207
</section>
198-
<section id="get-started" class="xs:pt-[30px]">
208+
<section id="get-started" class="xs:pt-[30px] sxs:pt-[0px]">
199209
<HandsOn />
200210
</section>
201211
<Footer />

‎src/components/HomePage/technology_features.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import React from "react";
33
const TechFeatures = () => {
44
return (
55
<div
6-
className="overflow-hidden bg-white py-20 xs:py-20"
6+
className="overflow-hidden bg-white py-20 xs:py-20 sxs:py-20"
77
data-aos="fade-right"
88
data-aos-delay="200"
99
>
10-
<div className="mx-auto max-w-7xl lg:px-8 xs:px-12">
10+
<div className="mx-auto max-w-7xl lg:px-8 xs:px-12 sxs:px-12">
1111
{/*
1212
mx-auto grid max-w-2xl grid-cols-1 gap-x-8
1313
sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2*/}
@@ -21,7 +21,7 @@ const TechFeatures = () => {
2121
alt="Product screenshot"
2222
className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10
2323
sm:hidden md:-ml-4 lg:-ml-[300px]
24-
md:hidden lg:flex xs:hidden"
24+
md:hidden lg:flex xs:hidden sxs:hidden"
2525
width="2432"
2626
height="1442"
2727
/>

‎src/components/navbar/navabar.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,12 @@ const Homepg = () => {
2121
<Link to="/" className="flex items-center space-x-3">
2222
{/*<img src={logobrain} alt="CortexFlow Logo" className="h-10 w-10" />*/}
2323
<span
24-
className="font-medium font-poppins text-white tracking-wide
24+
className="font-semibold font-poppins text-white tracking-wide
2525
lg:text-2xl
2626
md:text-2xl
2727
sm:text-xl
28-
xs:text-xl "
28+
xs:text-xl
29+
sxs:text-xl"
2930
>
3031
CortexFlow
3132
</span>
@@ -34,7 +35,7 @@ const Homepg = () => {
3435
{/* Navbar */}
3536
<ul
3637
className="font-poppins space-x-8 text-sm font-medium text-gray-300
37-
md:hidden sm:hidden lg:flex xs:hidden"
38+
md:hidden sm:hidden lg:flex xs:hidden sxs:hidden"
3839
>
3940
<li>
4041
<a

0 commit comments

Comments
 (0)