Skip to content

Commit 23dfa6a

Browse files
falkon2falkon2
committed
add Cloudinary, update HeroHome component to use Cloudinary
1 parent ff91690 commit 23dfa6a

12 files changed

+651
-2
lines changed

‎.history/src/cloudary_20231015091132.js

Whitespace-only changes.

‎.history/src/cloudary_20231015091137.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const cloudinary = require('cloudinary');
2+
3+
cloudinary.v2.config({
4+
cloud_name: 'dvx6axvmy',
5+
api_key: '216913689172872',
6+
api_secret: 'JZKkqbcyGrWq_aaTG5hatnZ30Vw',
7+
secure: true,
8+
});

‎.history/src/cloudary_20231015091226.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const cloudinary = require('cloudinary');
2+
3+
cloudinary.v2.config({
4+
cloud_name: 'dvx6axvmy',
5+
api_key: '216913689172872',
6+
api_secret: 'JZKkqbcyGrWq_aaTG5hatnZ30Vw',
7+
secure: true,
8+
});
9+
10+
console.log(cloudinary.config());

‎.history/src/components/home/HeroHome_20231015091345.jsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, { useState, useRef, useEffect } from 'react';
2+
import Modal from './Utilities/Modal';
3+
4+
import bg from './images/bg.png'
5+
import HeroImage from './images/hero-images.png';
6+
7+
function HeroHome() {
8+
const [videoModalOpen, setVideoModalOpen] = useState(false);
9+
const video = useRef(null);
10+
11+
useEffect(() => {
12+
videoModalOpen ? video.current.play() : video.current.pause();
13+
}, [videoModalOpen]);
14+
15+
return (
16+
<section className="relative">
17+
{/* Illustration behind hero content */}
18+
<div className="absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-none" aria-hidden="true">
19+
<svg width="1360" height="578" viewBox="0 0 1360 578" xmlns="http://www.w3.org/2000/svg">
20+
<defs>
21+
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="illustration-01">
22+
<stop stopColor="#FFF" offset="0%" />
23+
<stop stopColor="#EAEAEA" offset="77.402%" />
24+
<stop stopColor="#DFDFDF" offset="100%" />
25+
</linearGradient>
26+
</defs>
27+
<g fill="url(#illustration-01)" fillRule="evenodd">
28+
<circle cx="1232" cy="128" r="128" />
29+
<circle cx="155" cy="443" r="64" />
30+
</g>
31+
</svg>
32+
</div>
33+
34+
<div className="max-w-6xl text-black z-20 mx-auto px-4 sm:px-6">
35+
{/* Hero content */}
36+
<div className="pt-32 pb-12 md:pt-40 md:pb-20">
37+
{/* Section header */}
38+
<div className="text-center pb-12 md:pb-16">
39+
<h1 className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4" data-aos="zoom-y-out">
40+
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">Quize</span>
41+
</h1>
42+
<div className="max-w-3xl mx-auto">
43+
<p className="text-xl text-gray-600 mb-8" data-aos="zoom-y-out" data-aos-delay="150">
44+
Reinventing Test-taking for Students, by Students 🚀⚡
45+
</p>
46+
<div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center" data-aos="zoom-y-out" data-aos-delay="300">
47+
<div>
48+
<a className="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="/login">
49+
Login
50+
</a>
51+
</div>
52+
53+
</div>
54+
</div>
55+
</div>
56+
57+
{/* Hero image */}
58+
<div>
59+
<div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
60+
<div className="flex flex-col justify-center">
61+
<img className="mx-auto transform animate-float" src="https://asset.cloudinary.com/dvx6axvmy/1ae2c20776cb9dc6c905e5140bf814eb" width="768" height="432" alt="Hero" />
62+
<svg
63+
className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto"
64+
width="768"
65+
height="432"
66+
viewBox="0 0 768 432"
67+
>
68+
69+
</svg>
70+
</div>
71+
72+
</div>
73+
74+
{/* Modal */}
75+
<Modal id="modal" ariaLabel="modal-headline" show={videoModalOpen} handleClose={() => setVideoModalOpen(false)}>
76+
<div className="relative pb-9/16">
77+
<video ref={video} className="absolute w-full h-full" width="1920" height="1080" loop autoPlay controls>
78+
<source src="" type="video/mkv" />
79+
Your browser does not support the video tag.
80+
</video>
81+
</div>
82+
</Modal>
83+
</div>
84+
</div>
85+
</div>
86+
</section>
87+
);
88+
}
89+
90+
export default HeroHome;

