Skip to content

Gradients Variations test #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

Gradients Variations test #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2556a24
Gradient Variations Testing
manjumjn Oct 13, 2023
9b00e27
Updated Team Slider Options
manjumjn Oct 16, 2023
9558a10
Updates
manjumjn Oct 16, 2023
69baabb
Updated Video
manjumjn Oct 25, 2023
e6b2df6
Updated Config for Static site
manjumjn Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,19 @@
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^1.0.0-next.50",
"@sveltejs/kit": "^1.20.4",
"autoprefixer": "^10.4.16",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"gsap": "^3.12.2",
"postcss": "^8.4.31",
"prettier": "^3.0.3",
"prettier-plugin-svelte": "^3.0.3",
"sass": "^1.68.0",
"scrollmagic": "^2.0.8",
"scrollmagic-plugin-gsap": "^1.0.4",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.3",
Expand All @@ -31,6 +35,7 @@
"type": "module",
"dependencies": {
"@splidejs/splide-extension-auto-scroll": "^0.5.3",
"@splidejs/svelte-splide": "^0.2.9"
"@splidejs/svelte-splide": "^0.2.9",
"scrollmagic-with-ssr": "^1.0.2"
}
}
15 changes: 12 additions & 3 deletions src/components/FAQ.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,16 @@
</script>

