FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Day two added spotlight and disclaimer · github/codespaces-react@e582fee · GitHub

/ codespaces-react Public template

Commit e582fee

Browse files
committed
Day two added spotlight and disclaimer
1 parent 9e8011e commit e582fee

4 files changed

Lines changed: 365 additions & 187 deletions

File tree

‎src/App.jsx‎

Lines changed: 14 additions & 187 deletions
Original file line numberDiff line numberDiff line change
@@ -1,197 +1,24 @@
11
import './App.css';
2-
import styled from 'styled-components';
2+
import { useState } from 'react';
3+
import Home from './Home';
4+
import Splash from './Splash';
5+
import Disclaimer from './Disclaimer';
36

47
const App = () => {
5-
return (
6-
<>
7-
<HeroDiv>
8-
<Logo src="logo-white.svg" alt="BFAM Partners" />
9-
<Timelapse />
10-
<Overlay />
11-
<BFAMBio />
12-
</HeroDiv>
13-
<ContactInfo/>
14-
<Footer/>
15-
</>
16-
17-
);
18-
}
19-
20-
const Logo = styled.img`
21-
width: 160px;
22-
padding-top: 50px;
23-
padding-left: 130px;
24-
position: absolute;
25-
top: 0;
26-
left: 0;
27-
z-index: 1;
28-
`;
29-
30-
// create a component that displays video-hero.mp4 on loop
31-
const Timelapse = () => {
32-
return (
33-
<StyledVideo autoPlay loop muted>
34-
<source src="video-hero.mp4" type="video/mp4" />
35-
</StyledVideo>
36-
);
37-
}
38-
39-
const StyledVideo = styled.video`
40-
width: 100%;
41-
height: 100%;
42-
object-fit: cover;
43-
`;
44-
45-
//overlay doesn't cover the styled video, could modify height manually, but not ideal
46-
const Overlay = styled.div`
47-
content: '';
48-
position: absolute;
49-
top: 0;
50-
left: 0;
51-
bottom: 0;
52-
right: 0;
53-
width: 100%;
54-
height: 100%;
55-
background: rgba(0, 47, 108, 0.8);
56-
`;
57-
58-
const BFAMBio = () => {
59-
return (
60-
<Wrapper>
61-
<StyledHeader>
62-
BFAM Partners
63-
</StyledHeader>
64-
<StyledParagraph> BFAM Partners combines deep Asian market experience with world-class financial expertise and leading-edge technology to generate absolute returns.</StyledParagraph>
65-
<StyledParagraph> Opportunities in Credit, Equity, and Volatility drive the investment strategy. Founded in 2012 by Benjamin Fuchs, the team is headquartered in Hong Kong. </StyledParagraph>
66-
</Wrapper>
67-
);
68-
}
69-
70-
const Wrapper = styled.div`
71-
position: absolute;
72-
bottom: 0;
73-
left: 0;
74-
padding-bottom: 100px;
75-
`;
76-
77-
const StyledParagraph = styled.p`
78-
color: white;
79-
position: relative;
80-
padding-left: 130px;
81-
padding-right: 130px;
82-
max-width: 50%;
83-
84-
top: 0;
85-
font-family: "Poppins", sans-serif;
86-
font-weight: 200;
87-
font-style: normal;
88-
font-size: 24px;
89-
line-height: 36px;
90-
margin-bottom: 25px;
91-
`;
8+
const [showPage, setShowPage] = useState(0);
929