‎.history/src/components/home/HeroHome_20231015091446.jsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, { useState, useRef, useEffect } from 'react';
2+
import Modal from './Utilities/Modal';
3+
4+
import bg from './images/bg.png'
5+
import HeroImage from './images/hero-images.png';
6+
7+
function HeroHome() {
8+
const [videoModalOpen, setVideoModalOpen] = useState(false);
9+
const video = useRef(null);
10+
11+
useEffect(() => {
12+
videoModalOpen ? video.current.play() : video.current.pause();
13+
}, [videoModalOpen]);
14+
15+
return (
16+
<section className="relative">
17+
{/* Illustration behind hero content */}
18+
<div className="absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-none" aria-hidden="true">
19+
<svg width="1360" height="578" viewBox="0 0 1360 578" xmlns="http://www.w3.org/2000/svg">
20+
<defs>
21+
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="illustration-01">
22+
<stop stopColor="#FFF" offset="0%" />
23+
<stop stopColor="#EAEAEA" offset="77.402%" />
24+
<stop stopColor="#DFDFDF" offset="100%" />
25+
</linearGradient>
26+
</defs>
27+
<g fill="url(#illustration-01)" fillRule="evenodd">
28+
<circle cx="1232" cy="128" r="128" />
29+
<circle cx="155" cy="443" r="64" />
30+
</g>
31+
</svg>
32+
</div>
33+
34+
<div className="max-w-6xl text-black z-20 mx-auto px-4 sm:px-6">
35+
{/* Hero content */}
36+
<div className="pt-32 pb-12 md:pt-40 md:pb-20">
37+
{/* Section header */}
38+
<div className="text-center pb-12 md:pb-16">
39+
<h1 className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4" data-aos="zoom-y-out">
40+
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">Quize</span>
41+
</h1>
42+
<div className="max-w-3xl mx-auto">
43+
<p className="text-xl text-gray-600 mb-8" data-aos="zoom-y-out" data-aos-delay="150">
44+
Reinventing Test-taking for Students, by Students 🚀⚡
45+
</p>
46+
<div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center" data-aos="zoom-y-out" data-aos-delay="300">
47+
<div>
48+
<a className="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="/login">
49+
Login
50+
</a>
51+
</div>
52+
53+
</div>
54+
</div>
55+
</div>
56+
57+
{/* Hero image */}
58+
<div>
59+
<div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
60+
<div className="flex flex-col justify-center">
61+
<img className="mx-auto transform animate-float" src="https://res.cloudinary.com/dvx6axvmy/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1697340519/hero-images_ojhnyk.jpg?_s=public-apps" width="768" height="432" alt="Hero" />
62+
<svg
63+
className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto"
64+
width="768"
65+
height="432"
66+
viewBox="0 0 768 432"
67+
>
68+
69+
</svg>
70+
</div>
71+
72+
</div>
73+
74+
{/* Modal */}
75+
<Modal id="modal" ariaLabel="modal-headline" show={videoModalOpen} handleClose={() => setVideoModalOpen(false)}>
76+
<div className="relative pb-9/16">
77+
<video ref={video} className="absolute w-full h-full" width="1920" height="1080" loop autoPlay controls>
78+
<source src="" type="video/mkv" />
79+
Your browser does not support the video tag.
80+
</video>
81+
</div>
82+
</Modal>
83+
</div>
84+
</div>
85+
</div>
86+
</section>
87+
);
88+
}
89+
90+
export default HeroHome;

