Skip to content

Commit 7a1a055

Browse files
German44German44
authored
Merge pull request #3 from German44/version1.1
Version1.1
2 parents 9475e38 + cb555ba commit 7a1a055

24 files changed

+850
-53
lines changed

‎package-lock.json

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

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@types/react-dom": "^18.2.7",
2424
"@vitejs/plugin-react": "^4.0.3",
2525
"autoprefixer": "^10.4.16",
26+
"daisyui": "^4.12.8",
2627
"eslint": "^8.45.0",
2728
"eslint-plugin-react": "^7.32.2",
2829
"eslint-plugin-react-hooks": "^4.6.0",

‎src/App.jsx

+31-23
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,41 @@
1-
import { BrowserRouter, Route, Routes } from 'react-router-dom'
2-
import About from '../src/components/about/About'
3-
import Banner from '../src/components/hero/Banner'
4-
import Contact from '../src/components/contact/Contact'
5-
// import Header from '../src/components/header/Header'
6-
import Work from '../src/components/works/Work'
7-
import './App.css'
8-
import NavBar from './components/navbar/NavBar'
9-
import Footer from './components/footer/Footer'
10-
1+
import { BrowserRouter, Route, RouterProvider, Routes } from "react-router-dom";
2+
/* import About from "../src/components/about/About";
3+
import Banner from "../src/components/hero/Banner";
4+
import Contact from "../src/components/contact/Contact";
5+
import Work from "../src/components/works/Work";
6+
import NavBar from "./components/navbar/NavBar";
7+
import Footer from "./components/footer/Footer";
8+
import CaseStudyPage from "./pages/CaseStudyPage"; */
9+
import "./App.css";
10+
import routes from "./routes/routes";
1111

1212
function App() {
1313
// bg-site bg-no-repeat bg-cover overflow-hidden
1414
return (
15-
<div className='body'>
16-
<BrowserRouter>
17-
{/* <Header /> */}
15+
<div className="body">
16+
{/* <BrowserRouter>
1817
<Routes>
19-
<Route ></Route>
18+
<Route exact path="/work/CaseStudyPage" element={<CaseStudyPage />} />
19+
<Route
20+
exact
21+
path="/"
22+
element={
23+
<>
24+
<Banner />
25+
<NavBar />
26+
<About />
27+
<Work />
28+
<Contact />
29+
<Footer />
30+
</>
31+
}
32+
/>
2033
</Routes>
21-
</BrowserRouter>
22-
<Banner />
23-
<NavBar />
24-
<About />
25-
<Work />
26-
<Contact />
27-
<Footer />
34+
</BrowserRouter> */}
35+
<RouterProvider router={routes} />
2836
{/* <div className='h-[135px]'></div> */}
2937
</div>
30-
)
38+
);
3139
}
3240

33-
export default App
41+
export default App;

‎src/components/about/AboutCaseStudy.jsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import DividerTag from "../dividerTag/DividerTag";
2+
import { useParams } from "react-router-dom";
3+
import projects from "../../data/projects.json";
4+
5+
const AboutCaseStudy = () => {
6+
const { id } = useParams();
7+
const caseStudy = projects.find((cs) => cs.id === parseInt(id));
8+
console.log(caseStudy);
9+
10+
if (!caseStudy) {
11+
return <p>Case Study not found</p>;
12+
}
13+
14+
return (
15+
<>
16+
<section
17+
className="min-h-[100vh] flex flex-col w-full items-center"
18+
id="aboutCaseStudy"
19+
>
20+
<DividerTag tag="Case Study" />
21+
<div className="container mx-auto min-h-[82vh] bg-black/20 backdrop-blur-2xl rounded-xl flex items-center">
22+
<div className="w-full min-h-[82vh] flex justify-center items-center">
23+
<div className="w-full min-h-[82vh] grid grid-cols-2 grid-rows-10 sm:grid-cols-4 sm:grid-rows-10 gap-4">
24+
<div className="col-span-2 sm:col-span-2 flex flex-col justify-center items-start px-8">
25+
<h2 className="font-bold text-3xl">{caseStudy.name}</h2>
26+
<h4 className="font-normal text-2xl">{caseStudy.type}</h4>
27+
</div>
28+
<div className="col-span-2 row-span-4 row-start-2 sm:col-span-2 sm:row-span-3 sm:col-start-1 sm:row-start-2 px-8 flex flex-col justify-start items-start">
29+
<h4 className="font-semibold text-2xl">Overview</h4>
30+
<p className="font-normal text-lg text-justify">
31+
{caseStudy.overview}
32+
</p>
33+
</div>
34+
<div className="col-span-2 row-span-4 col-start-1 row-start-6 sm:col-span-2 sm:row-span-4 sm:col-start-3 sm:row-start-1 px-8">
35+
<h4 className="font-semibold text-2xl">Team</h4>
36+
<h5 className="font-normal text-lg text-justify">
37+
{caseStudy.team}
38+
</h5>
39+
<h4 className="font-semibold text-2xl">Duration</h4>
40+
<h5 className="font-normal text-lg text-justify">
41+
{caseStudy.duration}
42+
</h5>
43+
<h4 className="font-semibold text-2xl">Tools</h4>
44+
<h5 className="font-normal text-lg text-justify">
45+
{caseStudy.tools}
46+
</h5>
47+
</div>
48+
<div className="col-span-2 col-start-1 row-start-10 sm:col-span-4 sm:row-start-10 px-8">
49+
<img
50+
className="rounded-lg"
51+
src={caseStudy.image}
52+
alt="Project Picture"
53+
/>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</section>
59+
</>
60+
);
61+
};
62+
63+
export default AboutCaseStudy;