93-
const StyledHeader = styled.h1`
94-
color: white;
10+
const setPage = () => {
11+
setShowPage(showPage+1);
12+
}
9513

96-
position: relative;
97-
padding-left: 130px;
98-
padding-right: 130px;
99-
top: 0;
100-
101-
font-family: "Poppins", sans-serif;
102-
font-weight: 200;
103-
font-style: normal;
104-
font-size: 72px;
105-
line-height: 56px;
106-
margin-bottom: 25px;
107-
text-transform: uppercase;
108-
`;
109-
110-
111-
// create a styled component div that spans the whole width and height of the screen and sets the colour to white
112-
const HeroDiv = styled.div`
113-
width: 100vw;
114-
height: 100vh;
115-
background-color: white;
116-
max-width: 100%;
117-
`;
118-
119-
const ContactInfo = () => {
12014
return (
121-
<ContactDiv>
122-
<div>
123-
<ContactHeader>Contact Us</ContactHeader>
124-
<ContactParagraph> 32/F, 148 Electric Road, North Point, Hong Kong | info@bfam-partners.com </ContactParagraph>
125-
</div>
126-
<div>
127-
<ContactHeader>Telephone</ContactHeader>
128-
<ContactParagraph> +852 3409 8888 </ContactParagraph>
129-
</div>
130-
</ContactDiv>
131-
);
132-
}
133-
134-
const ContactDiv = styled.div`
135-
// position: relative;
136-
// width: 100vw;
137-
height: 14vh;
138-
background-color: white;
139-
max-width: 100%;
140-
padding: 0 130px;
141-
display: flex;
142-
align-items: center;
143-
gap: 400px;
144-
`;
145-
146-
const ContactHeader = styled.h1`
147-
color: #002f6c;
148-
font-family: "Libre Franklin", sans-serif;
149-
// font-optical-sizing: auto;
150-
font-weight: 600;
151-
font-style: normal;
152-
font-size: 18px;
153-
154-
155-
156-
`;
157-
158-
const ContactParagraph = styled.p`
159-
color: #3d3d3d;
160-
font-family: "Libre Franklin", sans-serif;
161-
// font-optical-sizing: auto;
162-
font-weight: 300;
163-
font-style: normal;
164-
font-size: 15px;
165-
166-
167-
168-
`;
169-
170-
const Footer = () => {
171-
return (
172-
<FooterDiv>
173-
©2012 - 2024 BFAM Partners TM
174-
</FooterDiv>
15+
<>
16+
{showPage == 0 && <Splash setPage={setPage}/>}
17+
{showPage == 1 && <Disclaimer setPage={setPage}/>}
18+
{showPage == 2 && <Home/>}
19+
{/* {....} */}
20+
</>
17521
);
17622
}
17723

178-
const FooterDiv = styled.div`
179-
// position: relative;
180-
// width: 100vw;
181-
// height: 10vh;
182-
padding: 20px 130px;
183-
background-color: #002f6c;
184-
max-width: 100%;
185-
186-
display: flex;
187-
color: white;
188-
font-family: "Libre Franklin", sans-serif;
189-
font-optical-sizing: auto;
190-
font-weight: 300;
191-
font-style: normal;
192-
font-size: 14px;
193-
text-transform: uppercase;
194-
`;
195-
196-
19724
export default App;

