BlahajTeam/next-app
3
0
Fork 0
Code Issues Pull requests 1 Packages Projects Releases Wiki Activity

split the logo into a separate component (#8)

Browse source 
Co-authored-by: Alex Stan <alex.stan.2010@proton.me>
Co-committed-by: Alex Stan <alex.stan.2010@proton.me>
This commit is contained in:
Alex Stan 2024-06-01 16:24:36 +03:00 committed by Alex Stan
parent 3282da41ed
commit 7d76207057
2 changed files with 15 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/components/logo.tsx Normal file
View file

@ -0,0 +1,11 @@
const Logo = () => {
return (
<div style={{ display:"flex", alignItems: 'center', justifyContent: 'center'}}>
<a href="/">
<img src="/logo-no-background.png" height="auto" width="40%"/>
</a>
</div>
)
}
export default Logo;

33
app/sessionconfig/page.tsx
View file

@ -1,5 +1,6 @@
import { CheckIcon } from '@heroicons/react/20/solid'
import TopicCard from '../components/topic_card'
import Logo from '../components/logo';
const includedFeatures = [
'Private forum access',
@ -13,26 +14,12 @@ export default function Example() {
const cards = [
["Learn cybersecurity", "Learning cybersecurity is like becoming a guardian of the digital realm.\nIt's about mastering the art of protecting information, systems, and networks from cyber threats.\nFrom understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.", "/learn/cybersec" ],
["Learn geography", "It's cool ig", "/learn/geography"],
["Learn C++", "Don't.", "/learn/cpp"],
["Learn C", "Do.", "/learn/c"]
["Learn C++", "Don't.", "/learn/cpp"]
];
return (
<div className="sm:py-32">
<div
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
<div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', paddingTop:'40px'}}><img className="flex" src="/logo-no-background.png" height="auto" width="40%" style={{ alignSelf: 'center'}}></img></div>
<div style={{ display:"flex", alignItems: 'center', justifyContent: 'center'}}><a href="/"><img src="/logo-no-background.png" height="auto" width="40%"/></a></div>
<div className="bg-black py-24 sm:py-32" style = {{ alignItems: 'center', justifyContent: 'center' }}>
<Logo/>
<div className="mx-auto max-w-7xl px-6 lg:px-8">
{ cards.map((elem) => {
return (<TopicCard title={elem[0]} link={elem[2]}>{elem[1]}</TopicCard>)
@ -55,18 +42,6 @@ export default function Example() {
</TopicCard>
*/}
</div>
<div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
</div>
)
}