Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 76cb220

Browse files
martins5225martins5225
authored
Merge pull request #8 from cyburns/main
Final changes thank you Victor!!
2 parents eaf9445 + dc06f09 commit 76cb220

30 files changed

+1154
-550
lines changed

‎package-lock.json

+371
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
"@material-tailwind/react": "^2.1.9",
1717
"@mui/icons-material": "^5.15.7",
1818
"@mui/material": "^5.15.7",
19+
"@tsparticles/engine": "^3.3.0",
20+
"@tsparticles/react": "^3.0.0",
21+
"@tsparticles/slim": "^3.3.0",
1922
"@types/node": "20.5.8",
2023
"@types/react": "18.2.21",
2124
"@types/react-dom": "18.2.7",
@@ -26,6 +29,7 @@
2629
"eslint": "8.48.0",
2730
"eslint-config-next": "13.4.19",
2831
"framer-motion": "^11.0.6",
32+
"mini-svg-data-uri": "^1.4.4",
2933
"next": "^14.1.0",
3034
"postcss": "8.4.29",
3135
"react": "^18.2.0",

‎src/app/about/About.tsx

+50-32
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import { styles } from "../style";
66
import { motion, useInView, useAnimation } from "framer-motion";
77
import { useEffect, useRef } from "react";
88
import { useMediaQuery } from "@mui/material";
9+
import Image from "next/image";
10+
import { secondSectionBubble } from "../assets";
911

1012
const About = () => {
1113
const isSmallScreenSize = useMediaQuery("(min-width:967px)");
14+
const smallScreenSize = useMediaQuery("(min-width:1260px)");
1215

1316
const headerScrollRef = useRef(null);
1417

@@ -25,40 +28,42 @@ const About = () => {
2528
}, [isHeaderInView, mainControls, secondaryControls, tertiaryControls]);
2629