‎src/Disclaimer.jsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import styled from "styled-components";
2+
3+
const Disclaimer = ({setPage}) => {
4+
return (
5+
<StyledDisclaimer>
6+
<Header >Disclaimer</Header>
7+
<LegalJargonBox/>
8+
<StyledButton onClick={setPage}>Agree</StyledButton>
9+
</StyledDisclaimer>
10+
);
11+
}
12+
13+
const StyledDisclaimer = styled.div`
14+
background: #002f6c;
15+
padding: 80px 60px;
16+
position: absolute;
17+
top: 50%;
18+
left: 50%;
19+
transform: translate(-50%, -50%);
20+
width: 82vw;
21+
height: 62vh;
22+
`;
23+
24+
const Header = styled.h1`
25+
text-transform: uppercase;
26+
font-family: "Poppins", sans-serif;
27+
font-weight: 600;
28+
font-style: normal;
29+
font-size: 42px;
30+
line-height: 46px;
31+
margin-bottom: 50px;
32+
color: #fff;
33+
`;
34+
35+
const LegalJargonBox = () => {
36+
return (
37+
<LegalJargon>
38+
<h2>
39+
Important Notice:
40+
</h2>
41+
<StyledJargon>By accessing this website and any of its pages you are agreeing to the terms set out below.</StyledJargon>
42+
<StyledJargon>The information contained on this website is provided for informational purposes only and have not been approved by the Securities and Futures Commission of Hong Kong, the U.S. Securities and Exchange Commission, the U.S. Commodity Futures Trading Commission or any other regulator. The website is for “professional investors” (as defined in the Securities and Futures Ordinance, Cap. 571) only and is not for retail use.</StyledJargon>
43+
<StyledJargon>The information in this website: (i) is general information only; (ii) should not be considered as a comprehensive statement on any matter and should not be relied on as such; (iii) may not be reproduced or redistributed without BFAM’s prior written consent; (iv) may not be relied on as an offer to sell or a solicitation of an offer to buy an interest in any entity managed by BFAM Partners (Hong Kong) Ltd, its affiliates, or group companies (“BFAM”); and (v) is not intended and should not be construed as investment, tax, legal, financial or other advice.</StyledJargon>
44+
<StyledJargon>PAST PERFORMANCE IS NOT NECESSARILY INDICATIVE OF FUTURE RESULTS. THE POTENTIAL FOR PROFIT IS ACCOMPANIED BY THE RISK OF LOSS. </StyledJargon>
45+
<StyledJargon>The investments described on this website and any of its pages may be unsuitable for investors, depending on their specific investment objectives and financial situations. </StyledJargon>
46+
<StyledJargon>All information provided on this website, including hyperlinks to external third party websites, is provided on an “as is” basis without warranty of any kind. BFAM, its directors, officers, agents and funds managed or advised by it (together, the “Group”) expressly disclaim all warranties and conditions with regard to the information on this website or information accessible via hyperlinks on any third party website shown on this website. By providing hyperlinks to an external website or webpage, BFAM shall not be deemed to endorse, recommend, approve, guarantee or introduce any third parties or the services/products they provide on their websites as stated in our Hyperlink policy (see below). </StyledJargon>
47+
<StyledJargon>Nothing in this website shall give rise to a fiduciary duty, advisory or other relationship between you and BFAM and the Group accepts no responsibility in any way including by reason of negligence for errors or omissions contained in this website. All information provided on this website is provided as of the date indicated.BFAM has no obligation to update any information in this website and specifically disclaims any warranty as to the currency of any information contained herein. BFAM may terminate your access to this website for any reason, without prior notice. </StyledJargon>
48+
<StyledJargon>This website is protected by applicable copyright laws. You may not reproduce, publish, transmit, reuse, copy, distribute, modify, post or frame-in any information or material on this website without BFAM’s prior consent. All trademarks on this website belong to BFAM, except for third party trademarks which are the property of their respective owners.</StyledJargon>
49+
<StyledJargon>BFAM does not endorse and is not affiliated with any third party hyperlinks shown on this website (or any information or materials appearing on such third party website or webpage). BFAM has not audited, reviewed or otherwise verified such information and accordingly makes no representation and disclaims all warranties (express or implied) with regard to the accuracy, completeness, fairness or otherwise of such information. BFAM is not responsible for the content or information accessible via any externally linked website or webpage. Your use or navigation to external webpages associated with such hyperlinks is at your own risk and BFAM is not responsible for any damages or losses incurred or suffered by you arising out of or in connection with your use of such hyperlinks. When clicking on a hyperlink and leaving BFAM’s website, you will be subject to the terms of use and privacy policies of the third party website.</StyledJargon>
50+
<StyledJargon>Climate-related Risk Disclosures</StyledJargon>
51+
<StyledJargon>BFAM Partners (Hong Kong) Limited has established a climate risk working group to provide oversight of climate-risk related initiatives. The working group is responsible for approving the framework and policies to assess and manage the climate-related risks relevant to our investment strategies. BFAM Partners (Hong Kong) Limited has engaged a third-party ESG service provider that uses established frameworks such as SASB to assist with the climate-related risk assessment. The working group will periodically monitor the climate related metrics, and report to the Board at least annually.</StyledJargon>
52+
<StyledJargon>If you need any further help, please feel free to contact us at info@bfam-partners.com</StyledJargon>
53+
</LegalJargon>
54+
);
55+
}
56+
57+
const LegalJargon = styled.div`
58+
height: 70%;
59+
overflow-y: scroll;
60+
text-transform: uppercase;
61+
font-family: "Libre Franklin", sans-serif;
62+
font-optical-sizing: auto;
63+
font-weight: 800;
64+
font-style: normal;
65+
color: #fff;
66+
`;
67+
68+
const StyledJargon = styled.p`
69+
text-transform: none;
70+
font-family: "Poppins", sans-serif;
71+
font-weight: 300;
72+
font-style: normal;
73+
font-size: 17px;
74+
line-height: 26px;
75+
margin-top: 0;
76+
margin-bottom: 25px;
77+
word-break: break-word;
78+
word-wrap: break-word;
79+
80+
`;
81+
82+
const StyledButton = styled.div`
83+
bottom: 80px;
84+
padding: 10px 34px;
85+
color: #002f6c;
86+
position: absolute;
87+
background: #fff;
88+
width: 4vw;
89+
text-transform: uppercase;
90+
font-family: "Poppins", sans-serif;
91+
font-weight: 600;
92+
font-style: normal;
93+
font-size: 17px;
94+
line-height: 1.2;
95+
border: none;
96+
cursor: pointer;
97+
`;
98+
99+
export default Disclaimer;

0 commit comments

Comments
 (0)

Back | FazBrowse Home | New Git URL