‎.history/src/components/home/HeroHome_20231015093204.jsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React, { useState, useRef, useEffect } from 'react';
2+
import Modal from './Utilities/Modal';
3+
import {Cloudinary} from "@cloudinary/url-gen";
4+
import {AdvancedImage} from '@cloudinary/react';
5+
import bg from './images/bg.png'
6+
import HeroImage from './images/hero-images.png';
7+
8+
function HeroHome() {
9+
const [videoModalOpen, setVideoModalOpen] = useState(false);
10+
const video = useRef(null);
11+
12+
useEffect(() => {
13+
videoModalOpen ? video.current.play() : video.current.pause();
14+
}, [videoModalOpen]);
15+
16+
const cld = new Cloudinary({
17+
cloud: {
18+
cloudName: 'dvx6axvmy'
19+
}
20+
});
21+
const heroIMG = cld.image('hero-images_ojhnyk');
22+
23+
return (
24+
<section className="relative">
25+
{/* Illustration behind hero content */}
26+
<div className="absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-none" aria-hidden="true">
27+
<svg width="1360" height="578" viewBox="0 0 1360 578" xmlns="http://www.w3.org/2000/svg">
28+
<defs>
29+
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="illustration-01">
30+
<stop stopColor="#FFF" offset="0%" />
31+
<stop stopColor="#EAEAEA" offset="77.402%" />
32+
<stop stopColor="#DFDFDF" offset="100%" />
33+
</linearGradient>
34+
</defs>
35+
<g fill="url(#illustration-01)" fillRule="evenodd">
36+
<circle cx="1232" cy="128" r="128" />
37+
<circle cx="155" cy="443" r="64" />
38+
</g>
39+
</svg>
40+
</div>
41+
42+
<div className="max-w-6xl text-black z-20 mx-auto px-4 sm:px-6">
43+
{/* Hero content */}
44+
<div className="pt-32 pb-12 md:pt-40 md:pb-20">
45+
{/* Section header */}
46+
<div className="text-center pb-12 md:pb-16">
47+
<h1 className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4" data-aos="zoom-y-out">
48+
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">Quize</span>
49+
</h1>
50+
<div className="max-w-3xl mx-auto">
51+
<p className="text-xl text-gray-600 mb-8" data-aos="zoom-y-out" data-aos-delay="150">
52+
Reinventing Test-taking for Students, by Students 🚀⚡
53+
</p>
54+
<div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center" data-aos="zoom-y-out" data-aos-delay="300">
55+
<div>
56+
<a className="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="/login">
57+
Login
58+
</a>
59+
</div>
60+
61+
</div>
62+
</div>
63+
</div>
64+
65+
{/* Hero image */}
66+
<div>
67+
<div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
68+
<div className="flex flex-col justify-center">
69+
<AdvancedImage cldImg={heroIMG} className="mx-auto transform animate-float" width="768" height="432" alt="Hero" />
70+
<AdvancedImage cldImg={myImage} />
71+
<svg
72+
className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto"
73+
width="768"
74+
height="432"
75+
viewBox="0 0 768 432"
76+
>
77+
78+
</svg>
79+
</div>
80+
81+
</div>
82+
83+
{/* Modal */}
84+
<Modal id="modal" ariaLabel="modal-headline" show={videoModalOpen} handleClose={() => setVideoModalOpen(false)}>
85+
<div className="relative pb-9/16">
86+
<video ref={video} className="absolute w-full h-full" width="1920" height="1080" loop autoPlay controls>
87+
<source src="" type="video/mkv" />
88+
Your browser does not support the video tag.
89+
</video>
90+
</div>
91+
</Modal>
92+
</div>
93+
</div>
94+
</div>
95+
</section>
96+
);
97+
}
98+
99+
export default HeroHome;

0 commit comments

Comments
 (0)