<!-- FAQ section starts here -->
<section class="py-16 md:py-24 lg:py-32 px-4 sm:px-0 relative overflow-hidden">
<GradientDivider />
<section
class="py-16 md:py-24 lg:py-32 px-4 sm:px-0 relative overflow-hidden bg-gradient-to-b to-[#000c14] from-[#000f27]"
>
<div class="container mx-auto flex flex-col items-center gap-4">
<h2 class="text-white text-5xl font-medium font-cg tracking-wide">
Frequently asked questions
</h2>
<p class="text-xl">Explore FAQs about Da One Global Ventures: Focus, Funding, Support</p>
<dl
class="flex flex-col items-stretch mt-10 space-y-6 lg:space-y-8 [&>div]:border [&>div]:border-blue-50/20 [&>div]:rounded-md [&>div]:p-4 max-w-2xl w-full"
class="flex flex-col items-stretch mt-10 space-y-6 lg:space-y-8 [&>div]:border [&>div]:rounded-md [&>div]:p-4 max-w-2xl w-full"
>
{#each faqItems as faqItem, index (faqItem.question)}
<div class="faq-item">
Expand Down Expand Up @@ -85,4 +86,12 @@
</dl>
</div>
</section>

<!-- FAQ section ends here -->

<style lang="scss">
.faq-item {
background: radial-gradient(107.2% 200% at 0% 50%, #000f27 0%, rgb(48 56 107 / 0%) 100%);
border-color: #002a46c9;
}
</style>
24 changes: 15 additions & 9 deletions src/components/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,24 @@
</svelte:head>

<!-- Footer starts here -->
<section class="pt-16 pb-8 md:pt-24 lg:pt-32 px-4 sm:px-0 relative overflow-hidden">
<GradientDivider />
<section
class="pt-16 pb-8 md:pt-24 lg:pt-32 px-4 sm:px-0 relative bg-gradient-to-t to-[#000c14] from-[#000f27]"
>
<Globe />
<div class="container mx-auto">
<div class="flex flex-col mx-auto max-w-3xl items-center justify-center gap-4">
<h3 class="text-white text-center text-5xl font-medium font-cg tracking-wide">
<div class="flex flex-col mx-auto max-w-6xl items-center justify-center gap-4">
<!-- <h3 class="text-white text-center text-5xl font-medium font-cg tracking-wide">
Join us in shaping the future of sports with quality deals, funding and support.
</h3>
<button
class="mt-10 text-white text-lg leading-6 border border-[#0086e2] bg-[#022842] hover:bg-[#021f32] rounded-full px-12 py-3"
>Pitch Us <span aria-hidden="true">&rarr;</span>
</button>
</h3> -->
<div
data-tf-widget="dqz9qeVg"
data-tf-opacity="100"
data-tf-iframe-props="title=form_title"
data-tf-transitive-search-params
data-tf-medium="snippet"
style="width:100%;height:500px;"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<p class="pt-20">© 2023 Da One Global Venutres</p>
</div>
</div>
Expand Down
31 changes: 17 additions & 14 deletions src/components/Funding.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,31 @@
</script>

<!-- Funding section starts here -->
<section class="py-16 md:py-24 lg:py-32 relative overflow-hidden">
<GradientDivider />
<section
class="py-16 md:py-24 lg:py-32 relative overflow-hidden bg-gradient-to-b from-blue-[#000c14] to-blue-900"
>
<!-- <GradientDivider /> -->
<div class="container mx-auto">
<div class="px-4 lg:px-32">
<div class="grid grid-cols-2 gap-16 items-center">
<div>
<h2 class="text-white text-4xl font-medium font-cg tracking-wide">
<div class="pr-16">
<h2 class="text-white text-4xl font-medium font-cg tracking-wide leading-normal">
We take you from Seed to Series A
</h2>
<p class="text-xl leading-7 pt-6">
At Da One, we're your ultimate partner in turning startup dreams into Series A
reality. Our secret sauce? A laser-focused approach, a vast network of investors, and
hands-on support, tailored to your unique journey.
<p class="text-xl leading-normal pt-6">
At Da One, we're your ultimate partner in turning startup dreams into Series A reality.
Our secret sauce? A laser-focused approach, a vast network of investors, and hands-on
support, tailored to your unique journey.
</p>
<p class="text-xl leading-7 pt-6">
With us, you're not just another
startup; you're the future success story.
<p class="text-xl leading-7 pt-6">
With us, you're not just another startup; you're the future success story.
</p>
</div>
<div class="border border-blue-50/20 rounded-lg">
<img src="./iPhone-trans.png" alt="">
</div>
<div
class="relative border border-[#00378fc7] rounded-lg bg-gradient-to-b from-[#00378f6d] after:absolute after:-inset-x-0.5 after:bg-gradient-to-t after:-bottom-0.5 after:h-24 after:from-[#000c14]"
>
<img src="./iPhone-trans.png" alt="" />
</div>
</div>
</div>
</div>
Expand Down
79 changes: 64 additions & 15 deletions src/components/GeneralPartners.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,66 @@
<div class="grid sm:grid-cols-2 gap-x-24 py-16 sm:py-48 px-4 sm:px-32 items-center">
<div class="space-y-6">
<h3 class="text-white text-3xl font-medium font-cg uppercase tracking-wide">Shikhar Dhawan</h3>
<p class="text-lg">
Shikhar Dhawan is an Indian cricketer. A left-handed opening batsman, he captains Punjab Kings
in the Indian Premier League and plays for Delhi in first-class cricket.
</p>
<p class="text-lg">
At the 2013 Champions Trophy and 2017 Champions Trophy, Dhawan was the leading run-scorer and
was awarded the 'Golden Bat' in both the tournaments.
<script>
import StickyScroll from './Investors/StickyScroll.svelte';
</script>

<section class="investors">
<div class="container mx-auto flex flex-col items-center gap-4">
<h2 class="text-white text-5xl font-medium font-cg tracking-wide">Success Sherpas</h2>
<p class="text-xl mb-24">
Our pillars of guidance and support, who help us reach the summit of success!
</p>
<StickyScroll>
<div class="flex flex-col space-y-6 w-2/3 flex-shrink-0 justify-center pr-24" slot="content">
<h3 class="text-white text-3xl font-medium font-cg uppercase tracking-wide">
Shikhar Dhawan
</h3>
<p class="text-lg">
Shikhar Dhawan is an Indian cricketer. A left-handed opening batsman, he captains Punjab
Kings in the Indian Premier League and plays for Delhi in first-class cricket.
</p>
<p class="text-lg">
At the 2013 Champions Trophy and 2017 Champions Trophy, Dhawan was the leading run-scorer
and was awarded the 'Golden Bat' in both the tournaments.
</p>
</div>
<div slot="image">
<img src="./team/t1.jpg" class="w-full" alt="" />
</div>
</StickyScroll>
<StickyScroll>
<div class="flex flex-col space-y-6 w-2/3 flex-shrink-0" slot="content">
<h3 class="text-white text-3xl font-medium font-cg uppercase tracking-wide">
Shikhar Dhawan
</h3>
<p class="text-lg">
Shikhar Dhawan is an Indian cricketer. A left-handed opening batsman, he captains Punjab
Kings in the Indian Premier League and plays for Delhi in first-class cricket.
</p>
<p class="text-lg">
At the 2013 Champions Trophy and 2017 Champions Trophy, Dhawan was the leading run-scorer
and was awarded the 'Golden Bat' in both the tournaments.
</p>
</div>
<div slot="image">
<img src="./team/t2.jpg" class="w-full" alt="" />
</div>
</StickyScroll>
<StickyScroll>
<div class="flex flex-col space-y-6 w-2/3 flex-shrink-0" slot="content">
<h3 class="text-white text-3xl font-medium font-cg uppercase tracking-wide">
Shikhar Dhawan
</h3>
<p class="text-lg">
Shikhar Dhawan is an Indian cricketer. A left-handed opening batsman, he captains Punjab
Kings in the Indian Premier League and plays for Delhi in first-class cricket.
</p>
<p class="text-lg">
At the 2013 Champions Trophy and 2017 Champions Trophy, Dhawan was the leading run-scorer
and was awarded the 'Golden Bat' in both the tournaments.
</p>
</div>
<div slot="image">
<img src="./team/t3.jpg" class="w-full" alt="" />
</div>
</StickyScroll>
</div>
<div class="relative">
<img src="./shikhardhawan.png" alt="">
<div class="absolute top-0 -z-30 bg-gradient-to-tr from-blue-500 to-blue-600 w-96 h-96 rounded-full blur-[150px]"></div>
</div>
</div>
</section>
22 changes: 12 additions & 10 deletions src/components/Globe/Index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
});
</script>