2730
return (
28-
<section className="py-12 w-full sm:py-16 lg:py-20 bg-black h-full">
29-
<div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8 ">
30-
<motion.div
31-
ref={headerScrollRef}
32-
viewport={{ root: headerScrollRef }}
33-
variants={{
34-
hidden: {
35-
opacity: 0,
36-
y: 75,
37-
transition: {
38-
type: "spring",
39-
duration: 1.25,
40-
delay: 0.5,
41-
},
31+
<section
32+
className={`${styles.paddingX} px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:w-full md:px-24 lg:px-8 lg:py-20 space-y-16 bg-black`}
33+
>
34+
<motion.div
35+
ref={headerScrollRef}
36+
viewport={{ root: headerScrollRef }}
37+
variants={{
38+
hidden: {
39+
opacity: 0,
40+
y: 75,
41+
transition: {
42+
type: "spring",
43+
duration: 1.25,
4244
},
43-
visible: {
44-
opacity: 1,
45-
y: 0,
46-
transition: {
47-
type: "spring",
48-
duration: 1.25,
49-
delay: 0.2,
50-
},
45+
},
46+
visible: {
47+
opacity: 1,
48+
y: 0,
49+
transition: {
50+
type: "spring",
51+
duration: 1.25,
5152
},
52-
}}
53-
initial="hidden"
54-
animate={mainControls}
55-
className="text-center"
56-
>
57-
<h2 className={`${styles.heroHeadText} white-text-grad text-center `}>
58-
Learn about ReacType
53+
},
54+
}}
55+
initial="hidden"
56+
animate={mainControls}
57+
className="flex flex-wrap items-center justify-between"
58+
>
59+
<div className="w-full py-20 md:mx-auto sm:mx-auto max-w-4xl">
60+
<h2
61+
className={`${styles.sectionHeadText} lg:text-[64px] md:text-[60px] sm:text-[50px] xs:text-[40px] tracking-tight text-[#f5f5f7] sm:text-6xl ml-0`}
62+
>
63+
More about ReacType
5964
</h2>
6065
<p
61-
className={`${styles.sectionSubText} text-xl leading-7 text-[#6e6e73] mb-[50%]`}
66+
className={`${styles.sectionSubText} mt-6 text-xl leading-8 text-[#86868b] sm:w-full`}
6267
>
6368
ReacType is a rapid prototyping tool that allows users visualize
6469
their application architecture dynamically, employing a
@@ -79,10 +84,23 @@ const About = () => {
7984
scaffolding of your React application. ReacType has a vast array of
8085
tools at your disposal to plan and get your next React app started.
8186
</p>
82-
</motion.div>
83-
</div>
87+
</div>
88+
{smallScreenSize ? (
89+
<Image
90+
src={secondSectionBubble}
91+
alt="cube"
92+
className="w-[25rem] mr-auto sm:display-none"
93+
/>
94+
) : null}
95+
</motion.div>
8496
</section>
8597
);
8698
};
8799

88100
export default About;
101+
102+
103+
104+
105+
106+

‎src/app/assets/B&W_SF_RT_LOGO_FAICON.psd

282 KB
Binary file not shown.

‎src/app/assets/SF_RT_LOGO_FAVICON.png

61.6 KB
Loading

‎src/app/assets/comp-render-2.psd

8.67 MB
Binary file not shown.

‎src/app/components/Computer.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ const Feedbacks: React.FC<Props> = ({ isCompInMiddle }) => {
1717
const mainControls = useAnimation();
1818

1919
useEffect(() => {
20-
isHeaderInView
21-
? mainControls.start("visible")
22-
: mainControls.start("hidden");
20+
if (isHeaderInView) {
21+
mainControls.start("visible");
22+
}
2323
}, [isHeaderInView, mainControls, headerScrollRef]);
2424

2525
return (
@@ -58,7 +58,7 @@ const Feedbacks: React.FC<Props> = ({ isCompInMiddle }) => {
5858
{isCompInMiddle ? null : (
5959
<div
6060
ref={headerScrollRef}
61-
className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 mb-10"
61+
className="fixed bottom-1 left-1/2 transform -translate-x-1/2 z-50 mb-10"
6262
>
6363
<motion.div
6464
variants={{
@@ -76,7 +76,7 @@ const Feedbacks: React.FC<Props> = ({ isCompInMiddle }) => {
7676
transition: {
7777
type: "spring",
7878
duration: 2.25,
79-
delay: 1,
79+
delay: 0.75,
8080
},
8181
},
8282
}}

‎src/app/components/FeatureCards.tsx

+20-44
Original file line numberDiff line numberDiff line change
@@ -10,82 +10,58 @@ import {
1010
} from "@material-tailwind/react";
1111
import { NavigateNext } from "@mui/icons-material";
1212
import { Check } from "@mui/icons-material";
13+
import { technologyIconArray } from "../constants";
1314

1415
interface Props {
1516
index: number;
17+
title: string;
18+
tech: string[];
1619
}
1720

18-
const FeatureCards: React.FC<Props> = ({ index }) => {
21+
const FeatureCards: React.FC<Props> = ({ index, title, tech }) => {
1922
return (
2023
<Card
2124
color="gray"
2225
variant="gradient"
23-
className={`w-full max-w-[20rem] p-8 rounded-xl feature-bg-${index} hover:scale-[1.02]`}
26+
className={`w-full max-w-[20rem] p-8 rounded-xl feature-bg-${index} hover:scale-[1.02] `}
2427
>
2528
<CardHeader
2629
floated={false}
2730
shadow={false}
2831
color="transparent"
2932
className="m-0 mb-8 rounded-none border-b border-white/10 pb-8 text-center"
3033
>
31-
<Typography
32-
variant="small"
33-
color="white"
34-
className="font-normal uppercase"
35-
>
36-
standard
37-
</Typography>
3834
<Typography
3935
variant="h1"
4036
color="white"
4137
className="mt-6 flex justify-center gap-1 text-7xl font-normal"
4238
>
43-
<span className="mt-2 text-4xl">$</span>0{" "}
44-
<span className="self-end text-4xl">/mo</span>
39+
<span className="self-end text-4xl ">
40+
{technologyIconArray[index]}
41+
</span>
42+
<span className="self-end ml-2 pb-3 text-4xl">{title}</span>
4543
</Typography>
4644
</CardHeader>
4745
<CardBody className="p-0">
4846
<ul className="flex flex-col gap-4">
49-
<li className="flex items-center gap-4">
50-
<span className="rounded-full border border-white/20 bg-white/20 p-1">
51-
<Check className="text-[#01da58]" />
52-
</span>
53-
<Typography className="font-normal">
54-
Life time technical support
55-
</Typography>
56-
</li>
57-
<li className="flex items-center gap-4">
58-
<span className="rounded-full border border-white/20 bg-white/20 p-1">
59-
<Check className="text-[#01da58]" />
60-
</span>
61-
<Typography className="font-normal">5 team members</Typography>
62-
</li>
63-
<li className="flex items-center gap-4">
64-
<span className="rounded-full border border-white/20 bg-white/20 p-1">
65-
<Check className="text-[#01da58]" />
66-
</span>
67-
<Typography className="font-normal">200+ components</Typography>
68-
</li>
69-
<li className="flex items-center gap-4">
70-
<span className="rounded-full border border-white/20 bg-white/20 p-1">
71-
<Check className="text-[#01da58]" />
72-
</span>
73-
<Typography className="font-normal">40+ built-in pages</Typography>
74-
</li>
75-
<li className="flex items-center gap-4">
76-
<span className="rounded-full border border-white/20 bg-white/20 p-1">
77-
<Check className="text-[#01da58]" />
78-
</span>
79-
<Typography className="font-normal">1 year free updates</Typography>
80-
</li>
47+
{tech.map((item, index) => (
48+
<li key={index} className="flex items-center gap-4">
49+
<span className="rounded-full border border-white/20 bg-white/20 p-1">
50+
<Check className="text-[#01da58]" />
51+
</span>
52+
<Typography className="font-normal">{item}</Typography>
53+
</li>
54+
))}
8155
</ul>
8256
</CardBody>
8357
<CardFooter className="mt-5 p-0 flex items-end justify-end">
8458
<Button
8559
size="lg"
8660
className={`buy-button-${index} text-xl h-[3rem] w-[3rem] rounded-full shadow-xl`}
8761
>
88-
<NavigateNext />
62+
<a href="/solutions">
63+
<NavigateNext />
64+
</a>
8965
</Button>
9066
</CardFooter>
9167
</Card>

‎src/app/components/Features.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { styles } from "../style";
77
import { motion, useInView, useAnimation } from "framer-motion";
88
import { useEffect, useRef } from "react";
99
import { useMediaQuery } from "@mui/material";
10+
import { technologyCards } from "../constants";
1011

1112
const Features = () => {
1213
const isSmallScreenSize = useMediaQuery("(min-width:967px)");
@@ -57,7 +58,6 @@ const Features = () => {
5758
transition: {
5859
type: "spring",
5960
duration: 1.25,
60-
delay: 0.5,
6161
},
6262
},
6363
visible: {
@@ -66,19 +66,20 @@ const Features = () => {
6666
transition: {
6767
type: "spring",
6868
duration: 1.25,
69-
delay: 0.2,
7069
},
7170
},
7271
}}
7372
initial="hidden"
7473
animate={mainControls}
7574
className="text-center"
7675
>
77-
<h2 className={`${styles.heroHeadText} white-text-grad text-center `}>
76+
<h2
77+
className={`${styles.sectionHeadText} lg:text-[64px] md:text-[60px] sm:text-[50px] xs:text-[40px] tracking-tight text-[#f5f5f7] sm:text-6xl ml-0 text-center lg:mt-48 mt-16`}
78+
>
7879
Make Every Step User-Centric
7980
</h2>
8081
<p
81-
className={`${styles.sectionSubText} text-xl leading-7 text-[#6e6e73]`}
82+
className={`${styles.sectionSubText} mt-6 text-xl leading-8 text-[#86868b] text-center`}
8283
>
8384
ReacType is a prototyping tool that allows users to visualize their
8485
application architecture dynamically, employing a drag-and-drop
@@ -96,7 +97,6 @@ const Features = () => {
9697
transition: {
9798
type: "spring",
9899
duration: 2.25,
99-
delay: 0.5,
100100
},
101101
},
102102
visible: {
@@ -105,7 +105,6 @@ const Features = () => {
105105
transition: {
106106
type: "spring",
107107
duration: 1.5,
108-
delay: 0.5,
109108
},
110109
},
111110
}}
@@ -127,7 +126,7 @@ const Features = () => {
127126
<div className="">
128127
<p className="pt-10 lg:text-[44px] tracking-tight text-white leading-7 sm:mt-8 font-pj">
129128
<br />
130-
Unlock development at scale
129+
Unlock Development At Scale
131130
</p>
132131
</div>
133132
) : null}
@@ -169,7 +168,6 @@ const Features = () => {
169168
transition: {
170169
type: "spring",
171170
duration: 1.75,
172-
delay: 0.5,
173171
},
174172
},
175173
visible: {
@@ -178,17 +176,21 @@ const Features = () => {
178176
transition: {
179177
type: "spring",
180178
duration: 1.75,
181-
delay: 0.5,
182179
},
183180
},
184181
}}
185182
initial="hidden"
186183
animate={tertiaryControls}
187184
className="grid grid-cols-1 mt-10 sm:mt-16 sm:grid-cols-2 sm:gap-x-12 gap-y-12 md:grid-cols-3 md:gap-0 xl:mt-24 "
188185
>
189-
{features.map((feature, index) => (
186+
{technologyCards.map((technology, index) => (
190187
<div key={index} className="mx-auto">
191-
<FeatureCards index={index} />
188+
<FeatureCards
189+
key={index}
190+
index={index}
191+
title={technology.title}
192+
tech={technology.tech}
193+
/>
192194
</div>
193195
))}
194196
</motion.div>

0 commit comments

Comments
 (0)