‎src/components/contact/ContactForm.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const ContactForm = () => {
7979
type="submit"
8080
className="btn btn-lg"
8181
>
82-
Enviar
82+
Send
8383
</button>
8484
</form>
8585
);

‎src/components/designProcess/DesignProcess.jsx

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import DividerTag from "../dividerTag/DividerTag";
2+
import Process from "./Process";
3+
/* import Sphere from "./Sphere";
4+
import sphereData from "../../data/sphereData.json"; */
5+
/* import processData from "../../data/processData.json"; */
6+
import SphereColors from "./SphereColors";
7+
/* import caseStudyData from "../../data/caseStudyData.json"; */
8+
import { useParams } from "react-router-dom";
9+
import projects from "../../data/projects.json";
10+
11+
/* console.log(caseStudyData); */
12+
const DesignProcess = () => {
13+
const { id } = useParams();
14+
const caseStudy = projects.find((cs) => cs.id === parseInt(id));
15+
16+
console.log(caseStudy.designProcess.processSteps);
17+
18+
const processData = caseStudy.designProcess.processSteps ///quiero guardar
19+
20+
21+
if (!caseStudy) {
22+
return <p>Case Study not found</p>;
23+
}
24+
25+
return (
26+
<>
27+
<section
28+
className="min-h-[100vh] mt-9 flex flex-col w-full items-center"
29+
id="DesignProcess"
30+
>
31+
<DividerTag tag="Design Process" />
32+
<div className="container mx-auto min-h-[82vh] bg-black/20 backdrop-blur-2xl rounded-xl flex items-center">
33+
<div className="w-full min-h-[82vh] flex flex-col justify-start items-start ">
34+
{/* <div className="mt-4 px-8 w-full h-[80px] sm:h-[150px] flex justify-center items-center gap-1 sm:gap-4 ">
35+
{sphereData.map((sphere) => (
36+
<Sphere
37+
key={sphere.id}
38+
color={sphere.color}
39+
title={sphere.title}
40+
hover={sphere.hover}
41+
/>
42+
))}
43+
</div> */}
44+
<SphereColors />
45+
<div className="w-full flex justify-center items-center">
46+
<h3 className="sm:text-2xl text-lg font-semibold text-yellow-50/40 px-8 mt-4 ">
47+
Click into any process to see
48+
</h3>
49+
</div>
50+
<div className="w-full flex justify-center items-center">
51+
<p className="sm:text-2xl text-lg font-semibold px-8 mt-4 ">
52+
{/* Lorem ipsum dolor sit amet consectetur adipisicing elit.
53+
Explicabo nisi facilis autem asperiores consequatur cum minus
54+
molestiae! Commodi nostrum minus consequuntur, rem consequatur
55+
quisquam, consectetur tempore totam tempora eos non ipsa fugiat
56+
fuga ipsum ratione culpa asperiores, numquam sunt quod
57+
voluptatum doloremque veritatis eaque. Sed quam eaque
58+
repudiandae. Necessitatibus, ullam? */}
59+
{caseStudy.designProcess.overview}
60+
</p>
61+
</div>
62+
{processData.map((process) => (
63+
<Process
64+
key={process.id}
65+
title={process.title}
66+
content={process.content}
67+
image={process.image}
68+
/>
69+
))}
70+
</div>
71+
</div>
72+
</section>
73+
</>
74+
);
75+
};
76+
77+
export default DesignProcess;

