mirror of
https://github.com/Sosokker/SOS12.git
synced 2025-12-18 20:24:05 +01:00
Maybe Final, still need to add more questions
This commit is contained in:
Krittin SETDHAVANICH
parent
acad5e8e7f
commit
ab218a5559
@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="./public/logo.svg" />
|
<link rel="icon" type="svg" href="./src/assets/logo.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>SOS CAMP | 12TH</title>
|
<title>SOS CAMP | 12TH</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
37
src/App.jsx
37
src/App.jsx
@ -1,26 +1,25 @@
|
|||||||
import { BrowserRouter } from "react-router-dom";
|
import {BrowserRouter, Route, Routes} from "react-router-dom";
|
||||||
import { Routes, Route } from 'react-router-dom';
|
import {Contacts, Faq, Menu, Navbar, Problems} from "./components";
|
||||||
import { Menu, Navbar, Contacts, StarsCanvas, Problems, Faq } from "./components";
|
|
||||||
import "./index.css"
|
import "./index.css"
|
||||||
import "./components/Problems.css"
|
import "./components/Problems.css"
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<div className='relative z-0 bg-primary'>
|
<div className='relative z-0 bg-primary'>
|
||||||
<div className='bg-[#050816]'>
|
<div className='bg-[#050816]'>
|
||||||
<Navbar />
|
<Navbar/>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Menu />} />
|
<Route path="/" element={<Menu/>}/>
|
||||||
<Route path="/problems" element={<Problems />} />
|
<Route path="/problems" element={<Problems/>}/>
|
||||||
<Route path="/contacts" element={<Contacts />} />
|
<Route path="/contacts" element={<Contacts/>}/>
|
||||||
<Route path="/contact" element={<Contacts />} />
|
<Route path="/contact" element={<Contacts/>}/>
|
||||||
<Route path="/faq" element={<Faq />} />
|
<Route path="/faq" element={<Faq/>}/>
|
||||||
</Routes>
|
</Routes>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
1056
src/assets/logo.svg
1056
src/assets/logo.svg
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 90 KiB |
@ -1,135 +1,135 @@
|
|||||||
import React, { useRef, useState } from "react";
|
import React, {useRef, useState} from "react";
|
||||||
import { motion } from "framer-motion";
|
import {motion} from "framer-motion";
|
||||||
import emailjs from "@emailjs/browser";
|
import emailjs from "@emailjs/browser";
|
||||||
import { styles } from "../styles";
|
import {styles} from "../styles";
|
||||||
import { SectionWrapper } from "../hoc";
|
import {SectionWrapper} from "../hoc";
|
||||||
import { slideIn } from "../utils/motion";
|
import {slideIn} from "../utils/motion";
|
||||||
import EarthCanvas from "./canvas/Earth.jsx";
|
import EarthCanvas from "./canvas/Earth.jsx";
|
||||||
|
|
||||||
const Contact = () => {
|
const Contact = () => {
|
||||||
const formRef = useRef();
|
const formRef = useRef();
|
||||||
const [form, setForm] = useState({
|
const [form, setForm] = useState({
|
||||||
name: "",
|
name: "",
|
||||||
email: "",
|
email: "",
|
||||||
message: "",
|
message: "",
|
||||||
});
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const handleChange = (e) => {
|
|
||||||
const { target } = e;
|
|
||||||
const { name, value } = target;
|
|
||||||
|
|
||||||
setForm({
|
|
||||||
...form,
|
|
||||||
[name]: value,
|
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
const [loading, setLoading] = useState(false);
|
||||||
e.preventDefault();
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
emailjs
|
const handleChange = (e) => {
|
||||||
.send(
|
const {target} = e;
|
||||||
import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
|
const {name, value} = target;
|
||||||
import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
|
|
||||||
{
|
|
||||||
from_name: form.name,
|
|
||||||
to_name: "JJ",
|
|
||||||
from_email: form.email,
|
|
||||||
to_email: "Jwizzed@outlook.com",
|
|
||||||
message: form.message,
|
|
||||||
},
|
|
||||||
import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
|
|
||||||
)
|
|
||||||
.then(
|
|
||||||
() => {
|
|
||||||
setLoading(false);
|
|
||||||
alert("Thank you. I will get back to you as soon as possible.");
|
|
||||||
|
|
||||||
setForm({
|
setForm({
|
||||||
name: "",
|
...form,
|
||||||
email: "",
|
[name]: value,
|
||||||
message: "",
|
});
|
||||||
});
|
};
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
setLoading(false);
|
|
||||||
console.error(error);
|
|
||||||
|
|
||||||
alert("Ahh, something went wrong. Please try again.");
|
const handleSubmit = (e) => {
|
||||||
}
|
e.preventDefault();
|
||||||
);
|
setLoading(true);
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
emailjs
|
||||||
<div
|
.send(
|
||||||
className={`xl:mt-12 flex xl:flex-row flex-col-reverse gap-10 overflow-hidden`}
|
import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
|
||||||
>
|
import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
|
||||||
<motion.div
|
{
|
||||||
variants={slideIn("left", "tween", 0.2, 1)}
|
from_name: form.name,
|
||||||
className='flex-[0.75] bg-black-100 p-8 rounded-2xl'
|
to_name: "JJ",
|
||||||
>
|
from_email: form.email,
|
||||||
<p className={styles.sectionSubText}>Get in touch</p>
|
to_email: "Jwizzed@outlook.com",
|
||||||
<h3 className={styles.sectionHeadText}>Contact.</h3>
|
message: form.message,
|
||||||
|
},
|
||||||
|
import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
|
||||||
|
)
|
||||||
|
.then(
|
||||||
|
() => {
|
||||||
|
setLoading(false);
|
||||||
|
alert("Thank you. I will get back to you as soon as possible.");
|
||||||
|
|
||||||
<form
|
setForm({
|
||||||
ref={formRef}
|
name: "",
|
||||||
onSubmit={handleSubmit}
|
email: "",
|
||||||
className='mt-12 flex flex-col gap-8'
|
message: "",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
setLoading(false);
|
||||||
|
console.error(error);
|
||||||
|
|
||||||
|
alert("Ahh, something went wrong. Please try again.");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`xl:mt-12 flex xl:flex-row flex-col-reverse gap-10 overflow-hidden`}
|
||||||
>
|
>
|
||||||
<label className='flex flex-col'>
|
<motion.div
|
||||||
<span className='text-white font-medium mb-4'>Your Name</span>
|
variants={slideIn("left", "tween", 0.2, 1)}
|
||||||
<input
|
className='flex-[0.75] bg-black-100 p-8 rounded-2xl'
|
||||||
type='text'
|
>
|
||||||
name='name'
|
<p className={styles.sectionSubText}>Get in touch</p>
|
||||||
value={form.name}
|
<h3 className={styles.sectionHeadText}>Contact.</h3>
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="What's your good name?"
|
|
||||||
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className='flex flex-col'>
|
|
||||||
<span className='text-white font-medium mb-4'>Your email</span>
|
|
||||||
<input
|
|
||||||
type='email'
|
|
||||||
name='email'
|
|
||||||
value={form.email}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="What's your web address?"
|
|
||||||
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className='flex flex-col'>
|
|
||||||
<span className='text-white font-medium mb-4'>Your Message</span>
|
|
||||||
<textarea
|
|
||||||
rows={7}
|
|
||||||
name='message'
|
|
||||||
value={form.message}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder='What you want to say?'
|
|
||||||
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<button
|
<form
|
||||||
type='submit'
|
ref={formRef}
|
||||||
className='bg-tertiary py-3 px-8 rounded-xl outline-none w-fit text-white font-bold shadow-md shadow-primary'
|
onSubmit={handleSubmit}
|
||||||
>
|
className='mt-12 flex flex-col gap-8'
|
||||||
{loading ? "Sending..." : "Send"}
|
>
|
||||||
</button>
|
<label className='flex flex-col'>
|
||||||
</form>
|
<span className='text-white font-medium mb-4'>Your Name</span>
|
||||||
</motion.div>
|
<input
|
||||||
|
type='text'
|
||||||
|
name='name'
|
||||||
|
value={form.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="What's your good name?"
|
||||||
|
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className='flex flex-col'>
|
||||||
|
<span className='text-white font-medium mb-4'>Your email</span>
|
||||||
|
<input
|
||||||
|
type='email'
|
||||||
|
name='email'
|
||||||
|
value={form.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="What's your web address?"
|
||||||
|
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className='flex flex-col'>
|
||||||
|
<span className='text-white font-medium mb-4'>Your Message</span>
|
||||||
|
<textarea
|
||||||
|
rows={7}
|
||||||
|
name='message'
|
||||||
|
value={form.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder='What you want to say?'
|
||||||
|
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
<motion.div
|
<button
|
||||||
variants={slideIn("right", "tween", 0.2, 1)}
|
type='submit'
|
||||||
className='xl:flex-1 xl:h-auto md:h-[550px] h-[350px]'
|
className='bg-tertiary py-3 px-8 rounded-xl outline-none w-fit text-white font-bold shadow-md shadow-primary'
|
||||||
>
|
>
|
||||||
<EarthCanvas />
|
{loading ? "Sending..." : "Send"}
|
||||||
</motion.div>
|
</button>
|
||||||
</div>
|
</form>
|
||||||
);
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
variants={slideIn("right", "tween", 0.2, 1)}
|
||||||
|
className='xl:flex-1 xl:h-auto md:h-[550px] h-[350px]'
|
||||||
|
>
|
||||||
|
<EarthCanvas/>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SectionWrapper(Contact, "contact");
|
export default SectionWrapper(Contact, "contact");
|
||||||
@ -3,13 +3,13 @@ import {SectionWrapper} from "../hoc";
|
|||||||
import Contact from "./Contacter.jsx"
|
import Contact from "./Contacter.jsx"
|
||||||
import SocialMedia from "./SocialMedia.jsx";
|
import SocialMedia from "./SocialMedia.jsx";
|
||||||
import {styles} from "../styles.js";
|
import {styles} from "../styles.js";
|
||||||
import { StarsCanvas } from "./canvas";
|
import {StarsCanvas} from "./canvas";
|
||||||
|
|
||||||
const Contacts = () => {
|
const Contacts = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Contact/>
|
<Contact/>
|
||||||
<StarsCanvas />
|
<StarsCanvas/>
|
||||||
|
|
||||||
<div className="mt-8">
|
<div className="mt-8">
|
||||||
<h2 className={`${styles.sectionSubTextCenter}`}>SOS12 Social Media</h2>
|
<h2 className={`${styles.sectionSubTextCenter}`}>SOS12 Social Media</h2>
|
||||||
|
|||||||
@ -1,171 +1,172 @@
|
|||||||
import React, { useState } from 'react';
|
import React, {useState} from 'react';
|
||||||
import { styles } from "../styles";
|
import {styles} from "../styles";
|
||||||
import { motion } from "framer-motion";
|
import {motion} from "framer-motion";
|
||||||
import { textVariant } from "../utils/motion";
|
import {textVariant} from "../utils/motion";
|
||||||
import { SectionWrapper } from "../hoc";
|
import {SectionWrapper} from "../hoc";
|
||||||
import { faqs } from '../constants';
|
import {faqs} from '../constants';
|
||||||
|
|
||||||
const Faq = () => {
|
const Faq = () => {
|
||||||
const [activeIndex, setActiveIndex] = useState(null);
|
const [activeIndex, setActiveIndex] = useState(null);
|
||||||
const [activeSection, setActiveSection] = useState(null);
|
const [activeSection, setActiveSection] = useState(null);
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
|
||||||
const toggleFAQ = (sectionIndex, faqIndex) => {
|
const toggleFAQ = (sectionIndex, faqIndex) => {
|
||||||
setActiveIndex((prevIndex) => {
|
setActiveIndex((prevIndex) => {
|
||||||
if (
|
if (
|
||||||
prevIndex !== null &&
|
prevIndex !== null &&
|
||||||
prevIndex[0] === sectionIndex &&
|
prevIndex[0] === sectionIndex &&
|
||||||
prevIndex[1] === faqIndex
|
prevIndex[1] === faqIndex
|
||||||
) {
|
) {
|
||||||
return null; // Collapse the clicked FAQ
|
return null; // Collapse the clicked FAQ
|
||||||
}
|
}
|
||||||
return [sectionIndex, faqIndex]; // Expand the clicked FAQ
|
return [sectionIndex, faqIndex]; // Expand the clicked FAQ
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleSection = (section) => {
|
const toggleSection = (section) => {
|
||||||
setActiveSection((prevSection) => {
|
setActiveSection((prevSection) => {
|
||||||
if (prevSection === section) {
|
if (prevSection === section) {
|
||||||
return null; // Close the clicked section
|
return null; // Close the clicked section
|
||||||
}
|
}
|
||||||
return section; // Open the clicked section
|
return section; // Open the clicked section
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const filteredFaqs = faqs.filter(
|
const filteredFaqs = faqs.filter(
|
||||||
(faq) =>
|
(faq) =>
|
||||||
faq.section.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
faq.section.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
|
faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
);
|
);
|
||||||
|
|
||||||
const groupedFaqs = filteredFaqs.reduce((acc, curr) => {
|
const groupedFaqs = filteredFaqs.reduce((acc, curr) => {
|
||||||
const foundIndex = acc.findIndex((item) => item.section === curr.section);
|
const foundIndex = acc.findIndex((item) => item.section === curr.section);
|
||||||
if (foundIndex === -1) {
|
if (foundIndex === -1) {
|
||||||
acc.push({
|
acc.push({
|
||||||
section: curr.section,
|
section: curr.section,
|
||||||
faqs: [curr],
|
faqs: [curr],
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
acc[foundIndex].faqs.push(curr);
|
acc[foundIndex].faqs.push(curr);
|
||||||
}
|
}
|
||||||
return acc;
|
return acc;
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleSearch = (e) => {
|
const handleSearch = (e) => {
|
||||||
setSearchTerm(e.target.value);
|
setSearchTerm(e.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<motion.div variants={textVariant()}>
|
<motion.div variants={textVariant()}>
|
||||||
<p className={`${styles.sectionSubText} `}>ถามหน่อย</p>
|
<p className={`${styles.sectionSubText} `}>ถามหน่อย</p>
|
||||||
<h2 className={`${styles.sectionHeadText}`}>Frequently Asked Questions</h2>
|
<h2 className={`${styles.sectionHeadText}`}>Frequently Asked Questions</h2>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
|
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
|
||||||
<form>
|
<form>
|
||||||
<label htmlFor="default-search" className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">
|
<label htmlFor="default-search"
|
||||||
Search
|
className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">
|
||||||
</label>
|
Search
|
||||||
<div className="relative">
|
</label>
|
||||||
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
<div className="relative">
|
||||||
<svg
|
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||||
aria-hidden="true"
|
<svg
|
||||||
className="w-5 h-5 text-gray-500 dark:text-gray-400"
|
aria-hidden="true"
|
||||||
fill="none"
|
className="w-5 h-5 text-gray-500 dark:text-gray-400"
|
||||||
stroke="currentColor"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
stroke="currentColor"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
viewBox="0 0 24 24"
|
||||||
>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<path
|
>
|
||||||
strokeLinecap="round"
|
<path
|
||||||
strokeLinejoin="round"
|
strokeLinecap="round"
|
||||||
strokeWidth="2"
|
strokeLinejoin="round"
|
||||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
strokeWidth="2"
|
||||||
></path>
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||||
</svg>
|
></path>
|
||||||
</div>
|
</svg>
|
||||||
<input
|
</div>
|
||||||
type="search"
|
<input
|
||||||
id="default-search"
|
type="search"
|
||||||
className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
id="default-search"
|
||||||
placeholder="Search..."
|
className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
value={searchTerm}
|
placeholder="Search..."
|
||||||
onChange={handleSearch}
|
value={searchTerm}
|
||||||
/>
|
onChange={handleSearch}
|
||||||
</div>
|
/>
|
||||||
</form>
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
|
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
|
||||||
<div className="grid gap-6 grid-cols-1 sm:grid-cols-2">
|
<div className="grid gap-6 grid-cols-1 sm:grid-cols-2">
|
||||||
{groupedFaqs.map(({ section, faqs }, sectionIndex) => (
|
{groupedFaqs.map(({section, faqs}, sectionIndex) => (
|
||||||
<div key={sectionIndex} className="mb-8">
|
<div key={sectionIndex} className="mb-8">
|
||||||
<div
|
<div
|
||||||
className={`flex items-center justify-between cursor-pointer ${
|
className={`flex items-center justify-between cursor-pointer ${
|
||||||
activeSection === section ? 'text-blue-700' : 'text-white-900'
|
activeSection === section ? 'text-blue-700' : 'text-white-900'
|
||||||
}`}
|
}`}
|
||||||
onClick={() => toggleSection(section)}
|
onClick={() => toggleSection(section)}
|
||||||
>
|
>
|
||||||
<h2 className="text-2xl font-semibold mb-4">{section}</h2>
|
<h2 className="text-2xl font-semibold mb-4">{section}</h2>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
className={`w-6 h-6 ${
|
className={`w-6 h-6 ${
|
||||||
activeSection === section ? 'text-blue-700' : 'text-gray-500'
|
activeSection === section ? 'text-blue-700' : 'text-gray-500'
|
||||||
}`}
|
}`}
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
d={
|
d={
|
||||||
activeSection === section
|
activeSection === section
|
||||||
? 'M19 9l-7 7-7-7'
|
? 'M19 9l-7 7-7-7'
|
||||||
: 'M9 5l7 7-7 7'
|
: 'M9 5l7 7-7 7'
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
{activeSection === section && (
|
{activeSection === section && (
|
||||||
<div>
|
<div>
|
||||||
{faqs.map((faq, faqIndex) => (
|
{faqs.map((faq, faqIndex) => (
|
||||||
<a
|
<a
|
||||||
key={faqIndex}
|
key={faqIndex}
|
||||||
href="#"
|
href="#"
|
||||||
className={`block p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 ${
|
className={`block p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 ${
|
||||||
activeIndex &&
|
activeIndex &&
|
||||||
activeIndex[0] === sectionIndex &&
|
activeIndex[0] === sectionIndex &&
|
||||||
activeIndex[1] === faqIndex
|
activeIndex[1] === faqIndex
|
||||||
? 'mb-4'
|
? 'mb-4'
|
||||||
: 'mb-2'
|
: 'mb-2'
|
||||||
}`}
|
}`}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
toggleFAQ(sectionIndex, faqIndex);
|
toggleFAQ(sectionIndex, faqIndex);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<h5 className="mb-2 text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
|
<h5 className="mb-2 text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
|
||||||
{faq.question}
|
{faq.question}
|
||||||
</h5>
|
</h5>
|
||||||
{activeIndex &&
|
{activeIndex &&
|
||||||
activeIndex[0] === sectionIndex &&
|
activeIndex[0] === sectionIndex &&
|
||||||
activeIndex[1] === faqIndex && (
|
activeIndex[1] === faqIndex && (
|
||||||
<p className="font-normal text-gray-700 dark:text-gray-400">
|
<p className="font-normal text-gray-700 dark:text-gray-400">
|
||||||
{faq.answer}
|
{faq.answer}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</a>
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
|
||||||
</div>
|
</div>
|
||||||
))}
|
);
|
||||||
</div>
|
|
||||||
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SectionWrapper(Faq, "");
|
export default SectionWrapper(Faq, "");
|
||||||
|
|||||||
@ -1,54 +0,0 @@
|
|||||||
import { motion } from "framer-motion";
|
|
||||||
import { Canvas } from "@react-three/fiber";
|
|
||||||
import { styles } from "../styles";
|
|
||||||
import { ComputersCanvas } from "./canvas";
|
|
||||||
import Model from "./canvas/Bananacat";
|
|
||||||
import { DirectionalLight } from "three";
|
|
||||||
import * as THREE from 'three'
|
|
||||||
|
|
||||||
const Hero = () => {
|
|
||||||
return (
|
|
||||||
<section className={`relative w-full h-screen mx-auto`}>
|
|
||||||
<div
|
|
||||||
className={`absolute inset-0 top-[120px] max-w-7xl mx-auto ${styles.paddingX} flex flex-row items-start gap-5`}
|
|
||||||
>
|
|
||||||
<div className='flex flex-col justify-center items-center mt-5'>
|
|
||||||
<div className='w-5 h-5 rounded-full bg-[#915EFF]' />
|
|
||||||
<div className='w-1 sm:h-80 h-40 violet-gradient' />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1 className={`${styles.heroHeadText} text-white`}>
|
|
||||||
Hi, I'm <span className='text-[#915EFF]'>Adrian</span>
|
|
||||||
</h1>
|
|
||||||
<p className={`${styles.heroSubText} mt-2 text-white-100`}>
|
|
||||||
I develop 3D visuals, user <br className='sm:block hidden' />
|
|
||||||
interfaces and web applications
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* <ComputersCanvas /> */}
|
|
||||||
|
|
||||||
<div className='absolute xs:bottom-10 bottom-32 w-full flex justify-center items-center'>
|
|
||||||
<a href='#about'>
|
|
||||||
<div className='w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2'>
|
|
||||||
<motion.div
|
|
||||||
animate={{
|
|
||||||
y: [0, 24, 0],
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 1.5,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatType: "loop",
|
|
||||||
}}
|
|
||||||
className='w-3 h-3 rounded-full bg-secondary mb-1'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Hero;
|
|
||||||
@ -1,31 +1,31 @@
|
|||||||
import { Html, useProgress } from "@react-three/drei";
|
import {Html, useProgress} from "@react-three/drei";
|
||||||
|
|
||||||
const CanvasLoader = () => {
|
const CanvasLoader = () => {
|
||||||
const { progress } = useProgress();
|
const {progress} = useProgress();
|
||||||
return (
|
return (
|
||||||
<Html
|
<Html
|
||||||
as='div'
|
as='div'
|
||||||
center
|
center
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className='canvas-loader'></span>
|
<span className='canvas-loader'></span>
|
||||||
<p
|
<p
|
||||||
style={{
|
style={{
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
color: "#F1F1F1",
|
color: "#F1F1F1",
|
||||||
fontWeight: 800,
|
fontWeight: 800,
|
||||||
marginTop: 40,
|
marginTop: 40,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{progress.toFixed(2)}%
|
{progress.toFixed(2)}%
|
||||||
</p>
|
</p>
|
||||||
</Html>
|
</Html>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CanvasLoader;
|
export default CanvasLoader;
|
||||||
|
|||||||
@ -41,7 +41,6 @@ const Menu = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<motion.div variants={textVariant()}>
|
<motion.div variants={textVariant()}>
|
||||||
<p className={styles.sectionSubTextCenter}>สวัสดีฮ๊าฟ ฟู่วววว~~</p>
|
|
||||||
<h2 className={styles.sectionCenterText}>SOS CAMP 12th</h2>
|
<h2 className={styles.sectionCenterText}>SOS CAMP 12th</h2>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
@ -49,13 +48,7 @@ const Menu = () => {
|
|||||||
variants={fadeIn("", "", 0.1, 1)}
|
variants={fadeIn("", "", 0.1, 1)}
|
||||||
className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center'
|
className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center'
|
||||||
>
|
>
|
||||||
Hello, Welcome, Have Room, Have Condo
|
Welcome to the 12th SOS camp, a preparation camp for SKE21 students. We hope that students will definitely gain knowledge and enjoyment.
|
||||||
Have K-Y, Good Take Care, Do Everything
|
|
||||||
Eat Chicken, Eat Duck
|
|
||||||
Drink Cola, Drink fanta
|
|
||||||
Drink aLong the Way, Good Job, Programmer Job
|
|
||||||
Steve Job, Job Job, Python Job, Dangerous Job
|
|
||||||
Look into my eyes, Thank you xoxo
|
|
||||||
</motion.p>
|
</motion.p>
|
||||||
|
|
||||||
<div className='mt-20 flex flex-wrap gap-10'>
|
<div className='mt-20 flex flex-wrap gap-10'>
|
||||||
|
|||||||
@ -1,102 +1,102 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, {useEffect, useState} from "react";
|
||||||
import { Link } from "react-router-dom";
|
import {Link} from "react-router-dom";
|
||||||
|
|
||||||
import { styles } from "../styles";
|
import {styles} from "../styles";
|
||||||
import { navLinks } from "../constants";
|
import {navLinks} from "../constants";
|
||||||
import { logo, menu, close } from "../assets";
|
import {close, logo, menu} from "../assets";
|
||||||
|
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
const [active, setActive] = useState("");
|
const [active, setActive] = useState("");
|
||||||
const [toggle, setToggle] = useState(false);
|
const [toggle, setToggle] = useState(false);
|
||||||
const [scrolled, setScrolled] = useState(false);
|
const [scrolled, setScrolled] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
const scrollTop = window.scrollY;
|
const scrollTop = window.scrollY;
|
||||||
if (scrollTop > 100) {
|
if (scrollTop > 100) {
|
||||||
setScrolled(true);
|
setScrolled(true);
|
||||||
} else {
|
} else {
|
||||||
setScrolled(false);
|
setScrolled(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener("scroll", handleScroll);
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
|
||||||
return () => window.removeEventListener("scroll", handleScroll);
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav
|
<nav
|
||||||
className={`${
|
|
||||||
styles.paddingX
|
|
||||||
} w-full flex items-center py-5 fixed top-0 z-20 ${
|
|
||||||
scrolled ? "bg-primary" : "bg-transparent"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className='w-full flex justify-between items-center max-w-7xl mx-auto'>
|
|
||||||
<Link
|
|
||||||
to='/'
|
|
||||||
className='flex items-center gap-2'
|
|
||||||
onClick={() => {
|
|
||||||
setActive("");
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img src={logo} alt='logo' className='w-9 h-9 object-contain' />
|
|
||||||
<p className='text-white text-[18px] font-bold cursor-pointer flex '>
|
|
||||||
SOS CAMP
|
|
||||||
<span className='sm:block hidden'> | 12th</span>
|
|
||||||
</p>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<ul className='list-none hidden sm:flex flex-row gap-10'>
|
|
||||||
{navLinks.map((nav) => (
|
|
||||||
<li
|
|
||||||
key={nav.id}
|
|
||||||
className={`${
|
|
||||||
active === nav.title ? "text-white" : "text-secondary"
|
|
||||||
} hover:text-white text-[18px] font-medium cursor-pointer`}
|
|
||||||
onClick={() => setActive(nav.title)}
|
|
||||||
>
|
|
||||||
<a href={`${nav.id}`}>{nav.title}</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className='sm:hidden flex flex-1 justify-end items-center'>
|
|
||||||
<img
|
|
||||||
src={toggle ? close : menu}
|
|
||||||
alt='menu'
|
|
||||||
className='w-[28px] h-[28px] object-contain'
|
|
||||||
onClick={() => setToggle(!toggle)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={`${
|
className={`${
|
||||||
!toggle ? "hidden" : "flex"
|
styles.paddingX
|
||||||
} p-6 black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl`}
|
} w-full flex items-center py-5 fixed top-0 z-20 ${
|
||||||
>
|
scrolled ? "bg-primary" : "bg-transparent"
|
||||||
<ul className='list-none flex justify-end items-start flex-1 flex-col gap-4'>
|
}`}
|
||||||
{navLinks.map((nav) => (
|
>
|
||||||
<li
|
<div className='w-full flex justify-between items-center max-w-7xl mx-auto'>
|
||||||
key={nav.id}
|
<Link
|
||||||
className={`font-poppins font-medium cursor-pointer text-[16px] ${
|
to='/'
|
||||||
active === nav.title ? "text-white" : "text-secondary"
|
className='flex items-center gap-2'
|
||||||
}`}
|
onClick={() => {
|
||||||
onClick={() => {
|
setActive("");
|
||||||
setToggle(!toggle);
|
window.scrollTo(0, 0);
|
||||||
setActive(nav.title);
|
}}
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<a href={`#${nav.id}`}>{nav.title}</a>
|
<img src={logo} alt='logo' className='w-9 h-9 object-contain'/>
|
||||||
</li>
|
<p className='text-white text-[18px] font-bold cursor-pointer flex '>
|
||||||
))}
|
SOS CAMP
|
||||||
</ul>
|
<span className='sm:block hidden'> | 12th</span>
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</Link>
|
||||||
</div>
|
|
||||||
</nav>
|
<ul className='list-none hidden sm:flex flex-row gap-10'>
|
||||||
);
|
{navLinks.map((nav) => (
|
||||||
|
<li
|
||||||
|
key={nav.id}
|
||||||
|
className={`${
|
||||||
|
active === nav.title ? "text-white" : "text-secondary"
|
||||||
|
} hover:text-white text-[18px] font-medium cursor-pointer`}
|
||||||
|
onClick={() => setActive(nav.title)}
|
||||||
|
>
|
||||||
|
<a href={`${nav.id}`}>{nav.title}</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div className='sm:hidden flex flex-1 justify-end items-center'>
|
||||||
|
<img
|
||||||
|
src={toggle ? close : menu}
|
||||||
|
alt='menu'
|
||||||
|
className='w-[28px] h-[28px] object-contain'
|
||||||
|
onClick={() => setToggle(!toggle)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`${
|
||||||
|
!toggle ? "hidden" : "flex"
|
||||||
|
} p-6 black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl`}
|
||||||
|
>
|
||||||
|
<ul className='list-none flex justify-end items-start flex-1 flex-col gap-4'>
|
||||||
|
{navLinks.map((nav) => (
|
||||||
|
<li
|
||||||
|
key={nav.id}
|
||||||
|
className={`font-poppins font-medium cursor-pointer text-[16px] ${
|
||||||
|
active === nav.title ? "text-white" : "text-secondary"
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
setToggle(!toggle);
|
||||||
|
setActive(nav.title);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<a href={`#${nav.id}`}>{nav.title}</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Navbar;
|
export default Navbar;
|
||||||
|
|||||||
@ -1,26 +1,28 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { motion } from "framer-motion";
|
import {motion} from "framer-motion";
|
||||||
|
|
||||||
import { styles } from "../styles";
|
import {styles} from "../styles";
|
||||||
import { SectionWrapper } from "../hoc";
|
import {SectionWrapper} from "../hoc";
|
||||||
import { fadeIn, textVariant } from "../utils/motion";
|
import {fadeIn, textVariant} from "../utils/motion";
|
||||||
|
|
||||||
const Preproblems = () => {
|
const Preproblems = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<motion.div variants={textVariant()}>
|
<motion.div variants={textVariant()}>
|
||||||
<p className={styles.sectionSubTextCenter}>เทสๆ</p>
|
<p className={styles.sectionSubTextCenter}>ทำโจทย์หน่อย</p>
|
||||||
<h2 className={styles.sectionCenterText}>Problems</h2>
|
<h2 className={styles.sectionCenterText}>Problems</h2>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<motion.p
|
<motion.p
|
||||||
variants={fadeIn("", "", 0.1, 1)}
|
variants={fadeIn("", "", 0.1, 1)}
|
||||||
className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center'
|
className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center'
|
||||||
>
|
>
|
||||||
Welcome to the 12th SOS camp, a preparation camp for SKE21 students. We hope that students will definitely gain knowledge and enjoyment.
|
A <a className="underline decoration-pink-500"> fundamental</a> Python exercise often focuses on
|
||||||
</motion.p>
|
introducing and reinforcing core programming concepts and syntax in the Python programming language. It
|
||||||
</>
|
typically involves solving a specific problem or completing a task using Python code.
|
||||||
);
|
</motion.p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SectionWrapper(Preproblems, "about");
|
export default SectionWrapper(Preproblems, "about");
|
||||||
|
|||||||
@ -1,14 +1,3 @@
|
|||||||
|
|
||||||
/*body {*/
|
|
||||||
/* background: black;*/
|
|
||||||
/* color: white;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*#light {*/
|
|
||||||
/* background: white;*/
|
|
||||||
/* color: black;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
.MuiPaper-root.MuiAppBar-root {
|
.MuiPaper-root.MuiAppBar-root {
|
||||||
background: #161E29;
|
background: #161E29;
|
||||||
}
|
}
|
||||||
@ -72,6 +61,7 @@ h6.MuiTypography-root a:hover {
|
|||||||
footer.MuiBox-root {
|
footer.MuiBox-root {
|
||||||
background-color: #161E29;
|
background-color: #161E29;
|
||||||
}
|
}
|
||||||
|
|
||||||
h6.MuiTypography-root {
|
h6.MuiTypography-root {
|
||||||
color: #7DD6F6;
|
color: #7DD6F6;
|
||||||
}
|
}
|
||||||
@ -102,7 +92,7 @@ h2.MuiTypography-root {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.MuiButtonBase-root.MuiCheckbox-root :hover{
|
.MuiButtonBase-root.MuiCheckbox-root :hover {
|
||||||
background-color: #2B3E52;
|
background-color: #2B3E52;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
@ -216,7 +206,7 @@ h2.MuiTypography-root {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#light .MuiButtonBase-root.MuiCheckbox-root :hover{
|
#light .MuiButtonBase-root.MuiCheckbox-root :hover {
|
||||||
background-color: #2B3E52;
|
background-color: #2B3E52;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
@ -361,3 +351,4 @@ h4.mail {
|
|||||||
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
|
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import AppBar from '@mui/material/AppBar';
|
import {createContext, useState} from 'react';
|
||||||
import Button from '@mui/material/Button';
|
import Button from '@mui/material/Button';
|
||||||
import Card from '@mui/material/Card';
|
import Card from '@mui/material/Card';
|
||||||
import CardActions from '@mui/material/CardActions';
|
import CardActions from '@mui/material/CardActions';
|
||||||
@ -7,161 +7,83 @@ import CardContent from '@mui/material/CardContent';
|
|||||||
import CardMedia from '@mui/material/CardMedia';
|
import CardMedia from '@mui/material/CardMedia';
|
||||||
import CssBaseline from '@mui/material/CssBaseline';
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
import Grid from '@mui/material/Grid';
|
import Grid from '@mui/material/Grid';
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Toolbar from '@mui/material/Toolbar';
|
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
import Container from '@mui/material/Container';
|
import Container from '@mui/material/Container';
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Checkbox from '@mui/material/Checkbox';
|
import Checkbox from '@mui/material/Checkbox';
|
||||||
import Switch from '@mui/material/Switch';
|
|
||||||
import {styled} from '@mui/material/styles';
|
|
||||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
||||||
import {createTheme, ThemeProvider} from '@mui/material/styles';
|
import {createTheme, ThemeProvider} from '@mui/material/styles';
|
||||||
import cards from '../constants/Card';
|
import cards from '../constants/Card';
|
||||||
import {createContext, useState} from "react";
|
import myimage from '../../public/images/syntax.jpeg'
|
||||||
import { StarsCanvas } from "./canvas";
|
import {SectionWrapper} from "../hoc";
|
||||||
import myimage from '../images/syntax.jpeg'
|
|
||||||
import { SectionWrapper } from "../hoc";
|
|
||||||
import Preproblems from "./Preproblems";
|
import Preproblems from "./Preproblems";
|
||||||
|
|
||||||
export const ThemeContext = createContext(null);
|
export const ThemeContext = createContext(null);
|
||||||
|
|
||||||
// switch theme button ---------------------------------------------------------------
|
|
||||||
const MaterialUISwitch = styled(Switch)(({theme}) => ({
|
|
||||||
width: 62,
|
|
||||||
height: 34,
|
|
||||||
padding: 7,
|
|
||||||
'& .MuiSwitch-switchBase': {
|
|
||||||
margin: 1,
|
|
||||||
padding: 0,
|
|
||||||
transform: 'translateX(6px)',
|
|
||||||
'&.Mui-checked': {
|
|
||||||
color: '#fff',
|
|
||||||
transform: 'translateX(22px)',
|
|
||||||
'& .MuiSwitch-thumb:before': {
|
|
||||||
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
|
|
||||||
'#fff',
|
|
||||||
)}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
|
|
||||||
},
|
|
||||||
'& + .MuiSwitch-track': {
|
|
||||||
opacity: 1,
|
|
||||||
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : 'white',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'& .MuiSwitch-thumb': {
|
|
||||||
backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#7892B5',
|
|
||||||
width: 32,
|
|
||||||
height: 32,
|
|
||||||
'&:before': {
|
|
||||||
content: "''",
|
|
||||||
position: 'absolute',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
|
|
||||||
'#fff',
|
|
||||||
)}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'& .MuiSwitch-track': {
|
|
||||||
opacity: 1,
|
|
||||||
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
|
|
||||||
borderRadius: 20 / 2,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
// switch theme button ----------------------------------------------------------------
|
|
||||||
|
|
||||||
function Copyright() {
|
|
||||||
return (
|
|
||||||
<Typography variant="body2" color="#5585A4" align="center">
|
|
||||||
{'Copyright © '}
|
|
||||||
<Link color="inherit" href="https://mui.com/">
|
|
||||||
Your Website
|
|
||||||
</Link>{' '}
|
|
||||||
{new Date().getFullYear()}
|
|
||||||
{'.'}
|
|
||||||
</Typography>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultTheme = createTheme();
|
const defaultTheme = createTheme();
|
||||||
|
|
||||||
const Problems = () => {
|
const Problems = () => {
|
||||||
|
|
||||||
const [theme, setTheme] = useState('dark');
|
|
||||||
|
|
||||||
|
const [theme, setTheme] = useState('dark');
|
||||||
const toggleTheme = () => {
|
const toggleTheme = () => {
|
||||||
setTheme(theme === 'light' ? 'dark' : 'light');
|
setTheme(theme === 'light' ? 'dark' : 'light');
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Problems">
|
<div className="Problems">
|
||||||
<Preproblems />
|
<Preproblems/>
|
||||||
<ThemeContext.Provider value={{theme, toggleTheme}}>
|
<ThemeContext.Provider value={{theme, toggleTheme}}>
|
||||||
|
|
||||||
<ThemeProvider theme={defaultTheme}>
|
<ThemeProvider theme={defaultTheme}>
|
||||||
<CssBaseline/>
|
<CssBaseline/>
|
||||||
<main>
|
<main>
|
||||||
{/* Hero unit */}
|
|
||||||
<Container
|
<Container
|
||||||
sx={{py: 8}} maxWidth="fit-content">
|
sx={{py: 8}} maxWidth="fit-content">
|
||||||
{/* End hero unit */}
|
|
||||||
<div className="flex mt-4 border border-gray-500 p-4">
|
<div className="flex mt-4 border border-gray-500 p-4">
|
||||||
<Grid container spacing={4}>
|
<Grid container spacing={4}>
|
||||||
{/*# TODO:Edit the Jode here */}
|
{cards.map((card) => (
|
||||||
{cards.map((card) => (
|
<Grid item xs={12} sm={6} md={4} key={card.id}>
|
||||||
<Grid item xs={12} sm={6} md={4} key={card.id}>
|
{/*<img src={require("./images/syntax.jpeg")} alt="jode"/>*/}
|
||||||
{/*<img src={require("./images/syntax.jpeg")} alt="jode"/>*/}
|
<Card
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
height: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardMedia
|
|
||||||
component="div"
|
|
||||||
sx={{
|
sx={{
|
||||||
// 16:9
|
height: '100%',
|
||||||
pt: '56.25%',
|
display: 'flex',
|
||||||
height: 0,
|
flexDirection: 'column',
|
||||||
// objectFit: 'cover',
|
|
||||||
}}
|
}}
|
||||||
image={myimage}
|
>
|
||||||
/>
|
<CardMedia
|
||||||
|
component="div"
|
||||||
|
sx={{
|
||||||
|
// 16:9
|
||||||
|
pt: '56.25%',
|
||||||
|
height: 0,
|
||||||
|
// objectFit: 'cover',
|
||||||
|
}}
|
||||||
|
image={myimage}
|
||||||
|
/>
|
||||||
|
|
||||||
<CardContent sx={{flexGrow: 1}}>
|
<CardContent sx={{flexGrow: 1}}>
|
||||||
<Typography gutterBottom variant="h5" component="h2"
|
<Typography gutterBottom variant="h5" component="h2"
|
||||||
color="#7DD6F6">
|
color="#7DD6F6">
|
||||||
{card.title}
|
{card.title}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography color="aliceblue">
|
<Typography color="aliceblue">
|
||||||
{card.describe}
|
{card.describe}
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardActions>
|
<CardActions>
|
||||||
<Button size="small"><a
|
<Button size="small"><a
|
||||||
href={card.link}>View</a></Button>
|
href={card.link}>View</a></Button>
|
||||||
<Checkbox className="jodeCheckBox"/>
|
<Checkbox className="jodeCheckBox"/>
|
||||||
</CardActions>
|
</CardActions>
|
||||||
</Card>
|
</Card>
|
||||||
</Grid>
|
</Grid>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</div>
|
</div>
|
||||||
{/*<StarsCanvas />*/}
|
|
||||||
</Container>
|
</Container>
|
||||||
</main>
|
</main>
|
||||||
</ThemeProvider> */
|
</ThemeProvider> */
|
||||||
|
|
||||||
</ThemeContext.Provider>
|
</ThemeContext.Provider>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,45 +1,46 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { motion } from 'framer-motion';
|
import {motion} from 'framer-motion';
|
||||||
import Tilt from 'react-tilt';
|
import Tilt from 'react-tilt';
|
||||||
import { socialMediaData } from '../constants';
|
import {socialMediaData} from '../constants';
|
||||||
|
|
||||||
const SocialMedia = () => {
|
const SocialMedia = () => {
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center mt-4">
|
<div className="flex justify-center mt-4">
|
||||||
<div className="flex flex-wrap gap-4">
|
<div className="flex flex-wrap gap-4">
|
||||||
{socialMediaData.map((item, index) => (
|
{socialMediaData.map((item, index) => (
|
||||||
<Tilt className="xs:w-[250px] w-full" key={index}>
|
<Tilt className="xs:w-[250px] w-full" key={index}>
|
||||||
<motion.div
|
<motion.div
|
||||||
variants={{
|
variants={{
|
||||||
hidden: { opacity: 0, y: 50 },
|
hidden: {opacity: 0, y: 50},
|
||||||
visible: { opacity: 1, y: 0 },
|
visible: {opacity: 1, y: 0},
|
||||||
}}
|
}}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
animate="visible"
|
animate="visible"
|
||||||
transition={{
|
transition={{
|
||||||
delay: index * 0.2,
|
delay: index * 0.2,
|
||||||
duration: 0.5,
|
duration: 0.5,
|
||||||
type: 'spring',
|
type: 'spring',
|
||||||
stiffness: 100,
|
stiffness: 100,
|
||||||
}}
|
}}
|
||||||
className="w-full p-4 rounded-lg shadow-lg"
|
className="w-full p-4 rounded-lg shadow-lg"
|
||||||
style={{
|
style={{
|
||||||
background: item.color,
|
background: item.color,
|
||||||
boxShadow: '0px 4px 10px rgba(255, 255, 255, 0.2)',
|
boxShadow: '0px 4px 10px rgba(255, 255, 255, 0.2)',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<a href={item.url} className="block">
|
<a href={item.url} className="block">
|
||||||
<div className="flex justify-center items-center mb-4">
|
<div className="flex justify-center items-center mb-4">
|
||||||
<img src={item.icon} alt={item.title} className="w-8 h-8" style={{ filter: 'drop-shadow(2px 4px 6px rgba(255, 255, 255, 0.5))' }} />
|
<img src={item.icon} alt={item.title} className="w-8 h-8"
|
||||||
</div>
|
style={{filter: 'drop-shadow(2px 4px 6px rgba(255, 255, 255, 0.5))'}}/>
|
||||||
<h3 className="text-white text-2xl font-bold text-center">{item.title}</h3>
|
</div>
|
||||||
</a>
|
<h3 className="text-white text-2xl font-bold text-center">{item.title}</h3>
|
||||||
</motion.div>
|
</a>
|
||||||
</Tilt>
|
</motion.div>
|
||||||
))}
|
</Tilt>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SocialMedia;
|
export default SocialMedia;
|
||||||
|
|||||||
@ -1,43 +1,43 @@
|
|||||||
import React, { Suspense } from "react";
|
import React, {Suspense} from "react";
|
||||||
import { Canvas } from "@react-three/fiber";
|
import {Canvas} from "@react-three/fiber";
|
||||||
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
|
import {OrbitControls, Preload, useGLTF} from "@react-three/drei";
|
||||||
|
|
||||||
import CanvasLoader from "../Loader";
|
import CanvasLoader from "../Loader";
|
||||||
|
|
||||||
const Earth = () => {
|
const Earth = () => {
|
||||||
const earth = useGLTF("./planet/scene.gltf");
|
const earth = useGLTF("./planet/scene.gltf");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<primitive object={earth.scene} scale={2.5} position-y={0} rotation-y={0} />
|
<primitive object={earth.scene} scale={2.2} position-y={0} rotation-y={0}/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const EarthCanvas = () => {
|
const EarthCanvas = () => {
|
||||||
return (
|
return (
|
||||||
<Canvas
|
<Canvas
|
||||||
shadows
|
shadows
|
||||||
frameloop='demand'
|
frameloop='demand'
|
||||||
dpr={[1, 2]}
|
dpr={[1, 2]}
|
||||||
gl={{ preserveDrawingBuffer: true }}
|
gl={{preserveDrawingBuffer: true}}
|
||||||
camera={{
|
camera={{
|
||||||
fov: 45,
|
fov: 45,
|
||||||
near: 0.1,
|
near: 0.1,
|
||||||
far: 200,
|
far: 200,
|
||||||
position: [-4, 3, 6],
|
position: [-4, 3, 6],
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Suspense fallback={<CanvasLoader />}>
|
<Suspense fallback={<CanvasLoader/>}>
|
||||||
<OrbitControls
|
<OrbitControls
|
||||||
autoRotate
|
autoRotate
|
||||||
enableZoom={false}
|
enableZoom={false}
|
||||||
maxPolarAngle={Math.PI / 2}
|
maxPolarAngle={Math.PI / 2}
|
||||||
minPolarAngle={Math.PI / 2}
|
minPolarAngle={Math.PI / 2}
|
||||||
/>
|
/>
|
||||||
<Earth />
|
<Earth/>
|
||||||
<Preload all />
|
<Preload all/>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default EarthCanvas;
|
export default EarthCanvas;
|
||||||
|
|||||||
@ -1,44 +1,44 @@
|
|||||||
import { useState, useRef, Suspense } from "react";
|
import {Suspense, useRef, useState} from "react";
|
||||||
import { Canvas, useFrame } from "@react-three/fiber";
|
import {Canvas, useFrame} from "@react-three/fiber";
|
||||||
import { Points, PointMaterial, Preload } from "@react-three/drei";
|
import {PointMaterial, Points, Preload} from "@react-three/drei";
|
||||||
import * as random from "maath/random/dist/maath-random.esm";
|
import * as random from "maath/random/dist/maath-random.esm";
|
||||||
|
|
||||||
const Stars = (props) => {
|
const Stars = (props) => {
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
const [sphere] = useState(() => random.inSphere(new Float32Array(5000), { radius: 1.2 }));
|
const [sphere] = useState(() => random.inSphere(new Float32Array(5000), {radius: 1.2}));
|
||||||
|
|
||||||
useFrame((state, delta) => {
|
useFrame((state, delta) => {
|
||||||
ref.current.rotation.x -= delta / 10;
|
ref.current.rotation.x -= delta / 10;
|
||||||
ref.current.rotation.y -= delta / 15;
|
ref.current.rotation.y -= delta / 15;
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group rotation={[0, 0, Math.PI / 4]}>
|
<group rotation={[0, 0, Math.PI / 4]}>
|
||||||
<Points ref={ref} positions={sphere} stride={3} frustumCulled {...props}>
|
<Points ref={ref} positions={sphere} stride={3} frustumCulled {...props}>
|
||||||
<PointMaterial
|
<PointMaterial
|
||||||
transparent
|
transparent
|
||||||
color='#f272c8'
|
color='#f272c8'
|
||||||
size={0.002}
|
size={0.002}
|
||||||
sizeAttenuation={true}
|
sizeAttenuation={true}
|
||||||
depthWrite={false}
|
depthWrite={false}
|
||||||
/>
|
/>
|
||||||
</Points>
|
</Points>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const StarsCanvas = () => {
|
const StarsCanvas = () => {
|
||||||
return (
|
return (
|
||||||
<div className='w-full h-auto absolute inset-0 z-[-1]'>
|
<div className='w-full h-auto absolute inset-0 z-[-1]'>
|
||||||
<Canvas camera={{ position: [0, 0, 1] }}>
|
<Canvas camera={{position: [0, 0, 1]}}>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<Stars />
|
<Stars/>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|
||||||
<Preload all />
|
<Preload all/>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default StarsCanvas;
|
export default StarsCanvas;
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import StarsCanvas from "./Stars";
|
import StarsCanvas from "./Stars";
|
||||||
import EarthCanvas from "./Earth";
|
import EarthCanvas from "./Earth";
|
||||||
|
|
||||||
export { StarsCanvas, EarthCanvas };
|
export {StarsCanvas, EarthCanvas};
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
body {
|
|
||||||
background: black;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { StarsCanvas, EarthCanvas } from './canvas';
|
import {EarthCanvas, StarsCanvas} from './canvas';
|
||||||
import Navbar from "./Navbar";
|
import Navbar from "./Navbar";
|
||||||
import Menu from "./Menu";
|
import Menu from "./Menu";
|
||||||
import Contacts from "./Contacts";
|
import Contacts from "./Contacts";
|
||||||
@ -9,14 +9,14 @@ import Preproblems from './Preproblems';
|
|||||||
import SocialMedia from './Socialmedia';
|
import SocialMedia from './Socialmedia';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Navbar,
|
Navbar,
|
||||||
Menu,
|
Menu,
|
||||||
Contacts,
|
Contacts,
|
||||||
CanvasLoader,
|
CanvasLoader,
|
||||||
StarsCanvas,
|
StarsCanvas,
|
||||||
Faq,
|
Faq,
|
||||||
Problems,
|
Problems,
|
||||||
Preproblems,
|
Preproblems,
|
||||||
SocialMedia,
|
SocialMedia,
|
||||||
EarthCanvas,
|
EarthCanvas,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -4,133 +4,133 @@ const cards = [
|
|||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'https://elabsheet.org/elab/taskpads/show/jr070sqaqp/',
|
'link': 'https://elabsheet.org/elab/taskpads/show/jr070sqaqp/',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':1
|
'id': 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Variables',
|
'title': 'Variables',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'https://elabsheet.org/elab/taskpads/change/jr070sqaqp/yqxiczozva/',
|
'link': 'https://elabsheet.org/elab/taskpads/change/jr070sqaqp/yqxiczozva/',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':2
|
'id': 2
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Data Type 01',
|
'title': 'Data Type 01',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':3
|
'id': 3
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Data Type 02',
|
'title': 'Data Type 02',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':4
|
'id': 4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Data Type 03',
|
'title': 'Data Type 03',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':5
|
'id': 5
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Numbers, Casting, String',
|
'title': 'Numbers, Casting, String',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':6
|
'id': 6
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Strings',
|
'title': 'Strings',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'https://elabsheet.org/elab/taskpads/change/4k422fwoou/v49ajp3qgh/',
|
'link': 'https://elabsheet.org/elab/taskpads/change/4k422fwoou/v49ajp3qgh/',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':7
|
'id': 7
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Boolean 01',
|
'title': 'Boolean 01',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':8
|
'id': 8
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Boolean 02',
|
'title': 'Boolean 02',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':9
|
'id': 9
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Operators 01',
|
'title': 'Operators 01',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':10
|
'id': 10
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Operators 02',
|
'title': 'Operators 02',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':11
|
'id': 11
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Lists',
|
'title': 'Lists',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':12
|
'id': 12
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Tuples',
|
'title': 'Tuples',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':13
|
'id': 13
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Sets',
|
'title': 'Sets',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':14
|
'id': 14
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Dictionaries',
|
'title': 'Dictionaries',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':15
|
'id': 15
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'If Else 01',
|
'title': 'If Else 01',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':16
|
'id': 16
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'If Else 02',
|
'title': 'If Else 02',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':17
|
'id': 17
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'If Else 03',
|
'title': 'If Else 03',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':18
|
'id': 18
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'While Loops',
|
'title': 'While Loops',
|
||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':19
|
'id': 19
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -138,7 +138,7 @@ const cards = [
|
|||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':20
|
'id': 20
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -146,7 +146,7 @@ const cards = [
|
|||||||
'describe': 'Mai tum leaw',
|
'describe': 'Mai tum leaw',
|
||||||
'link': 'www.',
|
'link': 'www.',
|
||||||
'img': './images/syntax.jpeg',
|
'img': './images/syntax.jpeg',
|
||||||
'id':21
|
'id': 21
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -1,121 +1,113 @@
|
|||||||
import {
|
import {contacts_pic, discord_icon, faq_pic, github, instagram_icon, problems,} from "../assets";
|
||||||
contacts_pic,
|
|
||||||
faq_pic,
|
|
||||||
problems,
|
|
||||||
github,
|
|
||||||
instagram_icon,
|
|
||||||
discord_icon,
|
|
||||||
} from "../assets";
|
|
||||||
|
|
||||||
export const navLinks = [
|
export const navLinks = [
|
||||||
{
|
{
|
||||||
id: "problems",
|
id: "problems",
|
||||||
title: "Problems",
|
title: "Problems",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "faq",
|
id: "faq",
|
||||||
title: "FAQ",
|
title: "FAQ",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "contact",
|
id: "contact",
|
||||||
title: "Contacts",
|
title: "Contacts",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const menu = [
|
const menu = [
|
||||||
{
|
{
|
||||||
title: "Problems",
|
title: "Problems",
|
||||||
icon: problems,
|
icon: problems,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "FAQ",
|
title: "FAQ",
|
||||||
icon: faq_pic,
|
icon: faq_pic,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Contacts",
|
title: "Contacts",
|
||||||
icon: contacts_pic,
|
icon: contacts_pic,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const faqs = [
|
const faqs = [
|
||||||
{
|
{
|
||||||
section: 'About SKE',
|
section: 'About SKE',
|
||||||
question: 'What is SKE?',
|
question: 'What is SKE?',
|
||||||
answer: 'Software and Knowledge Engineering or SKE (pronounce "ski") for short, is a branch in a Computer Engineering, Kasetsart University. Our branch is also a part of the international Undergraduate Program (IUP).'
|
answer: 'Software and Knowledge Engineering or SKE (pronounce "ski") for short, is a branch in a Computer Engineering, Kasetsart University. Our branch is also a part of the international Undergraduate Program (IUP).'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'About SKE',
|
section: 'About SKE',
|
||||||
question: 'What are the required courses for this branch?',
|
question: 'What are the required courses for this branch?',
|
||||||
answer: 'For freshmen it is required to learn the general engineering courses such as "Engineering Mathematics I", "General Physics I" and "Physics Lab I". You will also need to apply for essential Computer Engineering courses such as, "Computer Programming I" and "Discrete Mathematics and Algebra". For Computer Programming I, you will get to learn the fundamentals of programming with Python. For Discrete Mathematics and Algebra, you will learn about the basic of discrete mathematics and algebra, which is essential for programming.'
|
answer: 'For freshmen it is required to learn the general engineering courses such as "Engineering Mathematics I", "General Physics I" and "Physics Lab I". You will also need to apply for essential Computer Engineering courses such as, "Computer Programming I" and "Discrete Mathematics and Algebra". For Computer Programming I, you will get to learn the fundamentals of programming with Python. For Discrete Mathematics and Algebra, you will learn about the basic of discrete mathematics and algebra, which is essential for programming.'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'About SKE',
|
section: 'About SKE',
|
||||||
question: 'Are the courses difficult?',
|
question: 'Are the courses difficult?',
|
||||||
answer: 'The difficulty of each course varies on each learner, it depends on whether you have basics or not. You might need to adjust and may have to work harder than others, also try to learn by yourself and practice doing exercises.'
|
answer: 'The difficulty of each course varies on each learner, it depends on whether you have basics or not. You might need to adjust and may have to work harder than others, also try to learn by yourself and practice doing exercises.'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'About SKE',
|
section: 'About SKE',
|
||||||
question: 'Is a computer requires? What about specifications?',
|
question: 'Is a computer requires? What about specifications?',
|
||||||
answer: 'A computor is required though it is REALLY recommended to have a laptop. Portable computers will make your life easier and should always be taken to university. For windows, you should pick a laptop with medium specs such as, Core i5 or Ryzen 5 CPU, 8GB RAM, 512 HDD. Make sure to get teh latest generation of CPU to have faster performance. For Mac, it is recommended to get at least M1 CPU.'
|
answer: 'A computor is required though it is REALLY recommended to have a laptop. Portable computers will make your life easier and should always be taken to university. For windows, you should pick a laptop with medium specs such as, Core i5 or Ryzen 5 CPU, 8GB RAM, 512 HDD. Make sure to get teh latest generation of CPU to have faster performance. For Mac, it is recommended to get at least M1 CPU.'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'About SKE',
|
section: 'About SKE',
|
||||||
question: 'When does the course start and what to prepare?',
|
question: 'When does the course start and what to prepare?',
|
||||||
answer: 'The first semester\'s start date is 7th August. Though there will be events before that day like SKE tutorial camp'
|
answer: 'The first semester\'s start date is 7th August. Though there will be events before that day like SKE tutorial camp'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'About SOS12 Camp',
|
section: 'About SOS12 Camp',
|
||||||
question: 'What is SOS Camp?',
|
question: 'What is SOS Camp?',
|
||||||
answer: 'SOS Camp is a preparation camp for freshmen to gain knowledge about the programming. It is also a camp to help you prepare for the first semester. The camp will be held on 18th-21th July.'
|
answer: 'SOS Camp is a preparation camp for freshmen to gain knowledge about the programming. It is also a camp to help you prepare for the first semester. The camp will be held on 18th-21th July.'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'About SOS12 Camp',
|
section: 'About SOS12 Camp',
|
||||||
question: 'What programming languages will be covered in the camp?',
|
question: 'What programming languages will be covered in the camp?',
|
||||||
answer: 'This camp will cover Python.'
|
answer: 'This camp will cover Python.'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'About SOS12 Camp',
|
section: 'About SOS12 Camp',
|
||||||
question: 'Do I need prior programming experience to attend the camp?',
|
question: 'Do I need prior programming experience to attend the camp?',
|
||||||
answer: 'No, you do not need any prior programming experience to attend the camp. The camp will start from the very basics of programming.'
|
answer: 'No, you do not need any prior programming experience to attend the camp. The camp will start from the very basics of programming.'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Programming',
|
section: 'Programming',
|
||||||
question: 'Will the camp cover both theoretical and practical aspects of programming?',
|
question: 'Will the camp cover both theoretical and practical aspects of programming?',
|
||||||
answer: 'Yes, the camp will cover both theoretical and practical aspects of programming. The camp will start with a lecture and then you will be given exercises to practice what you have learned.'
|
answer: 'Yes, the camp will cover both theoretical and practical aspects of programming. The camp will start with a lecture and then you will be given exercises to practice what you have learned.'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Programming',
|
section: 'Programming',
|
||||||
question: 'Can I bring my own laptop or do I need to use university computers',
|
question: 'Can I bring my own laptop or do I need to use university computers',
|
||||||
answer: 'You can bring your own laptop. However, if you do not have a laptop, you can use the university computers.'
|
answer: 'You can bring your own laptop. However, if you do not have a laptop, you can use the university computers.'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Programming',
|
section: 'Programming',
|
||||||
question: 'What software do I need to install on my laptop?',
|
question: 'What software do I need to install on my laptop?',
|
||||||
answer: 'You will need to install Python 3.9.6 and PyCharm Community Edition 2021.1.3.'
|
answer: 'You will need to install Python 3.9.6 and PyCharm Community Edition 2021.1.3.'
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const socialMediaData = [
|
const socialMediaData = [
|
||||||
{
|
{
|
||||||
title: 'Instagram',
|
title: 'Instagram',
|
||||||
icon: instagram_icon,
|
icon: instagram_icon,
|
||||||
url: 'https://www.instagram.com/sos_camp12/',
|
url: 'https://www.instagram.com/sos_camp12/',
|
||||||
color: 'linear-gradient(to bottom right, #FF0080, #7928CA)',
|
color: 'linear-gradient(to bottom right, #FF0080, #7928CA)',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Discord',
|
title: 'Discord',
|
||||||
icon: discord_icon,
|
icon: discord_icon,
|
||||||
url: 'https://discord.gg/wPAFD6qh',
|
url: 'https://discord.gg/wPAFD6qh',
|
||||||
color: 'linear-gradient(to bottom right, #7289DA, #5865F2)',
|
color: 'linear-gradient(to bottom right, #7289DA, #5865F2)',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Github',
|
title: 'Github',
|
||||||
icon: github,
|
icon: github,
|
||||||
url: 'https://github.com/Rick-Lang/rickroll-lang',
|
url: 'https://github.com/Sosokker/SOS12.git',
|
||||||
color: 'linear-gradient(to bottom right, #24292E, #444D56)',
|
color: 'linear-gradient(to bottom right, #24292E, #444D56)',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export { menu, faqs, socialMediaData };
|
export {menu, faqs, socialMediaData};
|
||||||
|
|||||||
@ -1,25 +1,25 @@
|
|||||||
import { motion } from "framer-motion";
|
import {motion} from "framer-motion";
|
||||||
|
|
||||||
import { styles } from "../styles";
|
import {styles} from "../styles";
|
||||||
import { staggerContainer } from "../utils/motion";
|
import {staggerContainer} from "../utils/motion";
|
||||||
|
|
||||||
const StarWrapper = (Component, idName) =>
|
const StarWrapper = (Component, idName) =>
|
||||||
function HOC() {
|
function HOC() {
|
||||||
return (
|
return (
|
||||||
<motion.section
|
<motion.section
|
||||||
variants={staggerContainer()}
|
variants={staggerContainer()}
|
||||||
initial='hidden'
|
initial='hidden'
|
||||||
whileInView='show'
|
whileInView='show'
|
||||||
viewport={{ once: true, amount: 0.25 }}
|
viewport={{once: true, amount: 0.25}}
|
||||||
className={`${styles.padding} max-w-7xl mx-auto relative z-0`}
|
className={`${styles.padding} max-w-7xl mx-auto relative z-0`}
|
||||||
>
|
>
|
||||||
<span className='hash-span' id={idName}>
|
<span className='hash-span' id={idName}>
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<Component />
|
<Component/>
|
||||||
</motion.section>
|
</motion.section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default StarWrapper;
|
export default StarWrapper;
|
||||||
|
|||||||
330
src/index.css
330
src/index.css
@ -5,200 +5,200 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: "Poppins", sans-serif;
|
font-family: "Poppins", sans-serif;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hash-span {
|
.hash-span {
|
||||||
margin-top: -100px;
|
margin-top: -100px;
|
||||||
padding-bottom: 100px;
|
padding-bottom: 100px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.black-gradient {
|
.black-gradient {
|
||||||
background: #000000; /* fallback for old browsers */
|
background: #000000; /* fallback for old browsers */
|
||||||
background: -webkit-linear-gradient(
|
background: -webkit-linear-gradient(
|
||||||
to right,
|
to right,
|
||||||
#434343,
|
#434343,
|
||||||
#000000
|
#000000
|
||||||
); /* Chrome 10-25, Safari 5.1-6 */
|
); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to right,
|
to right,
|
||||||
#434343,
|
#434343,
|
||||||
#000000
|
#000000
|
||||||
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
}
|
}
|
||||||
|
|
||||||
.violet-gradient {
|
.violet-gradient {
|
||||||
background: #804dee;
|
background: #804dee;
|
||||||
background: linear-gradient(-90deg, #804dee 0%, rgba(60, 51, 80, 0) 100%);
|
background: linear-gradient(-90deg, #804dee 0%, rgba(60, 51, 80, 0) 100%);
|
||||||
background: -webkit-linear-gradient(
|
background: -webkit-linear-gradient(
|
||||||
-90deg,
|
-90deg,
|
||||||
#804dee 0%,
|
#804dee 0%,
|
||||||
rgba(60, 51, 80, 0) 100%
|
rgba(60, 51, 80, 0) 100%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.green-pink-gradient {
|
.green-pink-gradient {
|
||||||
background: "#00cea8";
|
background: "#00cea8";
|
||||||
background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
|
background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
|
||||||
background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
|
background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.orange-text-gradient {
|
.orange-text-gradient {
|
||||||
background: #f12711; /* fallback for old browsers */
|
background: #f12711; /* fallback for old browsers */
|
||||||
background: -webkit-linear-gradient(
|
background: -webkit-linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
#f12711,
|
#f12711,
|
||||||
#f5af19
|
#f5af19
|
||||||
); /* Chrome 10-25, Safari 5.1-6 */
|
); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
#f12711,
|
#f12711,
|
||||||
#f5af19
|
#f5af19
|
||||||
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.green-text-gradient {
|
.green-text-gradient {
|
||||||
background: #11998e; /* fallback for old browsers */
|
background: #11998e; /* fallback for old browsers */
|
||||||
background: -webkit-linear-gradient(
|
background: -webkit-linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
#11998e,
|
#11998e,
|
||||||
#38ef7d
|
#38ef7d
|
||||||
); /* Chrome 10-25, Safari 5.1-6 */
|
); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
#11998e,
|
#11998e,
|
||||||
#38ef7d
|
#38ef7d
|
||||||
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-text-gradient {
|
.blue-text-gradient {
|
||||||
/* background: -webkit-linear-gradient(#eee, #333); */
|
/* background: -webkit-linear-gradient(#eee, #333); */
|
||||||
background: #56ccf2; /* fallback for old browsers */
|
background: #56ccf2; /* fallback for old browsers */
|
||||||
background: -webkit-linear-gradient(
|
background: -webkit-linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
#2f80ed,
|
#2f80ed,
|
||||||
#56ccf2
|
#56ccf2
|
||||||
); /* Chrome 10-25, Safari 5.1-6 */
|
); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
#2f80ed,
|
#2f80ed,
|
||||||
#56ccf2
|
#56ccf2
|
||||||
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pink-text-gradient {
|
.pink-text-gradient {
|
||||||
background: #ec008c; /* fallback for old browsers */
|
background: #ec008c; /* fallback for old browsers */
|
||||||
background: -webkit-linear-gradient(
|
background: -webkit-linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
#ec008c,
|
#ec008c,
|
||||||
#fc6767
|
#fc6767
|
||||||
); /* Chrome 10-25, Safari 5.1-6 */
|
); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
#ec008c,
|
#ec008c,
|
||||||
#fc6767
|
#fc6767
|
||||||
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* canvas- styles */
|
/* canvas- styles */
|
||||||
.canvas-loader {
|
.canvas-loader {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-indent: -9999em;
|
text-indent: -9999em;
|
||||||
animation: mulShdSpin 1.1s infinite ease;
|
animation: mulShdSpin 1.1s infinite ease;
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes mulShdSpin {
|
@keyframes mulShdSpin {
|
||||||
0%,
|
0%,
|
||||||
100% {
|
100% {
|
||||||
box-shadow: 0em -2.6em 0em 0em #ffffff,
|
box-shadow: 0em -2.6em 0em 0em #ffffff,
|
||||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
12.5% {
|
12.5% {
|
||||||
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
|
||||||
1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
25% {
|
25% {
|
||||||
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
|
||||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
|
||||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
37.5% {
|
37.5% {
|
||||||
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
|
||||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
|
||||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
62.5% {
|
62.5% {
|
||||||
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
|
||||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
|
||||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
87.5% {
|
87.5% {
|
||||||
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -5,7 +5,7 @@ import App from "./App";
|
|||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<App/>
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,21 +1,21 @@
|
|||||||
const styles = {
|
const styles = {
|
||||||
paddingX: "sm:px-16 px-6",
|
paddingX: "sm:px-16 px-6",
|
||||||
paddingY: "sm:py-16 py-6",
|
paddingY: "sm:py-16 py-6",
|
||||||
padding: "sm:px-16 px-6 sm:py-16 py-10",
|
padding: "sm:px-16 px-6 sm:py-16 py-10",
|
||||||
|
|
||||||
heroHeadText:
|
heroHeadText:
|
||||||
"font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
|
"font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
|
||||||
heroSubText:
|
heroSubText:
|
||||||
"text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
|
"text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
|
||||||
|
|
||||||
sectionHeadText:
|
sectionHeadText:
|
||||||
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
|
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
|
||||||
sectionSubText:
|
sectionSubText:
|
||||||
"sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider",
|
"sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider",
|
||||||
sectionSubTextCenter:
|
sectionSubTextCenter:
|
||||||
"sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider text-center",
|
"sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider text-center",
|
||||||
sectionCenterText:
|
sectionCenterText:
|
||||||
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px] text-center"
|
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px] text-center"
|
||||||
};
|
};
|
||||||
|
|
||||||
export { styles };
|
export {styles};
|
||||||
|
|||||||
@ -1,88 +1,88 @@
|
|||||||
export const textVariant = (delay) => {
|
export const textVariant = (delay) => {
|
||||||
return {
|
return {
|
||||||
hidden: {
|
hidden: {
|
||||||
y: -50,
|
y: -50,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
},
|
},
|
||||||
show: {
|
show: {
|
||||||
y: 0,
|
y: 0,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
type: "spring",
|
type: "spring",
|
||||||
duration: 1.25,
|
duration: 1.25,
|
||||||
delay: delay,
|
delay: delay,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const fadeIn = (direction, type, delay, duration) => {
|
export const fadeIn = (direction, type, delay, duration) => {
|
||||||
return {
|
return {
|
||||||
hidden: {
|
hidden: {
|
||||||
x: direction === "left" ? 100 : direction === "right" ? -100 : 0,
|
x: direction === "left" ? 100 : direction === "right" ? -100 : 0,
|
||||||
y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
|
y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
},
|
},
|
||||||
show: {
|
show: {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
type: type,
|
type: type,
|
||||||
delay: delay,
|
delay: delay,
|
||||||
duration: duration,
|
duration: duration,
|
||||||
ease: "easeOut",
|
ease: "easeOut",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const zoomIn = (delay, duration) => {
|
export const zoomIn = (delay, duration) => {
|
||||||
return {
|
return {
|
||||||
hidden: {
|
hidden: {
|
||||||
scale: 0,
|
scale: 0,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
},
|
},
|
||||||
show: {
|
show: {
|
||||||
scale: 1,
|
scale: 1,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
type: "tween",
|
type: "tween",
|
||||||
delay: delay,
|
delay: delay,
|
||||||
duration: duration,
|
duration: duration,
|
||||||
ease: "easeOut",
|
ease: "easeOut",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const slideIn = (direction, type, delay, duration) => {
|
export const slideIn = (direction, type, delay, duration) => {
|
||||||
return {
|
return {
|
||||||
hidden: {
|
hidden: {
|
||||||
x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
|
x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
|
||||||
y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
|
y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
|
||||||
},
|
},
|
||||||
show: {
|
show: {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
transition: {
|
transition: {
|
||||||
type: type,
|
type: type,
|
||||||
delay: delay,
|
delay: delay,
|
||||||
duration: duration,
|
duration: duration,
|
||||||
ease: "easeOut",
|
ease: "easeOut",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const staggerContainer = (staggerChildren, delayChildren) => {
|
export const staggerContainer = (staggerChildren, delayChildren) => {
|
||||||
return {
|
return {
|
||||||
hidden: {},
|
hidden: {},
|
||||||
show: {
|
show: {
|
||||||
transition: {
|
transition: {
|
||||||
staggerChildren: staggerChildren,
|
staggerChildren: staggerChildren,
|
||||||
delayChildren: delayChildren || 0,
|
delayChildren: delayChildren || 0,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user