<div class="absolute top-0 inset-x-0 flex items-center justify-end bottom-6">
<div
class="absolute top-0 inset-x-0 flex items-center justify-end bottom-6 pointer-events-none overflow-hidden"
>
<div class="globe js-globe">
<div class="svg-wrapper">
<svg
Expand Down Expand Up @@ -101,7 +103,7 @@
}

$dotSize: 16px;
$dotSizeLarge: $dotSize + ($dotSize / 2);
$dotSizeLarge: $dotSize + calc($dotSize / 2);

.globe .globe-list {
opacity: 0;
Expand All @@ -115,8 +117,8 @@
.globe .globe-list > li {
opacity: 0.4;
position: absolute;
margin-left: -($dotSize / 2);
margin-top: -($dotSize / 2);
margin-left: -1 * calc($dotSize / 2);
margin-top: -1 * calc($dotSize / 2);
width: $dotSize;
height: $dotSize;
border-radius: 50%;
Expand All @@ -126,8 +128,8 @@

.globe .globe-list > li.active {
opacity: 1;
margin-left: -($dotSizeLarge / 2);
margin-top: -($dotSizeLarge / 2);
margin-left: -1 * calc($dotSizeLarge / 2);
margin-top: -1 * calc($dotSizeLarge / 2);
width: $dotSizeLarge;
height: $dotSizeLarge;
}
Expand All @@ -139,8 +141,8 @@
position: absolute;
left: 50%;
top: 50%;
margin-left: -($dotSize / 2);
margin-top: -($dotSize / 2);
margin-left: -1 * calc($dotSize / 2);
margin-top: -1 * calc($dotSize / 2);
width: $dotSize;
height: $dotSize;
border-radius: 50%;
Expand Down Expand Up @@ -214,8 +216,8 @@
}

.globe .globe-list > li.active:before {
margin-left: -($dotSizeLarge / 2);
margin-top: -($dotSizeLarge / 2);
margin-left: -1 * calc($dotSizeLarge / 2);
margin-top: -1 * calc($dotSizeLarge / 2);
width: $dotSizeLarge;
height: $dotSizeLarge;
}
Expand Down
11 changes: 7 additions & 4 deletions src/components/GradientDivider.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<div>
<span class="w-full absolute h-px top-0 opacity-20 bg-gradient-to-r from-[#002cff] to-[#0086e2]"></span>
<span class="absolute -top-[200px] left-0 w-[50vw] opacity-[0.1] bg-gradient-to-l from-[#002cff] to-blue-500 h-[255px] blur-3xl"></span>
<span class="absolute -top-[200px] right-0 w-[50vw] opacity-[0.1] bg-gradient-to-r from-[#002cff] to-blue-500 h-[255px] blur-3xl"></span>
</div>
<span
class="absolute -top-[200px] left-0 w-[50vw] opacity-[0.1] bg-gradient-to-l from-[#000c14] to-[#00378f] h-[255px] rounded-full blur-2xl"
></span>
<span
class="absolute -top-[200px] right-0 w-[50vw] opacity-[0.1] bg-gradient-to-r from-[#000c14] to-[#00378f] h-[255px] rounded-full blur-2xl"
></span>
</div>
4 changes: 4 additions & 0 deletions src/components/GradientOverlay.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div
style="background:linear-gradient(0deg, #000c14 0%, #00378fe6 100%);"
class="absolute inset-0"
/>
26 changes: 26 additions & 0 deletions src/components/Gradients/OvalWithCirlce.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<div
class="wflex items-center justify-center relative aspect-square w-[60vh] h-[55vh]"
style=" --dur1 : 10s; --dur2: 12s;"
>
<span
class="w-full h-full block flex-shrink-0 border border-gray-50 absolute inset-0 rounded-full opacity-20 aspect-square spin-custom"
style=""
></span>
<span
class="w-full h-full block mt-2 border border-gray-50 absolute inset-0 rotate-45 rounded-full opacity-10 aspect-square spin-custom"
></span>
<span
class="w-full h-full block bg-gradient-to-tr from-blue-950 to-blue-600 via-blue-950 rounded-full blur-3xl"
></span>
</div>

<style>
.spin-custom {
animation: spin var(--dur1) linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
37 changes: 24 additions & 13 deletions src/components/Hero02.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
<script>
import { Splide, SplideSlide } from '@splidejs/svelte-splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
import GradientOverlay from '../components/GradientOverlay.svelte';
import OvalWithCircle from '../components/Gradients/OvalWithCirlce.svelte';
</script>

<!-- Hero section starts here -->

<section class="relative h-screen flex flex-col text-white">
<div class="absolute top-0 left-0 w-full h-full overflow-hidden after:content-[''] after:absolute after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-slate-950/90">
<video class="min-w-full min-h-full absolute object-cover top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" src="https://cuono.dev/video1.mp4" type="video/mp4" autoplay muted loop></video>
</div>
<div class="container mx-auto z-20">
<nav class="flex mx-auto max-w-screen-xl lg:max-w-screen-2xl items-center justify-between py-6 lg:px-3" aria-label="Global">
<section class="relative flex flex-col text-white">
<div class="absolute top-0 left-0 w-full h-full overflow-hidden">
<video
class="min-w-full min-h-full absolute object-cover top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
src="./bg-video.mp4"
type="video/mp4"
autoplay
muted
loop
></video>
<GradientOverlay />
</div>
<div class="container mx-auto z-20">
<nav
class="flex mx-auto max-w-screen-xl lg:max-w-screen-2xl items-center justify-between py-6 lg:px-3"
aria-label="Global"
>
<div class="flex lg:flex-1">
<a href="/" class="-m-1.5 p-1.5">
<img class="w-48" src="./logo-white.svg" alt="" />
Expand Down Expand Up @@ -110,11 +123,9 @@
</div>
</div>
<!-- Mobile menu ends here -->
<div class="grid grid-cols-2 gap-x-48 py-52">
<div class="grid grid-cols-2 gap-x-48 py-36">
<div>
<h1 class="text-6xl tracking-wide font-semibold font-cg">
Sports meets Capital
</h1>
<h1 class="text-6xl tracking-wide font-semibold font-cg">Sports meets Capital</h1>
<p class="mt-8 text-2xl leading-8">A First of it’s Kind Celebrity led Global VC Fund</p>
<button
class="mt-10 text-lg leading-6 border border-[#0086e2] bg-[#022842] hover:bg-[#021f32] rounded-full px-12 py-3"
Expand Down Expand Up @@ -215,11 +226,11 @@
</div>
</div>
</div>
<div>
<!-- <img src="./shikhar-dhawan-daone.jpeg" alt="" /> -->
<div class="-mt-12 flex items-center justify-center">
<OvalWithCircle />
</div>
</div>
</div>
</div>
</section>

<!-- Hero section ends here -->
Loading