‎src/components/designProcess/Process.jsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const Process = ({ title, content, image }) => {
2+
return (
3+
<div className="w-full h-full px-8 flex flex-col sm:grid sm:grid-cols-4 sm:grid-rows-8 gap-4 mt-8">
4+
<div className="sm:col-span-2 ">
5+
<h2 className="text-white font-primary text-xl sm:text-5xl m-4" id={title}>{title}</h2>
6+
</div>
7+
<div className=" sm:col-span-2 sm:row-span-1 sm:col-start-3 ">
8+
<p className="text-white text-lg sm:text-xl text-justify m-4 mt-12">{content}</p>
9+
</div>
10+
<div className="sm:col-span-4 sm:row-span-4 sm:row-start-3 ">
11+
<img className="w-full h-full object-cover rounded-xl" src={image} alt={title} />
12+
</div>
13+
</div>
14+
);
15+
};
16+
17+
export default Process;

‎src/components/designProcess/Sphere.jsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Link as LinkScroll } from "react-scroll/modules";
2+
3+
const Sphere = ({ title, color, hover }) => {
4+
return (
5+
<div>
6+
<LinkScroll
7+
to={title}
8+
smooth={true}
9+
spy={true}
10+
className={`font-bold text-[10px] sm:text-xl cursor-pointer sm:w-[150px] sm:h-[150px] w-[50px] h-[50px] flex items-center justify-center border-solid border-2 border-${color}-400 bg-${color}-400/80 hover:bg-${hover}-400 rounded-full`}
11+
>
12+
{title}
13+
</LinkScroll>
14+
</div>
15+
);
16+
};
17+
18+
export default Sphere;

‎src/components/designProcess/SphereColors.jsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Link as LinkScroll } from "react-scroll/modules";
2+
3+
const SphereColors = () => {
4+
return (
5+
<div className="mt-4 px-8 w-full h-[80px] sm:h-[150px] flex justify-center items-center gap-1 sm:gap-4 ">
6+
<LinkScroll
7+
to="Empatizar"
8+
smooth={true}
9+
spy={true}
10+
className="font-bold text-[10px] sm:text-xl cursor-pointer sm:w-[150px] sm:h-[150px] w-[50px] h-[50px] flex items-center justify-center border-solid border-2 border-red-400 bg-red-400/80 hover:bg-red-400 rounded-full"
11+
>
12+
Empatizar
13+
</LinkScroll>
14+
<LinkScroll
15+
to="Definir"
16+
smooth={true}
17+
spy={true}
18+
className="font-bold text-[10px] sm:text-xl cursor-pointer sm:w-[150px] sm:h-[150px] w-[50px] h-[50px] flex items-center justify-center border-solid border-2 border-orange-400 bg-orange-400/80 hover:bg-orange-400 rounded-full"
19+
>
20+
Definir
21+
</LinkScroll>
22+
<LinkScroll
23+
to="Idear"
24+
smooth={true}
25+
spy={true}
26+
className="font-bold text-[10px] sm:text-xl cursor-pointer sm:w-[150px] sm:h-[150px] w-[50px] h-[50px] flex items-center justify-center border-solid border-2 border-yellow-400 bg-yellow-400/80 hover:bg-yellow-400 rounded-full"
27+
>
28+
Idear
29+
</LinkScroll>
30+
<LinkScroll
31+
to="Diseñar"
32+
smooth={true}
33+
spy={true}
34+
className="font-bold text-[10px] sm:text-xl cursor-pointer sm:w-[150px] sm:h-[150px] w-[50px] h-[50px] flex items-center justify-center border-solid border-2 border-lime-400 bg-lime-400/80 hover:bg-lime-400 rounded-full"
35+
>
36+
Diseñar
37+
</LinkScroll>
38+
<LinkScroll
39+
to="Prototipar"
40+
smooth={true}
41+
spy={true}
42+
className="font-bold text-[10px] sm:text-xl cursor-pointer sm:w-[150px] sm:h-[150px] w-[50px] h-[50px] flex items-center justify-center border-solid border-2 border-emerald-400 bg-emerald-400/80 hover:bg-emerald-400 rounded-full"
43+
>
44+
Prototipar
45+
</LinkScroll>
46+
</div>
47+
);
48+
};
49+
50+
export default SphereColors;

0 commit comments

Comments
 (0)